@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.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as jsx$1,
|
|
1
|
+
import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React$2 from 'react';
|
|
3
3
|
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
@@ -3067,22 +3067,21 @@ var inline = function (text) {
|
|
|
3067
3067
|
};
|
|
3068
3068
|
|
|
3069
3069
|
var ThemeProvider = function (_a) {
|
|
3070
|
-
var theme = _a.theme, children = _a.children;
|
|
3070
|
+
var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
|
|
3071
|
+
//TODO Analyze why we are doing this and remove
|
|
3071
3072
|
var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
|
|
3072
|
-
|
|
3073
|
+
var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
|
|
3074
|
+
return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
|
|
3073
3075
|
};
|
|
3074
3076
|
var useTheme = function () { return useTheme$1(); };
|
|
3075
3077
|
var DefaultContainer = function (props) { return jsx$1("div", __assign$1({}, props), void 0); };
|
|
3076
3078
|
var ThemeVariables = function (_a) {
|
|
3077
|
-
var _b;
|
|
3078
|
-
var
|
|
3079
|
-
|
|
3080
|
-
useEffect(function () {
|
|
3081
|
-
setVariables(transformThemeIntoVariables(theme));
|
|
3082
|
-
}, [theme]);
|
|
3083
|
-
return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3079
|
+
var theme = _a.theme, _b = _a.Container, Container = _b === void 0 ? DefaultContainer : _b;
|
|
3080
|
+
var variables = transformThemeIntoVariables(theme);
|
|
3081
|
+
return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": theme.name.toLowerCase(), dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3084
3082
|
};
|
|
3085
3083
|
var AssetsContext = createContext({
|
|
3084
|
+
isSameOriginIcons: false,
|
|
3086
3085
|
cdn: '',
|
|
3087
3086
|
images: {
|
|
3088
3087
|
favicon: '',
|
|
@@ -3091,12 +3090,53 @@ var AssetsContext = createContext({
|
|
|
3091
3090
|
});
|
|
3092
3091
|
var AssetsProvider = function (_a) {
|
|
3093
3092
|
var assets = _a.assets, children = _a.children;
|
|
3094
|
-
|
|
3095
|
-
return jsx$1(AssetsContext.Provider, __assign$1({ value: context }, { children: children }), void 0);
|
|
3093
|
+
return jsx$1(AssetsContext.Provider, __assign$1({ value: assets }, { children: children }), void 0);
|
|
3096
3094
|
};
|
|
3097
3095
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3098
3096
|
|
|
3099
|
-
var
|
|
3097
|
+
var formatPrice = function (value, _a) {
|
|
3098
|
+
var _b;
|
|
3099
|
+
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
3100
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
3101
|
+
// this prevents `Intl.NumberFormat` from rounding the number
|
|
3102
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
3103
|
+
return new Intl.NumberFormat(locale, {
|
|
3104
|
+
style: 'currency',
|
|
3105
|
+
currency: currency,
|
|
3106
|
+
maximumFractionDigits: 3,
|
|
3107
|
+
}).format(valueToFormat);
|
|
3108
|
+
};
|
|
3109
|
+
|
|
3110
|
+
var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3111
|
+
var height = _a.height;
|
|
3112
|
+
return (height ? height : '1.5em');
|
|
3113
|
+
}, function (_a) {
|
|
3114
|
+
var width = _a.width;
|
|
3115
|
+
return (width ? width : '100%');
|
|
3116
|
+
}, function (_a) {
|
|
3117
|
+
var theme = _a.theme;
|
|
3118
|
+
return theme.colors.background.disabled;
|
|
3119
|
+
}, function (_a) {
|
|
3120
|
+
var theme = _a.theme;
|
|
3121
|
+
return theme.radius.regular;
|
|
3122
|
+
}, function (_a) {
|
|
3123
|
+
var theme = _a.theme;
|
|
3124
|
+
return theme.colors.shades['10'].color;
|
|
3125
|
+
}, function (_a) {
|
|
3126
|
+
var theme = _a.theme;
|
|
3127
|
+
return theme.colors.background.disabled;
|
|
3128
|
+
}, function (_a) {
|
|
3129
|
+
var theme = _a.theme;
|
|
3130
|
+
return theme.colors.shades['10'].color;
|
|
3131
|
+
});
|
|
3132
|
+
var SkeletonBox = function (_a) {
|
|
3133
|
+
var width = _a.width, height = _a.height;
|
|
3134
|
+
var theme = useTheme();
|
|
3135
|
+
return jsx$1(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3136
|
+
};
|
|
3137
|
+
var templateObject_1$1O;
|
|
3138
|
+
|
|
3139
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3100
3140
|
var width = _a.width;
|
|
3101
3141
|
return width;
|
|
3102
3142
|
}, function (_a) {
|
|
@@ -3125,7 +3165,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3125
3165
|
var opacity = _a.opacity;
|
|
3126
3166
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3127
3167
|
});
|
|
3128
|
-
var templateObject_1$
|
|
3168
|
+
var templateObject_1$1N, templateObject_2$1a;
|
|
3129
3169
|
|
|
3130
3170
|
/* eslint-disable no-undef */
|
|
3131
3171
|
var cache = new Map();
|
|
@@ -3196,15 +3236,10 @@ var getIconDimension = function (dimension) {
|
|
|
3196
3236
|
return "".concat(dimension, "rem");
|
|
3197
3237
|
};
|
|
3198
3238
|
|
|
3199
|
-
|
|
3200
|
-
var
|
|
3201
|
-
var
|
|
3202
|
-
var
|
|
3203
|
-
var _c = useState(false), error = _c[0], setError = _c[1];
|
|
3204
|
-
var _d = useState(), localSource = _d[0], setLocalSource = _d[1];
|
|
3205
|
-
var newWidth = width && getIconDimension(width);
|
|
3206
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3207
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3239
|
+
var IconFromExtSource = function (_a) {
|
|
3240
|
+
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"]);
|
|
3241
|
+
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3242
|
+
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3208
3243
|
useEffect(function () {
|
|
3209
3244
|
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3210
3245
|
var localSource;
|
|
@@ -3229,19 +3264,32 @@ var Icon$1 = function (_a) {
|
|
|
3229
3264
|
}
|
|
3230
3265
|
return localSource === null || localSource === void 0 ? void 0 : localSource.cleanup;
|
|
3231
3266
|
}, [iconURL, localSource === null || localSource === void 0 ? void 0 : localSource.cleanup]);
|
|
3232
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height:
|
|
3267
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3233
3268
|
if (error) {
|
|
3234
3269
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: iconURL }), void 0);
|
|
3235
3270
|
}
|
|
3236
3271
|
if (!localSource) {
|
|
3237
|
-
return jsx$1(
|
|
3272
|
+
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3238
3273
|
}
|
|
3239
3274
|
if (!fill && !svgProps) {
|
|
3240
3275
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3241
3276
|
}
|
|
3277
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3278
|
+
};
|
|
3279
|
+
|
|
3280
|
+
/* eslint-disable react/forbid-component-props */
|
|
3281
|
+
var Icon$1 = function (_a) {
|
|
3282
|
+
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"]);
|
|
3283
|
+
var assets = useTheme().assets;
|
|
3284
|
+
var newWidth = width && getIconDimension(width);
|
|
3285
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3286
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3242
3287
|
var svgSplit = name.split('/');
|
|
3243
3288
|
var svgId = svgSplit[svgSplit.length - 1];
|
|
3244
|
-
|
|
3289
|
+
if (assets.isSameOriginIcons) {
|
|
3290
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3291
|
+
}
|
|
3292
|
+
return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3245
3293
|
};
|
|
3246
3294
|
|
|
3247
3295
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
@@ -3985,7 +4033,7 @@ function jsxs(type, props, key) {
|
|
|
3985
4033
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
3986
4034
|
// `variants` styles that are consistent through all themes.
|
|
3987
4035
|
var TAGS = {
|
|
3988
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4036
|
+
hero1: newStyled.h1(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""]))),
|
|
3989
4037
|
hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
|
|
3990
4038
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
3991
4039
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4121,95 +4169,9 @@ var DEFAULTS = {
|
|
|
4121
4169
|
size: 'regular',
|
|
4122
4170
|
},
|
|
4123
4171
|
};
|
|
4124
|
-
var templateObject_1$
|
|
4125
|
-
|
|
4126
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
4127
|
-
var timerColor = _a.timerColor;
|
|
4128
|
-
return timerColor || '';
|
|
4129
|
-
});
|
|
4130
|
-
var timeToSeconds = function (_a) {
|
|
4131
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
4132
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
4133
|
-
};
|
|
4134
|
-
var secondsToTime = function (secs) {
|
|
4135
|
-
var hours = Math.floor(secs / 3600);
|
|
4136
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
4137
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
4138
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
4139
|
-
};
|
|
4140
|
-
var Timer = function (_a) {
|
|
4141
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.timerColor, timerColor = _d === void 0 ? '#292929' : _d, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "timerColor"]);
|
|
4142
|
-
var _e = useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
|
|
4143
|
-
useEffect(function () {
|
|
4144
|
-
var timer = setInterval(function () {
|
|
4145
|
-
setSecs(function (seconds) {
|
|
4146
|
-
if (seconds === 1) {
|
|
4147
|
-
clearInterval(timer);
|
|
4148
|
-
onTimeUp();
|
|
4149
|
-
return 0;
|
|
4150
|
-
}
|
|
4151
|
-
return seconds - 1;
|
|
4152
|
-
});
|
|
4153
|
-
}, 1000);
|
|
4154
|
-
if (secs <= 0)
|
|
4155
|
-
clearInterval(timer);
|
|
4156
|
-
return function () { return clearInterval(timer); };
|
|
4157
|
-
}, [onTimeUp, secs]);
|
|
4158
|
-
var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4159
|
-
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
4160
|
-
};
|
|
4161
|
-
var templateObject_1$1M;
|
|
4162
|
-
|
|
4163
|
-
var TimerContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
4164
|
-
var textPosition = _a.textPosition;
|
|
4165
|
-
return textPosition;
|
|
4166
|
-
}, function (_a) {
|
|
4167
|
-
var backgroundColor = _a.backgroundColor;
|
|
4168
|
-
return backgroundColor;
|
|
4169
|
-
}, function (_a) {
|
|
4170
|
-
var borderRadius = _a.borderRadius;
|
|
4171
|
-
return borderRadius || 'unset';
|
|
4172
|
-
}, function (_a) {
|
|
4173
|
-
var borderRadius = _a.borderRadius;
|
|
4174
|
-
return borderRadius || '8px';
|
|
4175
|
-
});
|
|
4176
|
-
var templateObject_1$1L;
|
|
4177
|
-
|
|
4178
|
-
var HurryUp = function (_a) {
|
|
4179
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.showSeconds, showSeconds = _e === void 0 ? true : _e, timerColor = _a.timerColor;
|
|
4180
|
-
var theme = useTheme();
|
|
4181
|
-
var _f = React__default.useMemo(function () {
|
|
4182
|
-
var tomorrowDate = new Date();
|
|
4183
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
4184
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
4185
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
4186
|
-
var hours = Math.floor(totalSeconds / 3600);
|
|
4187
|
-
var restOfHour = Math.floor(totalSeconds % 3600);
|
|
4188
|
-
var minutes = Math.floor(restOfHour / 60);
|
|
4189
|
-
var seconds = Math.floor(totalSeconds % 60);
|
|
4190
|
-
return {
|
|
4191
|
-
hours: hours,
|
|
4192
|
-
minutes: minutes,
|
|
4193
|
-
seconds: seconds,
|
|
4194
|
-
};
|
|
4195
|
-
}, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4196
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
|
|
4197
|
-
};
|
|
4198
|
-
|
|
4199
|
-
var formatPrice = function (value, _a) {
|
|
4200
|
-
var _b;
|
|
4201
|
-
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
4202
|
-
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
4203
|
-
// this prevents `Intl.NumberFormat` from rounding the number
|
|
4204
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
4205
|
-
return new Intl.NumberFormat(locale, {
|
|
4206
|
-
style: 'currency',
|
|
4207
|
-
currency: currency,
|
|
4208
|
-
maximumFractionDigits: 3,
|
|
4209
|
-
}).format(valueToFormat);
|
|
4210
|
-
};
|
|
4172
|
+
var templateObject_1$1M, templateObject_2$19, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4211
4173
|
|
|
4212
|
-
var Container$
|
|
4174
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4213
4175
|
var Card$3 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4214
4176
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4215
4177
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4217,7 +4179,7 @@ var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTe
|
|
|
4217
4179
|
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4218
4180
|
var PackSelectorV2 = function (_a) {
|
|
4219
4181
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4220
|
-
return (jsx$1(Container$
|
|
4182
|
+
return (jsx$1(Container$16, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4221
4183
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4222
4184
|
}) }), void 0));
|
|
4223
4185
|
};
|
|
@@ -4239,27 +4201,27 @@ var PackCard$1 = function (_a) {
|
|
|
4239
4201
|
currency: currencyCode || 'USD',
|
|
4240
4202
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4241
4203
|
};
|
|
4242
|
-
var templateObject_1$
|
|
4204
|
+
var templateObject_1$1L, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4243
4205
|
|
|
4244
|
-
var Container$
|
|
4206
|
+
var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4245
4207
|
var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4246
4208
|
var DropList = function (_a) {
|
|
4247
4209
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4248
|
-
return (jsx$1(Container$
|
|
4210
|
+
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4249
4211
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4250
4212
|
}) }, void 0));
|
|
4251
4213
|
};
|
|
4252
|
-
var templateObject_1$
|
|
4214
|
+
var templateObject_1$1K, templateObject_2$17;
|
|
4253
4215
|
|
|
4254
4216
|
var DROPS_TOTAL = 5;
|
|
4255
|
-
var Container$
|
|
4217
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4256
4218
|
var Title$8 = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4257
4219
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4258
4220
|
var AbsorbencyLevel = function (_a) {
|
|
4259
4221
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4260
|
-
return (jsxs$1(Container$
|
|
4222
|
+
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4261
4223
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4224
|
+
var templateObject_1$1J, templateObject_2$16, templateObject_3$S;
|
|
4263
4225
|
|
|
4264
4226
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4265
4227
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4335,7 +4297,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4335
4297
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4336
4298
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4337
4299
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4338
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4300
|
+
var StyledContent = newStyled.button(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4339
4301
|
var Accordion$1 = function (_a) {
|
|
4340
4302
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4341
4303
|
var theme = useTheme();
|
|
@@ -4359,9 +4321,9 @@ var Accordion$1 = function (_a) {
|
|
|
4359
4321
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4360
4322
|
} }), void 0));
|
|
4361
4323
|
};
|
|
4362
|
-
var templateObject_1$
|
|
4324
|
+
var templateObject_1$1I;
|
|
4363
4325
|
|
|
4364
|
-
var Container$
|
|
4326
|
+
var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4365
4327
|
var AccordionOptions = function (_a) {
|
|
4366
4328
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4367
4329
|
var _b = useState({
|
|
@@ -4374,7 +4336,7 @@ var AccordionOptions = function (_a) {
|
|
|
4374
4336
|
}
|
|
4375
4337
|
return false;
|
|
4376
4338
|
};
|
|
4377
|
-
return (jsx$1(Container$
|
|
4339
|
+
return (jsx$1(Container$13, { children: accordions.map(function (accordion, index) {
|
|
4378
4340
|
var forceOpenValue = getForceOpen(index);
|
|
4379
4341
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4380
4342
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4385,7 +4347,7 @@ var AccordionOptions = function (_a) {
|
|
|
4385
4347
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4386
4348
|
}) }, void 0));
|
|
4387
4349
|
};
|
|
4388
|
-
var templateObject_1$
|
|
4350
|
+
var templateObject_1$1H;
|
|
4389
4351
|
|
|
4390
4352
|
var CardSectionType;
|
|
4391
4353
|
(function (CardSectionType) {
|
|
@@ -4547,14 +4509,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4547
4509
|
literal: true,
|
|
4548
4510
|
});
|
|
4549
4511
|
|
|
4550
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4512
|
+
var ErrorText = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4551
4513
|
var ErrorContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4552
4514
|
var Error$1 = function (_a) {
|
|
4553
4515
|
var error = _a.error;
|
|
4554
4516
|
var theme = useTheme();
|
|
4555
4517
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4556
4518
|
};
|
|
4557
|
-
var templateObject_1$
|
|
4519
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
4558
4520
|
|
|
4559
4521
|
var BaseSelectButton = function (_a) {
|
|
4560
4522
|
var children = _a.children, as = _a.as;
|
|
@@ -4571,7 +4533,7 @@ function BaseSelectOption(_a) {
|
|
|
4571
4533
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4572
4534
|
}
|
|
4573
4535
|
|
|
4574
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4536
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4575
4537
|
function BaseSelect(_a) {
|
|
4576
4538
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4577
4539
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4581,7 +4543,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4581
4543
|
Options: BaseSelectOptions,
|
|
4582
4544
|
Option: BaseSelectOption,
|
|
4583
4545
|
});
|
|
4584
|
-
var templateObject_1$
|
|
4546
|
+
var templateObject_1$1F;
|
|
4585
4547
|
|
|
4586
4548
|
var CustomButton = newStyled.button(function (_a) {
|
|
4587
4549
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4805,7 +4767,7 @@ var CustomCheckboxStyles = {
|
|
|
4805
4767
|
},
|
|
4806
4768
|
};
|
|
4807
4769
|
|
|
4808
|
-
var Container$
|
|
4770
|
+
var Container$12 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4809
4771
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4810
4772
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4811
4773
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4830,9 +4792,9 @@ var Checkbox = function (_a) {
|
|
|
4830
4792
|
}
|
|
4831
4793
|
onChange(e.target.checked);
|
|
4832
4794
|
};
|
|
4833
|
-
return (jsxs$1(Container$
|
|
4795
|
+
return (jsxs$1(Container$12, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4834
4796
|
};
|
|
4835
|
-
var templateObject_1$
|
|
4797
|
+
var templateObject_1$1E, templateObject_2$14;
|
|
4836
4798
|
|
|
4837
4799
|
var CustomOption = newStyled.li(function (_a) {
|
|
4838
4800
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4881,7 +4843,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4881
4843
|
Option: BaseDropdownOption,
|
|
4882
4844
|
});
|
|
4883
4845
|
|
|
4884
|
-
var Container$
|
|
4846
|
+
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4885
4847
|
var RequiredPlaceholder = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4886
4848
|
function SimpleDropdown(_a) {
|
|
4887
4849
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
@@ -4912,10 +4874,10 @@ function SimpleDropdown(_a) {
|
|
|
4912
4874
|
setSelectedValue(value);
|
|
4913
4875
|
}, [value, options, initialValue]);
|
|
4914
4876
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4915
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4877
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4916
4878
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4917
4879
|
}
|
|
4918
|
-
var templateObject_1$
|
|
4880
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
4919
4881
|
|
|
4920
4882
|
/* base styles & size variants */
|
|
4921
4883
|
var CustomRadioStyles$2 = {
|
|
@@ -4980,8 +4942,8 @@ var ContainerStyles$2 = {
|
|
|
4980
4942
|
},
|
|
4981
4943
|
};
|
|
4982
4944
|
|
|
4983
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4984
|
-
var Container$
|
|
4945
|
+
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"])));
|
|
4946
|
+
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4985
4947
|
var Input$4 = newStyled.input(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
4986
4948
|
var disabled = _a.disabled;
|
|
4987
4949
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5004,9 +4966,9 @@ var RadioInput = function (_a) {
|
|
|
5004
4966
|
var value = event.currentTarget.value;
|
|
5005
4967
|
onChange({ value: value, label: label });
|
|
5006
4968
|
};
|
|
5007
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
4969
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5008
4970
|
};
|
|
5009
|
-
var templateObject_1$
|
|
4971
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R;
|
|
5010
4972
|
|
|
5011
4973
|
var TooltipArrow = function (_a) {
|
|
5012
4974
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -5086,7 +5048,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5086
5048
|
}
|
|
5087
5049
|
};
|
|
5088
5050
|
|
|
5089
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5051
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
5090
5052
|
var position = _a.position;
|
|
5091
5053
|
return getWrapperFlexDirection(position);
|
|
5092
5054
|
});
|
|
@@ -5138,7 +5100,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5138
5100
|
return color;
|
|
5139
5101
|
});
|
|
5140
5102
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5141
|
-
var templateObject_1$
|
|
5103
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
|
|
5142
5104
|
|
|
5143
5105
|
var Tooltip = function (_a) {
|
|
5144
5106
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -5206,7 +5168,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5206
5168
|
};
|
|
5207
5169
|
}
|
|
5208
5170
|
};
|
|
5209
|
-
var Container
|
|
5171
|
+
var Container$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5210
5172
|
var backgroundColor = _a.backgroundColor;
|
|
5211
5173
|
return backgroundColor;
|
|
5212
5174
|
}, function (_a) {
|
|
@@ -5243,9 +5205,9 @@ var H3$3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5243
5205
|
var DiscountTag = function (_a) {
|
|
5244
5206
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5245
5207
|
var theme = useTheme();
|
|
5246
|
-
return (jsx$1(Container
|
|
5208
|
+
return (jsx$1(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5247
5209
|
};
|
|
5248
|
-
var templateObject_1$
|
|
5210
|
+
var templateObject_1$1A, templateObject_2$10;
|
|
5249
5211
|
|
|
5250
5212
|
function getWindowDimensions() {
|
|
5251
5213
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5311,7 +5273,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5311
5273
|
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5312
5274
|
}
|
|
5313
5275
|
};
|
|
5314
|
-
var Container
|
|
5276
|
+
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5315
5277
|
var Price = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
5316
5278
|
var weight = _a.weight;
|
|
5317
5279
|
return (weight ? weight : '400');
|
|
@@ -5367,9 +5329,9 @@ var PriceLabel = function (_a) {
|
|
|
5367
5329
|
: ComponentSize.XSmall;
|
|
5368
5330
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5369
5331
|
};
|
|
5370
|
-
return (jsxs$1(Container
|
|
5332
|
+
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5371
5333
|
};
|
|
5372
|
-
var templateObject_1$
|
|
5334
|
+
var templateObject_1$1z, templateObject_2$$, templateObject_3$P;
|
|
5373
5335
|
|
|
5374
5336
|
var getStylesBySize$b = function (size) {
|
|
5375
5337
|
switch (size) {
|
|
@@ -5399,7 +5361,7 @@ var getStylesBySize$b = function (size) {
|
|
|
5399
5361
|
};
|
|
5400
5362
|
}
|
|
5401
5363
|
};
|
|
5402
|
-
var Container$
|
|
5364
|
+
var Container$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5403
5365
|
var backgroundColor = _a.backgroundColor;
|
|
5404
5366
|
return backgroundColor;
|
|
5405
5367
|
}, function (_a) {
|
|
@@ -5436,11 +5398,11 @@ var H3$2 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5436
5398
|
var ClubOfferTag = function (_a) {
|
|
5437
5399
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5438
5400
|
var theme = useTheme();
|
|
5439
|
-
return (jsx$1(Container$
|
|
5401
|
+
return (jsx$1(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5440
5402
|
};
|
|
5441
|
-
var templateObject_1$
|
|
5403
|
+
var templateObject_1$1y, templateObject_2$_;
|
|
5442
5404
|
|
|
5443
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5405
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5444
5406
|
var PriceLabelV2 = function (_a) {
|
|
5445
5407
|
var _b;
|
|
5446
5408
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5490,7 +5452,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5490
5452
|
var savetoString = saveto.toFixed(2);
|
|
5491
5453
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5492
5454
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5493
|
-
return (jsxs$1(Container
|
|
5455
|
+
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5494
5456
|
marginTop: '-5px',
|
|
5495
5457
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5496
5458
|
marginTop: '-6px',
|
|
@@ -5506,9 +5468,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5506
5468
|
lineHeight: '22px',
|
|
5507
5469
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5508
5470
|
};
|
|
5509
|
-
var templateObject_1$
|
|
5471
|
+
var templateObject_1$1x;
|
|
5510
5472
|
|
|
5511
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5473
|
+
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5512
5474
|
var ContainerBase = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5513
5475
|
var selected = _a.selected, theme = _a.theme;
|
|
5514
5476
|
return selected
|
|
@@ -5545,8 +5507,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5545
5507
|
var selected = _a.selected, theme = _a.theme;
|
|
5546
5508
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5547
5509
|
});
|
|
5548
|
-
var Container$
|
|
5549
|
-
var templateObject_1$
|
|
5510
|
+
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5511
|
+
var templateObject_1$1w, templateObject_2$Z, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5550
5512
|
|
|
5551
5513
|
var radioIds = {
|
|
5552
5514
|
oneTime: {
|
|
@@ -5596,17 +5558,17 @@ var Autoship = function (_a) {
|
|
|
5596
5558
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5597
5559
|
};
|
|
5598
5560
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5599
|
-
return (jsxs$1(Container$
|
|
5561
|
+
return (jsxs$1(Container$Y, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5600
5562
|
? benefitsColor.selected
|
|
5601
5563
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5602
5564
|
};
|
|
5603
5565
|
|
|
5604
|
-
var Img = newStyled.img(templateObject_1$
|
|
5566
|
+
var Img = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
5605
5567
|
var Image$3 = function (_a) {
|
|
5606
5568
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
5607
5569
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5608
5570
|
};
|
|
5609
|
-
var templateObject_1$
|
|
5571
|
+
var templateObject_1$1v;
|
|
5610
5572
|
|
|
5611
5573
|
var _a$2;
|
|
5612
5574
|
var BeforeAfterVariant;
|
|
@@ -5621,13 +5583,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5621
5583
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5622
5584
|
_a$2);
|
|
5623
5585
|
|
|
5624
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5586
|
+
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5625
5587
|
var CustomerInfo = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5626
5588
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5627
5589
|
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
5628
5590
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5629
5591
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5630
|
-
var templateObject_1$
|
|
5592
|
+
var templateObject_1$1u, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5631
5593
|
|
|
5632
5594
|
var NameWithStars = function (_a) {
|
|
5633
5595
|
var name = _a.name, size = _a.size;
|
|
@@ -5645,7 +5607,7 @@ var ResultFeedback = function (_a) {
|
|
|
5645
5607
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5646
5608
|
};
|
|
5647
5609
|
|
|
5648
|
-
var Container$
|
|
5610
|
+
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5649
5611
|
var ImageContainer$5 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5650
5612
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5651
5613
|
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -5658,7 +5620,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5658
5620
|
var theme = _a.theme, size = _a.size;
|
|
5659
5621
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5660
5622
|
});
|
|
5661
|
-
var templateObject_1$
|
|
5623
|
+
var templateObject_1$1t, templateObject_2$X, templateObject_3$M, templateObject_4$A;
|
|
5662
5624
|
|
|
5663
5625
|
/* base styles & size variants */
|
|
5664
5626
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5733,10 +5695,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5733
5695
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5734
5696
|
var infoText = buildInfoText(name, age, months);
|
|
5735
5697
|
var Component = componentByVariant[variant];
|
|
5736
|
-
return (jsxs$1(Container$
|
|
5698
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5737
5699
|
};
|
|
5738
5700
|
|
|
5739
|
-
var Section = newStyled.div(templateObject_1$
|
|
5701
|
+
var Section = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
5740
5702
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5741
5703
|
});
|
|
5742
5704
|
var CardHeader = function (_a) {
|
|
@@ -5747,16 +5709,16 @@ var CardFooter = function (_a) {
|
|
|
5747
5709
|
var children = _a.children;
|
|
5748
5710
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5749
5711
|
};
|
|
5750
|
-
var templateObject_1$
|
|
5712
|
+
var templateObject_1$1s;
|
|
5751
5713
|
|
|
5752
|
-
var Body = newStyled.div(templateObject_1$
|
|
5714
|
+
var Body = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
5753
5715
|
var CardBody = function (_a) {
|
|
5754
5716
|
var children = _a.children;
|
|
5755
5717
|
return jsx$1(Body, { children: children }, void 0);
|
|
5756
5718
|
};
|
|
5757
|
-
var templateObject_1$
|
|
5719
|
+
var templateObject_1$1r;
|
|
5758
5720
|
|
|
5759
|
-
var Container$
|
|
5721
|
+
var Container$W = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
5760
5722
|
var flex = _a.flex;
|
|
5761
5723
|
return flex &&
|
|
5762
5724
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5771,23 +5733,23 @@ var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5771
5733
|
var Card$1 = function (_a) {
|
|
5772
5734
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
5773
5735
|
var theme = useTheme();
|
|
5774
|
-
return (jsx$1(Container$
|
|
5736
|
+
return (jsx$1(Container$W, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5775
5737
|
};
|
|
5776
5738
|
var Card$2 = Object.assign(Card$1, {
|
|
5777
5739
|
Header: CardHeader,
|
|
5778
5740
|
Footer: CardFooter,
|
|
5779
5741
|
Body: CardBody,
|
|
5780
5742
|
});
|
|
5781
|
-
var templateObject_1$
|
|
5743
|
+
var templateObject_1$1q;
|
|
5782
5744
|
|
|
5783
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5745
|
+
var StyledWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5784
5746
|
var StyledContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5785
5747
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5786
5748
|
var color = _a.color;
|
|
5787
5749
|
return color;
|
|
5788
5750
|
});
|
|
5789
5751
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5790
|
-
var templateObject_1$
|
|
5752
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$L, templateObject_4$z;
|
|
5791
5753
|
|
|
5792
5754
|
var Minimalistic = function (_a) {
|
|
5793
5755
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -5795,23 +5757,23 @@ var Minimalistic = function (_a) {
|
|
|
5795
5757
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5796
5758
|
};
|
|
5797
5759
|
|
|
5798
|
-
var Container$
|
|
5760
|
+
var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5799
5761
|
var Title$6 = newStyled.h1(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5800
5762
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5801
5763
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
5802
5764
|
var Simple = function (_a) {
|
|
5803
5765
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5804
5766
|
var theme = useTheme();
|
|
5805
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5767
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5806
5768
|
};
|
|
5807
|
-
var templateObject_1$
|
|
5769
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$K, templateObject_4$y;
|
|
5808
5770
|
|
|
5809
5771
|
var Bundle = {
|
|
5810
5772
|
Minimalistic: Minimalistic,
|
|
5811
5773
|
Simple: Simple,
|
|
5812
5774
|
};
|
|
5813
5775
|
|
|
5814
|
-
var Container$
|
|
5776
|
+
var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
5815
5777
|
var displayBNPL = _a.displayBNPL;
|
|
5816
5778
|
return (displayBNPL ? 'flex' : 'none');
|
|
5817
5779
|
});
|
|
@@ -5826,43 +5788,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5826
5788
|
console.error('Icon', iconName, 'not found');
|
|
5827
5789
|
return null;
|
|
5828
5790
|
}
|
|
5829
|
-
return (jsx$1(Container$
|
|
5791
|
+
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5830
5792
|
};
|
|
5831
|
-
var templateObject_1$
|
|
5793
|
+
var templateObject_1$1n, templateObject_2$U, templateObject_3$J;
|
|
5832
5794
|
|
|
5833
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5795
|
+
var Text$7 = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5834
5796
|
var Title$5 = function (_a) {
|
|
5835
5797
|
var title = _a.title;
|
|
5836
5798
|
var theme = useTheme();
|
|
5837
5799
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5838
5800
|
};
|
|
5839
|
-
var templateObject_1$
|
|
5801
|
+
var templateObject_1$1m;
|
|
5840
5802
|
|
|
5841
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5803
|
+
var P$3 = newStyled.p(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5842
5804
|
var Promo = function (_a) {
|
|
5843
5805
|
var text = _a.text;
|
|
5844
5806
|
var theme = useTheme();
|
|
5845
5807
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5846
5808
|
};
|
|
5847
|
-
var templateObject_1$
|
|
5809
|
+
var templateObject_1$1l;
|
|
5848
5810
|
|
|
5849
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5811
|
+
var Text$6 = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5850
5812
|
var Description$1 = function (_a) {
|
|
5851
5813
|
var text = _a.text;
|
|
5852
5814
|
var theme = useTheme();
|
|
5853
5815
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5854
5816
|
};
|
|
5855
|
-
var templateObject_1$
|
|
5817
|
+
var templateObject_1$1k;
|
|
5856
5818
|
|
|
5857
|
-
var Container$
|
|
5819
|
+
var Container$T = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
5858
5820
|
var CloseButton$1 = function (_a) {
|
|
5859
5821
|
var onClick = _a.onClick, size = _a.size;
|
|
5860
5822
|
var theme = useTheme();
|
|
5861
|
-
return (jsx$1(Container$
|
|
5823
|
+
return (jsx$1(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5862
5824
|
};
|
|
5863
|
-
var templateObject_1$
|
|
5825
|
+
var templateObject_1$1j;
|
|
5864
5826
|
|
|
5865
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5827
|
+
var Text$5 = newStyled.h3(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
5866
5828
|
var backgroundColor = _a.backgroundColor;
|
|
5867
5829
|
return backgroundColor;
|
|
5868
5830
|
}, function (_a) {
|
|
@@ -5877,7 +5839,7 @@ var OfferBanner = function (_a) {
|
|
|
5877
5839
|
var theme = useTheme();
|
|
5878
5840
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5879
5841
|
};
|
|
5880
|
-
var templateObject_1$
|
|
5842
|
+
var templateObject_1$1i;
|
|
5881
5843
|
|
|
5882
5844
|
var CartProductItem = {
|
|
5883
5845
|
Title: Title$5,
|
|
@@ -5887,36 +5849,7 @@ var CartProductItem = {
|
|
|
5887
5849
|
CloseButton: CloseButton$1,
|
|
5888
5850
|
};
|
|
5889
5851
|
|
|
5890
|
-
var Container$
|
|
5891
|
-
var height = _a.height;
|
|
5892
|
-
return (height ? height : '1.5em');
|
|
5893
|
-
}, function (_a) {
|
|
5894
|
-
var width = _a.width;
|
|
5895
|
-
return (width ? width : '100%');
|
|
5896
|
-
}, function (_a) {
|
|
5897
|
-
var theme = _a.theme;
|
|
5898
|
-
return theme.colors.background.disabled;
|
|
5899
|
-
}, function (_a) {
|
|
5900
|
-
var theme = _a.theme;
|
|
5901
|
-
return theme.radius.regular;
|
|
5902
|
-
}, function (_a) {
|
|
5903
|
-
var theme = _a.theme;
|
|
5904
|
-
return theme.colors.shades['10'].color;
|
|
5905
|
-
}, function (_a) {
|
|
5906
|
-
var theme = _a.theme;
|
|
5907
|
-
return theme.colors.background.disabled;
|
|
5908
|
-
}, function (_a) {
|
|
5909
|
-
var theme = _a.theme;
|
|
5910
|
-
return theme.colors.shades['10'].color;
|
|
5911
|
-
});
|
|
5912
|
-
var SkeletonBox = function (_a) {
|
|
5913
|
-
var width = _a.width, height = _a.height;
|
|
5914
|
-
var theme = useTheme();
|
|
5915
|
-
return jsx$1(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
5916
|
-
};
|
|
5917
|
-
var templateObject_1$1g;
|
|
5918
|
-
|
|
5919
|
-
var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5852
|
+
var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5920
5853
|
var MobileContainer = newStyled(Container$S)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
5921
5854
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
5922
5855
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
@@ -5929,7 +5862,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5929
5862
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
5930
5863
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5931
5864
|
};
|
|
5932
|
-
var templateObject_1$
|
|
5865
|
+
var templateObject_1$1h, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
5933
5866
|
|
|
5934
5867
|
var Spacing = function (_a) {
|
|
5935
5868
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5937,7 +5870,7 @@ var Spacing = function (_a) {
|
|
|
5937
5870
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5938
5871
|
};
|
|
5939
5872
|
|
|
5940
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5873
|
+
var Container$R = newStyled('div')(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
5941
5874
|
var Content$2 = newStyled('div')(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
5942
5875
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
5943
5876
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -5951,12 +5884,12 @@ var StrengthBars = function (_a) {
|
|
|
5951
5884
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5952
5885
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5953
5886
|
};
|
|
5954
|
-
var templateObject_1$
|
|
5887
|
+
var templateObject_1$1g, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
5955
5888
|
|
|
5956
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5957
|
-
var templateObject_1$
|
|
5889
|
+
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"])));
|
|
5890
|
+
var templateObject_1$1f;
|
|
5958
5891
|
|
|
5959
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5892
|
+
var StarContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
5960
5893
|
var marginRight = _a.marginRight;
|
|
5961
5894
|
return marginRight;
|
|
5962
5895
|
});
|
|
@@ -5972,7 +5905,7 @@ var StarList = function (_a) {
|
|
|
5972
5905
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5973
5906
|
}) }, void 0));
|
|
5974
5907
|
};
|
|
5975
|
-
var templateObject_1$
|
|
5908
|
+
var templateObject_1$1e;
|
|
5976
5909
|
|
|
5977
5910
|
/* base styles & size variants */
|
|
5978
5911
|
var LabelStyles = {
|
|
@@ -6013,8 +5946,8 @@ var LabelStyles = {
|
|
|
6013
5946
|
});
|
|
6014
5947
|
},
|
|
6015
5948
|
};
|
|
6016
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6017
|
-
var templateObject_1$
|
|
5949
|
+
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"])));
|
|
5950
|
+
var templateObject_1$1d;
|
|
6018
5951
|
|
|
6019
5952
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6020
5953
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6065,7 +5998,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6065
5998
|
height: height,
|
|
6066
5999
|
});
|
|
6067
6000
|
});
|
|
6068
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6001
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6069
6002
|
var Container$O = newStyled.a(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6070
6003
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6071
6004
|
var Title$4 = newStyled.p(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -6154,7 +6087,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6154
6087
|
};
|
|
6155
6088
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6156
6089
|
};
|
|
6157
|
-
var templateObject_1$
|
|
6090
|
+
var templateObject_1$1c, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6158
6091
|
|
|
6159
6092
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6160
6093
|
var width = _a.width, height = _a.height;
|
|
@@ -6164,7 +6097,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6164
6097
|
height: height,
|
|
6165
6098
|
});
|
|
6166
6099
|
});
|
|
6167
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6100
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6168
6101
|
var Container$N = newStyled.a(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6169
6102
|
var ProdCardContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6170
6103
|
var Title$3 = newStyled.p(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -6252,9 +6185,9 @@ var ProductItemTK = function (_a) {
|
|
|
6252
6185
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6253
6186
|
} }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6254
6187
|
};
|
|
6255
|
-
var templateObject_1$
|
|
6188
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6256
6189
|
|
|
6257
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
6190
|
+
var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6258
6191
|
function withProductGrid(ProductItemComponent, data) {
|
|
6259
6192
|
function WithProductGrid(props) {
|
|
6260
6193
|
return (jsx$1(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6264,7 +6197,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6264
6197
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6265
6198
|
return WithProductGrid;
|
|
6266
6199
|
}
|
|
6267
|
-
var templateObject_1$
|
|
6200
|
+
var templateObject_1$1a;
|
|
6268
6201
|
|
|
6269
6202
|
var Collection = {
|
|
6270
6203
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6311,7 +6244,7 @@ var OutOfStock = function (_a) {
|
|
|
6311
6244
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6312
6245
|
};
|
|
6313
6246
|
|
|
6314
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6247
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6315
6248
|
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6316
6249
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6317
6250
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -6333,9 +6266,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6333
6266
|
Option: Option,
|
|
6334
6267
|
OptionsContainer: OptionsContainer,
|
|
6335
6268
|
});
|
|
6336
|
-
var templateObject_1$
|
|
6269
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6337
6270
|
|
|
6338
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
6271
|
+
var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6339
6272
|
var borderColor = _a.borderColor;
|
|
6340
6273
|
return borderColor;
|
|
6341
6274
|
}, function (_a) {
|
|
@@ -6349,7 +6282,7 @@ var PatternSelector = function (_a) {
|
|
|
6349
6282
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6350
6283
|
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6351
6284
|
};
|
|
6352
|
-
var templateObject_1$
|
|
6285
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6353
6286
|
|
|
6354
6287
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6355
6288
|
if (options == null || options.length === 0) {
|
|
@@ -6407,7 +6340,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6407
6340
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
|
|
6408
6341
|
};
|
|
6409
6342
|
|
|
6410
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6343
|
+
var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6411
6344
|
var Col$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6412
6345
|
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6413
6346
|
return props.rightToLeft &&
|
|
@@ -6421,7 +6354,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6421
6354
|
var theme = useTheme();
|
|
6422
6355
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6423
6356
|
};
|
|
6424
|
-
var templateObject_1$
|
|
6357
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6425
6358
|
|
|
6426
6359
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6427
6360
|
__proto__: null,
|
|
@@ -6449,7 +6382,7 @@ var sizeMapper = (_a = {},
|
|
|
6449
6382
|
_a[ComponentSize.Large] = 'large',
|
|
6450
6383
|
_a[ComponentSize.XSmall] = 'small',
|
|
6451
6384
|
_a);
|
|
6452
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6385
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6453
6386
|
var wide = _a.wide;
|
|
6454
6387
|
return (wide ? '100%' : 'fit-content');
|
|
6455
6388
|
}, function (_a) {
|
|
@@ -6472,7 +6405,7 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObj
|
|
|
6472
6405
|
return theme.colors.text.disabled;
|
|
6473
6406
|
});
|
|
6474
6407
|
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6475
|
-
var templateObject_1$
|
|
6408
|
+
var templateObject_1$16, templateObject_2$M;
|
|
6476
6409
|
|
|
6477
6410
|
var BaseCTA = function (_a) {
|
|
6478
6411
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6539,7 +6472,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6539
6472
|
} }), void 0));
|
|
6540
6473
|
};
|
|
6541
6474
|
|
|
6542
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
6475
|
+
var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6543
6476
|
var IconContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6544
6477
|
var Text$4 = newStyled.p(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6545
6478
|
var Details = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
@@ -6548,9 +6481,9 @@ var Note = function (_a) {
|
|
|
6548
6481
|
var theme = useTheme();
|
|
6549
6482
|
return (jsxs$1(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6550
6483
|
};
|
|
6551
|
-
var templateObject_1$
|
|
6484
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r;
|
|
6552
6485
|
|
|
6553
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6486
|
+
var Title$2 = newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
6554
6487
|
var theme = _a.theme;
|
|
6555
6488
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
6556
6489
|
});
|
|
@@ -6593,9 +6526,9 @@ var DeliveryDetails = function (_a) {
|
|
|
6593
6526
|
var theme = useTheme();
|
|
6594
6527
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6595
6528
|
};
|
|
6596
|
-
var templateObject_1$
|
|
6529
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
|
|
6597
6530
|
|
|
6598
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6531
|
+
var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
6599
6532
|
var top = _a.top;
|
|
6600
6533
|
return top;
|
|
6601
6534
|
}, function (_a) {
|
|
@@ -6649,15 +6582,15 @@ var Drawer = function (_a) {
|
|
|
6649
6582
|
}, [isOpen, onClose, onOpen]);
|
|
6650
6583
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6651
6584
|
};
|
|
6652
|
-
var templateObject_1$
|
|
6585
|
+
var templateObject_1$13, templateObject_2$J;
|
|
6653
6586
|
|
|
6654
|
-
var List = newStyled.ul(templateObject_1$
|
|
6587
|
+
var List = newStyled.ul(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6655
6588
|
var Item$2 = newStyled.li(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6656
6589
|
var DropdownWrapper = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
6657
6590
|
var ArrowContainer$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
6658
6591
|
var StyledDropdown = newStyled.ul(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
6659
6592
|
var DropdownItem = newStyled.li(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
6660
|
-
var templateObject_1$
|
|
6593
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6661
6594
|
|
|
6662
6595
|
var DropdownListIcons = function (_a) {
|
|
6663
6596
|
var items = _a.items;
|
|
@@ -6670,13 +6603,13 @@ var Dropdown = function (_a) {
|
|
|
6670
6603
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6671
6604
|
};
|
|
6672
6605
|
|
|
6673
|
-
var DropdownContainer = newStyled.div(templateObject_1
|
|
6606
|
+
var DropdownContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6674
6607
|
var DropdownLabel = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6675
6608
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6676
6609
|
var DetailLabel = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
6677
6610
|
var DropdownOptions = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
6678
6611
|
var DropdownOption = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
6679
|
-
var templateObject_1
|
|
6612
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6680
6613
|
|
|
6681
6614
|
var SizeDropdown = function (_a) {
|
|
6682
6615
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6699,7 +6632,7 @@ var SizeDropdown = function (_a) {
|
|
|
6699
6632
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6700
6633
|
};
|
|
6701
6634
|
|
|
6702
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6635
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6703
6636
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6704
6637
|
var DialogDropdownListItem = newStyled.li(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
6705
6638
|
var DialogDropdownLink = newStyled.a(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
@@ -6711,7 +6644,7 @@ var DropdownDialog = function (_a) {
|
|
|
6711
6644
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6712
6645
|
}) }), void 0) }), void 0));
|
|
6713
6646
|
};
|
|
6714
|
-
var templateObject_1$
|
|
6647
|
+
var templateObject_1$10, templateObject_2$G, templateObject_3$y, templateObject_4$n;
|
|
6715
6648
|
|
|
6716
6649
|
function FilteringDropdown(_a) {
|
|
6717
6650
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -6744,7 +6677,7 @@ function FilteringDropdown(_a) {
|
|
|
6744
6677
|
}) }, void 0)] }), void 0));
|
|
6745
6678
|
}
|
|
6746
6679
|
|
|
6747
|
-
var Title$1 = newStyled.div(templateObject_1
|
|
6680
|
+
var Title$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6748
6681
|
var H3 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6749
6682
|
var ArrowContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6750
6683
|
var Container$J = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
@@ -6754,9 +6687,9 @@ var Accordion = function (_a) {
|
|
|
6754
6687
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6755
6688
|
return (jsxs$1(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6756
6689
|
};
|
|
6757
|
-
var templateObject_1
|
|
6690
|
+
var templateObject_1$$, templateObject_2$F, templateObject_3$x, templateObject_4$m;
|
|
6758
6691
|
|
|
6759
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6692
|
+
var SectionContent = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6760
6693
|
var Header$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6761
6694
|
var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
6762
6695
|
var MobileIconsContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
@@ -6766,7 +6699,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6766
6699
|
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6767
6700
|
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6768
6701
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
6769
|
-
var templateObject_1$
|
|
6702
|
+
var templateObject_1$_, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6770
6703
|
|
|
6771
6704
|
var getStylesBySize$7 = function (size, theme) {
|
|
6772
6705
|
switch (size) {
|
|
@@ -6831,7 +6764,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6831
6764
|
} }), id: id }, void 0));
|
|
6832
6765
|
};
|
|
6833
6766
|
|
|
6834
|
-
var UL = newStyled.ul(templateObject_1$
|
|
6767
|
+
var UL = newStyled.ul(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
6835
6768
|
var LI = newStyled.li(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
6836
6769
|
var CloseIconContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
6837
6770
|
var Tags = function (_a) {
|
|
@@ -6841,7 +6774,7 @@ var Tags = function (_a) {
|
|
|
6841
6774
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6842
6775
|
}) }), void 0));
|
|
6843
6776
|
};
|
|
6844
|
-
var templateObject_1$
|
|
6777
|
+
var templateObject_1$Z, templateObject_2$D, templateObject_3$v;
|
|
6845
6778
|
|
|
6846
6779
|
var Filters = function (_a) {
|
|
6847
6780
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -6977,7 +6910,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
6977
6910
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
6978
6911
|
};
|
|
6979
6912
|
|
|
6980
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
6913
|
+
var Wrapper$4 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6981
6914
|
var Container$I = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
6982
6915
|
var FitGuarantee = function (_a) {
|
|
6983
6916
|
var _b;
|
|
@@ -6996,9 +6929,9 @@ var FitGuarantee = function (_a) {
|
|
|
6996
6929
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
6997
6930
|
} }, { children: title }), void 0), jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6998
6931
|
};
|
|
6999
|
-
var templateObject_1$
|
|
6932
|
+
var templateObject_1$Y, templateObject_2$C;
|
|
7000
6933
|
|
|
7001
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
6934
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7002
6935
|
var P$2 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7003
6936
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7004
6937
|
border: 'none',
|
|
@@ -7014,9 +6947,9 @@ var FitPredictor = function (_a) {
|
|
|
7014
6947
|
var theme = useTheme();
|
|
7015
6948
|
return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7016
6949
|
};
|
|
7017
|
-
var templateObject_1$
|
|
6950
|
+
var templateObject_1$X, templateObject_2$B;
|
|
7018
6951
|
|
|
7019
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6952
|
+
var Image$1 = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
7020
6953
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7021
6954
|
return borderRadiusVariant &&
|
|
7022
6955
|
"\nborder-radius: 20px;\n";
|
|
@@ -7031,7 +6964,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
7031
6964
|
var theme = useTheme();
|
|
7032
6965
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7033
6966
|
};
|
|
7034
|
-
var templateObject_1$
|
|
6967
|
+
var templateObject_1$W;
|
|
7035
6968
|
|
|
7036
6969
|
var Button$5 = newStyled.button(function () { return ({
|
|
7037
6970
|
background: 'transparent',
|
|
@@ -11275,14 +11208,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11275
11208
|
return Slider;
|
|
11276
11209
|
}(React__default.Component);
|
|
11277
11210
|
|
|
11278
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11211
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11279
11212
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11280
11213
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11281
11214
|
}, function (_a) {
|
|
11282
11215
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11283
11216
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11284
11217
|
});
|
|
11285
|
-
var templateObject_1$
|
|
11218
|
+
var templateObject_1$V;
|
|
11286
11219
|
|
|
11287
11220
|
var getStylesBySize$6 = function (size) {
|
|
11288
11221
|
// rem units
|
|
@@ -11341,7 +11274,7 @@ var SliderNavigation = function (_a) {
|
|
|
11341
11274
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11342
11275
|
};
|
|
11343
11276
|
|
|
11344
|
-
var horizontalStyles = css(templateObject_1$
|
|
11277
|
+
var horizontalStyles = css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11345
11278
|
var verticalStyles = css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11346
11279
|
var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11347
11280
|
var position = _a.position;
|
|
@@ -11372,7 +11305,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11372
11305
|
arrowPadding: 1.625,
|
|
11373
11306
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11374
11307
|
};
|
|
11375
|
-
var templateObject_1$
|
|
11308
|
+
var templateObject_1$U, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
|
|
11376
11309
|
|
|
11377
11310
|
var propTypes = {exports: {}};
|
|
11378
11311
|
|
|
@@ -12965,7 +12898,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
12965
12898
|
afterZoomOut: PropTypes.func
|
|
12966
12899
|
} : {};
|
|
12967
12900
|
|
|
12968
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
12901
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
12969
12902
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12970
12903
|
return borderRadiusVariant &&
|
|
12971
12904
|
"\n border-radius: 40px;\n ";
|
|
@@ -12984,9 +12917,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12984
12917
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12985
12918
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12986
12919
|
};
|
|
12987
|
-
var templateObject_1$
|
|
12920
|
+
var templateObject_1$T, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12988
12921
|
|
|
12989
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
12922
|
+
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
12990
12923
|
var ProductGallery = function (_a) {
|
|
12991
12924
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
12992
12925
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -12998,7 +12931,7 @@ var ProductGallery = function (_a) {
|
|
|
12998
12931
|
setSelectedImage(value);
|
|
12999
12932
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13000
12933
|
};
|
|
13001
|
-
var templateObject_1$
|
|
12934
|
+
var templateObject_1$S;
|
|
13002
12935
|
|
|
13003
12936
|
var getStylesBySize$5 = function (size) {
|
|
13004
12937
|
switch (size) {
|
|
@@ -13019,7 +12952,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13019
12952
|
};
|
|
13020
12953
|
}
|
|
13021
12954
|
};
|
|
13022
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
12955
|
+
var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13023
12956
|
var backgroundColor = _a.backgroundColor;
|
|
13024
12957
|
return backgroundColor;
|
|
13025
12958
|
}, function (_a) {
|
|
@@ -13049,9 +12982,9 @@ var IconButton = function (_a) {
|
|
|
13049
12982
|
var theme = useTheme();
|
|
13050
12983
|
return (jsx$1(Container$D, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13051
12984
|
};
|
|
13052
|
-
var templateObject_1$
|
|
12985
|
+
var templateObject_1$R;
|
|
13053
12986
|
|
|
13054
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
12987
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13055
12988
|
var AmazonButton = function (_a) {
|
|
13056
12989
|
var onClick = _a.onClick;
|
|
13057
12990
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13060,7 +12993,7 @@ var PaypalButton = function (_a) {
|
|
|
13060
12993
|
var onClick = _a.onClick;
|
|
13061
12994
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13062
12995
|
};
|
|
13063
|
-
var templateObject_1$
|
|
12996
|
+
var templateObject_1$Q;
|
|
13064
12997
|
|
|
13065
12998
|
var useOnClickOutside = function (ref, handler) {
|
|
13066
12999
|
useEffect(function () {
|
|
@@ -13134,7 +13067,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13134
13067
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$C, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13135
13068
|
};
|
|
13136
13069
|
|
|
13137
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13070
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13138
13071
|
var ImageContainer$2 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13139
13072
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13140
13073
|
var titlePosition = _a.titlePosition;
|
|
@@ -13146,9 +13079,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13146
13079
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
13147
13080
|
return (jsxs$1(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13148
13081
|
};
|
|
13149
|
-
var templateObject_1$
|
|
13082
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13150
13083
|
|
|
13151
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13084
|
+
var Label$1 = newStyled.span(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13152
13085
|
var color = _a.color;
|
|
13153
13086
|
return color;
|
|
13154
13087
|
});
|
|
@@ -13161,7 +13094,7 @@ var InputLabel = function (_a) {
|
|
|
13161
13094
|
var theme = useTheme();
|
|
13162
13095
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13163
13096
|
};
|
|
13164
|
-
var templateObject_1$
|
|
13097
|
+
var templateObject_1$O, templateObject_2$x;
|
|
13165
13098
|
|
|
13166
13099
|
var containerByStatus = function (theme, status) {
|
|
13167
13100
|
if (status === InputValidationType.Valid)
|
|
@@ -13170,7 +13103,7 @@ var containerByStatus = function (theme, status) {
|
|
|
13170
13103
|
return theme.colors.semantic.urgent.color;
|
|
13171
13104
|
return '';
|
|
13172
13105
|
};
|
|
13173
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13106
|
+
var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13174
13107
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13175
13108
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13176
13109
|
});
|
|
@@ -13248,7 +13181,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13248
13181
|
return theme.component.input.lineHeight;
|
|
13249
13182
|
});
|
|
13250
13183
|
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13251
|
-
var templateObject_1$
|
|
13184
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13252
13185
|
|
|
13253
13186
|
var BaseInput = function (_a) {
|
|
13254
13187
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13292,7 +13225,7 @@ var Button$3 = function (_a) {
|
|
|
13292
13225
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13293
13226
|
};
|
|
13294
13227
|
|
|
13295
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
13228
|
+
var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13296
13229
|
var theme = _a.theme;
|
|
13297
13230
|
return theme.component.inputCustom.input.borderRadius;
|
|
13298
13231
|
});
|
|
@@ -13313,9 +13246,9 @@ var Custom = function (_a) {
|
|
|
13313
13246
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13314
13247
|
return (jsx$1(Container$z, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13315
13248
|
};
|
|
13316
|
-
var templateObject_1$
|
|
13249
|
+
var templateObject_1$M, templateObject_2$v;
|
|
13317
13250
|
|
|
13318
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13251
|
+
var SuccessContainer = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13319
13252
|
var size = _a.size;
|
|
13320
13253
|
return (size === 'small' ? '36px' : '');
|
|
13321
13254
|
});
|
|
@@ -13325,9 +13258,9 @@ var Success = function (_a) {
|
|
|
13325
13258
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13326
13259
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13327
13260
|
};
|
|
13328
|
-
var templateObject_1$
|
|
13261
|
+
var templateObject_1$L, templateObject_2$u, templateObject_3$q;
|
|
13329
13262
|
|
|
13330
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13263
|
+
var ButtonContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13331
13264
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13332
13265
|
return status === InputValidationType.Empty &&
|
|
13333
13266
|
type === 'primary' &&
|
|
@@ -13344,16 +13277,16 @@ var BasePlusButton = function (_a) {
|
|
|
13344
13277
|
}
|
|
13345
13278
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13346
13279
|
};
|
|
13347
|
-
var templateObject_1$
|
|
13280
|
+
var templateObject_1$K;
|
|
13348
13281
|
|
|
13349
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
13282
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13350
13283
|
var IconContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13351
13284
|
var BasePlusIcon = function (_a) {
|
|
13352
13285
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13353
13286
|
var theme = useTheme();
|
|
13354
13287
|
return (jsx$1(Container$y, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13355
13288
|
};
|
|
13356
|
-
var templateObject_1$
|
|
13289
|
+
var templateObject_1$J, templateObject_2$t;
|
|
13357
13290
|
|
|
13358
13291
|
var Input$3 = {
|
|
13359
13292
|
Simple: BaseInput,
|
|
@@ -13362,7 +13295,7 @@ var Input$3 = {
|
|
|
13362
13295
|
SimplePlusIcon: BasePlusIcon,
|
|
13363
13296
|
};
|
|
13364
13297
|
|
|
13365
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
13298
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13366
13299
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13367
13300
|
return borderRadiusVariant &&
|
|
13368
13301
|
"\n border-radius: 40px;\n ";
|
|
@@ -13468,14 +13401,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13468
13401
|
};
|
|
13469
13402
|
}, [preventTouch, ref, touchStart]);
|
|
13470
13403
|
}
|
|
13471
|
-
var templateObject_1$
|
|
13404
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
13472
13405
|
|
|
13473
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
13406
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13474
13407
|
var ProductGalleryMobile = function (_a) {
|
|
13475
13408
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13476
13409
|
return (jsx$1(Container$w, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13477
13410
|
};
|
|
13478
|
-
var templateObject_1$
|
|
13411
|
+
var templateObject_1$H;
|
|
13479
13412
|
|
|
13480
13413
|
function _extends() {
|
|
13481
13414
|
_extends = Object.assign || function (target) {
|
|
@@ -13742,7 +13675,7 @@ function useSwipeable(options) {
|
|
|
13742
13675
|
return handlers;
|
|
13743
13676
|
}
|
|
13744
13677
|
|
|
13745
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
13678
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13746
13679
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13747
13680
|
return borderRadiusVariant &&
|
|
13748
13681
|
"\n border-radius: 40px;\n ";
|
|
@@ -13754,16 +13687,16 @@ var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a,
|
|
|
13754
13687
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13755
13688
|
return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13756
13689
|
});
|
|
13757
|
-
var templateObject_1$
|
|
13690
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$o;
|
|
13758
13691
|
|
|
13759
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13692
|
+
var Button$1 = newStyled.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13760
13693
|
var ArrowButton = function (_a) {
|
|
13761
13694
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13762
13695
|
return (jsx$1(Button$1, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13763
13696
|
};
|
|
13764
|
-
var templateObject_1$
|
|
13697
|
+
var templateObject_1$F;
|
|
13765
13698
|
|
|
13766
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
13699
|
+
var Container$u = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13767
13700
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13768
13701
|
var SlideDots = function (_a) {
|
|
13769
13702
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -13772,9 +13705,9 @@ var SlideDots = function (_a) {
|
|
|
13772
13705
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13773
13706
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13774
13707
|
};
|
|
13775
|
-
var templateObject_1$
|
|
13708
|
+
var templateObject_1$E;
|
|
13776
13709
|
|
|
13777
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13710
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13778
13711
|
var RightButton = newStyled(NavigationButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13779
13712
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13780
13713
|
var SlideNavigation = function (_a) {
|
|
@@ -13788,9 +13721,9 @@ var SlideNavigation = function (_a) {
|
|
|
13788
13721
|
onNavigate(selectedIndex + 1);
|
|
13789
13722
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13790
13723
|
};
|
|
13791
|
-
var templateObject_1$
|
|
13724
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$n;
|
|
13792
13725
|
|
|
13793
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
13726
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13794
13727
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13795
13728
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13796
13729
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13814,7 +13747,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13814
13747
|
}, [index, images]);
|
|
13815
13748
|
return (jsxs$1(Container$t, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13816
13749
|
};
|
|
13817
|
-
var templateObject_1$
|
|
13750
|
+
var templateObject_1$C;
|
|
13818
13751
|
|
|
13819
13752
|
var __defProp$1 = Object.defineProperty;
|
|
13820
13753
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -13947,7 +13880,7 @@ var Portal = function (_a) {
|
|
|
13947
13880
|
var visibleStyle = function (_a) {
|
|
13948
13881
|
var opened = _a.opened;
|
|
13949
13882
|
return opened
|
|
13950
|
-
? css(templateObject_1$
|
|
13883
|
+
? css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13951
13884
|
};
|
|
13952
13885
|
var transformStyle = function (_a) {
|
|
13953
13886
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -13995,9 +13928,9 @@ var useModal = function (id) {
|
|
|
13995
13928
|
close: close,
|
|
13996
13929
|
}); }, [close, open, opened]);
|
|
13997
13930
|
};
|
|
13998
|
-
var templateObject_1$
|
|
13931
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
13999
13932
|
|
|
14000
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
13933
|
+
var Bar$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14001
13934
|
var height = _a.height;
|
|
14002
13935
|
return height || '0.5rem';
|
|
14003
13936
|
}, function (_a) {
|
|
@@ -14069,9 +14002,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14069
14002
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14070
14003
|
return (jsxs$1(Container$r, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14071
14004
|
};
|
|
14072
|
-
var templateObject_1$
|
|
14005
|
+
var templateObject_1$A;
|
|
14073
14006
|
|
|
14074
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
14007
|
+
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14075
14008
|
var theme = _a.theme;
|
|
14076
14009
|
return theme.component.orderBar.backgroundColor;
|
|
14077
14010
|
});
|
|
@@ -14081,7 +14014,7 @@ var OrderBar = function (_a) {
|
|
|
14081
14014
|
var theme = useTheme();
|
|
14082
14015
|
return (jsxs$1(Container$q, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14083
14016
|
};
|
|
14084
|
-
var templateObject_1$
|
|
14017
|
+
var templateObject_1$z, templateObject_2$o;
|
|
14085
14018
|
|
|
14086
14019
|
var htmlReactParser = {exports: {}};
|
|
14087
14020
|
|
|
@@ -17862,7 +17795,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17862
17795
|
HTMLReactParser$1.attributesToProps;
|
|
17863
17796
|
HTMLReactParser$1.Element;
|
|
17864
17797
|
|
|
17865
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
17798
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17866
17799
|
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
17867
17800
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17868
17801
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -17899,9 +17832,9 @@ var PackCard = function (_a) {
|
|
|
17899
17832
|
currency: currencyCode || 'USD',
|
|
17900
17833
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17901
17834
|
};
|
|
17902
|
-
var templateObject_1$
|
|
17835
|
+
var templateObject_1$y, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
17903
17836
|
|
|
17904
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
17837
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
17905
17838
|
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
17906
17839
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17907
17840
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -17923,7 +17856,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17923
17856
|
var background = _a.background;
|
|
17924
17857
|
return background || 'unset';
|
|
17925
17858
|
});
|
|
17926
|
-
var templateObject_1$
|
|
17859
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
17927
17860
|
|
|
17928
17861
|
var Pagination = function (_a) {
|
|
17929
17862
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -17988,7 +17921,7 @@ var PaginatorBlog = function (_a) {
|
|
|
17988
17921
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
17989
17922
|
};
|
|
17990
17923
|
|
|
17991
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
17924
|
+
var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
17992
17925
|
var width = _a.width;
|
|
17993
17926
|
return width;
|
|
17994
17927
|
}, function (_a) {
|
|
@@ -18006,9 +17939,9 @@ var PaymentMethod = function (_a) {
|
|
|
18006
17939
|
var theme = useTheme();
|
|
18007
17940
|
return (jsx$1(Container$n, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18008
17941
|
};
|
|
18009
|
-
var templateObject_1$
|
|
17942
|
+
var templateObject_1$w;
|
|
18010
17943
|
|
|
18011
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
17944
|
+
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18012
17945
|
var IMAGE_WIDTH = '63px';
|
|
18013
17946
|
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18014
17947
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -18050,7 +17983,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18050
17983
|
var theme = useTheme();
|
|
18051
17984
|
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18052
17985
|
};
|
|
18053
|
-
var templateObject_1$
|
|
17986
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18054
17987
|
|
|
18055
17988
|
var P$1 = newStyled.p(function (_a) {
|
|
18056
17989
|
var color = _a.color;
|
|
@@ -18064,7 +17997,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18064
17997
|
margin: '0.938rem 4.188rem',
|
|
18065
17998
|
});
|
|
18066
17999
|
});
|
|
18067
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18000
|
+
var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18068
18001
|
var height = _a.height;
|
|
18069
18002
|
return height || '0.5rem';
|
|
18070
18003
|
}, function (_a) {
|
|
@@ -18109,9 +18042,9 @@ var ProgressBar = function (_a) {
|
|
|
18109
18042
|
var theme = useTheme();
|
|
18110
18043
|
return (jsxs$1(Container$l, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18111
18044
|
};
|
|
18112
|
-
var templateObject_1$
|
|
18045
|
+
var templateObject_1$u;
|
|
18113
18046
|
|
|
18114
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
18047
|
+
var Container$k = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18115
18048
|
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18116
18049
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18117
18050
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -18139,7 +18072,7 @@ var QuantityPicker = function (_a) {
|
|
|
18139
18072
|
}, [value, clamp]);
|
|
18140
18073
|
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18141
18074
|
};
|
|
18142
|
-
var templateObject_1$
|
|
18075
|
+
var templateObject_1$t, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18143
18076
|
|
|
18144
18077
|
/* base styles & size variants */
|
|
18145
18078
|
var CustomRadioStyles$1 = {
|
|
@@ -18208,7 +18141,7 @@ var ContainerStyles$1 = {
|
|
|
18208
18141
|
},
|
|
18209
18142
|
};
|
|
18210
18143
|
|
|
18211
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18144
|
+
var Wrapper$3 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18212
18145
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18213
18146
|
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18214
18147
|
var disabled = _a.disabled;
|
|
@@ -18228,7 +18161,7 @@ var RadioPrimary = function (_a) {
|
|
|
18228
18161
|
};
|
|
18229
18162
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18230
18163
|
};
|
|
18231
|
-
var templateObject_1$
|
|
18164
|
+
var templateObject_1$s, templateObject_2$j, templateObject_3$h;
|
|
18232
18165
|
|
|
18233
18166
|
var RadioGroupInput = function (_a) {
|
|
18234
18167
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18307,7 +18240,7 @@ var ContainerStyles = {
|
|
|
18307
18240
|
},
|
|
18308
18241
|
};
|
|
18309
18242
|
|
|
18310
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18243
|
+
var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18311
18244
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18312
18245
|
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18313
18246
|
var disabled = _a.disabled;
|
|
@@ -18333,7 +18266,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18333
18266
|
};
|
|
18334
18267
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18335
18268
|
};
|
|
18336
|
-
var templateObject_1$
|
|
18269
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$g;
|
|
18337
18270
|
|
|
18338
18271
|
var ClubRadioGroupInput = function (_a) {
|
|
18339
18272
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18354,7 +18287,7 @@ function formatDate(date) {
|
|
|
18354
18287
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
18355
18288
|
}
|
|
18356
18289
|
|
|
18357
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18290
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18358
18291
|
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18359
18292
|
var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18360
18293
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -18395,11 +18328,11 @@ var Review$1 = function (_a) {
|
|
|
18395
18328
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18396
18329
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18397
18330
|
};
|
|
18398
|
-
var templateObject_1$
|
|
18331
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18399
18332
|
|
|
18400
18333
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18401
18334
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18402
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18335
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18403
18336
|
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18404
18337
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18405
18338
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -18451,9 +18384,9 @@ var Review = function (_a) {
|
|
|
18451
18384
|
: description,
|
|
18452
18385
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18453
18386
|
};
|
|
18454
|
-
var templateObject_1$
|
|
18387
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18455
18388
|
|
|
18456
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
18389
|
+
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18457
18390
|
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18458
18391
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18459
18392
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -18469,9 +18402,9 @@ var ReviewsHeader = function (_a) {
|
|
|
18469
18402
|
var theme = useTheme();
|
|
18470
18403
|
return (jsxs$1(Container$f, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18471
18404
|
};
|
|
18472
|
-
var templateObject_1$
|
|
18405
|
+
var templateObject_1$o, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18473
18406
|
|
|
18474
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
18407
|
+
var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
18475
18408
|
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18476
18409
|
var ScrollToTop = function (_a) {
|
|
18477
18410
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -18479,7 +18412,7 @@ var ScrollToTop = function (_a) {
|
|
|
18479
18412
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18480
18413
|
return (jsxs$1(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18481
18414
|
};
|
|
18482
|
-
var templateObject_1$
|
|
18415
|
+
var templateObject_1$n, templateObject_2$e;
|
|
18483
18416
|
|
|
18484
18417
|
var Input = newStyled.input(function (props) { return ({
|
|
18485
18418
|
padding: props.theme.component.input.padding,
|
|
@@ -18510,7 +18443,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18510
18443
|
},
|
|
18511
18444
|
}); });
|
|
18512
18445
|
|
|
18513
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
18446
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18514
18447
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18515
18448
|
}));
|
|
18516
18449
|
var Description = newStyled.div({
|
|
@@ -18529,7 +18462,7 @@ var ProductItem = function (_a) {
|
|
|
18529
18462
|
var theme = useTheme();
|
|
18530
18463
|
return (jsxs$1(Container$d, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18531
18464
|
};
|
|
18532
|
-
var templateObject_1$
|
|
18465
|
+
var templateObject_1$m;
|
|
18533
18466
|
|
|
18534
18467
|
var Container$c = newStyled.div({
|
|
18535
18468
|
display: 'flex',
|
|
@@ -18545,7 +18478,7 @@ var Ul = newStyled.ul({
|
|
|
18545
18478
|
margin: '0px',
|
|
18546
18479
|
padding: '0px',
|
|
18547
18480
|
});
|
|
18548
|
-
var Li = newStyled.li(templateObject_1$
|
|
18481
|
+
var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18549
18482
|
padding: [0, '0rem 1rem'],
|
|
18550
18483
|
borderRadius: [0, '0.5rem'],
|
|
18551
18484
|
}));
|
|
@@ -18570,9 +18503,9 @@ var ResultsPanel = function (_a) {
|
|
|
18570
18503
|
var theme = useTheme();
|
|
18571
18504
|
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18572
18505
|
};
|
|
18573
|
-
var templateObject_1$
|
|
18506
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$c;
|
|
18574
18507
|
|
|
18575
|
-
var Button = newStyled.button(templateObject_1$
|
|
18508
|
+
var Button = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
18576
18509
|
right: ['1rem', '7.75rem'],
|
|
18577
18510
|
top: ['0.75rem', '0.75rem'],
|
|
18578
18511
|
}));
|
|
@@ -18581,7 +18514,7 @@ var ClearButton = function (_a) {
|
|
|
18581
18514
|
var theme = useTheme();
|
|
18582
18515
|
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18583
18516
|
};
|
|
18584
|
-
var templateObject_1$
|
|
18517
|
+
var templateObject_1$k;
|
|
18585
18518
|
|
|
18586
18519
|
var SearchIconContainer = newStyled.div({
|
|
18587
18520
|
display: 'flex',
|
|
@@ -18591,7 +18524,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18591
18524
|
background: 'white',
|
|
18592
18525
|
alignSelf: 'center',
|
|
18593
18526
|
});
|
|
18594
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
18527
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
18595
18528
|
var SearchControl = function (_a) {
|
|
18596
18529
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18597
18530
|
var theme = useTheme();
|
|
@@ -18607,7 +18540,7 @@ var SearchControl = function (_a) {
|
|
|
18607
18540
|
}
|
|
18608
18541
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18609
18542
|
};
|
|
18610
|
-
var templateObject_1$
|
|
18543
|
+
var templateObject_1$j;
|
|
18611
18544
|
|
|
18612
18545
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18613
18546
|
var reducer = function (state, action) {
|
|
@@ -18674,7 +18607,7 @@ var SearchBar = function (_a) {
|
|
|
18674
18607
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
18675
18608
|
};
|
|
18676
18609
|
|
|
18677
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
18610
|
+
var Container$9 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
18678
18611
|
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
18679
18612
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
18680
18613
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
@@ -18685,9 +18618,9 @@ var SearchNavigation = function (_a) {
|
|
|
18685
18618
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18686
18619
|
}) }, void 0)] }, void 0));
|
|
18687
18620
|
};
|
|
18688
|
-
var templateObject_1$
|
|
18621
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18689
18622
|
|
|
18690
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
18623
|
+
var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
18691
18624
|
var alignCenter = _a.alignCenter;
|
|
18692
18625
|
return alignCenter &&
|
|
18693
18626
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18704,9 +18637,9 @@ var ShortBanner = function (_a) {
|
|
|
18704
18637
|
var theme = useTheme();
|
|
18705
18638
|
return (jsxs$1(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18706
18639
|
};
|
|
18707
|
-
var templateObject_1$
|
|
18640
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$a;
|
|
18708
18641
|
|
|
18709
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
18642
|
+
var TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
18710
18643
|
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18711
18644
|
var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18712
18645
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -18742,9 +18675,9 @@ var SizeChartTable = function (_a) {
|
|
|
18742
18675
|
backgroundColor: getCellColor(index, cell),
|
|
18743
18676
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18744
18677
|
};
|
|
18745
|
-
var templateObject_1$
|
|
18678
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
18746
18679
|
|
|
18747
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
18680
|
+
var TableElement = newStyled.table(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
18748
18681
|
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18749
18682
|
var TableHead = newStyled.th(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18750
18683
|
var TableRow = newStyled.tr(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -18753,7 +18686,7 @@ var SizeTable = function (_a) {
|
|
|
18753
18686
|
var theme = useTheme();
|
|
18754
18687
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
18755
18688
|
};
|
|
18756
|
-
var templateObject_1$
|
|
18689
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
18757
18690
|
|
|
18758
18691
|
var getStylesBySize$4 = function (size) {
|
|
18759
18692
|
switch (size) {
|
|
@@ -18780,7 +18713,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
18780
18713
|
} });
|
|
18781
18714
|
};
|
|
18782
18715
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
18783
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
18716
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
18784
18717
|
};
|
|
18785
18718
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
18786
18719
|
if (disabled)
|
|
@@ -18796,18 +18729,18 @@ var TextButton = function (_a) {
|
|
|
18796
18729
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
18797
18730
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
18798
18731
|
};
|
|
18799
|
-
var templateObject_1$
|
|
18732
|
+
var templateObject_1$e;
|
|
18800
18733
|
|
|
18801
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
18734
|
+
var Container$7 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
18802
18735
|
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18803
18736
|
var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
18804
18737
|
var SizeFitGuide = function (_a) {
|
|
18805
18738
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18806
18739
|
return (jsxs$1(Container$7, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18807
18740
|
};
|
|
18808
|
-
var templateObject_1$
|
|
18741
|
+
var templateObject_1$d, templateObject_2$8, templateObject_3$7;
|
|
18809
18742
|
|
|
18810
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
18743
|
+
var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
18811
18744
|
var inline = _a.inline;
|
|
18812
18745
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18813
18746
|
});
|
|
@@ -18826,9 +18759,9 @@ var SizeSelector = function (_a) {
|
|
|
18826
18759
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
18827
18760
|
}) }), void 0)] }), void 0));
|
|
18828
18761
|
};
|
|
18829
|
-
var templateObject_1$
|
|
18762
|
+
var templateObject_1$c;
|
|
18830
18763
|
|
|
18831
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
18764
|
+
var TabContainer = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
18832
18765
|
var titleSize = _a.titleSize;
|
|
18833
18766
|
return titleSize;
|
|
18834
18767
|
}, function (_a) {
|
|
@@ -18845,9 +18778,9 @@ var Tab = function (_a) {
|
|
|
18845
18778
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
18846
18779
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
18847
18780
|
};
|
|
18848
|
-
var templateObject_1$
|
|
18781
|
+
var templateObject_1$b;
|
|
18849
18782
|
|
|
18850
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18783
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18851
18784
|
var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
18852
18785
|
var backgroundColor = _a.backgroundColor;
|
|
18853
18786
|
return backgroundColor;
|
|
@@ -18864,14 +18797,14 @@ var Tabs = function (_a) {
|
|
|
18864
18797
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18865
18798
|
return (jsxs$1(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18866
18799
|
};
|
|
18867
|
-
var templateObject_1$
|
|
18800
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
18868
18801
|
|
|
18869
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18802
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
18870
18803
|
var Tag = function (_a) {
|
|
18871
18804
|
var text = _a.text, className = _a.className;
|
|
18872
18805
|
return jsx$1(Container$5, __assign$1({ className: className }, { children: text }), void 0);
|
|
18873
18806
|
};
|
|
18874
|
-
var templateObject_1$
|
|
18807
|
+
var templateObject_1$9;
|
|
18875
18808
|
|
|
18876
18809
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
18877
18810
|
switch (size) {
|
|
@@ -18982,7 +18915,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
18982
18915
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
18983
18916
|
};
|
|
18984
18917
|
|
|
18985
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
18918
|
+
var ImageWrapper = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
18986
18919
|
var VideoOverlay = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
18987
18920
|
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
18988
18921
|
var ImageVideo = function (_a) {
|
|
@@ -19004,9 +18937,9 @@ var ImageVideo = function (_a) {
|
|
|
19004
18937
|
height: '100%',
|
|
19005
18938
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19006
18939
|
};
|
|
19007
|
-
var templateObject_1$
|
|
18940
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5;
|
|
19008
18941
|
|
|
19009
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18942
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19010
18943
|
var ContainerMobile = css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19011
18944
|
var Container$4 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19012
18945
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
@@ -19039,9 +18972,47 @@ var TextWithImage = function (_a) {
|
|
|
19039
18972
|
},
|
|
19040
18973
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19041
18974
|
};
|
|
19042
|
-
var templateObject_1$
|
|
18975
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19043
18976
|
|
|
19044
|
-
var
|
|
18977
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
18978
|
+
var timerColor = _a.timerColor;
|
|
18979
|
+
return timerColor || '';
|
|
18980
|
+
});
|
|
18981
|
+
var timeToSeconds = function (_a) {
|
|
18982
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
18983
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
18984
|
+
};
|
|
18985
|
+
var secondsToTime = function (secs) {
|
|
18986
|
+
var hours = Math.floor(secs / 3600);
|
|
18987
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
18988
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
18989
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
18990
|
+
};
|
|
18991
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
18992
|
+
var Timer = function (_a) {
|
|
18993
|
+
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"]);
|
|
18994
|
+
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
18995
|
+
useEffect(function () {
|
|
18996
|
+
var timer = setInterval(function () {
|
|
18997
|
+
setSecs(function (seconds) {
|
|
18998
|
+
if (seconds === 1) {
|
|
18999
|
+
clearInterval(timer);
|
|
19000
|
+
onTimeUp();
|
|
19001
|
+
return 0;
|
|
19002
|
+
}
|
|
19003
|
+
return seconds - 1;
|
|
19004
|
+
});
|
|
19005
|
+
}, 1000);
|
|
19006
|
+
if (secs <= 0)
|
|
19007
|
+
clearInterval(timer);
|
|
19008
|
+
return function () { return clearInterval(timer); };
|
|
19009
|
+
}, [onTimeUp, secs]);
|
|
19010
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19011
|
+
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19012
|
+
};
|
|
19013
|
+
var templateObject_1$6;
|
|
19014
|
+
|
|
19015
|
+
var Wrapper$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19045
19016
|
var GrandTotal = newStyled.h1(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19046
19017
|
var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19047
19018
|
var theme = _a.theme;
|
|
@@ -19070,7 +19041,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19070
19041
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19071
19042
|
});
|
|
19072
19043
|
var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19073
|
-
var templateObject_1$
|
|
19044
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19074
19045
|
|
|
19075
19046
|
var Total = function (_a) {
|
|
19076
19047
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -19078,7 +19049,7 @@ var Total = function (_a) {
|
|
|
19078
19049
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19079
19050
|
};
|
|
19080
19051
|
|
|
19081
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19052
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19082
19053
|
var color = _a.color;
|
|
19083
19054
|
return color;
|
|
19084
19055
|
});
|
|
@@ -19103,14 +19074,14 @@ var Subtotal = function (_a) {
|
|
|
19103
19074
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19104
19075
|
})] }), void 0));
|
|
19105
19076
|
};
|
|
19106
|
-
var templateObject_1$
|
|
19077
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
19107
19078
|
|
|
19108
19079
|
var Totals = {
|
|
19109
19080
|
Total: Total,
|
|
19110
19081
|
Subtotal: Subtotal,
|
|
19111
19082
|
};
|
|
19112
19083
|
|
|
19113
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19084
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19114
19085
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19115
19086
|
var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19116
19087
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19162,9 +19133,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19162
19133
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19163
19134
|
})] }), void 0));
|
|
19164
19135
|
};
|
|
19165
|
-
var templateObject_1$
|
|
19136
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19166
19137
|
|
|
19167
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
19138
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19168
19139
|
var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19169
19140
|
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19170
19141
|
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19202,7 +19173,36 @@ var TrackingProgress = function (_a) {
|
|
|
19202
19173
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19203
19174
|
})] }), void 0));
|
|
19204
19175
|
};
|
|
19205
|
-
var templateObject_1$
|
|
19176
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19177
|
+
|
|
19178
|
+
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) {
|
|
19179
|
+
var textPosition = _a.textPosition;
|
|
19180
|
+
return textPosition;
|
|
19181
|
+
}, function (_a) {
|
|
19182
|
+
var backgroundColor = _a.backgroundColor;
|
|
19183
|
+
return backgroundColor;
|
|
19184
|
+
}, function (_a) {
|
|
19185
|
+
var borderRadius = _a.borderRadius;
|
|
19186
|
+
return borderRadius || 'unset';
|
|
19187
|
+
}, function (_a) {
|
|
19188
|
+
var borderRadius = _a.borderRadius;
|
|
19189
|
+
return borderRadius || '8px';
|
|
19190
|
+
});
|
|
19191
|
+
var templateObject_1$1;
|
|
19192
|
+
|
|
19193
|
+
var getDefaultCountdown = function () {
|
|
19194
|
+
var tomorrowDate = new Date();
|
|
19195
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19196
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19197
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19198
|
+
return Number(totalSeconds.toFixed(0));
|
|
19199
|
+
};
|
|
19200
|
+
|
|
19201
|
+
var HurryUp = function (_a) {
|
|
19202
|
+
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"]);
|
|
19203
|
+
var theme = useTheme();
|
|
19204
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19205
|
+
};
|
|
19206
19206
|
|
|
19207
19207
|
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19208
19208
|
var size = _a.size;
|