@trafilea/afrodita-components 6.25.1 → 6.26.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 +54 -53
- package/build/index.esm.js +835 -819
- package/build/index.esm.js.map +1 -1
- package/build/index.js +835 -819
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3127,265 +3127,6 @@ var formatPrice = function (value, _a) {
|
|
|
3127
3127
|
}).format(valueToFormat);
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Viewports = {
|
|
3131
|
-
mobile: 'mobile',
|
|
3132
|
-
tablet: 'tablet',
|
|
3133
|
-
desktop: 'desktop',
|
|
3134
|
-
desktopLarge: 'desktopLarge',
|
|
3135
|
-
};
|
|
3136
|
-
|
|
3137
|
-
//ANNOTATION: Those values are up to.
|
|
3138
|
-
var DEFAULT_BREAKPOINTS = {
|
|
3139
|
-
mobile: 640,
|
|
3140
|
-
tablet: 1024,
|
|
3141
|
-
desktop: 1280,
|
|
3142
|
-
};
|
|
3143
|
-
|
|
3144
|
-
var Container$1j = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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) {
|
|
3145
|
-
var height = _a.height;
|
|
3146
|
-
return (height ? height : '1.5em');
|
|
3147
|
-
}, function (_a) {
|
|
3148
|
-
var width = _a.width;
|
|
3149
|
-
return (width ? width : '100%');
|
|
3150
|
-
}, function (_a) {
|
|
3151
|
-
var theme = _a.theme;
|
|
3152
|
-
return theme.colors.background.disabled;
|
|
3153
|
-
}, function (_a) {
|
|
3154
|
-
var theme = _a.theme;
|
|
3155
|
-
return theme.radius.regular;
|
|
3156
|
-
}, function (_a) {
|
|
3157
|
-
var theme = _a.theme;
|
|
3158
|
-
return theme.colors.shades['10'].color;
|
|
3159
|
-
}, function (_a) {
|
|
3160
|
-
var theme = _a.theme;
|
|
3161
|
-
return theme.colors.background.disabled;
|
|
3162
|
-
}, function (_a) {
|
|
3163
|
-
var theme = _a.theme;
|
|
3164
|
-
return theme.colors.shades['10'].color;
|
|
3165
|
-
});
|
|
3166
|
-
var SkeletonBox = function (_a) {
|
|
3167
|
-
var width = _a.width, height = _a.height;
|
|
3168
|
-
var theme = useTheme();
|
|
3169
|
-
return jsx$1(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3170
|
-
};
|
|
3171
|
-
var templateObject_1$2a;
|
|
3172
|
-
|
|
3173
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29 = __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) {
|
|
3174
|
-
var width = _a.width;
|
|
3175
|
-
return width;
|
|
3176
|
-
}, function (_a) {
|
|
3177
|
-
var height = _a.height;
|
|
3178
|
-
return height;
|
|
3179
|
-
}, function (_a) {
|
|
3180
|
-
var fill = _a.fill;
|
|
3181
|
-
return fill;
|
|
3182
|
-
}, function (_a) {
|
|
3183
|
-
var backgroundColor = _a.backgroundColor;
|
|
3184
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3185
|
-
}, function (_a) {
|
|
3186
|
-
var opacity = _a.opacity;
|
|
3187
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3188
|
-
});
|
|
3189
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3190
|
-
var width = _a.width;
|
|
3191
|
-
return width;
|
|
3192
|
-
}, function (_a) {
|
|
3193
|
-
var height = _a.height;
|
|
3194
|
-
return height;
|
|
3195
|
-
}, function (_a) {
|
|
3196
|
-
var backgroundColor = _a.backgroundColor;
|
|
3197
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3198
|
-
}, function (_a) {
|
|
3199
|
-
var opacity = _a.opacity;
|
|
3200
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3201
|
-
});
|
|
3202
|
-
var templateObject_1$29, templateObject_2$1v;
|
|
3203
|
-
|
|
3204
|
-
/* eslint-disable no-undef */
|
|
3205
|
-
var cache = new Map();
|
|
3206
|
-
var fetching = new Map();
|
|
3207
|
-
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3208
|
-
if (cache.has(request)) {
|
|
3209
|
-
return cache.get(request);
|
|
3210
|
-
}
|
|
3211
|
-
if (fetching.has(request)) {
|
|
3212
|
-
return fetching.get(request);
|
|
3213
|
-
}
|
|
3214
|
-
var fetchPromise = fetch(request)
|
|
3215
|
-
.then(function (response) {
|
|
3216
|
-
if (response.status !== 200) {
|
|
3217
|
-
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3218
|
-
}
|
|
3219
|
-
return response;
|
|
3220
|
-
})
|
|
3221
|
-
.then(saveToCacheFn)
|
|
3222
|
-
.then(function (data) {
|
|
3223
|
-
cache.set(request, data);
|
|
3224
|
-
fetching.delete(request);
|
|
3225
|
-
return data;
|
|
3226
|
-
})
|
|
3227
|
-
.catch(function (error) {
|
|
3228
|
-
fetching.delete(request);
|
|
3229
|
-
throw error;
|
|
3230
|
-
});
|
|
3231
|
-
fetching.set(request, fetchPromise);
|
|
3232
|
-
return fetchPromise;
|
|
3233
|
-
};
|
|
3234
|
-
|
|
3235
|
-
var createIconImage = function (_a) {
|
|
3236
|
-
var src = _a.src;
|
|
3237
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
3238
|
-
var localUrl, error_1;
|
|
3239
|
-
return __generator(this, function (_b) {
|
|
3240
|
-
switch (_b.label) {
|
|
3241
|
-
case 0:
|
|
3242
|
-
_b.trys.push([0, 2, , 3]);
|
|
3243
|
-
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3244
|
-
var blob;
|
|
3245
|
-
return __generator(this, function (_a) {
|
|
3246
|
-
switch (_a.label) {
|
|
3247
|
-
case 0: return [4 /*yield*/, response.blob()];
|
|
3248
|
-
case 1:
|
|
3249
|
-
blob = _a.sent();
|
|
3250
|
-
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3251
|
-
}
|
|
3252
|
-
});
|
|
3253
|
-
}); })];
|
|
3254
|
-
case 1:
|
|
3255
|
-
localUrl = _b.sent();
|
|
3256
|
-
return [2 /*return*/, {
|
|
3257
|
-
src: localUrl,
|
|
3258
|
-
}];
|
|
3259
|
-
case 2:
|
|
3260
|
-
error_1 = _b.sent();
|
|
3261
|
-
console.warn(error_1);
|
|
3262
|
-
return [2 /*return*/, undefined];
|
|
3263
|
-
case 3: return [2 /*return*/];
|
|
3264
|
-
}
|
|
3265
|
-
});
|
|
3266
|
-
});
|
|
3267
|
-
};
|
|
3268
|
-
|
|
3269
|
-
var getIconDimension = function (dimension) {
|
|
3270
|
-
if (!dimension)
|
|
3271
|
-
return '100%';
|
|
3272
|
-
if (String(dimension).includes('px') ||
|
|
3273
|
-
String(dimension).includes('%') ||
|
|
3274
|
-
String(dimension).includes('rem')) {
|
|
3275
|
-
return dimension;
|
|
3276
|
-
}
|
|
3277
|
-
return "".concat(dimension, "rem");
|
|
3278
|
-
};
|
|
3279
|
-
|
|
3280
|
-
var UnmemoIconFromExtSource = function (_a) {
|
|
3281
|
-
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"]);
|
|
3282
|
-
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3283
|
-
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3284
|
-
useEffect(function () {
|
|
3285
|
-
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3286
|
-
var localSource;
|
|
3287
|
-
return __generator(this, function (_a) {
|
|
3288
|
-
switch (_a.label) {
|
|
3289
|
-
case 0: return [4 /*yield*/, createIconImage({
|
|
3290
|
-
src: iconURL,
|
|
3291
|
-
})];
|
|
3292
|
-
case 1:
|
|
3293
|
-
localSource = _a.sent();
|
|
3294
|
-
if (localSource) {
|
|
3295
|
-
setLocalSource(localSource);
|
|
3296
|
-
return [2 /*return*/];
|
|
3297
|
-
}
|
|
3298
|
-
setError(true);
|
|
3299
|
-
return [2 /*return*/];
|
|
3300
|
-
}
|
|
3301
|
-
});
|
|
3302
|
-
}); };
|
|
3303
|
-
if (!localSource) {
|
|
3304
|
-
fetchIcon();
|
|
3305
|
-
}
|
|
3306
|
-
}, [iconURL]);
|
|
3307
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3308
|
-
if (error) {
|
|
3309
|
-
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3310
|
-
}
|
|
3311
|
-
if (!localSource) {
|
|
3312
|
-
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3313
|
-
}
|
|
3314
|
-
if (!fill && !svgProps) {
|
|
3315
|
-
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3316
|
-
}
|
|
3317
|
-
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", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3318
|
-
};
|
|
3319
|
-
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3320
|
-
|
|
3321
|
-
/* eslint-disable react/forbid-component-props */
|
|
3322
|
-
var UnmemoIcon = function (_a) {
|
|
3323
|
-
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"]);
|
|
3324
|
-
var assets = useTheme().assets;
|
|
3325
|
-
var newWidth = width && getIconDimension(width);
|
|
3326
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3327
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3328
|
-
var svgSplit = name.split('/');
|
|
3329
|
-
var svgId = svgSplit[svgSplit.length - 1];
|
|
3330
|
-
if (assets.isSameOriginIcons) {
|
|
3331
|
-
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", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3332
|
-
}
|
|
3333
|
-
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));
|
|
3334
|
-
};
|
|
3335
|
-
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3336
|
-
|
|
3337
|
-
var getValidSize = function (size) {
|
|
3338
|
-
if (!size) {
|
|
3339
|
-
return 'auto';
|
|
3340
|
-
}
|
|
3341
|
-
if (typeof size === 'number') {
|
|
3342
|
-
return String(size);
|
|
3343
|
-
}
|
|
3344
|
-
if (size.endsWith('px')) {
|
|
3345
|
-
return size.replace('px', '');
|
|
3346
|
-
}
|
|
3347
|
-
if (Number(size))
|
|
3348
|
-
return String(Number(size));
|
|
3349
|
-
return 'auto';
|
|
3350
|
-
};
|
|
3351
|
-
|
|
3352
|
-
var DEFAULT_QUALITY = 100;
|
|
3353
|
-
var buildImageUrl = function (_a) {
|
|
3354
|
-
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3355
|
-
try {
|
|
3356
|
-
new URL(src);
|
|
3357
|
-
var baseUrl = new URL(src);
|
|
3358
|
-
if (!baseUrl.host) {
|
|
3359
|
-
return src;
|
|
3360
|
-
}
|
|
3361
|
-
if (cdn.includes(baseUrl.host)) {
|
|
3362
|
-
return src;
|
|
3363
|
-
}
|
|
3364
|
-
var url = encodeURIComponent(src);
|
|
3365
|
-
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3366
|
-
var width = getValidSize(widthString);
|
|
3367
|
-
var height = getValidSize(heightString);
|
|
3368
|
-
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3369
|
-
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3370
|
-
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3371
|
-
}
|
|
3372
|
-
catch (e) {
|
|
3373
|
-
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3374
|
-
return src;
|
|
3375
|
-
}
|
|
3376
|
-
};
|
|
3377
|
-
|
|
3378
|
-
var Img = newStyled.img(templateObject_1$28 || (templateObject_1$28 = __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; });
|
|
3379
|
-
var Image$3 = function (_a) {
|
|
3380
|
-
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, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3381
|
-
var config = useTheme().config;
|
|
3382
|
-
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3383
|
-
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3384
|
-
: src;
|
|
3385
|
-
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3386
|
-
};
|
|
3387
|
-
var templateObject_1$28;
|
|
3388
|
-
|
|
3389
3130
|
var CardSectionType;
|
|
3390
3131
|
(function (CardSectionType) {
|
|
3391
3132
|
CardSectionType[CardSectionType["Header"] = 0] = "Header";
|
|
@@ -3440,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3440
3181
|
};
|
|
3441
3182
|
}
|
|
3442
3183
|
};
|
|
3443
|
-
var Container$
|
|
3184
|
+
var Container$1j = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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) {
|
|
3444
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3445
3186
|
return backgroundColor;
|
|
3446
3187
|
}, function (_a) {
|
|
@@ -3462,7 +3203,7 @@ var Container$1i = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
3462
3203
|
var size = _a.size;
|
|
3463
3204
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3464
3205
|
});
|
|
3465
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3206
|
+
var H3$3 = newStyled.h3(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3466
3207
|
var textColor = _a.textColor;
|
|
3467
3208
|
return textColor;
|
|
3468
3209
|
}, function (_a) {
|
|
@@ -3477,9 +3218,9 @@ var H3$3 = newStyled.h3(templateObject_2$1u || (templateObject_2$1u = __makeTemp
|
|
|
3477
3218
|
var ClubOfferTag = function (_a) {
|
|
3478
3219
|
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;
|
|
3479
3220
|
var theme = useTheme();
|
|
3480
|
-
return (jsx$1(Container$
|
|
3221
|
+
return (jsx$1(Container$1j, __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$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3481
3222
|
};
|
|
3482
|
-
var templateObject_1$
|
|
3223
|
+
var templateObject_1$2b, templateObject_2$1w;
|
|
3483
3224
|
|
|
3484
3225
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3485
3226
|
var _a, _b, _c;
|
|
@@ -3510,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3510
3251
|
};
|
|
3511
3252
|
}
|
|
3512
3253
|
};
|
|
3513
|
-
var Container$
|
|
3254
|
+
var Container$1i = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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) {
|
|
3514
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3515
3256
|
return backgroundColor;
|
|
3516
3257
|
}, function (_a) {
|
|
@@ -3532,7 +3273,7 @@ var Container$1h = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
3532
3273
|
var size = _a.size;
|
|
3533
3274
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3534
3275
|
});
|
|
3535
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3276
|
+
var H3$2 = newStyled.h3(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3536
3277
|
var textColor = _a.textColor;
|
|
3537
3278
|
return textColor;
|
|
3538
3279
|
}, function (_a) {
|
|
@@ -3547,9 +3288,23 @@ var H3$2 = newStyled.h3(templateObject_2$1t || (templateObject_2$1t = __makeTemp
|
|
|
3547
3288
|
var DiscountTag$2 = function (_a) {
|
|
3548
3289
|
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;
|
|
3549
3290
|
var theme = useTheme();
|
|
3550
|
-
return (jsx$1(Container$
|
|
3291
|
+
return (jsx$1(Container$1i, __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$2, __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));
|
|
3551
3292
|
};
|
|
3552
|
-
var templateObject_1$
|
|
3293
|
+
var templateObject_1$2a, templateObject_2$1v;
|
|
3294
|
+
|
|
3295
|
+
var Viewports = {
|
|
3296
|
+
mobile: 'mobile',
|
|
3297
|
+
tablet: 'tablet',
|
|
3298
|
+
desktop: 'desktop',
|
|
3299
|
+
desktopLarge: 'desktopLarge',
|
|
3300
|
+
};
|
|
3301
|
+
|
|
3302
|
+
//ANNOTATION: Those values are up to.
|
|
3303
|
+
var DEFAULT_BREAKPOINTS = {
|
|
3304
|
+
mobile: 640,
|
|
3305
|
+
tablet: 1024,
|
|
3306
|
+
desktop: 1280,
|
|
3307
|
+
};
|
|
3553
3308
|
|
|
3554
3309
|
function getWindowDimensions() {
|
|
3555
3310
|
if (typeof window === 'undefined')
|
|
@@ -3644,8 +3399,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3644
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3645
3400
|
}
|
|
3646
3401
|
};
|
|
3647
|
-
var Container$
|
|
3648
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1h = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
3649
3404
|
var weight = _a.weight;
|
|
3650
3405
|
return (weight ? weight : '400');
|
|
3651
3406
|
}, function (_a) {
|
|
@@ -3700,11 +3455,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3700
3455
|
: ComponentSize.XSmall;
|
|
3701
3456
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3702
3457
|
};
|
|
3703
|
-
return (jsxs$1(Container$
|
|
3458
|
+
return (jsxs$1(Container$1h, __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$1(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$1(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$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3704
3459
|
};
|
|
3705
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$29, templateObject_2$1u, templateObject_3$19;
|
|
3706
3461
|
|
|
3707
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3708
3463
|
var PriceLabelV2$1 = function (_a) {
|
|
3709
3464
|
var _b;
|
|
3710
3465
|
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, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3757,7 +3512,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3757
3512
|
var savetoString = saveto.toFixed(2);
|
|
3758
3513
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3759
3514
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3760
|
-
return (jsxs$1(Container$
|
|
3515
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3761
3516
|
marginTop: '-5px',
|
|
3762
3517
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3763
3518
|
? finalPriceArray[0]
|
|
@@ -3775,10 +3530,10 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3775
3530
|
lineHeight: '22px',
|
|
3776
3531
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3777
3532
|
};
|
|
3778
|
-
var templateObject_1$
|
|
3533
|
+
var templateObject_1$28;
|
|
3779
3534
|
|
|
3780
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3781
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3535
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3536
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3782
3537
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3783
3538
|
var PriceLabelV3 = function (_a) {
|
|
3784
3539
|
var _b;
|
|
@@ -3834,7 +3589,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3834
3589
|
return null;
|
|
3835
3590
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3836
3591
|
};
|
|
3837
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3592
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1h, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1h, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3838
3593
|
marginTop: '-5px',
|
|
3839
3594
|
} }, 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: {
|
|
3840
3595
|
marginTop: '-6px',
|
|
@@ -3850,9 +3605,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3850
3605
|
lineHeight: '22px',
|
|
3851
3606
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3852
3607
|
};
|
|
3853
|
-
var templateObject_1$
|
|
3608
|
+
var templateObject_1$27, templateObject_2$1t, templateObject_3$18;
|
|
3854
3609
|
|
|
3855
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3610
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3856
3611
|
var PriceLabel = function (_a) {
|
|
3857
3612
|
var _b;
|
|
3858
3613
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, 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, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3880,49 +3635,314 @@ var PriceLabel = function (_a) {
|
|
|
3880
3635
|
};
|
|
3881
3636
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3882
3637
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3883
|
-
return (jsxs$1(Container$
|
|
3638
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3884
3639
|
marginTop: '-5px',
|
|
3885
3640
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { 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: {
|
|
3886
3641
|
marginTop: '-6px',
|
|
3887
3642
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3888
3643
|
};
|
|
3889
|
-
var templateObject_1$
|
|
3644
|
+
var templateObject_1$26;
|
|
3645
|
+
|
|
3646
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3647
|
+
var PriceLabelV2 = function (_a) {
|
|
3648
|
+
var _b;
|
|
3649
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, 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, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3650
|
+
var theme = useTheme();
|
|
3651
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3652
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3653
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3654
|
+
var currencySymbol = '$';
|
|
3655
|
+
if (typeof finalPrice === 'string') {
|
|
3656
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3657
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
3658
|
+
currencySymbol = availableCurrency;
|
|
3659
|
+
}
|
|
3660
|
+
});
|
|
3661
|
+
}
|
|
3662
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
3663
|
+
finalPrice.includes('.') &&
|
|
3664
|
+
finalPrice.includes(currencySymbol)
|
|
3665
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3666
|
+
: ['', ''];
|
|
3667
|
+
var priceCommonProps = {
|
|
3668
|
+
size: ComponentSize.Small,
|
|
3669
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
3670
|
+
weight: 700,
|
|
3671
|
+
};
|
|
3672
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ style: { marginRight: '10px' }, size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3673
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3674
|
+
var finalPriceString = finalPriceArray[0]
|
|
3675
|
+
? finalPriceArray[0]
|
|
3676
|
+
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3677
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3678
|
+
};
|
|
3679
|
+
var templateObject_1$25;
|
|
3680
|
+
|
|
3681
|
+
var ClubGradient$1 = "linear-gradient(90deg, #882a2b 0%, #f27c65 226.92%)";
|
|
3682
|
+
newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"])));
|
|
3683
|
+
newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"], ["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"])), ClubGradient$1);
|
|
3684
|
+
var templateObject_1$24, templateObject_2$1s;
|
|
3685
|
+
|
|
3686
|
+
var Container$1g = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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) {
|
|
3687
|
+
var height = _a.height;
|
|
3688
|
+
return (height ? height : '1.5em');
|
|
3689
|
+
}, function (_a) {
|
|
3690
|
+
var width = _a.width;
|
|
3691
|
+
return (width ? width : '100%');
|
|
3692
|
+
}, function (_a) {
|
|
3693
|
+
var theme = _a.theme;
|
|
3694
|
+
return theme.colors.background.disabled;
|
|
3695
|
+
}, function (_a) {
|
|
3696
|
+
var theme = _a.theme;
|
|
3697
|
+
return theme.radius.regular;
|
|
3698
|
+
}, function (_a) {
|
|
3699
|
+
var theme = _a.theme;
|
|
3700
|
+
return theme.colors.shades['10'].color;
|
|
3701
|
+
}, function (_a) {
|
|
3702
|
+
var theme = _a.theme;
|
|
3703
|
+
return theme.colors.background.disabled;
|
|
3704
|
+
}, function (_a) {
|
|
3705
|
+
var theme = _a.theme;
|
|
3706
|
+
return theme.colors.shades['10'].color;
|
|
3707
|
+
});
|
|
3708
|
+
var SkeletonBox = function (_a) {
|
|
3709
|
+
var width = _a.width, height = _a.height;
|
|
3710
|
+
var theme = useTheme();
|
|
3711
|
+
return jsx$1(Container$1g, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3712
|
+
};
|
|
3713
|
+
var templateObject_1$23;
|
|
3714
|
+
|
|
3715
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$22 || (templateObject_1$22 = __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) {
|
|
3716
|
+
var width = _a.width;
|
|
3717
|
+
return width;
|
|
3718
|
+
}, function (_a) {
|
|
3719
|
+
var height = _a.height;
|
|
3720
|
+
return height;
|
|
3721
|
+
}, function (_a) {
|
|
3722
|
+
var fill = _a.fill;
|
|
3723
|
+
return fill;
|
|
3724
|
+
}, function (_a) {
|
|
3725
|
+
var backgroundColor = _a.backgroundColor;
|
|
3726
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3727
|
+
}, function (_a) {
|
|
3728
|
+
var opacity = _a.opacity;
|
|
3729
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3730
|
+
});
|
|
3731
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3732
|
+
var width = _a.width;
|
|
3733
|
+
return width;
|
|
3734
|
+
}, function (_a) {
|
|
3735
|
+
var height = _a.height;
|
|
3736
|
+
return height;
|
|
3737
|
+
}, function (_a) {
|
|
3738
|
+
var backgroundColor = _a.backgroundColor;
|
|
3739
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3740
|
+
}, function (_a) {
|
|
3741
|
+
var opacity = _a.opacity;
|
|
3742
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3743
|
+
});
|
|
3744
|
+
var templateObject_1$22, templateObject_2$1r;
|
|
3745
|
+
|
|
3746
|
+
/* eslint-disable no-undef */
|
|
3747
|
+
var cache = new Map();
|
|
3748
|
+
var fetching = new Map();
|
|
3749
|
+
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3750
|
+
if (cache.has(request)) {
|
|
3751
|
+
return cache.get(request);
|
|
3752
|
+
}
|
|
3753
|
+
if (fetching.has(request)) {
|
|
3754
|
+
return fetching.get(request);
|
|
3755
|
+
}
|
|
3756
|
+
var fetchPromise = fetch(request)
|
|
3757
|
+
.then(function (response) {
|
|
3758
|
+
if (response.status !== 200) {
|
|
3759
|
+
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3760
|
+
}
|
|
3761
|
+
return response;
|
|
3762
|
+
})
|
|
3763
|
+
.then(saveToCacheFn)
|
|
3764
|
+
.then(function (data) {
|
|
3765
|
+
cache.set(request, data);
|
|
3766
|
+
fetching.delete(request);
|
|
3767
|
+
return data;
|
|
3768
|
+
})
|
|
3769
|
+
.catch(function (error) {
|
|
3770
|
+
fetching.delete(request);
|
|
3771
|
+
throw error;
|
|
3772
|
+
});
|
|
3773
|
+
fetching.set(request, fetchPromise);
|
|
3774
|
+
return fetchPromise;
|
|
3775
|
+
};
|
|
3776
|
+
|
|
3777
|
+
var createIconImage = function (_a) {
|
|
3778
|
+
var src = _a.src;
|
|
3779
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
3780
|
+
var localUrl, error_1;
|
|
3781
|
+
return __generator(this, function (_b) {
|
|
3782
|
+
switch (_b.label) {
|
|
3783
|
+
case 0:
|
|
3784
|
+
_b.trys.push([0, 2, , 3]);
|
|
3785
|
+
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3786
|
+
var blob;
|
|
3787
|
+
return __generator(this, function (_a) {
|
|
3788
|
+
switch (_a.label) {
|
|
3789
|
+
case 0: return [4 /*yield*/, response.blob()];
|
|
3790
|
+
case 1:
|
|
3791
|
+
blob = _a.sent();
|
|
3792
|
+
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3793
|
+
}
|
|
3794
|
+
});
|
|
3795
|
+
}); })];
|
|
3796
|
+
case 1:
|
|
3797
|
+
localUrl = _b.sent();
|
|
3798
|
+
return [2 /*return*/, {
|
|
3799
|
+
src: localUrl,
|
|
3800
|
+
}];
|
|
3801
|
+
case 2:
|
|
3802
|
+
error_1 = _b.sent();
|
|
3803
|
+
console.warn(error_1);
|
|
3804
|
+
return [2 /*return*/, undefined];
|
|
3805
|
+
case 3: return [2 /*return*/];
|
|
3806
|
+
}
|
|
3807
|
+
});
|
|
3808
|
+
});
|
|
3809
|
+
};
|
|
3810
|
+
|
|
3811
|
+
var getIconDimension = function (dimension) {
|
|
3812
|
+
if (!dimension)
|
|
3813
|
+
return '100%';
|
|
3814
|
+
if (String(dimension).includes('px') ||
|
|
3815
|
+
String(dimension).includes('%') ||
|
|
3816
|
+
String(dimension).includes('rem')) {
|
|
3817
|
+
return dimension;
|
|
3818
|
+
}
|
|
3819
|
+
return "".concat(dimension, "rem");
|
|
3820
|
+
};
|
|
3821
|
+
|
|
3822
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3823
|
+
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"]);
|
|
3824
|
+
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3825
|
+
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3826
|
+
useEffect(function () {
|
|
3827
|
+
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3828
|
+
var localSource;
|
|
3829
|
+
return __generator(this, function (_a) {
|
|
3830
|
+
switch (_a.label) {
|
|
3831
|
+
case 0: return [4 /*yield*/, createIconImage({
|
|
3832
|
+
src: iconURL,
|
|
3833
|
+
})];
|
|
3834
|
+
case 1:
|
|
3835
|
+
localSource = _a.sent();
|
|
3836
|
+
if (localSource) {
|
|
3837
|
+
setLocalSource(localSource);
|
|
3838
|
+
return [2 /*return*/];
|
|
3839
|
+
}
|
|
3840
|
+
setError(true);
|
|
3841
|
+
return [2 /*return*/];
|
|
3842
|
+
}
|
|
3843
|
+
});
|
|
3844
|
+
}); };
|
|
3845
|
+
if (!localSource) {
|
|
3846
|
+
fetchIcon();
|
|
3847
|
+
}
|
|
3848
|
+
}, [iconURL]);
|
|
3849
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3850
|
+
if (error) {
|
|
3851
|
+
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3852
|
+
}
|
|
3853
|
+
if (!localSource) {
|
|
3854
|
+
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3855
|
+
}
|
|
3856
|
+
if (!fill && !svgProps) {
|
|
3857
|
+
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3858
|
+
}
|
|
3859
|
+
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", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3860
|
+
};
|
|
3861
|
+
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3862
|
+
|
|
3863
|
+
/* eslint-disable react/forbid-component-props */
|
|
3864
|
+
var UnmemoIcon = function (_a) {
|
|
3865
|
+
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"]);
|
|
3866
|
+
var assets = useTheme().assets;
|
|
3867
|
+
var newWidth = width && getIconDimension(width);
|
|
3868
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3869
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3870
|
+
var svgSplit = name.split('/');
|
|
3871
|
+
var svgId = svgSplit[svgSplit.length - 1];
|
|
3872
|
+
if (assets.isSameOriginIcons) {
|
|
3873
|
+
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", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3874
|
+
}
|
|
3875
|
+
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));
|
|
3876
|
+
};
|
|
3877
|
+
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3890
3878
|
|
|
3891
|
-
var
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, 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, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3895
|
-
var theme = useTheme();
|
|
3896
|
-
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3897
|
-
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3898
|
-
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3899
|
-
var currencySymbol = '$';
|
|
3900
|
-
if (typeof finalPrice === 'string') {
|
|
3901
|
-
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3902
|
-
if (finalPrice.includes(availableCurrency)) {
|
|
3903
|
-
currencySymbol = availableCurrency;
|
|
3904
|
-
}
|
|
3905
|
-
});
|
|
3879
|
+
var getValidSize = function (size) {
|
|
3880
|
+
if (!size) {
|
|
3881
|
+
return 'auto';
|
|
3906
3882
|
}
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3883
|
+
if (typeof size === 'number') {
|
|
3884
|
+
return String(size);
|
|
3885
|
+
}
|
|
3886
|
+
if (size.endsWith('px')) {
|
|
3887
|
+
return size.replace('px', '');
|
|
3888
|
+
}
|
|
3889
|
+
if (Number(size))
|
|
3890
|
+
return String(Number(size));
|
|
3891
|
+
return 'auto';
|
|
3892
|
+
};
|
|
3893
|
+
|
|
3894
|
+
var DEFAULT_QUALITY = 100;
|
|
3895
|
+
var buildImageUrl = function (_a) {
|
|
3896
|
+
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3897
|
+
try {
|
|
3898
|
+
new URL(src);
|
|
3899
|
+
var baseUrl = new URL(src);
|
|
3900
|
+
if (!baseUrl.host) {
|
|
3901
|
+
return src;
|
|
3902
|
+
}
|
|
3903
|
+
if (cdn.includes(baseUrl.host)) {
|
|
3904
|
+
return src;
|
|
3905
|
+
}
|
|
3906
|
+
var url = encodeURIComponent(src);
|
|
3907
|
+
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3908
|
+
var width = getValidSize(widthString);
|
|
3909
|
+
var height = getValidSize(heightString);
|
|
3910
|
+
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3911
|
+
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3912
|
+
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3913
|
+
}
|
|
3914
|
+
catch (e) {
|
|
3915
|
+
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3916
|
+
return src;
|
|
3917
|
+
}
|
|
3918
|
+
};
|
|
3919
|
+
|
|
3920
|
+
var Img = newStyled.img(templateObject_1$21 || (templateObject_1$21 = __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; });
|
|
3921
|
+
var Image$3 = function (_a) {
|
|
3922
|
+
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, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3923
|
+
var config = useTheme().config;
|
|
3924
|
+
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3925
|
+
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3926
|
+
: src;
|
|
3927
|
+
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3923
3928
|
};
|
|
3924
3929
|
var templateObject_1$21;
|
|
3925
3930
|
|
|
3931
|
+
var LabelWrapper = newStyled.label(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3932
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3933
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3934
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17;
|
|
3935
|
+
|
|
3936
|
+
var ToggleComponent = function (_a) {
|
|
3937
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
3938
|
+
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
3939
|
+
var handleChange = function (e) {
|
|
3940
|
+
setChecked(function (value) { return !value; });
|
|
3941
|
+
onToggle(e.target.checked);
|
|
3942
|
+
};
|
|
3943
|
+
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper$1, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
3944
|
+
};
|
|
3945
|
+
|
|
3926
3946
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3927
3947
|
|
|
3928
3948
|
var Camera = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/camera" }), void 0); };
|
|
@@ -4745,13 +4765,13 @@ function jsxs(type, props, key) {
|
|
|
4745
4765
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4746
4766
|
// `variants` styles that are consistent through all themes.
|
|
4747
4767
|
var TAGS = {
|
|
4748
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4749
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4750
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4768
|
+
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4769
|
+
hero2: newStyled.h2(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject([""], [""]))),
|
|
4770
|
+
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4751
4771
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4752
4772
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4753
|
-
display3: newStyled.h3(templateObject_6$
|
|
4754
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4773
|
+
display3: newStyled.h3(templateObject_6$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
4774
|
+
heading1: newStyled.h1(templateObject_7$q || (templateObject_7$q = __makeTemplateObject([""], [""]))),
|
|
4755
4775
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
4756
4776
|
heading3: newStyled.h3(templateObject_9$b || (templateObject_9$b = __makeTemplateObject([""], [""]))),
|
|
4757
4777
|
heading4: newStyled.h4(templateObject_10$a || (templateObject_10$a = __makeTemplateObject([""], [""]))),
|
|
@@ -4881,14 +4901,14 @@ var DEFAULTS = {
|
|
|
4881
4901
|
size: 'regular',
|
|
4882
4902
|
},
|
|
4883
4903
|
};
|
|
4884
|
-
var templateObject_1$
|
|
4904
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$U, templateObject_5$F, templateObject_6$A, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4885
4905
|
|
|
4886
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4887
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4888
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4906
|
+
var Container$1f = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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"])));
|
|
4907
|
+
var Card$4 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
4908
|
+
var Tag$2 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
4889
4909
|
var Label$6 = newStyled.div(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
4890
4910
|
var Check$1 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4891
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4911
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$z || (templateObject_6$z = __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"])));
|
|
4892
4912
|
var PackSelectorV2 = function (_a) {
|
|
4893
4913
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4894
4914
|
return (jsx$1(Container$1f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4913,27 +4933,27 @@ var PackCard$1 = function (_a) {
|
|
|
4913
4933
|
currency: currencyCode || 'USD',
|
|
4914
4934
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4915
4935
|
};
|
|
4916
|
-
var templateObject_1$
|
|
4936
|
+
var templateObject_1$1_, templateObject_2$1o, templateObject_3$15, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4917
4937
|
|
|
4918
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4919
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4938
|
+
var Container$1e = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4939
|
+
var DropContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4920
4940
|
var DropList = function (_a) {
|
|
4921
4941
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4922
4942
|
return (jsx$1(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4923
4943
|
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));
|
|
4924
4944
|
}) }, void 0));
|
|
4925
4945
|
};
|
|
4926
|
-
var templateObject_1$
|
|
4946
|
+
var templateObject_1$1Z, templateObject_2$1n;
|
|
4927
4947
|
|
|
4928
4948
|
var DROPS_TOTAL = 5;
|
|
4929
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4930
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4931
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4949
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4950
|
+
var Title$b = newStyled.p(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
4951
|
+
var Description$3 = newStyled.p(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
4932
4952
|
var AbsorbencyLevel = function (_a) {
|
|
4933
4953
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4934
4954
|
return (jsxs$1(Container$1d, { children: [jsx$1(Title$b, { 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));
|
|
4935
4955
|
};
|
|
4936
|
-
var templateObject_1$
|
|
4956
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$14;
|
|
4937
4957
|
|
|
4938
4958
|
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(`
|
|
4939
4959
|
`),"","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(`
|
|
@@ -5009,7 +5029,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5009
5029
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5010
5030
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5011
5031
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5012
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5032
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
5013
5033
|
var Accordion$1 = function (_a) {
|
|
5014
5034
|
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;
|
|
5015
5035
|
var theme = useTheme();
|
|
@@ -5033,9 +5053,9 @@ var Accordion$1 = function (_a) {
|
|
|
5033
5053
|
} }, { 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$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5034
5054
|
} }), void 0));
|
|
5035
5055
|
};
|
|
5036
|
-
var templateObject_1$
|
|
5056
|
+
var templateObject_1$1X;
|
|
5037
5057
|
|
|
5038
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5058
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5039
5059
|
var AccordionOptions = function (_a) {
|
|
5040
5060
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5041
5061
|
var _b = useState({
|
|
@@ -5059,7 +5079,7 @@ var AccordionOptions = function (_a) {
|
|
|
5059
5079
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5060
5080
|
}) }, void 0));
|
|
5061
5081
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$1W;
|
|
5063
5083
|
|
|
5064
5084
|
/**
|
|
5065
5085
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5195,22 +5215,22 @@ var isValidDate = function (value) {
|
|
|
5195
5215
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5196
5216
|
};
|
|
5197
5217
|
|
|
5198
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5199
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5200
|
-
var templateObject_1$
|
|
5218
|
+
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5219
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5220
|
+
var templateObject_1$1V, templateObject_2$1l;
|
|
5201
5221
|
|
|
5202
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5222
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5203
5223
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5204
5224
|
return width;
|
|
5205
5225
|
}, function (_a) {
|
|
5206
5226
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5207
5227
|
return height;
|
|
5208
5228
|
});
|
|
5209
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5210
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5229
|
+
var FlexCentered = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5230
|
+
var LeftSide = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5211
5231
|
var RightSide = newStyled.div(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5212
5232
|
var FlexStart = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5213
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1U, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$D;
|
|
5214
5234
|
|
|
5215
5235
|
var CouponCard = function (_a) {
|
|
5216
5236
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5266,14 +5286,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5266
5286
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5267
5287
|
};
|
|
5268
5288
|
|
|
5269
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5270
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5289
|
+
var ErrorText = newStyled.h3(templateObject_1$1T || (templateObject_1$1T = __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; });
|
|
5290
|
+
var ErrorContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
5271
5291
|
var Error$1 = function (_a) {
|
|
5272
5292
|
var error = _a.error;
|
|
5273
5293
|
var theme = useTheme();
|
|
5274
5294
|
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));
|
|
5275
5295
|
};
|
|
5276
|
-
var templateObject_1$
|
|
5296
|
+
var templateObject_1$1T, templateObject_2$1j;
|
|
5277
5297
|
|
|
5278
5298
|
var BaseSelectButton = function (_a) {
|
|
5279
5299
|
var children = _a.children, as = _a.as;
|
|
@@ -5290,7 +5310,7 @@ function BaseSelectOption(_a) {
|
|
|
5290
5310
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5291
5311
|
}
|
|
5292
5312
|
|
|
5293
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5313
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5294
5314
|
function BaseSelect(_a) {
|
|
5295
5315
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5296
5316
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5300,7 +5320,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5300
5320
|
Options: BaseSelectOptions,
|
|
5301
5321
|
Option: BaseSelectOption,
|
|
5302
5322
|
});
|
|
5303
|
-
var templateObject_1$
|
|
5323
|
+
var templateObject_1$1S;
|
|
5304
5324
|
|
|
5305
5325
|
var CustomButton = newStyled.button(function (_a) {
|
|
5306
5326
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5339,7 +5359,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5339
5359
|
});
|
|
5340
5360
|
});
|
|
5341
5361
|
// TODO Remove this when we find the real solution
|
|
5342
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5362
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5343
5363
|
var open = _a.open;
|
|
5344
5364
|
return open &&
|
|
5345
5365
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5359,7 +5379,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5359
5379
|
} }), void 0));
|
|
5360
5380
|
};
|
|
5361
5381
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5362
|
-
var templateObject_1$
|
|
5382
|
+
var templateObject_1$1R;
|
|
5363
5383
|
|
|
5364
5384
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5365
5385
|
var theme = _a.theme;
|
|
@@ -5526,7 +5546,7 @@ var CustomCheckboxStyles = {
|
|
|
5526
5546
|
},
|
|
5527
5547
|
};
|
|
5528
5548
|
|
|
5529
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5549
|
+
var Container$1a = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
5530
5550
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5531
5551
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5532
5552
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5537,7 +5557,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5537
5557
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5538
5558
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5539
5559
|
]; });
|
|
5540
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5560
|
+
var Input$5 = newStyled.input(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5541
5561
|
var disabled = _a.disabled;
|
|
5542
5562
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5543
5563
|
});
|
|
@@ -5553,7 +5573,7 @@ var Checkbox = function (_a) {
|
|
|
5553
5573
|
};
|
|
5554
5574
|
return (jsxs$1(Container$1a, { 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$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5555
5575
|
};
|
|
5556
|
-
var templateObject_1$
|
|
5576
|
+
var templateObject_1$1Q, templateObject_2$1i;
|
|
5557
5577
|
|
|
5558
5578
|
var CustomOption = newStyled.li(function (_a) {
|
|
5559
5579
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5602,9 +5622,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5602
5622
|
Option: BaseDropdownOption,
|
|
5603
5623
|
});
|
|
5604
5624
|
|
|
5605
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5606
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5607
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5625
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5626
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
5627
|
+
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5608
5628
|
var fontWeight = _a.fontWeight;
|
|
5609
5629
|
return fontWeight || '';
|
|
5610
5630
|
});
|
|
@@ -5639,7 +5659,7 @@ function SimpleDropdown(_a) {
|
|
|
5639
5659
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : Fragment$1;
|
|
5640
5660
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5641
5661
|
}
|
|
5642
|
-
var templateObject_1$
|
|
5662
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12;
|
|
5643
5663
|
|
|
5644
5664
|
/* base styles & size variants */
|
|
5645
5665
|
var CustomRadioStyles$2 = {
|
|
@@ -5704,9 +5724,9 @@ var ContainerStyles$2 = {
|
|
|
5704
5724
|
},
|
|
5705
5725
|
};
|
|
5706
5726
|
|
|
5707
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5727
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5708
5728
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5709
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5729
|
+
var Input$4 = newStyled.input(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
5710
5730
|
var disabled = _a.disabled;
|
|
5711
5731
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5712
5732
|
});
|
|
@@ -5714,7 +5734,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5714
5734
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5715
5735
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5716
5736
|
]; });
|
|
5717
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$
|
|
5737
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5718
5738
|
var theme = _a.theme;
|
|
5719
5739
|
return theme.component.radio.textSize;
|
|
5720
5740
|
}, function (_a) {
|
|
@@ -5737,7 +5757,7 @@ var RadioInput = function (_a) {
|
|
|
5737
5757
|
};
|
|
5738
5758
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$18, __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), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), 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));
|
|
5739
5759
|
};
|
|
5740
|
-
var templateObject_1$
|
|
5760
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$R;
|
|
5741
5761
|
|
|
5742
5762
|
var useOnClickOutside = function (ref, handler) {
|
|
5743
5763
|
useEffect(function () {
|
|
@@ -5830,7 +5850,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5830
5850
|
}
|
|
5831
5851
|
};
|
|
5832
5852
|
|
|
5833
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5853
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5834
5854
|
var position = _a.position;
|
|
5835
5855
|
return getWrapperFlexDirection(position);
|
|
5836
5856
|
}, function (_a) {
|
|
@@ -5840,7 +5860,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __ma
|
|
|
5840
5860
|
var disableHover = _a.disableHover;
|
|
5841
5861
|
return (disableHover ? 0 : 1);
|
|
5842
5862
|
});
|
|
5843
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5863
|
+
var TooltipContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5844
5864
|
var position = _a.position;
|
|
5845
5865
|
return getContainerFlexDirection(position);
|
|
5846
5866
|
}, function (_a) {
|
|
@@ -5868,7 +5888,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g
|
|
|
5868
5888
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5869
5889
|
return actual === expected ? margin : '0';
|
|
5870
5890
|
};
|
|
5871
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5891
|
+
var ContentWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5872
5892
|
var borderColor = _a.borderColor;
|
|
5873
5893
|
return borderColor;
|
|
5874
5894
|
}, function (_a) {
|
|
@@ -5886,16 +5906,16 @@ var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __ma
|
|
|
5886
5906
|
return color;
|
|
5887
5907
|
});
|
|
5888
5908
|
var TopSection = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5889
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5909
|
+
var Title$a = newStyled.h1(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5890
5910
|
var color = _a.color;
|
|
5891
5911
|
return color;
|
|
5892
5912
|
});
|
|
5893
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5913
|
+
var IconContainer$5 = newStyled.div(templateObject_7$p || (templateObject_7$p = __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"])));
|
|
5894
5914
|
var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5895
5915
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5896
5916
|
return right;
|
|
5897
5917
|
});
|
|
5898
|
-
var templateObject_1$
|
|
5918
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j;
|
|
5899
5919
|
|
|
5900
5920
|
var Tooltip = function (_a) {
|
|
5901
5921
|
var _b;
|
|
@@ -5938,8 +5958,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5938
5958
|
};
|
|
5939
5959
|
};
|
|
5940
5960
|
|
|
5941
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5942
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5961
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5962
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
5943
5963
|
var selected = _a.selected, theme = _a.theme;
|
|
5944
5964
|
return selected
|
|
5945
5965
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5953,7 +5973,7 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5953
5973
|
var theme = _a.theme;
|
|
5954
5974
|
return theme.colors.pallete.primary.color;
|
|
5955
5975
|
});
|
|
5956
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
5976
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5957
5977
|
var onClick = _a.onClick;
|
|
5958
5978
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5959
5979
|
});
|
|
@@ -5965,8 +5985,8 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_5$B || (templateObject_5
|
|
|
5965
5985
|
var theme = _a.theme;
|
|
5966
5986
|
return theme.colors.pallete.primary.color;
|
|
5967
5987
|
});
|
|
5968
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5969
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5988
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5989
|
+
var Benefit$2 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5970
5990
|
var BenefitText$2 = newStyled(Text$7)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5971
5991
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5972
5992
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -5976,7 +5996,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5976
5996
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5977
5997
|
});
|
|
5978
5998
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5979
|
-
var templateObject_1$
|
|
5999
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x, templateObject_7$o, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
5980
6000
|
|
|
5981
6001
|
var radioIds$2 = {
|
|
5982
6002
|
oneTime: {
|
|
@@ -6031,12 +6051,12 @@ var Autoship = function (_a) {
|
|
|
6031
6051
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __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", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { 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));
|
|
6032
6052
|
};
|
|
6033
6053
|
|
|
6034
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6054
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6035
6055
|
var theme = _a.theme;
|
|
6036
6056
|
return theme.name === 'TheSpaDr' &&
|
|
6037
6057
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6038
6058
|
});
|
|
6039
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6059
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6040
6060
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6041
6061
|
return isSelected
|
|
6042
6062
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6052,7 +6072,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6052
6072
|
}
|
|
6053
6073
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6054
6074
|
};
|
|
6055
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6075
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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) {
|
|
6056
6076
|
var selected = _a.selected, theme = _a.theme;
|
|
6057
6077
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6058
6078
|
}, function (_a) {
|
|
@@ -6069,14 +6089,14 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$O ||
|
|
|
6069
6089
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6070
6090
|
});
|
|
6071
6091
|
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6072
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6092
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6073
6093
|
var theme = _a.theme;
|
|
6074
6094
|
return theme.colors.shades[200].color;
|
|
6075
6095
|
}, function (_a) {
|
|
6076
6096
|
var theme = _a.theme;
|
|
6077
6097
|
return theme.colors.pallete.primary.color;
|
|
6078
6098
|
});
|
|
6079
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6099
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6080
6100
|
var Benefit$1 = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6081
6101
|
var BenefitText$1 = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6082
6102
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6089,7 +6109,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6089
6109
|
var theme = _a.theme;
|
|
6090
6110
|
return theme.component.autoship.tooltip.margin;
|
|
6091
6111
|
});
|
|
6092
|
-
var templateObject_1$
|
|
6112
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$O, templateObject_5$A, templateObject_6$w, templateObject_7$n, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6093
6113
|
|
|
6094
6114
|
var radioIds$1 = {
|
|
6095
6115
|
oneTime: {
|
|
@@ -6167,13 +6187,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6167
6187
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6168
6188
|
_a$2);
|
|
6169
6189
|
|
|
6170
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6171
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6172
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6190
|
+
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6191
|
+
var CustomerInfo = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
6192
|
+
var Name = newStyled.h4(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6173
6193
|
var StarIconContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6174
6194
|
var Description$2 = newStyled.p(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
6175
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6176
|
-
var templateObject_1$
|
|
6195
|
+
var ReviewDays = newStyled.span(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
6196
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6177
6197
|
|
|
6178
6198
|
var NameWithStars = function (_a) {
|
|
6179
6199
|
var name = _a.name, size = _a.size;
|
|
@@ -6191,9 +6211,9 @@ var ResultFeedback = function (_a) {
|
|
|
6191
6211
|
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));
|
|
6192
6212
|
};
|
|
6193
6213
|
|
|
6194
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6195
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6196
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6214
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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; });
|
|
6215
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6216
|
+
var ImageCard = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6197
6217
|
var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __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) {
|
|
6198
6218
|
var theme = _a.theme;
|
|
6199
6219
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6204,7 +6224,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6204
6224
|
var theme = _a.theme, size = _a.size;
|
|
6205
6225
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6206
6226
|
});
|
|
6207
|
-
var templateObject_1$
|
|
6227
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6208
6228
|
|
|
6209
6229
|
/* base styles & size variants */
|
|
6210
6230
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6282,7 +6302,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6282
6302
|
return (jsxs$1(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __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));
|
|
6283
6303
|
};
|
|
6284
6304
|
|
|
6285
|
-
var Section = newStyled.div(templateObject_1$
|
|
6305
|
+
var Section = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
6286
6306
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6287
6307
|
});
|
|
6288
6308
|
var CardHeader = function (_a) {
|
|
@@ -6293,16 +6313,16 @@ var CardFooter = function (_a) {
|
|
|
6293
6313
|
var children = _a.children;
|
|
6294
6314
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6295
6315
|
};
|
|
6296
|
-
var templateObject_1$
|
|
6316
|
+
var templateObject_1$1I;
|
|
6297
6317
|
|
|
6298
|
-
var Body = newStyled.div(templateObject_1$
|
|
6318
|
+
var Body = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6299
6319
|
var CardBody$1 = function (_a) {
|
|
6300
6320
|
var children = _a.children;
|
|
6301
6321
|
return jsx$1(Body, { children: children }, void 0);
|
|
6302
6322
|
};
|
|
6303
|
-
var templateObject_1$
|
|
6323
|
+
var templateObject_1$1H;
|
|
6304
6324
|
|
|
6305
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6325
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
6306
6326
|
var flex = _a.flex;
|
|
6307
6327
|
return flex &&
|
|
6308
6328
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6324,16 +6344,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6324
6344
|
Footer: CardFooter,
|
|
6325
6345
|
Body: CardBody$1,
|
|
6326
6346
|
});
|
|
6327
|
-
var templateObject_1$
|
|
6347
|
+
var templateObject_1$1G;
|
|
6328
6348
|
|
|
6329
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6330
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6331
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6349
|
+
var StyledWrapper = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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"])));
|
|
6350
|
+
var StyledContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
6351
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$X || (templateObject_3$X = __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) {
|
|
6332
6352
|
var color = _a.color;
|
|
6333
6353
|
return color;
|
|
6334
6354
|
});
|
|
6335
6355
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6336
|
-
var templateObject_1$
|
|
6356
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$L;
|
|
6337
6357
|
|
|
6338
6358
|
var Minimalistic = function (_a) {
|
|
6339
6359
|
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;
|
|
@@ -6341,28 +6361,28 @@ var Minimalistic = function (_a) {
|
|
|
6341
6361
|
return (jsx$1(Card$3, __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$1, { 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));
|
|
6342
6362
|
};
|
|
6343
6363
|
|
|
6344
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6345
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6346
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6364
|
+
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6365
|
+
var Title$9 = newStyled.h1(templateObject_2$19 || (templateObject_2$19 = __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; });
|
|
6366
|
+
var Details$1 = newStyled.span(templateObject_3$W || (templateObject_3$W = __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; });
|
|
6347
6367
|
var PriceContainer$2 = newStyled.span(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6348
6368
|
var Simple = function (_a) {
|
|
6349
6369
|
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;
|
|
6350
6370
|
var theme = useTheme();
|
|
6351
6371
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$13, { children: [jsx$1(Title$9, __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$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6352
6372
|
};
|
|
6353
|
-
var templateObject_1$
|
|
6373
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W, templateObject_4$K;
|
|
6354
6374
|
|
|
6355
6375
|
var Bundle = {
|
|
6356
6376
|
Minimalistic: Minimalistic,
|
|
6357
6377
|
Simple: Simple,
|
|
6358
6378
|
};
|
|
6359
6379
|
|
|
6360
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6380
|
+
var Container$12 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
6361
6381
|
var displayBNPL = _a.displayBNPL;
|
|
6362
6382
|
return (displayBNPL ? 'flex' : 'none');
|
|
6363
6383
|
});
|
|
6364
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6365
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6384
|
+
var TextContainer$1 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6385
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6366
6386
|
var BuyNowPayLater = function (_a) {
|
|
6367
6387
|
var _b;
|
|
6368
6388
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6374,41 +6394,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6374
6394
|
}
|
|
6375
6395
|
return (jsx$1(Container$12, __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$7, __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));
|
|
6376
6396
|
};
|
|
6377
|
-
var templateObject_1$
|
|
6397
|
+
var templateObject_1$1D, templateObject_2$18, templateObject_3$V;
|
|
6378
6398
|
|
|
6379
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6399
|
+
var Text$6 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6380
6400
|
var Title$8 = function (_a) {
|
|
6381
6401
|
var title = _a.title;
|
|
6382
6402
|
var theme = useTheme();
|
|
6383
6403
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6384
6404
|
};
|
|
6385
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1C;
|
|
6386
6406
|
|
|
6387
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6407
|
+
var P$3 = newStyled.p(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
6388
6408
|
var Promo = function (_a) {
|
|
6389
6409
|
var text = _a.text;
|
|
6390
6410
|
var theme = useTheme();
|
|
6391
6411
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6392
6412
|
};
|
|
6393
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1B;
|
|
6394
6414
|
|
|
6395
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6415
|
+
var Text$5 = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __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; });
|
|
6396
6416
|
var Description$1 = function (_a) {
|
|
6397
6417
|
var text = _a.text;
|
|
6398
6418
|
var theme = useTheme();
|
|
6399
6419
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6400
6420
|
};
|
|
6401
|
-
var templateObject_1$
|
|
6421
|
+
var templateObject_1$1A;
|
|
6402
6422
|
|
|
6403
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6423
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"); });
|
|
6404
6424
|
var CloseButton$1 = function (_a) {
|
|
6405
6425
|
var onClick = _a.onClick, size = _a.size;
|
|
6406
6426
|
var theme = useTheme();
|
|
6407
6427
|
return (jsx$1(Container$11, __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));
|
|
6408
6428
|
};
|
|
6409
|
-
var templateObject_1$
|
|
6429
|
+
var templateObject_1$1z;
|
|
6410
6430
|
|
|
6411
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6431
|
+
var Text$4 = newStyled.h3(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
6412
6432
|
var backgroundColor = _a.backgroundColor;
|
|
6413
6433
|
return backgroundColor;
|
|
6414
6434
|
}, function (_a) {
|
|
@@ -6423,7 +6443,7 @@ var OfferBanner = function (_a) {
|
|
|
6423
6443
|
var theme = useTheme();
|
|
6424
6444
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6425
6445
|
};
|
|
6426
|
-
var templateObject_1$
|
|
6446
|
+
var templateObject_1$1y;
|
|
6427
6447
|
|
|
6428
6448
|
var CartProductItem = {
|
|
6429
6449
|
Title: Title$8,
|
|
@@ -6433,20 +6453,20 @@ var CartProductItem = {
|
|
|
6433
6453
|
CloseButton: CloseButton$1,
|
|
6434
6454
|
};
|
|
6435
6455
|
|
|
6436
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6437
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6438
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6456
|
+
var Container$10 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6457
|
+
var MobileContainer = newStyled(Container$10)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6458
|
+
var DollarPart = newStyled.span(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
6439
6459
|
var ClubMembersText = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
6440
6460
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6441
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6442
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6461
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6462
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6443
6463
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6444
6464
|
var ClubPriceLabel = function (_a) {
|
|
6445
6465
|
var clubPrice = _a.clubPrice;
|
|
6446
6466
|
var isMobile = useWindowDimensions().isMobile;
|
|
6447
6467
|
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$10, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6448
6468
|
};
|
|
6449
|
-
var templateObject_1$
|
|
6469
|
+
var templateObject_1$1x, templateObject_2$17, templateObject_3$U, templateObject_4$J, templateObject_5$y, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6450
6470
|
|
|
6451
6471
|
var Spacing = function (_a) {
|
|
6452
6472
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6454,9 +6474,9 @@ var Spacing = function (_a) {
|
|
|
6454
6474
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6455
6475
|
};
|
|
6456
6476
|
|
|
6457
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6458
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6459
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6477
|
+
var Container$$ = newStyled('div')(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
6478
|
+
var Content$2 = newStyled('div')(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6479
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6460
6480
|
var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __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) {
|
|
6461
6481
|
var index = _a.index;
|
|
6462
6482
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6468,11 +6488,11 @@ var StrengthBars = function (_a) {
|
|
|
6468
6488
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6469
6489
|
return (jsxs$1(Container$$, __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));
|
|
6470
6490
|
};
|
|
6471
|
-
var templateObject_1$
|
|
6491
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$I;
|
|
6472
6492
|
|
|
6473
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6474
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6475
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6493
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6494
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6495
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6476
6496
|
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6477
6497
|
var PriceWithTagContainer = newStyled.span(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6478
6498
|
var RegularPriceTag = function () {
|
|
@@ -6523,16 +6543,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6523
6543
|
: ComponentSize.XSmall;
|
|
6524
6544
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6525
6545
|
};
|
|
6526
|
-
return (jsxs$1(Container$
|
|
6546
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6527
6547
|
? finalPriceArray[0]
|
|
6528
6548
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6529
6549
|
};
|
|
6530
|
-
var templateObject_1$
|
|
6550
|
+
var templateObject_1$1v, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x;
|
|
6531
6551
|
|
|
6532
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6533
|
-
var templateObject_1$
|
|
6552
|
+
var Container$_ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6553
|
+
var templateObject_1$1u;
|
|
6534
6554
|
|
|
6535
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6555
|
+
var StarContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6536
6556
|
var marginRight = _a.marginRight;
|
|
6537
6557
|
return marginRight;
|
|
6538
6558
|
});
|
|
@@ -6548,7 +6568,7 @@ var StarList = function (_a) {
|
|
|
6548
6568
|
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)));
|
|
6549
6569
|
}) }, void 0));
|
|
6550
6570
|
};
|
|
6551
|
-
var templateObject_1$
|
|
6571
|
+
var templateObject_1$1t;
|
|
6552
6572
|
|
|
6553
6573
|
/* base styles & size variants */
|
|
6554
6574
|
var LabelStyles = {
|
|
@@ -6589,8 +6609,8 @@ var LabelStyles = {
|
|
|
6589
6609
|
});
|
|
6590
6610
|
},
|
|
6591
6611
|
};
|
|
6592
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6593
|
-
var templateObject_1$
|
|
6612
|
+
var Container$Z = newStyled.a(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6613
|
+
var templateObject_1$1s;
|
|
6594
6614
|
|
|
6595
6615
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6596
6616
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6610,7 +6630,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6610
6630
|
}),
|
|
6611
6631
|
];
|
|
6612
6632
|
});
|
|
6613
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6633
|
+
var RatingLabel = newStyled.span(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6614
6634
|
var starsNumber = 5;
|
|
6615
6635
|
var Rating = function (_a) {
|
|
6616
6636
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6633,7 +6653,7 @@ var Rating = function (_a) {
|
|
|
6633
6653
|
: {};
|
|
6634
6654
|
return (jsxs$1(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6635
6655
|
};
|
|
6636
|
-
var templateObject_1$
|
|
6656
|
+
var templateObject_1$1r;
|
|
6637
6657
|
|
|
6638
6658
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6639
6659
|
var width = _a.width, height = _a.height;
|
|
@@ -6643,9 +6663,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6643
6663
|
height: height,
|
|
6644
6664
|
});
|
|
6645
6665
|
});
|
|
6646
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6647
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6648
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6666
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
6667
|
+
var Container$Y = newStyled.a(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
6668
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6649
6669
|
var Title$7 = newStyled.p(templateObject_4$G || (templateObject_4$G = __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; });
|
|
6650
6670
|
var getStylesBySize$c = function (size) {
|
|
6651
6671
|
switch (size) {
|
|
@@ -6676,11 +6696,11 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$w || (templateObject_5$w
|
|
|
6676
6696
|
var style = _a.style;
|
|
6677
6697
|
return style.width;
|
|
6678
6698
|
});
|
|
6679
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6699
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6680
6700
|
var style = _a.style;
|
|
6681
6701
|
return style.width;
|
|
6682
6702
|
});
|
|
6683
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6703
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6684
6704
|
var ProductItemMobile = function (_a) {
|
|
6685
6705
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6686
6706
|
display: false,
|
|
@@ -6741,7 +6761,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6741
6761
|
letterSpacing: '-0.05rem',
|
|
6742
6762
|
} }), void 0)) }), 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));
|
|
6743
6763
|
};
|
|
6744
|
-
var templateObject_1$
|
|
6764
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6745
6765
|
|
|
6746
6766
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6747
6767
|
var width = _a.width, height = _a.height;
|
|
@@ -6751,9 +6771,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6751
6771
|
height: height,
|
|
6752
6772
|
});
|
|
6753
6773
|
});
|
|
6754
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6755
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6756
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6774
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
6775
|
+
var Container$X = newStyled.a(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
6776
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
6757
6777
|
var Title$6 = newStyled.p(templateObject_4$F || (templateObject_4$F = __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; });
|
|
6758
6778
|
var getStylesBySize$b = function (size) {
|
|
6759
6779
|
switch (size) {
|
|
@@ -6784,8 +6804,8 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$v || (templateObject_5$v
|
|
|
6784
6804
|
var style = _a.style;
|
|
6785
6805
|
return style.width;
|
|
6786
6806
|
});
|
|
6787
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6788
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6807
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6808
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6789
6809
|
var style = _a.style;
|
|
6790
6810
|
return style.width;
|
|
6791
6811
|
});
|
|
@@ -6840,9 +6860,9 @@ var ProductItemTK = function (_a) {
|
|
|
6840
6860
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6841
6861
|
} }, { children: title }), void 0)) : (jsx(Title$6, __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));
|
|
6842
6862
|
};
|
|
6843
|
-
var templateObject_1$
|
|
6863
|
+
var templateObject_1$1p, templateObject_2$13, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$s, templateObject_7$k, templateObject_8$f;
|
|
6844
6864
|
|
|
6845
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6865
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6846
6866
|
function withProductGrid(ProductItemComponent, data) {
|
|
6847
6867
|
function WithProductGrid(props) {
|
|
6848
6868
|
return (jsx$1(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6852,7 +6872,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6852
6872
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6853
6873
|
return WithProductGrid;
|
|
6854
6874
|
}
|
|
6855
|
-
var templateObject_1$
|
|
6875
|
+
var templateObject_1$1o;
|
|
6856
6876
|
|
|
6857
6877
|
var Collection = {
|
|
6858
6878
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6899,9 +6919,9 @@ var OutOfStock = function (_a) {
|
|
|
6899
6919
|
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));
|
|
6900
6920
|
};
|
|
6901
6921
|
|
|
6902
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6903
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6904
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6922
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6923
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6924
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
6905
6925
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6906
6926
|
var OptionsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6907
6927
|
var Label$4 = function (_a) {
|
|
@@ -6921,23 +6941,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6921
6941
|
Option: Option,
|
|
6922
6942
|
OptionsContainer: OptionsContainer,
|
|
6923
6943
|
});
|
|
6924
|
-
var templateObject_1$
|
|
6944
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6925
6945
|
|
|
6926
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6946
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
6927
6947
|
var borderColor = _a.borderColor;
|
|
6928
6948
|
return borderColor;
|
|
6929
6949
|
}, function (_a) {
|
|
6930
6950
|
var noStock = _a.noStock;
|
|
6931
6951
|
return (noStock ? '0.4' : '1');
|
|
6932
6952
|
});
|
|
6933
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6953
|
+
var Image$2 = newStyled.img(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6934
6954
|
var PatternSelector = function (_a) {
|
|
6935
6955
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6936
6956
|
var theme = useTheme();
|
|
6937
6957
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6938
6958
|
return (jsx$1(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6939
6959
|
};
|
|
6940
|
-
var templateObject_1$
|
|
6960
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6941
6961
|
|
|
6942
6962
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6943
6963
|
if (options == null || options.length === 0) {
|
|
@@ -6996,21 +7016,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6996
7016
|
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, showCross) }), void 0)] }), void 0));
|
|
6997
7017
|
};
|
|
6998
7018
|
|
|
6999
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7000
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7001
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7019
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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'); });
|
|
7020
|
+
var Col$1 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7021
|
+
var Row$2 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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) {
|
|
7002
7022
|
return props.rightToLeft &&
|
|
7003
7023
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7004
7024
|
});
|
|
7005
7025
|
var H5 = newStyled.h5(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7006
7026
|
var H3$1 = newStyled.h3(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7007
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7027
|
+
var FreeShipping = newStyled.span(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7008
7028
|
var CrossSellCheckbox = function (_a) {
|
|
7009
7029
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7010
7030
|
var theme = useTheme();
|
|
7011
7031
|
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$2, __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));
|
|
7012
7032
|
};
|
|
7013
|
-
var templateObject_1$
|
|
7033
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7014
7034
|
|
|
7015
7035
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7016
7036
|
__proto__: null,
|
|
@@ -7038,7 +7058,7 @@ var sizeMapper = (_a = {},
|
|
|
7038
7058
|
_a[ComponentSize.Large] = 'large',
|
|
7039
7059
|
_a[ComponentSize.XSmall] = 'small',
|
|
7040
7060
|
_a);
|
|
7041
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7061
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
7042
7062
|
var wide = _a.wide;
|
|
7043
7063
|
return (wide ? '100%' : 'fit-content');
|
|
7044
7064
|
}, function (_a) {
|
|
@@ -7060,11 +7080,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7060
7080
|
var theme = _a.theme;
|
|
7061
7081
|
return theme.colors.text.disabled;
|
|
7062
7082
|
});
|
|
7063
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7083
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7064
7084
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7065
7085
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7066
7086
|
});
|
|
7067
|
-
var templateObject_1$
|
|
7087
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7068
7088
|
|
|
7069
7089
|
var BaseCTA = function (_a) {
|
|
7070
7090
|
var _b, _c, _d;
|
|
@@ -7151,23 +7171,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7151
7171
|
} }), void 0));
|
|
7152
7172
|
};
|
|
7153
7173
|
|
|
7154
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7155
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7156
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7174
|
+
var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7175
|
+
var IconContainer$4 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
7176
|
+
var Text$3 = newStyled.p(templateObject_3$N || (templateObject_3$N = __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; });
|
|
7157
7177
|
var Details = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7158
7178
|
var Note = function (_a) {
|
|
7159
7179
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7160
7180
|
var theme = useTheme();
|
|
7161
7181
|
return (jsxs$1(Container$U, __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$3, __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));
|
|
7162
7182
|
};
|
|
7163
|
-
var templateObject_1$
|
|
7183
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7164
7184
|
|
|
7165
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7185
|
+
var Title$5 = newStyled.h1(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
7166
7186
|
var theme = _a.theme;
|
|
7167
7187
|
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 ");
|
|
7168
7188
|
});
|
|
7169
|
-
var Line = newStyled.div(templateObject_2$
|
|
7170
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7189
|
+
var Line = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7190
|
+
var Row$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7171
7191
|
flexDirection: ['column', 'row'],
|
|
7172
7192
|
}));
|
|
7173
7193
|
var Col = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -7182,13 +7202,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$s || (templateObject_5$s =
|
|
|
7182
7202
|
marginBottom: ['10px', '0'],
|
|
7183
7203
|
width: ['auto', '1.5rem'],
|
|
7184
7204
|
}));
|
|
7185
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7205
|
+
var SectionTitle = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7186
7206
|
display: ['block', 'flex'],
|
|
7187
7207
|
}), function (_a) {
|
|
7188
7208
|
var theme = _a.theme;
|
|
7189
7209
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7190
7210
|
});
|
|
7191
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7211
|
+
var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7192
7212
|
var theme = _a.theme;
|
|
7193
7213
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7194
7214
|
}, function (_a) {
|
|
@@ -7205,16 +7225,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7205
7225
|
var theme = useTheme();
|
|
7206
7226
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __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$1, __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));
|
|
7207
7227
|
};
|
|
7208
|
-
var templateObject_1$
|
|
7228
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7209
7229
|
|
|
7210
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7230
|
+
var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
7211
7231
|
var top = _a.top;
|
|
7212
7232
|
return top;
|
|
7213
7233
|
}, function (_a) {
|
|
7214
7234
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7215
7235
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7216
7236
|
});
|
|
7217
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7237
|
+
var Sidebar = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7218
7238
|
var height = _a.height;
|
|
7219
7239
|
return height;
|
|
7220
7240
|
}, function (_a) {
|
|
@@ -7261,20 +7281,20 @@ var Drawer = function (_a) {
|
|
|
7261
7281
|
}, [isOpen, onClose, onOpen]);
|
|
7262
7282
|
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;
|
|
7263
7283
|
};
|
|
7264
|
-
var templateObject_1$
|
|
7284
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7265
7285
|
|
|
7266
7286
|
var TooltipArrow = function (_a) {
|
|
7267
7287
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7268
7288
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7269
7289
|
};
|
|
7270
7290
|
|
|
7271
|
-
var List = newStyled.ul(templateObject_1$
|
|
7272
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7273
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7291
|
+
var List = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7292
|
+
var Item$2 = newStyled.li(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
7293
|
+
var DropdownWrapper = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7274
7294
|
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7275
7295
|
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7276
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7277
|
-
var templateObject_1$
|
|
7296
|
+
var DropdownItem = newStyled.li(templateObject_6$p || (templateObject_6$p = __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; });
|
|
7297
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7278
7298
|
|
|
7279
7299
|
var DropdownListIcons = function (_a) {
|
|
7280
7300
|
var items = _a.items;
|
|
@@ -7287,13 +7307,13 @@ var Dropdown = function (_a) {
|
|
|
7287
7307
|
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));
|
|
7288
7308
|
};
|
|
7289
7309
|
|
|
7290
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7291
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7292
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7310
|
+
var DropdownContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
7311
|
+
var DropdownLabel = newStyled.div(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
7312
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7293
7313
|
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
7294
7314
|
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
7295
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7296
|
-
var templateObject_1$
|
|
7315
|
+
var DropdownOption = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
7316
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7297
7317
|
|
|
7298
7318
|
var SizeDropdown = function (_a) {
|
|
7299
7319
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7316,9 +7336,9 @@ var SizeDropdown = function (_a) {
|
|
|
7316
7336
|
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));
|
|
7317
7337
|
};
|
|
7318
7338
|
|
|
7319
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7320
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7321
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7339
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7340
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __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; });
|
|
7341
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
7322
7342
|
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
7323
7343
|
var DropdownDialog = function (_a) {
|
|
7324
7344
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7328,7 +7348,7 @@ var DropdownDialog = function (_a) {
|
|
|
7328
7348
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7329
7349
|
}) }), void 0) }), void 0));
|
|
7330
7350
|
};
|
|
7331
|
-
var templateObject_1$
|
|
7351
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7332
7352
|
|
|
7333
7353
|
function FilteringDropdown(_a) {
|
|
7334
7354
|
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;
|
|
@@ -7361,9 +7381,9 @@ function FilteringDropdown(_a) {
|
|
|
7361
7381
|
}) }, void 0)] }), void 0));
|
|
7362
7382
|
}
|
|
7363
7383
|
|
|
7364
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7365
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7366
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7384
|
+
var Title$4 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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; });
|
|
7385
|
+
var H3 = newStyled.h3(templateObject_2$U || (templateObject_2$U = __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; });
|
|
7386
|
+
var ArrowContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7367
7387
|
var Container$T = newStyled.div(templateObject_4$x || (templateObject_4$x = __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'); });
|
|
7368
7388
|
var Accordion = function (_a) {
|
|
7369
7389
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
@@ -7371,19 +7391,19 @@ var Accordion = function (_a) {
|
|
|
7371
7391
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7372
7392
|
return (jsxs$1(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __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));
|
|
7373
7393
|
};
|
|
7374
|
-
var templateObject_1$
|
|
7394
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
7375
7395
|
|
|
7376
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7377
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7378
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7396
|
+
var SectionContent = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
7397
|
+
var Header$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
7398
|
+
var MobileHeader = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
7379
7399
|
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7380
7400
|
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7381
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7382
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7401
|
+
var FilterLink = newStyled.a(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7402
|
+
var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7383
7403
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __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; });
|
|
7384
7404
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
7385
7405
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
7386
|
-
var templateObject_1$
|
|
7406
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7387
7407
|
|
|
7388
7408
|
var getStylesBySize$a = function (size, theme) {
|
|
7389
7409
|
switch (size) {
|
|
@@ -7448,9 +7468,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7448
7468
|
} }), id: id }, void 0));
|
|
7449
7469
|
};
|
|
7450
7470
|
|
|
7451
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7452
|
-
var LI = newStyled.li(templateObject_2$
|
|
7453
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7471
|
+
var UL = newStyled.ul(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7472
|
+
var LI = newStyled.li(templateObject_2$S || (templateObject_2$S = __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; });
|
|
7473
|
+
var CloseIconContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
7454
7474
|
var Tags = function (_a) {
|
|
7455
7475
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7456
7476
|
var theme = useTheme();
|
|
@@ -7458,7 +7478,7 @@ var Tags = function (_a) {
|
|
|
7458
7478
|
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));
|
|
7459
7479
|
}) }), void 0));
|
|
7460
7480
|
};
|
|
7461
|
-
var templateObject_1$
|
|
7481
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7462
7482
|
|
|
7463
7483
|
var Filters = function (_a) {
|
|
7464
7484
|
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;
|
|
@@ -7594,8 +7614,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7594
7614
|
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));
|
|
7595
7615
|
};
|
|
7596
7616
|
|
|
7597
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7598
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7617
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
7618
|
+
var Container$S = newStyled.div(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
7599
7619
|
var FitGuarantee = function (_a) {
|
|
7600
7620
|
var _b;
|
|
7601
7621
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7613,10 +7633,10 @@ var FitGuarantee = function (_a) {
|
|
|
7613
7633
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7614
7634
|
} }, { children: title }), void 0), jsx$1(Text$7, __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));
|
|
7615
7635
|
};
|
|
7616
|
-
var templateObject_1$
|
|
7636
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7617
7637
|
|
|
7618
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7619
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7638
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
7639
|
+
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
7620
7640
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7621
7641
|
border: 'none',
|
|
7622
7642
|
background: 'transparent',
|
|
@@ -7631,7 +7651,7 @@ var FitPredictor = function (_a) {
|
|
|
7631
7651
|
var theme = useTheme();
|
|
7632
7652
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { 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));
|
|
7633
7653
|
};
|
|
7634
|
-
var templateObject_1$
|
|
7654
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7635
7655
|
|
|
7636
7656
|
var Button$7 = newStyled.button(function () { return ({
|
|
7637
7657
|
background: 'transparent',
|
|
@@ -11875,14 +11895,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11875
11895
|
return Slider;
|
|
11876
11896
|
}(React__default.Component);
|
|
11877
11897
|
|
|
11878
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11898
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
11879
11899
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11880
11900
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11881
11901
|
}, function (_a) {
|
|
11882
11902
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11883
11903
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11884
11904
|
});
|
|
11885
|
-
var templateObject_1$
|
|
11905
|
+
var templateObject_1$18;
|
|
11886
11906
|
|
|
11887
11907
|
var getStylesBySize$9 = function (size) {
|
|
11888
11908
|
// rem units
|
|
@@ -11941,7 +11961,7 @@ var SliderNavigation = function (_a) {
|
|
|
11941
11961
|
} }, { 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));
|
|
11942
11962
|
};
|
|
11943
11963
|
|
|
11944
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11964
|
+
var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11945
11965
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11946
11966
|
return borderRadiusVariant &&
|
|
11947
11967
|
"\n border-radius: 20px;\n ";
|
|
@@ -11959,7 +11979,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
11959
11979
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11960
11980
|
: 'inherit';
|
|
11961
11981
|
});
|
|
11962
|
-
var templateObject_1$
|
|
11982
|
+
var templateObject_1$17;
|
|
11963
11983
|
|
|
11964
11984
|
var ImageSmallPreview = function (_a) {
|
|
11965
11985
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
@@ -11967,9 +11987,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11967
11987
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11968
11988
|
};
|
|
11969
11989
|
|
|
11970
|
-
var horizontalStyles = css(templateObject_1$
|
|
11971
|
-
var verticalStyles = css(templateObject_2$
|
|
11972
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11990
|
+
var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
11991
|
+
var verticalStyles = css(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
11992
|
+
var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __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) {
|
|
11973
11993
|
var position = _a.position;
|
|
11974
11994
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11975
11995
|
}, function (_a) {
|
|
@@ -11979,10 +11999,10 @@ var Container$Q = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
11979
11999
|
});
|
|
11980
12000
|
var Button$6 = newStyled.button(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11981
12001
|
var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11982
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11983
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12002
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12003
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11984
12004
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11985
|
-
var templateObject_1$
|
|
12005
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
11986
12006
|
|
|
11987
12007
|
var ImagePreviewList = function (_a) {
|
|
11988
12008
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -12001,6 +12021,70 @@ var ImagePreviewList = function (_a) {
|
|
|
12001
12021
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { 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.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { 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.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12002
12022
|
};
|
|
12003
12023
|
|
|
12024
|
+
var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12025
|
+
var ProgressFiller = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12026
|
+
var templateObject_1$15, templateObject_2$O;
|
|
12027
|
+
|
|
12028
|
+
var ProgressBar$1 = function (_a) {
|
|
12029
|
+
var progress = _a.progress, hide = _a.hide;
|
|
12030
|
+
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12031
|
+
};
|
|
12032
|
+
|
|
12033
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12034
|
+
var HTMLVideo = newStyled.video(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12035
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12036
|
+
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12037
|
+
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12038
|
+
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12039
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12040
|
+
|
|
12041
|
+
var Video$1 = function (_a) {
|
|
12042
|
+
var _b, _c, _d, _e;
|
|
12043
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
12044
|
+
var videoRef = useRef(null);
|
|
12045
|
+
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
12046
|
+
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
12047
|
+
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
12048
|
+
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
12049
|
+
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
12050
|
+
var isStarted = videoProgress > 0;
|
|
12051
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
12052
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
12053
|
+
var handlePlayClick = function () {
|
|
12054
|
+
if (videoRef.current && !debouncePlay) {
|
|
12055
|
+
setDebouncePlay(true);
|
|
12056
|
+
videoRef.current
|
|
12057
|
+
.play()
|
|
12058
|
+
.then(function () {
|
|
12059
|
+
setIsPlaying(true);
|
|
12060
|
+
setDebouncePlay(false);
|
|
12061
|
+
})
|
|
12062
|
+
.catch(function (error) {
|
|
12063
|
+
console.error('Error playing video:', error);
|
|
12064
|
+
setDebouncePlay(false);
|
|
12065
|
+
});
|
|
12066
|
+
}
|
|
12067
|
+
};
|
|
12068
|
+
var handlePauseClick = function () {
|
|
12069
|
+
if (videoRef.current && isPlaying) {
|
|
12070
|
+
videoRef.current.pause();
|
|
12071
|
+
setIsPlaying(false);
|
|
12072
|
+
}
|
|
12073
|
+
};
|
|
12074
|
+
var handleMuteToggle = function () {
|
|
12075
|
+
if (videoRef.current) {
|
|
12076
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
12077
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
12078
|
+
}
|
|
12079
|
+
};
|
|
12080
|
+
var onTimeUpdate = function () {
|
|
12081
|
+
if (videoRef.current) {
|
|
12082
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
12083
|
+
}
|
|
12084
|
+
};
|
|
12085
|
+
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12086
|
+
};
|
|
12087
|
+
|
|
12004
12088
|
var propTypes = {exports: {}};
|
|
12005
12089
|
|
|
12006
12090
|
var reactIs = {exports: {}};
|
|
@@ -13592,102 +13676,46 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13592
13676
|
afterZoomOut: PropTypes.func
|
|
13593
13677
|
} : {};
|
|
13594
13678
|
|
|
13595
|
-
var
|
|
13596
|
-
var ProgressFiller = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13597
|
-
var templateObject_1$16, templateObject_2$P;
|
|
13598
|
-
|
|
13599
|
-
var ProgressBar$1 = function (_a) {
|
|
13600
|
-
var progress = _a.progress, hide = _a.hide;
|
|
13601
|
-
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13602
|
-
};
|
|
13603
|
-
|
|
13604
|
-
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13605
|
-
var HTMLVideo = newStyled.video(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13606
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13607
|
-
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13608
|
-
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13609
|
-
var MuteButton = newStyled.button(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
13610
|
-
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k;
|
|
13611
|
-
|
|
13612
|
-
var Video$1 = function (_a) {
|
|
13613
|
-
var _b, _c, _d, _e;
|
|
13614
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
13615
|
-
var videoRef = useRef(null);
|
|
13616
|
-
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13617
|
-
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13618
|
-
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
13619
|
-
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13620
|
-
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13621
|
-
var isStarted = videoProgress > 0;
|
|
13622
|
-
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13623
|
-
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13624
|
-
var handlePlayClick = function () {
|
|
13625
|
-
if (videoRef.current && !debouncePlay) {
|
|
13626
|
-
setDebouncePlay(true);
|
|
13627
|
-
videoRef.current
|
|
13628
|
-
.play()
|
|
13629
|
-
.then(function () {
|
|
13630
|
-
setIsPlaying(true);
|
|
13631
|
-
setDebouncePlay(false);
|
|
13632
|
-
})
|
|
13633
|
-
.catch(function (error) {
|
|
13634
|
-
console.error('Error playing video:', error);
|
|
13635
|
-
setDebouncePlay(false);
|
|
13636
|
-
});
|
|
13637
|
-
}
|
|
13638
|
-
};
|
|
13639
|
-
var handlePauseClick = function () {
|
|
13640
|
-
if (videoRef.current && isPlaying) {
|
|
13641
|
-
videoRef.current.pause();
|
|
13642
|
-
setIsPlaying(false);
|
|
13643
|
-
}
|
|
13644
|
-
};
|
|
13645
|
-
var handleMuteToggle = function () {
|
|
13646
|
-
if (videoRef.current) {
|
|
13647
|
-
videoRef.current.muted = !videoRef.current.muted;
|
|
13648
|
-
setIsMuted(function (prevState) { return !prevState; });
|
|
13649
|
-
}
|
|
13650
|
-
};
|
|
13651
|
-
var onTimeUpdate = function () {
|
|
13652
|
-
if (videoRef.current) {
|
|
13653
|
-
setVideoProgress(videoRef.current.currentTime);
|
|
13654
|
-
}
|
|
13655
|
-
};
|
|
13656
|
-
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13657
|
-
};
|
|
13658
|
-
|
|
13659
|
-
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13679
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13660
13680
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13661
13681
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13662
13682
|
});
|
|
13663
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13683
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13664
13684
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13665
13685
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13666
13686
|
}, function (_a) {
|
|
13667
13687
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13668
13688
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13669
13689
|
});
|
|
13670
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13690
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13671
13691
|
var isCTAHidden = _a.isCTAHidden;
|
|
13672
13692
|
return (isCTAHidden ? '60px' : '120px');
|
|
13673
13693
|
});
|
|
13674
13694
|
var TopRightTagContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13675
13695
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13676
|
-
var
|
|
13696
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13697
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13698
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13699
|
+
});
|
|
13700
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13701
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13702
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13703
|
+
});
|
|
13704
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13677
13705
|
|
|
13678
13706
|
var ImageProductSlide$1 = function (_a) {
|
|
13679
13707
|
var _b;
|
|
13680
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13708
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13681
13709
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13682
13710
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13683
|
-
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(
|
|
13711
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13684
13712
|
alt: content.alt,
|
|
13685
13713
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13686
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(
|
|
13714
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, 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));
|
|
13687
13715
|
};
|
|
13688
13716
|
|
|
13689
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13690
|
-
var templateObject_1$
|
|
13717
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13718
|
+
var templateObject_1$12;
|
|
13691
13719
|
|
|
13692
13720
|
var getInitialIndex = function (images, selectedValue) {
|
|
13693
13721
|
if (selectedValue) {
|
|
@@ -13713,7 +13741,7 @@ var ProductGallery = function (_a) {
|
|
|
13713
13741
|
setActiveIndex(index);
|
|
13714
13742
|
};
|
|
13715
13743
|
var selectedImage = images[activeIndex];
|
|
13716
|
-
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13744
|
+
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13717
13745
|
};
|
|
13718
13746
|
|
|
13719
13747
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13735,7 +13763,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13735
13763
|
};
|
|
13736
13764
|
}
|
|
13737
13765
|
};
|
|
13738
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13766
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
13739
13767
|
var backgroundColor = _a.backgroundColor;
|
|
13740
13768
|
return backgroundColor;
|
|
13741
13769
|
}, function (_a) {
|
|
@@ -13765,9 +13793,9 @@ var IconButton = function (_a) {
|
|
|
13765
13793
|
var theme = useTheme();
|
|
13766
13794
|
return (jsx$1(Container$M, __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));
|
|
13767
13795
|
};
|
|
13768
|
-
var templateObject_1$
|
|
13796
|
+
var templateObject_1$11;
|
|
13769
13797
|
|
|
13770
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13798
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$10 || (templateObject_1$10 = __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; });
|
|
13771
13799
|
var AmazonButton = function (_a) {
|
|
13772
13800
|
var onClick = _a.onClick;
|
|
13773
13801
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13776,7 +13804,7 @@ var PaypalButton = function (_a) {
|
|
|
13776
13804
|
var onClick = _a.onClick;
|
|
13777
13805
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13778
13806
|
};
|
|
13779
|
-
var templateObject_1$
|
|
13807
|
+
var templateObject_1$10;
|
|
13780
13808
|
|
|
13781
13809
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13782
13810
|
height: 'auto',
|
|
@@ -13831,9 +13859,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13831
13859
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$L, __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$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13832
13860
|
};
|
|
13833
13861
|
|
|
13834
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13835
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13836
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13862
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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'); });
|
|
13863
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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'); });
|
|
13864
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13837
13865
|
var titlePosition = _a.titlePosition;
|
|
13838
13866
|
return titlePosition == 'center' &&
|
|
13839
13867
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13843,13 +13871,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13843
13871
|
var isMobile = useWindowDimensions().isMobile;
|
|
13844
13872
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __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$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13845
13873
|
};
|
|
13846
|
-
var templateObject_1
|
|
13874
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13847
13875
|
|
|
13848
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13876
|
+
var Label$3 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
13849
13877
|
var color = _a.color;
|
|
13850
13878
|
return color;
|
|
13851
13879
|
});
|
|
13852
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13880
|
+
var MandatoryIcon = newStyled.span(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13853
13881
|
var color = _a.color;
|
|
13854
13882
|
return color;
|
|
13855
13883
|
});
|
|
@@ -13858,7 +13886,7 @@ var InputLabel = function (_a) {
|
|
|
13858
13886
|
var theme = useTheme();
|
|
13859
13887
|
return (jsxs$1(Label$3, __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));
|
|
13860
13888
|
};
|
|
13861
|
-
var templateObject_1
|
|
13889
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13862
13890
|
|
|
13863
13891
|
var containerByStatus = function (theme, status) {
|
|
13864
13892
|
if (status === InputValidationType.Valid)
|
|
@@ -13867,12 +13895,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13867
13895
|
return theme.colors.semantic.urgent.color;
|
|
13868
13896
|
return '';
|
|
13869
13897
|
};
|
|
13870
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13898
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13871
13899
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13872
13900
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13873
13901
|
});
|
|
13874
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13875
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13902
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13903
|
+
var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13876
13904
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13877
13905
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13878
13906
|
}, function (_a) {
|
|
@@ -13927,7 +13955,7 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13927
13955
|
return hasValue &&
|
|
13928
13956
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13929
13957
|
});
|
|
13930
|
-
var InputWrapper
|
|
13958
|
+
var InputWrapper = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13931
13959
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13932
13960
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13933
13961
|
});
|
|
@@ -13945,7 +13973,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
13945
13973
|
return theme.component.input.lineHeight;
|
|
13946
13974
|
});
|
|
13947
13975
|
var ClearInput = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
13948
|
-
var templateObject_1$
|
|
13976
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13949
13977
|
|
|
13950
13978
|
var BaseInput = function (_a) {
|
|
13951
13979
|
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"]);
|
|
@@ -13968,7 +13996,7 @@ var BaseInput = function (_a) {
|
|
|
13968
13996
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13969
13997
|
}, [status]);
|
|
13970
13998
|
var hasValue = Boolean(value);
|
|
13971
|
-
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper
|
|
13999
|
+
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13972
14000
|
onChange(event.target.value, event);
|
|
13973
14001
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13974
14002
|
onChange('', { target: { value: '' } });
|
|
@@ -13989,11 +14017,11 @@ var Button$5 = function (_a) {
|
|
|
13989
14017
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13990
14018
|
};
|
|
13991
14019
|
|
|
13992
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14020
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
13993
14021
|
var theme = _a.theme;
|
|
13994
14022
|
return theme.component.inputCustom.input.borderRadius;
|
|
13995
14023
|
});
|
|
13996
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14024
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13997
14025
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13998
14026
|
return defaultRounded
|
|
13999
14027
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14010,21 +14038,21 @@ var Custom = function (_a) {
|
|
|
14010
14038
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14011
14039
|
return (jsx$1(Container$I, __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$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14012
14040
|
};
|
|
14013
|
-
var templateObject_1$
|
|
14041
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14014
14042
|
|
|
14015
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14043
|
+
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14016
14044
|
var size = _a.size;
|
|
14017
14045
|
return (size === 'small' ? '36px' : '');
|
|
14018
14046
|
});
|
|
14019
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14020
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14047
|
+
var SuccessMessage = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14048
|
+
var SuccessText = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14021
14049
|
var Success = function (_a) {
|
|
14022
14050
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14023
14051
|
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));
|
|
14024
14052
|
};
|
|
14025
|
-
var templateObject_1$
|
|
14053
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14026
14054
|
|
|
14027
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14055
|
+
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
14028
14056
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14029
14057
|
return status === InputValidationType.Empty &&
|
|
14030
14058
|
type === 'primary' &&
|
|
@@ -14041,16 +14069,16 @@ var BasePlusButton = function (_a) {
|
|
|
14041
14069
|
}
|
|
14042
14070
|
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));
|
|
14043
14071
|
};
|
|
14044
|
-
var templateObject_1$
|
|
14072
|
+
var templateObject_1$W;
|
|
14045
14073
|
|
|
14046
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14047
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14074
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14075
|
+
var IconContainer$2 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
14048
14076
|
var BasePlusIcon = function (_a) {
|
|
14049
14077
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14050
14078
|
var theme = useTheme();
|
|
14051
14079
|
return (jsx$1(Container$H, { 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));
|
|
14052
14080
|
};
|
|
14053
|
-
var templateObject_1$
|
|
14081
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14054
14082
|
|
|
14055
14083
|
var Input$3 = {
|
|
14056
14084
|
Simple: BaseInput,
|
|
@@ -14095,7 +14123,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14095
14123
|
}, [preventTouch, ref, touchStart]);
|
|
14096
14124
|
}
|
|
14097
14125
|
|
|
14098
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14126
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14099
14127
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14100
14128
|
return borderRadiusVariant &&
|
|
14101
14129
|
"\n border-radius: 40px;\n ";
|
|
@@ -14104,8 +14132,8 @@ var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14104
14132
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14105
14133
|
});
|
|
14106
14134
|
// max-height: 31.875rem;
|
|
14107
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14108
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14135
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14136
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14109
14137
|
var BottomTagContainer$5 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14110
14138
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14111
14139
|
var Button$4 = newStyled.button(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
@@ -14167,16 +14195,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14167
14195
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14168
14196
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14169
14197
|
};
|
|
14170
|
-
var templateObject_1$
|
|
14198
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14171
14199
|
|
|
14172
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14200
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
14173
14201
|
var ProductGalleryMobile = function (_a) {
|
|
14174
14202
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14175
14203
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14176
14204
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14177
14205
|
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14178
14206
|
};
|
|
14179
|
-
var templateObject_1$
|
|
14207
|
+
var templateObject_1$T;
|
|
14180
14208
|
|
|
14181
14209
|
function _extends() {
|
|
14182
14210
|
_extends = Object.assign || function (target) {
|
|
@@ -14443,14 +14471,14 @@ function useSwipeable(options) {
|
|
|
14443
14471
|
return handlers;
|
|
14444
14472
|
}
|
|
14445
14473
|
|
|
14446
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14474
|
+
var Button$3 = newStyled.button(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14447
14475
|
var ArrowButton = function (_a) {
|
|
14448
14476
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14449
14477
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14450
14478
|
};
|
|
14451
|
-
var templateObject_1$
|
|
14479
|
+
var templateObject_1$S;
|
|
14452
14480
|
|
|
14453
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14481
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
14454
14482
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14455
14483
|
var SlideDots = function (_a) {
|
|
14456
14484
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14459,11 +14487,11 @@ var SlideDots = function (_a) {
|
|
|
14459
14487
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14460
14488
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14461
14489
|
};
|
|
14462
|
-
var templateObject_1$
|
|
14490
|
+
var templateObject_1$R;
|
|
14463
14491
|
|
|
14464
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14465
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14466
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14492
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
14493
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14494
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14467
14495
|
var SlideNavigation = function (_a) {
|
|
14468
14496
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14469
14497
|
var theme = useTheme();
|
|
@@ -14475,23 +14503,23 @@ var SlideNavigation = function (_a) {
|
|
|
14475
14503
|
onNavigate(selectedIndex + 1);
|
|
14476
14504
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14477
14505
|
};
|
|
14478
|
-
var templateObject_1$
|
|
14506
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14479
14507
|
|
|
14480
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14508
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
14481
14509
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14482
14510
|
return borderRadiusVariant &&
|
|
14483
14511
|
"\n border-radius: 40px;\n ";
|
|
14484
14512
|
});
|
|
14485
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14486
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14513
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14514
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14487
14515
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14488
14516
|
var _b, _c;
|
|
14489
14517
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14490
14518
|
return (jsxs$1(Container$D, __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.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { 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.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14491
14519
|
});
|
|
14492
|
-
var templateObject_1$
|
|
14520
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14493
14521
|
|
|
14494
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14522
|
+
var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
14495
14523
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14496
14524
|
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;
|
|
14497
14525
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14515,9 +14543,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14515
14543
|
}, [index, images]);
|
|
14516
14544
|
return (jsxs$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __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));
|
|
14517
14545
|
};
|
|
14518
|
-
var templateObject_1$
|
|
14546
|
+
var templateObject_1$O;
|
|
14519
14547
|
|
|
14520
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14548
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14521
14549
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14522
14550
|
return borderRadiusVariant &&
|
|
14523
14551
|
"\n border-radius: 40px;\n ";
|
|
@@ -14526,8 +14554,8 @@ var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14526
14554
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14527
14555
|
});
|
|
14528
14556
|
// max-height: 31.875rem;
|
|
14529
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14530
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14557
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14558
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14531
14559
|
var VideoOverlay$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14532
14560
|
var Video = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14533
14561
|
var VideoTag = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
@@ -14591,14 +14619,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14591
14619
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14592
14620
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14593
14621
|
};
|
|
14594
|
-
var templateObject_1$
|
|
14622
|
+
var templateObject_1$N, templateObject_2$C, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7;
|
|
14595
14623
|
|
|
14596
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14624
|
+
var Container$A = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
14597
14625
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14598
14626
|
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;
|
|
14599
14627
|
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14600
14628
|
};
|
|
14601
|
-
var templateObject_1$
|
|
14629
|
+
var templateObject_1$M;
|
|
14602
14630
|
|
|
14603
14631
|
var __defProp$1 = Object.defineProperty;
|
|
14604
14632
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14731,12 +14759,12 @@ var Portal = function (_a) {
|
|
|
14731
14759
|
var visibleStyle = function (_a) {
|
|
14732
14760
|
var opened = _a.opened;
|
|
14733
14761
|
return opened
|
|
14734
|
-
? css(templateObject_1$
|
|
14762
|
+
? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14735
14763
|
};
|
|
14736
14764
|
var transformStyle = function (_a) {
|
|
14737
14765
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14738
14766
|
return opened
|
|
14739
|
-
? css(templateObject_3$
|
|
14767
|
+
? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14740
14768
|
};
|
|
14741
14769
|
var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14742
14770
|
var width = _a.width;
|
|
@@ -14786,9 +14814,9 @@ var useModal = function (id) {
|
|
|
14786
14814
|
close: close,
|
|
14787
14815
|
}); }, [close, open, opened]);
|
|
14788
14816
|
};
|
|
14789
|
-
var templateObject_1$
|
|
14817
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14790
14818
|
|
|
14791
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14819
|
+
var Bar$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
14792
14820
|
var height = _a.height;
|
|
14793
14821
|
return height || '0.5rem';
|
|
14794
14822
|
}, function (_a) {
|
|
@@ -14860,19 +14888,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14860
14888
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14861
14889
|
return (jsxs$1(Container$y, __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));
|
|
14862
14890
|
};
|
|
14863
|
-
var templateObject_1$
|
|
14891
|
+
var templateObject_1$K;
|
|
14864
14892
|
|
|
14865
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14893
|
+
var Container$x = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
14866
14894
|
var theme = _a.theme;
|
|
14867
14895
|
return theme.component.orderBar.backgroundColor;
|
|
14868
14896
|
});
|
|
14869
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14897
|
+
var H1 = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14870
14898
|
var OrderBar = function (_a) {
|
|
14871
14899
|
var message = _a.message, color = _a.color;
|
|
14872
14900
|
var theme = useTheme();
|
|
14873
14901
|
return (jsxs$1(Container$x, __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));
|
|
14874
14902
|
};
|
|
14875
|
-
var templateObject_1$
|
|
14903
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14876
14904
|
|
|
14877
14905
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14878
14906
|
background: props.bgColor,
|
|
@@ -14896,15 +14924,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14896
14924
|
justifyContent: 'center',
|
|
14897
14925
|
gap: '10px',
|
|
14898
14926
|
});
|
|
14899
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14927
|
+
var StyledContent = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14900
14928
|
var bgColor = _a.bgColor;
|
|
14901
14929
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14902
14930
|
}, function (_a) {
|
|
14903
14931
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14904
14932
|
return width;
|
|
14905
14933
|
});
|
|
14906
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14907
|
-
var templateObject_1$
|
|
14934
|
+
var StyledController = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
14935
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14908
14936
|
|
|
14909
14937
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14910
14938
|
var background = _a.background, width = _a.width;
|
|
@@ -18724,9 +18752,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18724
18752
|
HTMLReactParser$1.attributesToProps;
|
|
18725
18753
|
HTMLReactParser$1.Element;
|
|
18726
18754
|
|
|
18727
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18728
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18729
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18755
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
18756
|
+
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
18757
|
+
var Tag$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
18730
18758
|
var Label$2 = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
18731
18759
|
var Check = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18732
18760
|
var IconContainer$1 = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
@@ -18761,11 +18789,11 @@ var PackCard = function (_a) {
|
|
|
18761
18789
|
currency: currencyCode || 'USD',
|
|
18762
18790
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18763
18791
|
};
|
|
18764
|
-
var templateObject_1$
|
|
18792
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$d, templateObject_8$a;
|
|
18765
18793
|
|
|
18766
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18767
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18768
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18794
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
18795
|
+
var IconContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
18796
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18769
18797
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18770
18798
|
}));
|
|
18771
18799
|
var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
@@ -18785,7 +18813,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18785
18813
|
var background = _a.background;
|
|
18786
18814
|
return background || 'unset';
|
|
18787
18815
|
});
|
|
18788
|
-
var templateObject_1$
|
|
18816
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$n;
|
|
18789
18817
|
|
|
18790
18818
|
var Pagination = function (_a) {
|
|
18791
18819
|
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;
|
|
@@ -18850,7 +18878,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18850
18878
|
: 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));
|
|
18851
18879
|
};
|
|
18852
18880
|
|
|
18853
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18881
|
+
var Container$u = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
18854
18882
|
var width = _a.width;
|
|
18855
18883
|
return width;
|
|
18856
18884
|
}, function (_a) {
|
|
@@ -18868,12 +18896,12 @@ var PaymentMethod = function (_a) {
|
|
|
18868
18896
|
var theme = useTheme();
|
|
18869
18897
|
return (jsx$1(Container$u, __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));
|
|
18870
18898
|
};
|
|
18871
|
-
var templateObject_1$
|
|
18899
|
+
var templateObject_1$F;
|
|
18872
18900
|
|
|
18873
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18901
|
+
var Container$t = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
18874
18902
|
var IMAGE_WIDTH = '63px';
|
|
18875
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18876
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18903
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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);
|
|
18904
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __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({
|
|
18877
18905
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18878
18906
|
}), IMAGE_WIDTH);
|
|
18879
18907
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18913,7 +18941,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18913
18941
|
var theme = useTheme();
|
|
18914
18942
|
return (jsxs$1(Container$t, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { 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$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, 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$1, { 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));
|
|
18915
18943
|
};
|
|
18916
|
-
var templateObject_1$
|
|
18944
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18917
18945
|
|
|
18918
18946
|
var P$1 = newStyled.p(function (_a) {
|
|
18919
18947
|
var color = _a.color;
|
|
@@ -18927,7 +18955,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18927
18955
|
margin: '0.938rem 4.188rem',
|
|
18928
18956
|
});
|
|
18929
18957
|
});
|
|
18930
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18958
|
+
var Bar = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
18931
18959
|
var height = _a.height;
|
|
18932
18960
|
return height || '0.5rem';
|
|
18933
18961
|
}, function (_a) {
|
|
@@ -18972,11 +19000,11 @@ var ProgressBar = function (_a) {
|
|
|
18972
19000
|
var theme = useTheme();
|
|
18973
19001
|
return (jsxs$1(Container$s, __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));
|
|
18974
19002
|
};
|
|
18975
|
-
var templateObject_1$
|
|
19003
|
+
var templateObject_1$D;
|
|
18976
19004
|
|
|
18977
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18978
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18979
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19005
|
+
var Container$r = newStyled.div(templateObject_1$C || (templateObject_1$C = __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; });
|
|
19006
|
+
var Item$1 = newStyled.span(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
19007
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
18980
19008
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$l || (templateObject_4$l = __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)'; });
|
|
18981
19009
|
var QuantityPicker = function (_a) {
|
|
18982
19010
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
@@ -19002,7 +19030,7 @@ var QuantityPicker = function (_a) {
|
|
|
19002
19030
|
}, [value, clamp]);
|
|
19003
19031
|
return (jsxs$1(Container$r, __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));
|
|
19004
19032
|
};
|
|
19005
|
-
var templateObject_1$
|
|
19033
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$l;
|
|
19006
19034
|
|
|
19007
19035
|
/* base styles & size variants */
|
|
19008
19036
|
var CustomRadioStyles$1 = {
|
|
@@ -19071,9 +19099,9 @@ var ContainerStyles$1 = {
|
|
|
19071
19099
|
},
|
|
19072
19100
|
};
|
|
19073
19101
|
|
|
19074
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19102
|
+
var Wrapper$3 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19075
19103
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19076
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19104
|
+
var Input$2 = newStyled.input(templateObject_2$u || (templateObject_2$u = __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) {
|
|
19077
19105
|
var disabled = _a.disabled;
|
|
19078
19106
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19079
19107
|
});
|
|
@@ -19081,7 +19109,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19081
19109
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19082
19110
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19083
19111
|
]; });
|
|
19084
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19112
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19085
19113
|
var RadioPrimary = function (_a) {
|
|
19086
19114
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19087
19115
|
var theme = useTheme();
|
|
@@ -19091,7 +19119,7 @@ var RadioPrimary = function (_a) {
|
|
|
19091
19119
|
};
|
|
19092
19120
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __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));
|
|
19093
19121
|
};
|
|
19094
|
-
var templateObject_1$
|
|
19122
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19095
19123
|
|
|
19096
19124
|
var RadioGroupInput = function (_a) {
|
|
19097
19125
|
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;
|
|
@@ -19170,9 +19198,9 @@ var ContainerStyles = {
|
|
|
19170
19198
|
},
|
|
19171
19199
|
};
|
|
19172
19200
|
|
|
19173
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19201
|
+
var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19174
19202
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19175
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19203
|
+
var Input$1 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19176
19204
|
var disabled = _a.disabled;
|
|
19177
19205
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19178
19206
|
});
|
|
@@ -19180,7 +19208,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19180
19208
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19181
19209
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19182
19210
|
]; });
|
|
19183
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19211
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19184
19212
|
var theme = _a.theme;
|
|
19185
19213
|
return theme.component.radio.textSize;
|
|
19186
19214
|
}, function (_a) {
|
|
@@ -19196,7 +19224,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19196
19224
|
};
|
|
19197
19225
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __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));
|
|
19198
19226
|
};
|
|
19199
|
-
var templateObject_1$
|
|
19227
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19200
19228
|
|
|
19201
19229
|
var ClubRadioGroupInput = function (_a) {
|
|
19202
19230
|
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;
|
|
@@ -19224,9 +19252,9 @@ function formatDate(date, format) {
|
|
|
19224
19252
|
}
|
|
19225
19253
|
}
|
|
19226
19254
|
|
|
19227
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19228
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19229
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19255
|
+
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19256
|
+
var Content$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19257
|
+
var StarsContent = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19230
19258
|
var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19231
19259
|
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19232
19260
|
var ReviewerName$1 = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
@@ -19265,13 +19293,13 @@ var Review$1 = function (_a) {
|
|
|
19265
19293
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19266
19294
|
(!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));
|
|
19267
19295
|
};
|
|
19268
|
-
var templateObject_1$
|
|
19296
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$4, 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;
|
|
19269
19297
|
|
|
19270
19298
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19271
19299
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19272
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19273
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19274
|
-
var Content = newStyled.div(templateObject_3$
|
|
19300
|
+
var Container$n = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19301
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19302
|
+
var Content = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19275
19303
|
var ReviewContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19276
19304
|
var DateText = newStyled.span(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19277
19305
|
var VariantText = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -19321,11 +19349,11 @@ var Review = function (_a) {
|
|
|
19321
19349
|
: description,
|
|
19322
19350
|
} }, 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 || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (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 || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19323
19351
|
};
|
|
19324
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19325
19353
|
|
|
19326
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19327
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19328
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19354
|
+
var Container$m = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19355
|
+
var ReviewsContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19356
|
+
var ReviewsCount = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19329
19357
|
var ReviewsStars = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
19330
19358
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19331
19359
|
var ReviewsImages = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
@@ -19339,17 +19367,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19339
19367
|
var theme = useTheme();
|
|
19340
19368
|
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __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$7, __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));
|
|
19341
19369
|
};
|
|
19342
|
-
var templateObject_1$
|
|
19370
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19343
19371
|
|
|
19344
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19345
|
-
var Text = newStyled.p(templateObject_2$
|
|
19372
|
+
var Container$l = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
19373
|
+
var Text = newStyled.p(templateObject_2$p || (templateObject_2$p = __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; });
|
|
19346
19374
|
var ScrollToTop = function (_a) {
|
|
19347
19375
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19348
19376
|
var theme = useTheme();
|
|
19349
19377
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19350
19378
|
return (jsxs$1(Container$l, __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));
|
|
19351
19379
|
};
|
|
19352
|
-
var templateObject_1$
|
|
19380
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19353
19381
|
|
|
19354
19382
|
var Input = newStyled.input(function (props) { return ({
|
|
19355
19383
|
padding: props.theme.component.input.padding,
|
|
@@ -19380,7 +19408,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19380
19408
|
},
|
|
19381
19409
|
}); });
|
|
19382
19410
|
|
|
19383
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19411
|
+
var Container$k = newStyled.div(templateObject_1$v || (templateObject_1$v = __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({
|
|
19384
19412
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19385
19413
|
}));
|
|
19386
19414
|
var Description = newStyled.div({
|
|
@@ -19399,7 +19427,7 @@ var ProductItem = function (_a) {
|
|
|
19399
19427
|
var theme = useTheme();
|
|
19400
19428
|
return (jsxs$1(Container$k, __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$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19401
19429
|
};
|
|
19402
|
-
var templateObject_1$
|
|
19430
|
+
var templateObject_1$v;
|
|
19403
19431
|
|
|
19404
19432
|
var Container$j = newStyled.div({
|
|
19405
19433
|
display: 'flex',
|
|
@@ -19415,7 +19443,7 @@ var Ul = newStyled.ul({
|
|
|
19415
19443
|
margin: '0px',
|
|
19416
19444
|
padding: '0px',
|
|
19417
19445
|
});
|
|
19418
|
-
var Li = newStyled.li(templateObject_1$
|
|
19446
|
+
var Li = newStyled.li(templateObject_1$u || (templateObject_1$u = __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({
|
|
19419
19447
|
padding: [0, '0rem 1rem'],
|
|
19420
19448
|
borderRadius: [0, '0.5rem'],
|
|
19421
19449
|
}));
|
|
@@ -19427,12 +19455,12 @@ var Anchor = newStyled.a({
|
|
|
19427
19455
|
padding: 0,
|
|
19428
19456
|
textDecoration: 'none',
|
|
19429
19457
|
});
|
|
19430
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19458
|
+
var Container$i = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19431
19459
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19432
19460
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19433
19461
|
borderRadius: ['0', '0.5rem'],
|
|
19434
19462
|
}));
|
|
19435
|
-
var Header = newStyled.div(templateObject_3$
|
|
19463
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19436
19464
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19437
19465
|
}));
|
|
19438
19466
|
var ResultsPanel = function (_a) {
|
|
@@ -19440,9 +19468,9 @@ var ResultsPanel = function (_a) {
|
|
|
19440
19468
|
var theme = useTheme();
|
|
19441
19469
|
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __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));
|
|
19442
19470
|
};
|
|
19443
|
-
var templateObject_1$
|
|
19471
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19444
19472
|
|
|
19445
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19473
|
+
var Button$1 = newStyled.button(templateObject_1$t || (templateObject_1$t = __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({
|
|
19446
19474
|
right: ['1rem', '7.75rem'],
|
|
19447
19475
|
top: ['0.75rem', '0.75rem'],
|
|
19448
19476
|
}));
|
|
@@ -19451,7 +19479,7 @@ var ClearButton = function (_a) {
|
|
|
19451
19479
|
var theme = useTheme();
|
|
19452
19480
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19453
19481
|
};
|
|
19454
|
-
var templateObject_1$
|
|
19482
|
+
var templateObject_1$t;
|
|
19455
19483
|
|
|
19456
19484
|
var SearchIconContainer = newStyled.div({
|
|
19457
19485
|
display: 'flex',
|
|
@@ -19461,7 +19489,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19461
19489
|
background: 'white',
|
|
19462
19490
|
alignSelf: 'center',
|
|
19463
19491
|
});
|
|
19464
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19492
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
19465
19493
|
var SearchControl = function (_a) {
|
|
19466
19494
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19467
19495
|
var theme = useTheme();
|
|
@@ -19477,7 +19505,7 @@ var SearchControl = function (_a) {
|
|
|
19477
19505
|
}
|
|
19478
19506
|
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));
|
|
19479
19507
|
};
|
|
19480
|
-
var templateObject_1$
|
|
19508
|
+
var templateObject_1$s;
|
|
19481
19509
|
|
|
19482
19510
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19483
19511
|
var reducer = function (state, action) {
|
|
@@ -19544,9 +19572,9 @@ var SearchBar = function (_a) {
|
|
|
19544
19572
|
} }, 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));
|
|
19545
19573
|
};
|
|
19546
19574
|
|
|
19547
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19548
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19549
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19575
|
+
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
19576
|
+
var BackArrow = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19577
|
+
var BoldSpan = newStyled.span(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
19550
19578
|
var NormalSpan = newStyled.span(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19551
19579
|
var SearchNavigationParents = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19552
19580
|
var SearchNavigation = function (_a) {
|
|
@@ -19555,9 +19583,9 @@ var SearchNavigation = function (_a) {
|
|
|
19555
19583
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19556
19584
|
}) }, void 0)] }, void 0));
|
|
19557
19585
|
};
|
|
19558
|
-
var templateObject_1$
|
|
19586
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19559
19587
|
|
|
19560
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19588
|
+
var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
19561
19589
|
var alignCenter = _a.alignCenter;
|
|
19562
19590
|
return alignCenter &&
|
|
19563
19591
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19567,18 +19595,18 @@ var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __ma
|
|
|
19567
19595
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19568
19596
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19569
19597
|
});
|
|
19570
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19571
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19598
|
+
var TitleText = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19599
|
+
var BannerText = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19572
19600
|
var ShortBanner = function (_a) {
|
|
19573
19601
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19574
19602
|
var theme = useTheme();
|
|
19575
19603
|
return (jsxs$1(Container$f, __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));
|
|
19576
19604
|
};
|
|
19577
|
-
var templateObject_1$
|
|
19605
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19578
19606
|
|
|
19579
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19580
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19581
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19607
|
+
var TableElement$2 = newStyled.table(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: relative;\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 position: relative;\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; });
|
|
19608
|
+
var TableCell$2 = newStyled.td(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\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 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; });
|
|
19609
|
+
var TableHead$2 = newStyled.th(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19582
19610
|
var Label$1 = newStyled('div')(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19583
19611
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19584
19612
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
@@ -19586,7 +19614,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19586
19614
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19587
19615
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19588
19616
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __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; });
|
|
19589
|
-
var templateObject_1$
|
|
19617
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19590
19618
|
|
|
19591
19619
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19592
19620
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19627,16 +19655,16 @@ var SizeChartTable = function (_a) {
|
|
|
19627
19655
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19628
19656
|
};
|
|
19629
19657
|
|
|
19630
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19631
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19632
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19658
|
+
var TableElement$1 = newStyled.table(templateObject_1$o || (templateObject_1$o = __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; });
|
|
19659
|
+
var TableCell$1 = newStyled.td(templateObject_2$k || (templateObject_2$k = __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; });
|
|
19660
|
+
var TableHead$1 = newStyled.th(templateObject_3$h || (templateObject_3$h = __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; });
|
|
19633
19661
|
var TableRow$1 = newStyled.tr(templateObject_4$f || (templateObject_4$f = __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; });
|
|
19634
19662
|
var SizeTable = function (_a) {
|
|
19635
19663
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19636
19664
|
var theme = useTheme();
|
|
19637
19665
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __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$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: 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));
|
|
19638
19666
|
};
|
|
19639
|
-
var templateObject_1$
|
|
19667
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
19640
19668
|
|
|
19641
19669
|
var getStylesBySize$7 = function (size) {
|
|
19642
19670
|
switch (size) {
|
|
@@ -19663,7 +19691,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19663
19691
|
} });
|
|
19664
19692
|
};
|
|
19665
19693
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19666
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19694
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$n || (templateObject_1$n = __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));
|
|
19667
19695
|
};
|
|
19668
19696
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19669
19697
|
if (disabled)
|
|
@@ -19679,23 +19707,23 @@ var TextButton = function (_a) {
|
|
|
19679
19707
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19680
19708
|
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));
|
|
19681
19709
|
};
|
|
19682
|
-
var templateObject_1$
|
|
19710
|
+
var templateObject_1$n;
|
|
19683
19711
|
|
|
19684
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19685
|
-
var P = newStyled.p(templateObject_2$
|
|
19686
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19712
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
19713
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19714
|
+
var PercentageSpan = newStyled.span(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
19687
19715
|
var SizeFitGuide = function (_a) {
|
|
19688
19716
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19689
19717
|
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : 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));
|
|
19690
19718
|
};
|
|
19691
|
-
var templateObject_1$
|
|
19719
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19692
19720
|
|
|
19693
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19721
|
+
var ButtonsContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
19694
19722
|
var inline = _a.inline;
|
|
19695
19723
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19696
19724
|
});
|
|
19697
|
-
var Row = newStyled.div(templateObject_2$
|
|
19698
|
-
var templateObject_1$
|
|
19725
|
+
var Row = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19726
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19699
19727
|
|
|
19700
19728
|
var SizeSelector = function (_a) {
|
|
19701
19729
|
var _b;
|
|
@@ -19717,7 +19745,7 @@ var SizeSelector = function (_a) {
|
|
|
19717
19745
|
}) }), void 0)] }), void 0));
|
|
19718
19746
|
};
|
|
19719
19747
|
|
|
19720
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19748
|
+
var TabContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
19721
19749
|
var titleSize = _a.titleSize;
|
|
19722
19750
|
return titleSize;
|
|
19723
19751
|
}, function (_a) {
|
|
@@ -19734,17 +19762,17 @@ var Tab = function (_a) {
|
|
|
19734
19762
|
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;
|
|
19735
19763
|
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));
|
|
19736
19764
|
};
|
|
19737
|
-
var templateObject_1$
|
|
19765
|
+
var templateObject_1$k;
|
|
19738
19766
|
|
|
19739
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19740
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19767
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19768
|
+
var TabList = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19741
19769
|
var backgroundColor = _a.backgroundColor;
|
|
19742
19770
|
return backgroundColor;
|
|
19743
19771
|
}, function (_a) {
|
|
19744
19772
|
var borderColor = _a.borderColor;
|
|
19745
19773
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19746
19774
|
});
|
|
19747
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19775
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19748
19776
|
var TabSeparator = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19749
19777
|
var Tabs = function (_a) {
|
|
19750
19778
|
var _b;
|
|
@@ -19756,14 +19784,14 @@ var Tabs = function (_a) {
|
|
|
19756
19784
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19757
19785
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { 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, color: selectedBorderColor }, 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));
|
|
19758
19786
|
};
|
|
19759
|
-
var templateObject_1$
|
|
19787
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$e;
|
|
19760
19788
|
|
|
19761
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19789
|
+
var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
19762
19790
|
var Tag = function (_a) {
|
|
19763
19791
|
var text = _a.text, className = _a.className;
|
|
19764
19792
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19765
19793
|
};
|
|
19766
|
-
var templateObject_1$
|
|
19794
|
+
var templateObject_1$i;
|
|
19767
19795
|
|
|
19768
19796
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19769
19797
|
switch (size) {
|
|
@@ -19874,9 +19902,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19874
19902
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19875
19903
|
};
|
|
19876
19904
|
|
|
19877
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19878
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19879
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19905
|
+
var ImageWrapper = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
19906
|
+
var VideoOverlay = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
19907
|
+
var FullscreenVideo = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
19880
19908
|
var ImageVideo = function (_a) {
|
|
19881
19909
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19882
19910
|
var video = useRef(null);
|
|
@@ -19896,11 +19924,11 @@ var ImageVideo = function (_a) {
|
|
|
19896
19924
|
height: '100%',
|
|
19897
19925
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19898
19926
|
};
|
|
19899
|
-
var templateObject_1$
|
|
19927
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19900
19928
|
|
|
19901
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19902
|
-
var ContainerMobile = css(templateObject_2$
|
|
19903
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19929
|
+
var ContainerDesktop = css(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
19930
|
+
var ContainerMobile = css(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
19931
|
+
var Container$a = newStyled.div(templateObject_3$d || (templateObject_3$d = __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);
|
|
19904
19932
|
var TextContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19905
19933
|
var TextWithImage = function (_a) {
|
|
19906
19934
|
var _b, _c, _d, _e;
|
|
@@ -19931,17 +19959,17 @@ var TextWithImage = function (_a) {
|
|
|
19931
19959
|
},
|
|
19932
19960
|
} }, 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));
|
|
19933
19961
|
};
|
|
19934
|
-
var templateObject_1$
|
|
19962
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$d;
|
|
19935
19963
|
|
|
19936
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19964
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19937
19965
|
var timerColor = _a.timerColor;
|
|
19938
19966
|
return timerColor || '';
|
|
19939
19967
|
});
|
|
19940
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19968
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19941
19969
|
var timerColor = _a.timerColor;
|
|
19942
19970
|
return timerColor || '';
|
|
19943
19971
|
});
|
|
19944
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19972
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
19945
19973
|
var theme = _a.theme;
|
|
19946
19974
|
return theme.colors.shades.white.color;
|
|
19947
19975
|
}, function (_a) {
|
|
@@ -19949,7 +19977,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __
|
|
|
19949
19977
|
return theme.colors.shades.white.color;
|
|
19950
19978
|
});
|
|
19951
19979
|
var Unit = newStyled.p(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
19952
|
-
var templateObject_1$
|
|
19980
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
19953
19981
|
|
|
19954
19982
|
var HRS = 'HRS';
|
|
19955
19983
|
var MIN = 'MIN';
|
|
@@ -19990,9 +20018,9 @@ var Timer = function (_a) {
|
|
|
19990
20018
|
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));
|
|
19991
20019
|
};
|
|
19992
20020
|
|
|
19993
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19994
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19995
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20021
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
20022
|
+
var GrandTotal = newStyled.h1(templateObject_2$d || (templateObject_2$d = __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; });
|
|
20023
|
+
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __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) {
|
|
19996
20024
|
var theme = _a.theme;
|
|
19997
20025
|
return theme.component.total.basicTotal.currency.color;
|
|
19998
20026
|
}, function (_a) {
|
|
@@ -20019,7 +20047,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20019
20047
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20020
20048
|
});
|
|
20021
20049
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20022
|
-
var templateObject_1$
|
|
20050
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20023
20051
|
|
|
20024
20052
|
var Total = function (_a) {
|
|
20025
20053
|
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;
|
|
@@ -20027,12 +20055,12 @@ var Total = function (_a) {
|
|
|
20027
20055
|
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$9, __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));
|
|
20028
20056
|
};
|
|
20029
20057
|
|
|
20030
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20058
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20031
20059
|
var color = _a.color;
|
|
20032
20060
|
return color;
|
|
20033
20061
|
});
|
|
20034
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20035
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20062
|
+
var ItemContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20063
|
+
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20036
20064
|
var theme = _a.theme;
|
|
20037
20065
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20038
20066
|
}, function (_a) {
|
|
@@ -20052,7 +20080,7 @@ var Subtotal = function (_a) {
|
|
|
20052
20080
|
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));
|
|
20053
20081
|
})] }), void 0));
|
|
20054
20082
|
};
|
|
20055
|
-
var templateObject_1$
|
|
20083
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
20056
20084
|
|
|
20057
20085
|
var Totals = {
|
|
20058
20086
|
Total: Total,
|
|
@@ -20061,13 +20089,13 @@ var Totals = {
|
|
|
20061
20089
|
|
|
20062
20090
|
var slideInAnimation = function (distanceFromTop) {
|
|
20063
20091
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20064
|
-
return keyframes(templateObject_1$
|
|
20092
|
+
return keyframes(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20065
20093
|
};
|
|
20066
20094
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20067
20095
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20068
|
-
return keyframes(templateObject_2$
|
|
20096
|
+
return keyframes(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20069
20097
|
};
|
|
20070
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20098
|
+
var ToastContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20071
20099
|
var ToastContent = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20072
20100
|
var distanceFromTop = _a.distanceFromTop;
|
|
20073
20101
|
return distanceFromTop || '124px';
|
|
@@ -20086,7 +20114,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20086
20114
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20087
20115
|
});
|
|
20088
20116
|
var CloseIcon = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20089
|
-
var templateObject_1$
|
|
20117
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20090
20118
|
|
|
20091
20119
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20092
20120
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20106,9 +20134,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20106
20134
|
});
|
|
20107
20135
|
Toast.displayName = 'Toast';
|
|
20108
20136
|
|
|
20109
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20110
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20111
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20137
|
+
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20138
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20139
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
20112
20140
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __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'); });
|
|
20113
20141
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20114
20142
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
@@ -20158,11 +20186,11 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20158
20186
|
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));
|
|
20159
20187
|
})] }), void 0));
|
|
20160
20188
|
};
|
|
20161
|
-
var templateObject_1$
|
|
20189
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20162
20190
|
|
|
20163
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20164
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20165
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20191
|
+
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20192
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20193
|
+
var CheckpointDate = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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; });
|
|
20166
20194
|
var CheckpointDateLabel = newStyled.p(templateObject_4$7 || (templateObject_4$7 = __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'); });
|
|
20167
20195
|
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20168
20196
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
@@ -20198,9 +20226,9 @@ var TrackingProgress = function (_a) {
|
|
|
20198
20226
|
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));
|
|
20199
20227
|
})] }), void 0));
|
|
20200
20228
|
};
|
|
20201
|
-
var templateObject_1$
|
|
20229
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20202
20230
|
|
|
20203
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20231
|
+
var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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 padding: 5px 2px;\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 padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20204
20232
|
var textPosition = _a.textPosition;
|
|
20205
20233
|
return textPosition;
|
|
20206
20234
|
}, function (_a) {
|
|
@@ -20213,7 +20241,7 @@ var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = _
|
|
|
20213
20241
|
var borderRadius = _a.borderRadius;
|
|
20214
20242
|
return borderRadius || '8px';
|
|
20215
20243
|
});
|
|
20216
|
-
var templateObject_1$
|
|
20244
|
+
var templateObject_1$9;
|
|
20217
20245
|
|
|
20218
20246
|
var getDefaultCountdown = function () {
|
|
20219
20247
|
var tomorrowDate = new Date();
|
|
@@ -20229,7 +20257,7 @@ var HurryUp = function (_a) {
|
|
|
20229
20257
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "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$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20230
20258
|
};
|
|
20231
20259
|
|
|
20232
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20260
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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) {
|
|
20233
20261
|
var size = _a.size;
|
|
20234
20262
|
return (size ? size : '100%');
|
|
20235
20263
|
}, function (_a) {
|
|
@@ -20243,7 +20271,7 @@ var borderSize = {
|
|
|
20243
20271
|
large: '3px',
|
|
20244
20272
|
};
|
|
20245
20273
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20246
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20274
|
+
var StyledSpinner = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20247
20275
|
var size = _a.size;
|
|
20248
20276
|
return borderSize[size];
|
|
20249
20277
|
}, function (_a) {
|
|
@@ -20256,7 +20284,7 @@ var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __
|
|
|
20256
20284
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20257
20285
|
return duration;
|
|
20258
20286
|
});
|
|
20259
|
-
var templateObject_1$
|
|
20287
|
+
var templateObject_1$8, templateObject_2$8;
|
|
20260
20288
|
|
|
20261
20289
|
var Spinner = function (_a) {
|
|
20262
20290
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -20277,9 +20305,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20277
20305
|
var Shades700Color = '#292929';
|
|
20278
20306
|
var PrimaryColor = '#f7a08b';
|
|
20279
20307
|
var ClubBorderColor = '#882a2b';
|
|
20280
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20281
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20282
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20308
|
+
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20309
|
+
var DiscountTag = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20310
|
+
var ContainerBase = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
20283
20311
|
var selected = _a.selected;
|
|
20284
20312
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20285
20313
|
}, function (_a) {
|
|
@@ -20320,7 +20348,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20320
20348
|
: Shades200Color;
|
|
20321
20349
|
});
|
|
20322
20350
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20323
|
-
var templateObject_1$
|
|
20351
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20324
20352
|
|
|
20325
20353
|
var ClubOfferSelector = function (_a) {
|
|
20326
20354
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20366,21 +20394,6 @@ var ClubOfferSelector = function (_a) {
|
|
|
20366
20394
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20367
20395
|
};
|
|
20368
20396
|
|
|
20369
|
-
var LabelWrapper = newStyled.label(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
20370
|
-
var SwitchWrapper = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
20371
|
-
var InputWrapper = newStyled.input(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
20372
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20373
|
-
|
|
20374
|
-
var ToggleComponent = function (_a) {
|
|
20375
|
-
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20376
|
-
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20377
|
-
var handleChange = function (e) {
|
|
20378
|
-
setChecked(function (value) { return !value; });
|
|
20379
|
-
onToggle(e.target.checked);
|
|
20380
|
-
};
|
|
20381
|
-
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20382
|
-
};
|
|
20383
|
-
|
|
20384
20397
|
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20385
20398
|
var $checked = _a.$checked;
|
|
20386
20399
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
@@ -20390,23 +20403,23 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20390
20403
|
});
|
|
20391
20404
|
var CardHeaderWrapper = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20392
20405
|
var CardBody = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20393
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n
|
|
20406
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20394
20407
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20395
20408
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20396
20409
|
|
|
20397
20410
|
function Card(_a) {
|
|
20398
|
-
var children = _a.children, link = _a.link,
|
|
20399
|
-
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [
|
|
20411
|
+
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20412
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20400
20413
|
}
|
|
20401
20414
|
|
|
20402
20415
|
function JoinClubCard(_a) {
|
|
20403
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked,
|
|
20416
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20404
20417
|
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20405
20418
|
var handleToggleValue = function (value) {
|
|
20406
20419
|
setChecked(value);
|
|
20407
20420
|
onCheckToggle(value);
|
|
20408
20421
|
};
|
|
20409
|
-
return (jsx$1(Card, __assign$1({ link: link,
|
|
20422
|
+
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20410
20423
|
}
|
|
20411
20424
|
|
|
20412
20425
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
@@ -20757,17 +20770,20 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$
|
|
|
20757
20770
|
var theme = _a.theme;
|
|
20758
20771
|
return theme.colors.pallete.primary.color;
|
|
20759
20772
|
});
|
|
20760
|
-
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])))
|
|
20773
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20774
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20775
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20776
|
+
});
|
|
20761
20777
|
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
20762
20778
|
var paddingRight = _a.paddingRight;
|
|
20763
20779
|
return paddingRight || '12px';
|
|
20764
20780
|
});
|
|
20765
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n
|
|
20781
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
20766
20782
|
var width = _a.width, theme = _a.theme;
|
|
20767
20783
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
20768
20784
|
}, function (_a) {
|
|
20769
|
-
var
|
|
20770
|
-
return
|
|
20785
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20786
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20771
20787
|
}, function (_a) {
|
|
20772
20788
|
var borderRadius = _a.borderRadius;
|
|
20773
20789
|
return borderRadius || '0px';
|
|
@@ -20775,10 +20791,10 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_1
|
|
|
20775
20791
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20776
20792
|
|
|
20777
20793
|
var ProductGalleryMobileV4 = function (_a) {
|
|
20778
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
|
|
20794
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
20779
20795
|
var colors = useTheme$1().colors;
|
|
20780
|
-
var
|
|
20781
|
-
var
|
|
20796
|
+
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
20797
|
+
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
20782
20798
|
var slick = useRef(null);
|
|
20783
20799
|
var thumbnailRef = useRef(null);
|
|
20784
20800
|
var sliderWrapper = useRef(null);
|
|
@@ -20792,10 +20808,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20792
20808
|
}, []);
|
|
20793
20809
|
return (jsx$1(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20794
20810
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20795
|
-
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20811
|
+
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20796
20812
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20797
20813
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20798
|
-
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20814
|
+
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
20799
20815
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20800
20816
|
};
|
|
20801
20817
|
|