@trafilea/afrodita-components 6.25.2 → 6.26.1
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 +53 -52
- package/build/index.esm.js +795 -789
- package/build/index.esm.js.map +1 -1
- package/build/index.js +795 -789
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3153,265 +3153,6 @@ var formatPrice = function (value, _a) {
|
|
|
3153
3153
|
}).format(valueToFormat);
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Viewports = {
|
|
3157
|
-
mobile: 'mobile',
|
|
3158
|
-
tablet: 'tablet',
|
|
3159
|
-
desktop: 'desktop',
|
|
3160
|
-
desktopLarge: 'desktopLarge',
|
|
3161
|
-
};
|
|
3162
|
-
|
|
3163
|
-
//ANNOTATION: Those values are up to.
|
|
3164
|
-
var DEFAULT_BREAKPOINTS = {
|
|
3165
|
-
mobile: 640,
|
|
3166
|
-
tablet: 1024,
|
|
3167
|
-
desktop: 1280,
|
|
3168
|
-
};
|
|
3169
|
-
|
|
3170
|
-
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) {
|
|
3171
|
-
var height = _a.height;
|
|
3172
|
-
return (height ? height : '1.5em');
|
|
3173
|
-
}, function (_a) {
|
|
3174
|
-
var width = _a.width;
|
|
3175
|
-
return (width ? width : '100%');
|
|
3176
|
-
}, function (_a) {
|
|
3177
|
-
var theme = _a.theme;
|
|
3178
|
-
return theme.colors.background.disabled;
|
|
3179
|
-
}, function (_a) {
|
|
3180
|
-
var theme = _a.theme;
|
|
3181
|
-
return theme.radius.regular;
|
|
3182
|
-
}, function (_a) {
|
|
3183
|
-
var theme = _a.theme;
|
|
3184
|
-
return theme.colors.shades['10'].color;
|
|
3185
|
-
}, function (_a) {
|
|
3186
|
-
var theme = _a.theme;
|
|
3187
|
-
return theme.colors.background.disabled;
|
|
3188
|
-
}, function (_a) {
|
|
3189
|
-
var theme = _a.theme;
|
|
3190
|
-
return theme.colors.shades['10'].color;
|
|
3191
|
-
});
|
|
3192
|
-
var SkeletonBox = function (_a) {
|
|
3193
|
-
var width = _a.width, height = _a.height;
|
|
3194
|
-
var theme = useTheme();
|
|
3195
|
-
return jsxRuntime.jsx(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3196
|
-
};
|
|
3197
|
-
var templateObject_1$2a;
|
|
3198
|
-
|
|
3199
|
-
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) {
|
|
3200
|
-
var width = _a.width;
|
|
3201
|
-
return width;
|
|
3202
|
-
}, function (_a) {
|
|
3203
|
-
var height = _a.height;
|
|
3204
|
-
return height;
|
|
3205
|
-
}, function (_a) {
|
|
3206
|
-
var fill = _a.fill;
|
|
3207
|
-
return fill;
|
|
3208
|
-
}, function (_a) {
|
|
3209
|
-
var backgroundColor = _a.backgroundColor;
|
|
3210
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3211
|
-
}, function (_a) {
|
|
3212
|
-
var opacity = _a.opacity;
|
|
3213
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3214
|
-
});
|
|
3215
|
-
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) {
|
|
3216
|
-
var width = _a.width;
|
|
3217
|
-
return width;
|
|
3218
|
-
}, function (_a) {
|
|
3219
|
-
var height = _a.height;
|
|
3220
|
-
return height;
|
|
3221
|
-
}, function (_a) {
|
|
3222
|
-
var backgroundColor = _a.backgroundColor;
|
|
3223
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3224
|
-
}, function (_a) {
|
|
3225
|
-
var opacity = _a.opacity;
|
|
3226
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3227
|
-
});
|
|
3228
|
-
var templateObject_1$29, templateObject_2$1v;
|
|
3229
|
-
|
|
3230
|
-
/* eslint-disable no-undef */
|
|
3231
|
-
var cache = new Map();
|
|
3232
|
-
var fetching = new Map();
|
|
3233
|
-
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3234
|
-
if (cache.has(request)) {
|
|
3235
|
-
return cache.get(request);
|
|
3236
|
-
}
|
|
3237
|
-
if (fetching.has(request)) {
|
|
3238
|
-
return fetching.get(request);
|
|
3239
|
-
}
|
|
3240
|
-
var fetchPromise = fetch(request)
|
|
3241
|
-
.then(function (response) {
|
|
3242
|
-
if (response.status !== 200) {
|
|
3243
|
-
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3244
|
-
}
|
|
3245
|
-
return response;
|
|
3246
|
-
})
|
|
3247
|
-
.then(saveToCacheFn)
|
|
3248
|
-
.then(function (data) {
|
|
3249
|
-
cache.set(request, data);
|
|
3250
|
-
fetching.delete(request);
|
|
3251
|
-
return data;
|
|
3252
|
-
})
|
|
3253
|
-
.catch(function (error) {
|
|
3254
|
-
fetching.delete(request);
|
|
3255
|
-
throw error;
|
|
3256
|
-
});
|
|
3257
|
-
fetching.set(request, fetchPromise);
|
|
3258
|
-
return fetchPromise;
|
|
3259
|
-
};
|
|
3260
|
-
|
|
3261
|
-
var createIconImage = function (_a) {
|
|
3262
|
-
var src = _a.src;
|
|
3263
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
3264
|
-
var localUrl, error_1;
|
|
3265
|
-
return __generator(this, function (_b) {
|
|
3266
|
-
switch (_b.label) {
|
|
3267
|
-
case 0:
|
|
3268
|
-
_b.trys.push([0, 2, , 3]);
|
|
3269
|
-
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3270
|
-
var blob;
|
|
3271
|
-
return __generator(this, function (_a) {
|
|
3272
|
-
switch (_a.label) {
|
|
3273
|
-
case 0: return [4 /*yield*/, response.blob()];
|
|
3274
|
-
case 1:
|
|
3275
|
-
blob = _a.sent();
|
|
3276
|
-
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3277
|
-
}
|
|
3278
|
-
});
|
|
3279
|
-
}); })];
|
|
3280
|
-
case 1:
|
|
3281
|
-
localUrl = _b.sent();
|
|
3282
|
-
return [2 /*return*/, {
|
|
3283
|
-
src: localUrl,
|
|
3284
|
-
}];
|
|
3285
|
-
case 2:
|
|
3286
|
-
error_1 = _b.sent();
|
|
3287
|
-
console.warn(error_1);
|
|
3288
|
-
return [2 /*return*/, undefined];
|
|
3289
|
-
case 3: return [2 /*return*/];
|
|
3290
|
-
}
|
|
3291
|
-
});
|
|
3292
|
-
});
|
|
3293
|
-
};
|
|
3294
|
-
|
|
3295
|
-
var getIconDimension = function (dimension) {
|
|
3296
|
-
if (!dimension)
|
|
3297
|
-
return '100%';
|
|
3298
|
-
if (String(dimension).includes('px') ||
|
|
3299
|
-
String(dimension).includes('%') ||
|
|
3300
|
-
String(dimension).includes('rem')) {
|
|
3301
|
-
return dimension;
|
|
3302
|
-
}
|
|
3303
|
-
return "".concat(dimension, "rem");
|
|
3304
|
-
};
|
|
3305
|
-
|
|
3306
|
-
var UnmemoIconFromExtSource = function (_a) {
|
|
3307
|
-
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"]);
|
|
3308
|
-
var _b = React$2.useState(false), error = _b[0], setError = _b[1];
|
|
3309
|
-
var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3310
|
-
React$2.useEffect(function () {
|
|
3311
|
-
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3312
|
-
var localSource;
|
|
3313
|
-
return __generator(this, function (_a) {
|
|
3314
|
-
switch (_a.label) {
|
|
3315
|
-
case 0: return [4 /*yield*/, createIconImage({
|
|
3316
|
-
src: iconURL,
|
|
3317
|
-
})];
|
|
3318
|
-
case 1:
|
|
3319
|
-
localSource = _a.sent();
|
|
3320
|
-
if (localSource) {
|
|
3321
|
-
setLocalSource(localSource);
|
|
3322
|
-
return [2 /*return*/];
|
|
3323
|
-
}
|
|
3324
|
-
setError(true);
|
|
3325
|
-
return [2 /*return*/];
|
|
3326
|
-
}
|
|
3327
|
-
});
|
|
3328
|
-
}); };
|
|
3329
|
-
if (!localSource) {
|
|
3330
|
-
fetchIcon();
|
|
3331
|
-
}
|
|
3332
|
-
}, [iconURL]);
|
|
3333
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3334
|
-
if (error) {
|
|
3335
|
-
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3336
|
-
}
|
|
3337
|
-
if (!localSource) {
|
|
3338
|
-
return jsxRuntime.jsx(SkeletonBox, { width: width, height: height }, void 0);
|
|
3339
|
-
}
|
|
3340
|
-
if (!fill && !svgProps) {
|
|
3341
|
-
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3342
|
-
}
|
|
3343
|
-
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3344
|
-
};
|
|
3345
|
-
var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
|
|
3346
|
-
|
|
3347
|
-
/* eslint-disable react/forbid-component-props */
|
|
3348
|
-
var UnmemoIcon = function (_a) {
|
|
3349
|
-
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"]);
|
|
3350
|
-
var assets = useTheme().assets;
|
|
3351
|
-
var newWidth = width && getIconDimension(width);
|
|
3352
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3353
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3354
|
-
var svgSplit = name.split('/');
|
|
3355
|
-
var svgId = svgSplit[svgSplit.length - 1];
|
|
3356
|
-
if (assets.isSameOriginIcons) {
|
|
3357
|
-
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3358
|
-
}
|
|
3359
|
-
return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3360
|
-
};
|
|
3361
|
-
var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3362
|
-
|
|
3363
|
-
var getValidSize = function (size) {
|
|
3364
|
-
if (!size) {
|
|
3365
|
-
return 'auto';
|
|
3366
|
-
}
|
|
3367
|
-
if (typeof size === 'number') {
|
|
3368
|
-
return String(size);
|
|
3369
|
-
}
|
|
3370
|
-
if (size.endsWith('px')) {
|
|
3371
|
-
return size.replace('px', '');
|
|
3372
|
-
}
|
|
3373
|
-
if (Number(size))
|
|
3374
|
-
return String(Number(size));
|
|
3375
|
-
return 'auto';
|
|
3376
|
-
};
|
|
3377
|
-
|
|
3378
|
-
var DEFAULT_QUALITY = 100;
|
|
3379
|
-
var buildImageUrl = function (_a) {
|
|
3380
|
-
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3381
|
-
try {
|
|
3382
|
-
new URL(src);
|
|
3383
|
-
var baseUrl = new URL(src);
|
|
3384
|
-
if (!baseUrl.host) {
|
|
3385
|
-
return src;
|
|
3386
|
-
}
|
|
3387
|
-
if (cdn.includes(baseUrl.host)) {
|
|
3388
|
-
return src;
|
|
3389
|
-
}
|
|
3390
|
-
var url = encodeURIComponent(src);
|
|
3391
|
-
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3392
|
-
var width = getValidSize(widthString);
|
|
3393
|
-
var height = getValidSize(heightString);
|
|
3394
|
-
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3395
|
-
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3396
|
-
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3397
|
-
}
|
|
3398
|
-
catch (e) {
|
|
3399
|
-
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3400
|
-
return src;
|
|
3401
|
-
}
|
|
3402
|
-
};
|
|
3403
|
-
|
|
3404
|
-
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; });
|
|
3405
|
-
var Image$3 = function (_a) {
|
|
3406
|
-
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"]);
|
|
3407
|
-
var config = useTheme().config;
|
|
3408
|
-
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3409
|
-
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3410
|
-
: src;
|
|
3411
|
-
return (jsxRuntime.jsx(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));
|
|
3412
|
-
};
|
|
3413
|
-
var templateObject_1$28;
|
|
3414
|
-
|
|
3415
3156
|
exports.CardSectionType = void 0;
|
|
3416
3157
|
(function (CardSectionType) {
|
|
3417
3158
|
CardSectionType[CardSectionType["Header"] = 0] = "Header";
|
|
@@ -3466,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3466
3207
|
};
|
|
3467
3208
|
}
|
|
3468
3209
|
};
|
|
3469
|
-
var Container$
|
|
3210
|
+
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) {
|
|
3470
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3471
3212
|
return backgroundColor;
|
|
3472
3213
|
}, function (_a) {
|
|
@@ -3488,7 +3229,7 @@ var Container$1i = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
3488
3229
|
var size = _a.size;
|
|
3489
3230
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3490
3231
|
});
|
|
3491
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3232
|
+
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) {
|
|
3492
3233
|
var textColor = _a.textColor;
|
|
3493
3234
|
return textColor;
|
|
3494
3235
|
}, function (_a) {
|
|
@@ -3503,9 +3244,9 @@ var H3$3 = newStyled.h3(templateObject_2$1u || (templateObject_2$1u = __makeTemp
|
|
|
3503
3244
|
var ClubOfferTag = function (_a) {
|
|
3504
3245
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
3505
3246
|
var theme = useTheme();
|
|
3506
|
-
return (jsxRuntime.jsx(Container$
|
|
3247
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3507
3248
|
};
|
|
3508
|
-
var templateObject_1$
|
|
3249
|
+
var templateObject_1$2b, templateObject_2$1w;
|
|
3509
3250
|
|
|
3510
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3511
3252
|
var _a, _b, _c;
|
|
@@ -3536,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3536
3277
|
};
|
|
3537
3278
|
}
|
|
3538
3279
|
};
|
|
3539
|
-
var Container$
|
|
3280
|
+
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) {
|
|
3540
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3541
3282
|
return backgroundColor;
|
|
3542
3283
|
}, function (_a) {
|
|
@@ -3558,7 +3299,7 @@ var Container$1h = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
3558
3299
|
var size = _a.size;
|
|
3559
3300
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3560
3301
|
});
|
|
3561
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3302
|
+
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) {
|
|
3562
3303
|
var textColor = _a.textColor;
|
|
3563
3304
|
return textColor;
|
|
3564
3305
|
}, function (_a) {
|
|
@@ -3573,9 +3314,23 @@ var H3$2 = newStyled.h3(templateObject_2$1t || (templateObject_2$1t = __makeTemp
|
|
|
3573
3314
|
var DiscountTag$2 = function (_a) {
|
|
3574
3315
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3575
3316
|
var theme = useTheme();
|
|
3576
|
-
return (jsxRuntime.jsx(Container$
|
|
3317
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3577
3318
|
};
|
|
3578
|
-
var templateObject_1$
|
|
3319
|
+
var templateObject_1$2a, templateObject_2$1v;
|
|
3320
|
+
|
|
3321
|
+
var Viewports = {
|
|
3322
|
+
mobile: 'mobile',
|
|
3323
|
+
tablet: 'tablet',
|
|
3324
|
+
desktop: 'desktop',
|
|
3325
|
+
desktopLarge: 'desktopLarge',
|
|
3326
|
+
};
|
|
3327
|
+
|
|
3328
|
+
//ANNOTATION: Those values are up to.
|
|
3329
|
+
var DEFAULT_BREAKPOINTS = {
|
|
3330
|
+
mobile: 640,
|
|
3331
|
+
tablet: 1024,
|
|
3332
|
+
desktop: 1280,
|
|
3333
|
+
};
|
|
3579
3334
|
|
|
3580
3335
|
function getWindowDimensions() {
|
|
3581
3336
|
if (typeof window === 'undefined')
|
|
@@ -3670,8 +3425,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3670
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3671
3426
|
}
|
|
3672
3427
|
};
|
|
3673
|
-
var Container$
|
|
3674
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
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"])));
|
|
3429
|
+
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) {
|
|
3675
3430
|
var weight = _a.weight;
|
|
3676
3431
|
return (weight ? weight : '400');
|
|
3677
3432
|
}, function (_a) {
|
|
@@ -3726,11 +3481,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3726
3481
|
: exports.ComponentSize.XSmall;
|
|
3727
3482
|
return (jsxRuntime.jsx(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));
|
|
3728
3483
|
};
|
|
3729
|
-
return (jsxRuntime.jsxs(Container$
|
|
3484
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3730
3485
|
};
|
|
3731
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$29, templateObject_2$1u, templateObject_3$19;
|
|
3732
3487
|
|
|
3733
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3734
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
3735
3490
|
var _b;
|
|
3736
3491
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, 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"]);
|
|
@@ -3783,7 +3538,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3783
3538
|
var savetoString = saveto.toFixed(2);
|
|
3784
3539
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3785
3540
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3786
|
-
return (jsxRuntime.jsxs(Container$
|
|
3541
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3787
3542
|
marginTop: '-5px',
|
|
3788
3543
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3789
3544
|
? finalPriceArray[0]
|
|
@@ -3801,10 +3556,10 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3801
3556
|
lineHeight: '22px',
|
|
3802
3557
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3803
3558
|
};
|
|
3804
|
-
var templateObject_1$
|
|
3559
|
+
var templateObject_1$28;
|
|
3805
3560
|
|
|
3806
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3807
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3561
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3562
|
+
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"])));
|
|
3808
3563
|
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"])));
|
|
3809
3564
|
var PriceLabelV3 = function (_a) {
|
|
3810
3565
|
var _b;
|
|
@@ -3840,115 +3595,380 @@ var PriceLabelV3 = function (_a) {
|
|
|
3840
3595
|
originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
|
|
3841
3596
|
finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
|
|
3842
3597
|
}
|
|
3843
|
-
else {
|
|
3844
|
-
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
3845
|
-
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
3598
|
+
else {
|
|
3599
|
+
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
3600
|
+
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
3601
|
+
}
|
|
3602
|
+
var saveto = originalPriceNum - finalPriceNum;
|
|
3603
|
+
var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
|
|
3604
|
+
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
3605
|
+
saveto = Math.floor(saveto) + 0.0;
|
|
3606
|
+
}
|
|
3607
|
+
else if (decimalPart >= 0.51 && decimalPart < 1.0) {
|
|
3608
|
+
saveto = Math.floor(saveto) + 0.5;
|
|
3609
|
+
}
|
|
3610
|
+
var savetoString = saveto.toFixed(2);
|
|
3611
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3612
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3613
|
+
var DiscountedPriceOfEach = function () {
|
|
3614
|
+
if (!itemsQuantity || itemsQuantity < 2)
|
|
3615
|
+
return null;
|
|
3616
|
+
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3617
|
+
};
|
|
3618
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1h, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1h, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3619
|
+
marginTop: '-5px',
|
|
3620
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3621
|
+
marginTop: '-6px',
|
|
3622
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
3623
|
+
letterSpacing: '-0.05rem',
|
|
3624
|
+
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
3625
|
+
borderRadius: '8px',
|
|
3626
|
+
width: '107px',
|
|
3627
|
+
height: '28px',
|
|
3628
|
+
alignItems: 'center',
|
|
3629
|
+
padding: '3px 8px 3px 8px',
|
|
3630
|
+
fontSize: '14px',
|
|
3631
|
+
lineHeight: '22px',
|
|
3632
|
+
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3633
|
+
};
|
|
3634
|
+
var templateObject_1$27, templateObject_2$1t, templateObject_3$18;
|
|
3635
|
+
|
|
3636
|
+
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"])));
|
|
3637
|
+
var PriceLabel = function (_a) {
|
|
3638
|
+
var _b;
|
|
3639
|
+
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 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3640
|
+
var theme = useTheme();
|
|
3641
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3642
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3643
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3644
|
+
var currencySymbol = '$';
|
|
3645
|
+
if (typeof finalPrice === 'string') {
|
|
3646
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3647
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
3648
|
+
currencySymbol = availableCurrency;
|
|
3649
|
+
}
|
|
3650
|
+
});
|
|
3651
|
+
}
|
|
3652
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
3653
|
+
finalPrice.includes('.') &&
|
|
3654
|
+
finalPrice.includes(currencySymbol)
|
|
3655
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3656
|
+
: ['', ''];
|
|
3657
|
+
var priceCommonProps = {
|
|
3658
|
+
size: exports.ComponentSize.Small,
|
|
3659
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
3660
|
+
weight: 700,
|
|
3661
|
+
};
|
|
3662
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3663
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3664
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3665
|
+
marginTop: '-5px',
|
|
3666
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3667
|
+
marginTop: '-6px',
|
|
3668
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3669
|
+
};
|
|
3670
|
+
var templateObject_1$26;
|
|
3671
|
+
|
|
3672
|
+
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"])));
|
|
3673
|
+
var PriceLabelV2 = function (_a) {
|
|
3674
|
+
var _b;
|
|
3675
|
+
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 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3676
|
+
var theme = useTheme();
|
|
3677
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3678
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3679
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3680
|
+
var currencySymbol = '$';
|
|
3681
|
+
if (typeof finalPrice === 'string') {
|
|
3682
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3683
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
3684
|
+
currencySymbol = availableCurrency;
|
|
3685
|
+
}
|
|
3686
|
+
});
|
|
3687
|
+
}
|
|
3688
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
3689
|
+
finalPrice.includes('.') &&
|
|
3690
|
+
finalPrice.includes(currencySymbol)
|
|
3691
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3692
|
+
: ['', ''];
|
|
3693
|
+
var priceCommonProps = {
|
|
3694
|
+
size: exports.ComponentSize.Small,
|
|
3695
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
3696
|
+
weight: 700,
|
|
3697
|
+
};
|
|
3698
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ style: { marginRight: '10px' }, size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3699
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3700
|
+
var finalPriceString = finalPriceArray[0]
|
|
3701
|
+
? finalPriceArray[0]
|
|
3702
|
+
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3703
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3704
|
+
};
|
|
3705
|
+
var templateObject_1$25;
|
|
3706
|
+
|
|
3707
|
+
var ClubGradient$1 = "linear-gradient(90deg, #882a2b 0%, #f27c65 226.92%)";
|
|
3708
|
+
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"])));
|
|
3709
|
+
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);
|
|
3710
|
+
var templateObject_1$24, templateObject_2$1s;
|
|
3711
|
+
|
|
3712
|
+
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) {
|
|
3713
|
+
var height = _a.height;
|
|
3714
|
+
return (height ? height : '1.5em');
|
|
3715
|
+
}, function (_a) {
|
|
3716
|
+
var width = _a.width;
|
|
3717
|
+
return (width ? width : '100%');
|
|
3718
|
+
}, function (_a) {
|
|
3719
|
+
var theme = _a.theme;
|
|
3720
|
+
return theme.colors.background.disabled;
|
|
3721
|
+
}, function (_a) {
|
|
3722
|
+
var theme = _a.theme;
|
|
3723
|
+
return theme.radius.regular;
|
|
3724
|
+
}, function (_a) {
|
|
3725
|
+
var theme = _a.theme;
|
|
3726
|
+
return theme.colors.shades['10'].color;
|
|
3727
|
+
}, function (_a) {
|
|
3728
|
+
var theme = _a.theme;
|
|
3729
|
+
return theme.colors.background.disabled;
|
|
3730
|
+
}, function (_a) {
|
|
3731
|
+
var theme = _a.theme;
|
|
3732
|
+
return theme.colors.shades['10'].color;
|
|
3733
|
+
});
|
|
3734
|
+
var SkeletonBox = function (_a) {
|
|
3735
|
+
var width = _a.width, height = _a.height;
|
|
3736
|
+
var theme = useTheme();
|
|
3737
|
+
return jsxRuntime.jsx(Container$1g, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3738
|
+
};
|
|
3739
|
+
var templateObject_1$23;
|
|
3740
|
+
|
|
3741
|
+
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) {
|
|
3742
|
+
var width = _a.width;
|
|
3743
|
+
return width;
|
|
3744
|
+
}, function (_a) {
|
|
3745
|
+
var height = _a.height;
|
|
3746
|
+
return height;
|
|
3747
|
+
}, function (_a) {
|
|
3748
|
+
var fill = _a.fill;
|
|
3749
|
+
return fill;
|
|
3750
|
+
}, function (_a) {
|
|
3751
|
+
var backgroundColor = _a.backgroundColor;
|
|
3752
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3753
|
+
}, function (_a) {
|
|
3754
|
+
var opacity = _a.opacity;
|
|
3755
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3756
|
+
});
|
|
3757
|
+
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) {
|
|
3758
|
+
var width = _a.width;
|
|
3759
|
+
return width;
|
|
3760
|
+
}, function (_a) {
|
|
3761
|
+
var height = _a.height;
|
|
3762
|
+
return height;
|
|
3763
|
+
}, function (_a) {
|
|
3764
|
+
var backgroundColor = _a.backgroundColor;
|
|
3765
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3766
|
+
}, function (_a) {
|
|
3767
|
+
var opacity = _a.opacity;
|
|
3768
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3769
|
+
});
|
|
3770
|
+
var templateObject_1$22, templateObject_2$1r;
|
|
3771
|
+
|
|
3772
|
+
/* eslint-disable no-undef */
|
|
3773
|
+
var cache = new Map();
|
|
3774
|
+
var fetching = new Map();
|
|
3775
|
+
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3776
|
+
if (cache.has(request)) {
|
|
3777
|
+
return cache.get(request);
|
|
3778
|
+
}
|
|
3779
|
+
if (fetching.has(request)) {
|
|
3780
|
+
return fetching.get(request);
|
|
3781
|
+
}
|
|
3782
|
+
var fetchPromise = fetch(request)
|
|
3783
|
+
.then(function (response) {
|
|
3784
|
+
if (response.status !== 200) {
|
|
3785
|
+
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3786
|
+
}
|
|
3787
|
+
return response;
|
|
3788
|
+
})
|
|
3789
|
+
.then(saveToCacheFn)
|
|
3790
|
+
.then(function (data) {
|
|
3791
|
+
cache.set(request, data);
|
|
3792
|
+
fetching.delete(request);
|
|
3793
|
+
return data;
|
|
3794
|
+
})
|
|
3795
|
+
.catch(function (error) {
|
|
3796
|
+
fetching.delete(request);
|
|
3797
|
+
throw error;
|
|
3798
|
+
});
|
|
3799
|
+
fetching.set(request, fetchPromise);
|
|
3800
|
+
return fetchPromise;
|
|
3801
|
+
};
|
|
3802
|
+
|
|
3803
|
+
var createIconImage = function (_a) {
|
|
3804
|
+
var src = _a.src;
|
|
3805
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
3806
|
+
var localUrl, error_1;
|
|
3807
|
+
return __generator(this, function (_b) {
|
|
3808
|
+
switch (_b.label) {
|
|
3809
|
+
case 0:
|
|
3810
|
+
_b.trys.push([0, 2, , 3]);
|
|
3811
|
+
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3812
|
+
var blob;
|
|
3813
|
+
return __generator(this, function (_a) {
|
|
3814
|
+
switch (_a.label) {
|
|
3815
|
+
case 0: return [4 /*yield*/, response.blob()];
|
|
3816
|
+
case 1:
|
|
3817
|
+
blob = _a.sent();
|
|
3818
|
+
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3819
|
+
}
|
|
3820
|
+
});
|
|
3821
|
+
}); })];
|
|
3822
|
+
case 1:
|
|
3823
|
+
localUrl = _b.sent();
|
|
3824
|
+
return [2 /*return*/, {
|
|
3825
|
+
src: localUrl,
|
|
3826
|
+
}];
|
|
3827
|
+
case 2:
|
|
3828
|
+
error_1 = _b.sent();
|
|
3829
|
+
console.warn(error_1);
|
|
3830
|
+
return [2 /*return*/, undefined];
|
|
3831
|
+
case 3: return [2 /*return*/];
|
|
3832
|
+
}
|
|
3833
|
+
});
|
|
3834
|
+
});
|
|
3835
|
+
};
|
|
3836
|
+
|
|
3837
|
+
var getIconDimension = function (dimension) {
|
|
3838
|
+
if (!dimension)
|
|
3839
|
+
return '100%';
|
|
3840
|
+
if (String(dimension).includes('px') ||
|
|
3841
|
+
String(dimension).includes('%') ||
|
|
3842
|
+
String(dimension).includes('rem')) {
|
|
3843
|
+
return dimension;
|
|
3844
|
+
}
|
|
3845
|
+
return "".concat(dimension, "rem");
|
|
3846
|
+
};
|
|
3847
|
+
|
|
3848
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3849
|
+
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"]);
|
|
3850
|
+
var _b = React$2.useState(false), error = _b[0], setError = _b[1];
|
|
3851
|
+
var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3852
|
+
React$2.useEffect(function () {
|
|
3853
|
+
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3854
|
+
var localSource;
|
|
3855
|
+
return __generator(this, function (_a) {
|
|
3856
|
+
switch (_a.label) {
|
|
3857
|
+
case 0: return [4 /*yield*/, createIconImage({
|
|
3858
|
+
src: iconURL,
|
|
3859
|
+
})];
|
|
3860
|
+
case 1:
|
|
3861
|
+
localSource = _a.sent();
|
|
3862
|
+
if (localSource) {
|
|
3863
|
+
setLocalSource(localSource);
|
|
3864
|
+
return [2 /*return*/];
|
|
3865
|
+
}
|
|
3866
|
+
setError(true);
|
|
3867
|
+
return [2 /*return*/];
|
|
3868
|
+
}
|
|
3869
|
+
});
|
|
3870
|
+
}); };
|
|
3871
|
+
if (!localSource) {
|
|
3872
|
+
fetchIcon();
|
|
3873
|
+
}
|
|
3874
|
+
}, [iconURL]);
|
|
3875
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3876
|
+
if (error) {
|
|
3877
|
+
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3846
3878
|
}
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
3850
|
-
saveto = Math.floor(saveto) + 0.0;
|
|
3879
|
+
if (!localSource) {
|
|
3880
|
+
return jsxRuntime.jsx(SkeletonBox, { width: width, height: height }, void 0);
|
|
3851
3881
|
}
|
|
3852
|
-
|
|
3853
|
-
|
|
3882
|
+
if (!fill && !svgProps) {
|
|
3883
|
+
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3854
3884
|
}
|
|
3855
|
-
|
|
3856
|
-
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3857
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3858
|
-
var DiscountedPriceOfEach = function () {
|
|
3859
|
-
if (!itemsQuantity || itemsQuantity < 2)
|
|
3860
|
-
return null;
|
|
3861
|
-
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3862
|
-
};
|
|
3863
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1g, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1g, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3864
|
-
marginTop: '-5px',
|
|
3865
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3866
|
-
marginTop: '-6px',
|
|
3867
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
3868
|
-
letterSpacing: '-0.05rem',
|
|
3869
|
-
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
3870
|
-
borderRadius: '8px',
|
|
3871
|
-
width: '107px',
|
|
3872
|
-
height: '28px',
|
|
3873
|
-
alignItems: 'center',
|
|
3874
|
-
padding: '3px 8px 3px 8px',
|
|
3875
|
-
fontSize: '14px',
|
|
3876
|
-
lineHeight: '22px',
|
|
3877
|
-
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3885
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3878
3886
|
};
|
|
3879
|
-
var
|
|
3887
|
+
var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
|
|
3880
3888
|
|
|
3881
|
-
|
|
3882
|
-
var
|
|
3883
|
-
var _b;
|
|
3884
|
-
var
|
|
3885
|
-
var
|
|
3886
|
-
var
|
|
3887
|
-
var
|
|
3888
|
-
var
|
|
3889
|
-
var
|
|
3890
|
-
if (
|
|
3891
|
-
|
|
3892
|
-
if (finalPrice.includes(availableCurrency)) {
|
|
3893
|
-
currencySymbol = availableCurrency;
|
|
3894
|
-
}
|
|
3895
|
-
});
|
|
3889
|
+
/* eslint-disable react/forbid-component-props */
|
|
3890
|
+
var UnmemoIcon = function (_a) {
|
|
3891
|
+
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"]);
|
|
3892
|
+
var assets = useTheme().assets;
|
|
3893
|
+
var newWidth = width && getIconDimension(width);
|
|
3894
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3895
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3896
|
+
var svgSplit = name.split('/');
|
|
3897
|
+
var svgId = svgSplit[svgSplit.length - 1];
|
|
3898
|
+
if (assets.isSameOriginIcons) {
|
|
3899
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3896
3900
|
}
|
|
3897
|
-
|
|
3898
|
-
finalPrice.includes('.') &&
|
|
3899
|
-
finalPrice.includes(currencySymbol)
|
|
3900
|
-
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3901
|
-
: ['', ''];
|
|
3902
|
-
var priceCommonProps = {
|
|
3903
|
-
size: exports.ComponentSize.Small,
|
|
3904
|
-
color: color || theme.colors.pallete.secondary.color,
|
|
3905
|
-
weight: 700,
|
|
3906
|
-
};
|
|
3907
|
-
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3908
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3909
|
-
return (jsxRuntime.jsxs(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3910
|
-
marginTop: '-5px',
|
|
3911
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3912
|
-
marginTop: '-6px',
|
|
3913
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3901
|
+
return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3914
3902
|
};
|
|
3915
|
-
var
|
|
3903
|
+
var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3916
3904
|
|
|
3917
|
-
var
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
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 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3921
|
-
var theme = useTheme();
|
|
3922
|
-
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3923
|
-
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3924
|
-
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3925
|
-
var currencySymbol = '$';
|
|
3926
|
-
if (typeof finalPrice === 'string') {
|
|
3927
|
-
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3928
|
-
if (finalPrice.includes(availableCurrency)) {
|
|
3929
|
-
currencySymbol = availableCurrency;
|
|
3930
|
-
}
|
|
3931
|
-
});
|
|
3905
|
+
var getValidSize = function (size) {
|
|
3906
|
+
if (!size) {
|
|
3907
|
+
return 'auto';
|
|
3932
3908
|
}
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3909
|
+
if (typeof size === 'number') {
|
|
3910
|
+
return String(size);
|
|
3911
|
+
}
|
|
3912
|
+
if (size.endsWith('px')) {
|
|
3913
|
+
return size.replace('px', '');
|
|
3914
|
+
}
|
|
3915
|
+
if (Number(size))
|
|
3916
|
+
return String(Number(size));
|
|
3917
|
+
return 'auto';
|
|
3918
|
+
};
|
|
3919
|
+
|
|
3920
|
+
var DEFAULT_QUALITY = 100;
|
|
3921
|
+
var buildImageUrl = function (_a) {
|
|
3922
|
+
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3923
|
+
try {
|
|
3924
|
+
new URL(src);
|
|
3925
|
+
var baseUrl = new URL(src);
|
|
3926
|
+
if (!baseUrl.host) {
|
|
3927
|
+
return src;
|
|
3928
|
+
}
|
|
3929
|
+
if (cdn.includes(baseUrl.host)) {
|
|
3930
|
+
return src;
|
|
3931
|
+
}
|
|
3932
|
+
var url = encodeURIComponent(src);
|
|
3933
|
+
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3934
|
+
var width = getValidSize(widthString);
|
|
3935
|
+
var height = getValidSize(heightString);
|
|
3936
|
+
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3937
|
+
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3938
|
+
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3939
|
+
}
|
|
3940
|
+
catch (e) {
|
|
3941
|
+
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3942
|
+
return src;
|
|
3943
|
+
}
|
|
3944
|
+
};
|
|
3945
|
+
|
|
3946
|
+
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; });
|
|
3947
|
+
var Image$3 = function (_a) {
|
|
3948
|
+
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"]);
|
|
3949
|
+
var config = useTheme().config;
|
|
3950
|
+
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3951
|
+
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3952
|
+
: src;
|
|
3953
|
+
return (jsxRuntime.jsx(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));
|
|
3949
3954
|
};
|
|
3950
3955
|
var templateObject_1$21;
|
|
3951
3956
|
|
|
3957
|
+
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"])));
|
|
3958
|
+
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"])));
|
|
3959
|
+
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"])));
|
|
3960
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17;
|
|
3961
|
+
|
|
3962
|
+
var ToggleComponent = function (_a) {
|
|
3963
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
3964
|
+
var _c = React$2.useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
3965
|
+
var handleChange = function (e) {
|
|
3966
|
+
setChecked(function (value) { return !value; });
|
|
3967
|
+
onToggle(e.target.checked);
|
|
3968
|
+
};
|
|
3969
|
+
return (jsxRuntime.jsxs(LabelWrapper, { children: [jsxRuntime.jsx(InputWrapper$1, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsxRuntime.jsx(SwitchWrapper, {}, void 0)] }, void 0));
|
|
3970
|
+
};
|
|
3971
|
+
|
|
3952
3972
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3953
3973
|
|
|
3954
3974
|
var Camera = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/camera" }), void 0); };
|
|
@@ -4771,9 +4791,9 @@ function jsxs(type, props, key) {
|
|
|
4771
4791
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4772
4792
|
// `variants` styles that are consistent through all themes.
|
|
4773
4793
|
var TAGS = {
|
|
4774
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4775
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4776
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4794
|
+
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4795
|
+
hero2: newStyled.h2(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject([""], [""]))),
|
|
4796
|
+
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4777
4797
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4778
4798
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4779
4799
|
display3: newStyled.h3(templateObject_6$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
@@ -4907,11 +4927,11 @@ var DEFAULTS = {
|
|
|
4907
4927
|
size: 'regular',
|
|
4908
4928
|
},
|
|
4909
4929
|
};
|
|
4910
|
-
var templateObject_1$
|
|
4930
|
+
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;
|
|
4911
4931
|
|
|
4912
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4913
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4914
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4932
|
+
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"])));
|
|
4933
|
+
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"])));
|
|
4934
|
+
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"])));
|
|
4915
4935
|
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"])));
|
|
4916
4936
|
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"])));
|
|
4917
4937
|
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"])));
|
|
@@ -4939,27 +4959,27 @@ var PackCard$1 = function (_a) {
|
|
|
4939
4959
|
currency: currencyCode || 'USD',
|
|
4940
4960
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4941
4961
|
};
|
|
4942
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1_, templateObject_2$1o, templateObject_3$15, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4943
4963
|
|
|
4944
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4945
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4964
|
+
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"])));
|
|
4965
|
+
var DropContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4946
4966
|
var DropList = function (_a) {
|
|
4947
4967
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4948
4968
|
return (jsxRuntime.jsx(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4949
4969
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4950
4970
|
}) }, void 0));
|
|
4951
4971
|
};
|
|
4952
|
-
var templateObject_1$
|
|
4972
|
+
var templateObject_1$1Z, templateObject_2$1n;
|
|
4953
4973
|
|
|
4954
4974
|
var DROPS_TOTAL = 5;
|
|
4955
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4956
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4957
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4975
|
+
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"])));
|
|
4976
|
+
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"])));
|
|
4977
|
+
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"])));
|
|
4958
4978
|
var AbsorbencyLevel = function (_a) {
|
|
4959
4979
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4960
4980
|
return (jsxRuntime.jsxs(Container$1d, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4961
4981
|
};
|
|
4962
|
-
var templateObject_1$
|
|
4982
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$14;
|
|
4963
4983
|
|
|
4964
4984
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4965
4985
|
`),"","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(`
|
|
@@ -5035,7 +5055,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5035
5055
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5036
5056
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5037
5057
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5038
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5058
|
+
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"])));
|
|
5039
5059
|
var Accordion$1 = function (_a) {
|
|
5040
5060
|
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;
|
|
5041
5061
|
var theme = useTheme();
|
|
@@ -5059,9 +5079,9 @@ var Accordion$1 = function (_a) {
|
|
|
5059
5079
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5060
5080
|
} }), void 0));
|
|
5061
5081
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$1X;
|
|
5063
5083
|
|
|
5064
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5084
|
+
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"])));
|
|
5065
5085
|
var AccordionOptions = function (_a) {
|
|
5066
5086
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5067
5087
|
var _b = React$2.useState({
|
|
@@ -5085,7 +5105,7 @@ var AccordionOptions = function (_a) {
|
|
|
5085
5105
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5086
5106
|
}) }, void 0));
|
|
5087
5107
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5108
|
+
var templateObject_1$1W;
|
|
5089
5109
|
|
|
5090
5110
|
/**
|
|
5091
5111
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5221,22 +5241,22 @@ var isValidDate = function (value) {
|
|
|
5221
5241
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5222
5242
|
};
|
|
5223
5243
|
|
|
5224
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5225
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5226
|
-
var templateObject_1$
|
|
5244
|
+
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5245
|
+
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"])));
|
|
5246
|
+
var templateObject_1$1V, templateObject_2$1l;
|
|
5227
5247
|
|
|
5228
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5248
|
+
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) {
|
|
5229
5249
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5230
5250
|
return width;
|
|
5231
5251
|
}, function (_a) {
|
|
5232
5252
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5233
5253
|
return height;
|
|
5234
5254
|
});
|
|
5235
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5236
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5255
|
+
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"])));
|
|
5256
|
+
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"])));
|
|
5237
5257
|
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"])));
|
|
5238
5258
|
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"])));
|
|
5239
|
-
var templateObject_1$
|
|
5259
|
+
var templateObject_1$1U, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$D;
|
|
5240
5260
|
|
|
5241
5261
|
var CouponCard = function (_a) {
|
|
5242
5262
|
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;
|
|
@@ -5292,14 +5312,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5292
5312
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5293
5313
|
};
|
|
5294
5314
|
|
|
5295
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5296
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5315
|
+
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; });
|
|
5316
|
+
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"])));
|
|
5297
5317
|
var Error$1 = function (_a) {
|
|
5298
5318
|
var error = _a.error;
|
|
5299
5319
|
var theme = useTheme();
|
|
5300
5320
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5301
5321
|
};
|
|
5302
|
-
var templateObject_1$
|
|
5322
|
+
var templateObject_1$1T, templateObject_2$1j;
|
|
5303
5323
|
|
|
5304
5324
|
var BaseSelectButton = function (_a) {
|
|
5305
5325
|
var children = _a.children, as = _a.as;
|
|
@@ -5316,7 +5336,7 @@ function BaseSelectOption(_a) {
|
|
|
5316
5336
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5317
5337
|
}
|
|
5318
5338
|
|
|
5319
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5339
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5320
5340
|
function BaseSelect(_a) {
|
|
5321
5341
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5322
5342
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5326,7 +5346,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5326
5346
|
Options: BaseSelectOptions,
|
|
5327
5347
|
Option: BaseSelectOption,
|
|
5328
5348
|
});
|
|
5329
|
-
var templateObject_1$
|
|
5349
|
+
var templateObject_1$1S;
|
|
5330
5350
|
|
|
5331
5351
|
var CustomButton = newStyled.button(function (_a) {
|
|
5332
5352
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5365,7 +5385,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5365
5385
|
});
|
|
5366
5386
|
});
|
|
5367
5387
|
// TODO Remove this when we find the real solution
|
|
5368
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5388
|
+
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) {
|
|
5369
5389
|
var open = _a.open;
|
|
5370
5390
|
return open &&
|
|
5371
5391
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5385,7 +5405,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5385
5405
|
} }), void 0));
|
|
5386
5406
|
};
|
|
5387
5407
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5388
|
-
var templateObject_1$
|
|
5408
|
+
var templateObject_1$1R;
|
|
5389
5409
|
|
|
5390
5410
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5391
5411
|
var theme = _a.theme;
|
|
@@ -5552,7 +5572,7 @@ var CustomCheckboxStyles = {
|
|
|
5552
5572
|
},
|
|
5553
5573
|
};
|
|
5554
5574
|
|
|
5555
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5575
|
+
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"])));
|
|
5556
5576
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5557
5577
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5558
5578
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5563,7 +5583,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5563
5583
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5564
5584
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5565
5585
|
]; });
|
|
5566
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5586
|
+
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) {
|
|
5567
5587
|
var disabled = _a.disabled;
|
|
5568
5588
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5569
5589
|
});
|
|
@@ -5579,7 +5599,7 @@ var Checkbox = function (_a) {
|
|
|
5579
5599
|
};
|
|
5580
5600
|
return (jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5581
5601
|
};
|
|
5582
|
-
var templateObject_1$
|
|
5602
|
+
var templateObject_1$1Q, templateObject_2$1i;
|
|
5583
5603
|
|
|
5584
5604
|
var CustomOption = newStyled.li(function (_a) {
|
|
5585
5605
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5628,9 +5648,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5628
5648
|
Option: BaseDropdownOption,
|
|
5629
5649
|
});
|
|
5630
5650
|
|
|
5631
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5632
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5633
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5651
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5652
|
+
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"])));
|
|
5653
|
+
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5634
5654
|
var fontWeight = _a.fontWeight;
|
|
5635
5655
|
return fontWeight || '';
|
|
5636
5656
|
});
|
|
@@ -5665,7 +5685,7 @@ function SimpleDropdown(_a) {
|
|
|
5665
5685
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : React$2.Fragment;
|
|
5666
5686
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(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) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5667
5687
|
}
|
|
5668
|
-
var templateObject_1$
|
|
5688
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12;
|
|
5669
5689
|
|
|
5670
5690
|
/* base styles & size variants */
|
|
5671
5691
|
var CustomRadioStyles$2 = {
|
|
@@ -5730,9 +5750,9 @@ var ContainerStyles$2 = {
|
|
|
5730
5750
|
},
|
|
5731
5751
|
};
|
|
5732
5752
|
|
|
5733
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5753
|
+
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"])));
|
|
5734
5754
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5735
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5755
|
+
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) {
|
|
5736
5756
|
var disabled = _a.disabled;
|
|
5737
5757
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5758
|
});
|
|
@@ -5740,7 +5760,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5740
5760
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5741
5761
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5742
5762
|
]; });
|
|
5743
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$
|
|
5763
|
+
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) {
|
|
5744
5764
|
var theme = _a.theme;
|
|
5745
5765
|
return theme.component.radio.textSize;
|
|
5746
5766
|
}, function (_a) {
|
|
@@ -5763,7 +5783,7 @@ var RadioInput = function (_a) {
|
|
|
5763
5783
|
};
|
|
5764
5784
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5765
5785
|
};
|
|
5766
|
-
var templateObject_1$
|
|
5786
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$R;
|
|
5767
5787
|
|
|
5768
5788
|
var useOnClickOutside = function (ref, handler) {
|
|
5769
5789
|
React$2.useEffect(function () {
|
|
@@ -5856,7 +5876,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5856
5876
|
}
|
|
5857
5877
|
};
|
|
5858
5878
|
|
|
5859
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5879
|
+
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) {
|
|
5860
5880
|
var position = _a.position;
|
|
5861
5881
|
return getWrapperFlexDirection(position);
|
|
5862
5882
|
}, function (_a) {
|
|
@@ -5866,7 +5886,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __ma
|
|
|
5866
5886
|
var disableHover = _a.disableHover;
|
|
5867
5887
|
return (disableHover ? 0 : 1);
|
|
5868
5888
|
});
|
|
5869
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5889
|
+
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) {
|
|
5870
5890
|
var position = _a.position;
|
|
5871
5891
|
return getContainerFlexDirection(position);
|
|
5872
5892
|
}, function (_a) {
|
|
@@ -5894,7 +5914,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g
|
|
|
5894
5914
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5895
5915
|
return actual === expected ? margin : '0';
|
|
5896
5916
|
};
|
|
5897
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5917
|
+
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) {
|
|
5898
5918
|
var borderColor = _a.borderColor;
|
|
5899
5919
|
return borderColor;
|
|
5900
5920
|
}, function (_a) {
|
|
@@ -5921,7 +5941,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5921
5941
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5922
5942
|
return right;
|
|
5923
5943
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5944
|
+
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;
|
|
5925
5945
|
|
|
5926
5946
|
var Tooltip = function (_a) {
|
|
5927
5947
|
var _b;
|
|
@@ -5964,8 +5984,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5964
5984
|
};
|
|
5965
5985
|
};
|
|
5966
5986
|
|
|
5967
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5968
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5987
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5988
|
+
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) {
|
|
5969
5989
|
var selected = _a.selected, theme = _a.theme;
|
|
5970
5990
|
return selected
|
|
5971
5991
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5979,7 +5999,7 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5979
5999
|
var theme = _a.theme;
|
|
5980
6000
|
return theme.colors.pallete.primary.color;
|
|
5981
6001
|
});
|
|
5982
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
6002
|
+
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) {
|
|
5983
6003
|
var onClick = _a.onClick;
|
|
5984
6004
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5985
6005
|
});
|
|
@@ -6002,7 +6022,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
6002
6022
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6003
6023
|
});
|
|
6004
6024
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
6005
|
-
var templateObject_1$
|
|
6025
|
+
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;
|
|
6006
6026
|
|
|
6007
6027
|
var radioIds$2 = {
|
|
6008
6028
|
oneTime: {
|
|
@@ -6057,12 +6077,12 @@ var Autoship = function (_a) {
|
|
|
6057
6077
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6058
6078
|
};
|
|
6059
6079
|
|
|
6060
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6080
|
+
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) {
|
|
6061
6081
|
var theme = _a.theme;
|
|
6062
6082
|
return theme.name === 'TheSpaDr' &&
|
|
6063
6083
|
"\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 ";
|
|
6064
6084
|
});
|
|
6065
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6085
|
+
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) {
|
|
6066
6086
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6067
6087
|
return isSelected
|
|
6068
6088
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6078,7 +6098,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6078
6098
|
}
|
|
6079
6099
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6080
6100
|
};
|
|
6081
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6101
|
+
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) {
|
|
6082
6102
|
var selected = _a.selected, theme = _a.theme;
|
|
6083
6103
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6084
6104
|
}, function (_a) {
|
|
@@ -6115,7 +6135,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6115
6135
|
var theme = _a.theme;
|
|
6116
6136
|
return theme.component.autoship.tooltip.margin;
|
|
6117
6137
|
});
|
|
6118
|
-
var templateObject_1$
|
|
6138
|
+
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;
|
|
6119
6139
|
|
|
6120
6140
|
var radioIds$1 = {
|
|
6121
6141
|
oneTime: {
|
|
@@ -6193,13 +6213,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6193
6213
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6194
6214
|
_a$2);
|
|
6195
6215
|
|
|
6196
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6197
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6198
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6216
|
+
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6217
|
+
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"])));
|
|
6218
|
+
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"])));
|
|
6199
6219
|
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"])));
|
|
6200
6220
|
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"])));
|
|
6201
6221
|
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"])));
|
|
6202
|
-
var templateObject_1$
|
|
6222
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6203
6223
|
|
|
6204
6224
|
var NameWithStars = function (_a) {
|
|
6205
6225
|
var name = _a.name, size = _a.size;
|
|
@@ -6217,9 +6237,9 @@ var ResultFeedback = function (_a) {
|
|
|
6217
6237
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6218
6238
|
};
|
|
6219
6239
|
|
|
6220
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6221
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6222
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6240
|
+
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; });
|
|
6241
|
+
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"])));
|
|
6242
|
+
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; });
|
|
6223
6243
|
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) {
|
|
6224
6244
|
var theme = _a.theme;
|
|
6225
6245
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6230,7 +6250,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6230
6250
|
var theme = _a.theme, size = _a.size;
|
|
6231
6251
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6232
6252
|
});
|
|
6233
|
-
var templateObject_1$
|
|
6253
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6234
6254
|
|
|
6235
6255
|
/* base styles & size variants */
|
|
6236
6256
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6308,7 +6328,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6308
6328
|
return (jsxRuntime.jsxs(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6309
6329
|
};
|
|
6310
6330
|
|
|
6311
|
-
var Section = newStyled.div(templateObject_1$
|
|
6331
|
+
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) {
|
|
6312
6332
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6313
6333
|
});
|
|
6314
6334
|
var CardHeader = function (_a) {
|
|
@@ -6319,16 +6339,16 @@ var CardFooter = function (_a) {
|
|
|
6319
6339
|
var children = _a.children;
|
|
6320
6340
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6321
6341
|
};
|
|
6322
|
-
var templateObject_1$
|
|
6342
|
+
var templateObject_1$1I;
|
|
6323
6343
|
|
|
6324
|
-
var Body = newStyled.div(templateObject_1$
|
|
6344
|
+
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"])));
|
|
6325
6345
|
var CardBody$1 = function (_a) {
|
|
6326
6346
|
var children = _a.children;
|
|
6327
6347
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6328
6348
|
};
|
|
6329
|
-
var templateObject_1$
|
|
6349
|
+
var templateObject_1$1H;
|
|
6330
6350
|
|
|
6331
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6351
|
+
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) {
|
|
6332
6352
|
var flex = _a.flex;
|
|
6333
6353
|
return flex &&
|
|
6334
6354
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6350,16 +6370,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6350
6370
|
Footer: CardFooter,
|
|
6351
6371
|
Body: CardBody$1,
|
|
6352
6372
|
});
|
|
6353
|
-
var templateObject_1$
|
|
6373
|
+
var templateObject_1$1G;
|
|
6354
6374
|
|
|
6355
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6356
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6357
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6375
|
+
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"])));
|
|
6376
|
+
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"])));
|
|
6377
|
+
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) {
|
|
6358
6378
|
var color = _a.color;
|
|
6359
6379
|
return color;
|
|
6360
6380
|
});
|
|
6361
6381
|
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"])));
|
|
6362
|
-
var templateObject_1$
|
|
6382
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$L;
|
|
6363
6383
|
|
|
6364
6384
|
var Minimalistic = function (_a) {
|
|
6365
6385
|
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;
|
|
@@ -6367,28 +6387,28 @@ var Minimalistic = function (_a) {
|
|
|
6367
6387
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6368
6388
|
};
|
|
6369
6389
|
|
|
6370
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6371
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6372
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6390
|
+
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"])));
|
|
6391
|
+
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; });
|
|
6392
|
+
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; });
|
|
6373
6393
|
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"])));
|
|
6374
6394
|
var Simple = function (_a) {
|
|
6375
6395
|
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;
|
|
6376
6396
|
var theme = useTheme();
|
|
6377
6397
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$13, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6378
6398
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6399
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W, templateObject_4$K;
|
|
6380
6400
|
|
|
6381
6401
|
var Bundle = {
|
|
6382
6402
|
Minimalistic: Minimalistic,
|
|
6383
6403
|
Simple: Simple,
|
|
6384
6404
|
};
|
|
6385
6405
|
|
|
6386
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6406
|
+
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) {
|
|
6387
6407
|
var displayBNPL = _a.displayBNPL;
|
|
6388
6408
|
return (displayBNPL ? 'flex' : 'none');
|
|
6389
6409
|
});
|
|
6390
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6391
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6410
|
+
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"])));
|
|
6411
|
+
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"])));
|
|
6392
6412
|
var BuyNowPayLater = function (_a) {
|
|
6393
6413
|
var _b;
|
|
6394
6414
|
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;
|
|
@@ -6400,41 +6420,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6400
6420
|
}
|
|
6401
6421
|
return (jsxRuntime.jsx(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6402
6422
|
};
|
|
6403
|
-
var templateObject_1$
|
|
6423
|
+
var templateObject_1$1D, templateObject_2$18, templateObject_3$V;
|
|
6404
6424
|
|
|
6405
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6425
|
+
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; });
|
|
6406
6426
|
var Title$8 = function (_a) {
|
|
6407
6427
|
var title = _a.title;
|
|
6408
6428
|
var theme = useTheme();
|
|
6409
6429
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6410
6430
|
};
|
|
6411
|
-
var templateObject_1$
|
|
6431
|
+
var templateObject_1$1C;
|
|
6412
6432
|
|
|
6413
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6433
|
+
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; });
|
|
6414
6434
|
var Promo = function (_a) {
|
|
6415
6435
|
var text = _a.text;
|
|
6416
6436
|
var theme = useTheme();
|
|
6417
6437
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6418
6438
|
};
|
|
6419
|
-
var templateObject_1$
|
|
6439
|
+
var templateObject_1$1B;
|
|
6420
6440
|
|
|
6421
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6441
|
+
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; });
|
|
6422
6442
|
var Description$1 = function (_a) {
|
|
6423
6443
|
var text = _a.text;
|
|
6424
6444
|
var theme = useTheme();
|
|
6425
6445
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6426
6446
|
};
|
|
6427
|
-
var templateObject_1$
|
|
6447
|
+
var templateObject_1$1A;
|
|
6428
6448
|
|
|
6429
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6449
|
+
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"); });
|
|
6430
6450
|
var CloseButton$1 = function (_a) {
|
|
6431
6451
|
var onClick = _a.onClick, size = _a.size;
|
|
6432
6452
|
var theme = useTheme();
|
|
6433
6453
|
return (jsxRuntime.jsx(Container$11, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6434
6454
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6455
|
+
var templateObject_1$1z;
|
|
6436
6456
|
|
|
6437
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6457
|
+
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) {
|
|
6438
6458
|
var backgroundColor = _a.backgroundColor;
|
|
6439
6459
|
return backgroundColor;
|
|
6440
6460
|
}, function (_a) {
|
|
@@ -6449,7 +6469,7 @@ var OfferBanner = function (_a) {
|
|
|
6449
6469
|
var theme = useTheme();
|
|
6450
6470
|
return (jsxRuntime.jsx(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));
|
|
6451
6471
|
};
|
|
6452
|
-
var templateObject_1$
|
|
6472
|
+
var templateObject_1$1y;
|
|
6453
6473
|
|
|
6454
6474
|
var CartProductItem = {
|
|
6455
6475
|
Title: Title$8,
|
|
@@ -6459,9 +6479,9 @@ var CartProductItem = {
|
|
|
6459
6479
|
CloseButton: CloseButton$1,
|
|
6460
6480
|
};
|
|
6461
6481
|
|
|
6462
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6463
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6464
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6482
|
+
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"])));
|
|
6483
|
+
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"])));
|
|
6484
|
+
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"])));
|
|
6465
6485
|
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"])));
|
|
6466
6486
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6467
6487
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6472,7 +6492,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6472
6492
|
var isMobile = useWindowDimensions().isMobile;
|
|
6473
6493
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6474
6494
|
};
|
|
6475
|
-
var templateObject_1$
|
|
6495
|
+
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;
|
|
6476
6496
|
|
|
6477
6497
|
var Spacing = function (_a) {
|
|
6478
6498
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6480,9 +6500,9 @@ var Spacing = function (_a) {
|
|
|
6480
6500
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6481
6501
|
};
|
|
6482
6502
|
|
|
6483
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6484
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6485
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6503
|
+
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"])));
|
|
6504
|
+
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"])));
|
|
6505
|
+
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"])));
|
|
6486
6506
|
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) {
|
|
6487
6507
|
var index = _a.index;
|
|
6488
6508
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6494,11 +6514,11 @@ var StrengthBars = function (_a) {
|
|
|
6494
6514
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6495
6515
|
return (jsxRuntime.jsxs(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6496
6516
|
};
|
|
6497
|
-
var templateObject_1$
|
|
6517
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$I;
|
|
6498
6518
|
|
|
6499
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6500
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6501
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6519
|
+
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"])));
|
|
6520
|
+
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"])));
|
|
6521
|
+
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"])));
|
|
6502
6522
|
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6503
6523
|
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"])));
|
|
6504
6524
|
var RegularPriceTag = function () {
|
|
@@ -6549,16 +6569,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6549
6569
|
: exports.ComponentSize.XSmall;
|
|
6550
6570
|
return (jsxRuntime.jsx(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));
|
|
6551
6571
|
};
|
|
6552
|
-
return (jsxRuntime.jsxs(Container$
|
|
6572
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6553
6573
|
? finalPriceArray[0]
|
|
6554
6574
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6555
6575
|
};
|
|
6556
|
-
var templateObject_1$
|
|
6576
|
+
var templateObject_1$1v, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x;
|
|
6557
6577
|
|
|
6558
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6559
|
-
var templateObject_1$
|
|
6578
|
+
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"])));
|
|
6579
|
+
var templateObject_1$1u;
|
|
6560
6580
|
|
|
6561
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6581
|
+
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) {
|
|
6562
6582
|
var marginRight = _a.marginRight;
|
|
6563
6583
|
return marginRight;
|
|
6564
6584
|
});
|
|
@@ -6574,7 +6594,7 @@ var StarList = function (_a) {
|
|
|
6574
6594
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6575
6595
|
}) }, void 0));
|
|
6576
6596
|
};
|
|
6577
|
-
var templateObject_1$
|
|
6597
|
+
var templateObject_1$1t;
|
|
6578
6598
|
|
|
6579
6599
|
/* base styles & size variants */
|
|
6580
6600
|
var LabelStyles = {
|
|
@@ -6615,8 +6635,8 @@ var LabelStyles = {
|
|
|
6615
6635
|
});
|
|
6616
6636
|
},
|
|
6617
6637
|
};
|
|
6618
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6619
|
-
var templateObject_1$
|
|
6638
|
+
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"])));
|
|
6639
|
+
var templateObject_1$1s;
|
|
6620
6640
|
|
|
6621
6641
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6622
6642
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6636,7 +6656,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6636
6656
|
}),
|
|
6637
6657
|
];
|
|
6638
6658
|
});
|
|
6639
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6659
|
+
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; });
|
|
6640
6660
|
var starsNumber = 5;
|
|
6641
6661
|
var Rating = function (_a) {
|
|
6642
6662
|
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
@@ -6659,7 +6679,7 @@ var Rating = function (_a) {
|
|
|
6659
6679
|
: {};
|
|
6660
6680
|
return (jsxRuntime.jsxs(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6661
6681
|
};
|
|
6662
|
-
var templateObject_1$
|
|
6682
|
+
var templateObject_1$1r;
|
|
6663
6683
|
|
|
6664
6684
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6665
6685
|
var width = _a.width, height = _a.height;
|
|
@@ -6669,9 +6689,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6669
6689
|
height: height,
|
|
6670
6690
|
});
|
|
6671
6691
|
});
|
|
6672
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6673
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6674
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6692
|
+
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"])));
|
|
6693
|
+
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"])));
|
|
6694
|
+
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"])));
|
|
6675
6695
|
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; });
|
|
6676
6696
|
var getStylesBySize$c = function (size) {
|
|
6677
6697
|
switch (size) {
|
|
@@ -6724,7 +6744,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6724
6744
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6725
6745
|
strength: -1,
|
|
6726
6746
|
description: '',
|
|
6727
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTag = _a.discountTag;
|
|
6747
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag;
|
|
6728
6748
|
var theme = useTheme();
|
|
6729
6749
|
var styles = getStylesBySize$c(size);
|
|
6730
6750
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6763,11 +6783,12 @@ var ProductItemMobile = function (_a) {
|
|
|
6763
6783
|
return jsx(Fragment, {}, void 0);
|
|
6764
6784
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6765
6785
|
};
|
|
6766
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), 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), showDiscountPercentageTag &&
|
|
6767
|
-
|
|
6768
|
-
|
|
6786
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), 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), showDiscountPercentageTag &&
|
|
6787
|
+
(discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6788
|
+
letterSpacing: '-0.05rem',
|
|
6789
|
+
} }), 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));
|
|
6769
6790
|
};
|
|
6770
|
-
var templateObject_1$
|
|
6791
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6771
6792
|
|
|
6772
6793
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6773
6794
|
var width = _a.width, height = _a.height;
|
|
@@ -6777,9 +6798,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6777
6798
|
height: height,
|
|
6778
6799
|
});
|
|
6779
6800
|
});
|
|
6780
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6781
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6782
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6801
|
+
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; });
|
|
6802
|
+
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"])));
|
|
6803
|
+
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"])));
|
|
6783
6804
|
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; });
|
|
6784
6805
|
var getStylesBySize$b = function (size) {
|
|
6785
6806
|
switch (size) {
|
|
@@ -6866,9 +6887,9 @@ var ProductItemTK = function (_a) {
|
|
|
6866
6887
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6867
6888
|
} }, { 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));
|
|
6868
6889
|
};
|
|
6869
|
-
var templateObject_1$
|
|
6890
|
+
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;
|
|
6870
6891
|
|
|
6871
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6892
|
+
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"])));
|
|
6872
6893
|
function withProductGrid(ProductItemComponent, data) {
|
|
6873
6894
|
function WithProductGrid(props) {
|
|
6874
6895
|
return (jsxRuntime.jsx(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6878,7 +6899,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6878
6899
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6879
6900
|
return WithProductGrid;
|
|
6880
6901
|
}
|
|
6881
|
-
var templateObject_1$
|
|
6902
|
+
var templateObject_1$1o;
|
|
6882
6903
|
|
|
6883
6904
|
var Collection = {
|
|
6884
6905
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6925,9 +6946,9 @@ var OutOfStock = function (_a) {
|
|
|
6925
6946
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6926
6947
|
};
|
|
6927
6948
|
|
|
6928
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6929
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6930
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6949
|
+
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"])));
|
|
6950
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6951
|
+
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"])));
|
|
6931
6952
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6932
6953
|
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"])));
|
|
6933
6954
|
var Label$4 = function (_a) {
|
|
@@ -6947,23 +6968,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6947
6968
|
Option: Option,
|
|
6948
6969
|
OptionsContainer: OptionsContainer,
|
|
6949
6970
|
});
|
|
6950
|
-
var templateObject_1$
|
|
6971
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6951
6972
|
|
|
6952
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6973
|
+
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) {
|
|
6953
6974
|
var borderColor = _a.borderColor;
|
|
6954
6975
|
return borderColor;
|
|
6955
6976
|
}, function (_a) {
|
|
6956
6977
|
var noStock = _a.noStock;
|
|
6957
6978
|
return (noStock ? '0.4' : '1');
|
|
6958
6979
|
});
|
|
6959
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6980
|
+
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"])));
|
|
6960
6981
|
var PatternSelector = function (_a) {
|
|
6961
6982
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6962
6983
|
var theme = useTheme();
|
|
6963
6984
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6964
6985
|
return (jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6965
6986
|
};
|
|
6966
|
-
var templateObject_1$
|
|
6987
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6967
6988
|
|
|
6968
6989
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6969
6990
|
if (options == null || options.length === 0) {
|
|
@@ -7022,9 +7043,9 @@ var SingleColorPicker = function (_a) {
|
|
|
7022
7043
|
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));
|
|
7023
7044
|
};
|
|
7024
7045
|
|
|
7025
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7026
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7027
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7046
|
+
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'); });
|
|
7047
|
+
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"])));
|
|
7048
|
+
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) {
|
|
7028
7049
|
return props.rightToLeft &&
|
|
7029
7050
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7030
7051
|
});
|
|
@@ -7036,7 +7057,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7036
7057
|
var theme = useTheme();
|
|
7037
7058
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7038
7059
|
};
|
|
7039
|
-
var templateObject_1$
|
|
7060
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7040
7061
|
|
|
7041
7062
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7042
7063
|
__proto__: null,
|
|
@@ -7064,7 +7085,7 @@ var sizeMapper = (_a = {},
|
|
|
7064
7085
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7065
7086
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7066
7087
|
_a);
|
|
7067
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7088
|
+
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) {
|
|
7068
7089
|
var wide = _a.wide;
|
|
7069
7090
|
return (wide ? '100%' : 'fit-content');
|
|
7070
7091
|
}, function (_a) {
|
|
@@ -7086,11 +7107,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7086
7107
|
var theme = _a.theme;
|
|
7087
7108
|
return theme.colors.text.disabled;
|
|
7088
7109
|
});
|
|
7089
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7110
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7090
7111
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7091
7112
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7092
7113
|
});
|
|
7093
|
-
var templateObject_1$
|
|
7114
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7094
7115
|
|
|
7095
7116
|
var BaseCTA = function (_a) {
|
|
7096
7117
|
var _b, _c, _d;
|
|
@@ -7177,23 +7198,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7177
7198
|
} }), void 0));
|
|
7178
7199
|
};
|
|
7179
7200
|
|
|
7180
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7181
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7182
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7201
|
+
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; });
|
|
7202
|
+
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"])));
|
|
7203
|
+
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; });
|
|
7183
7204
|
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; });
|
|
7184
7205
|
var Note = function (_a) {
|
|
7185
7206
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7186
7207
|
var theme = useTheme();
|
|
7187
7208
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7188
7209
|
};
|
|
7189
|
-
var templateObject_1$
|
|
7210
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7190
7211
|
|
|
7191
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7212
|
+
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) {
|
|
7192
7213
|
var theme = _a.theme;
|
|
7193
7214
|
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 ");
|
|
7194
7215
|
});
|
|
7195
|
-
var Line = newStyled.div(templateObject_2$
|
|
7196
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7216
|
+
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; });
|
|
7217
|
+
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({
|
|
7197
7218
|
flexDirection: ['column', 'row'],
|
|
7198
7219
|
}));
|
|
7199
7220
|
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({
|
|
@@ -7231,16 +7252,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7231
7252
|
var theme = useTheme();
|
|
7232
7253
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7233
7254
|
};
|
|
7234
|
-
var templateObject_1$
|
|
7255
|
+
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;
|
|
7235
7256
|
|
|
7236
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7257
|
+
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) {
|
|
7237
7258
|
var top = _a.top;
|
|
7238
7259
|
return top;
|
|
7239
7260
|
}, function (_a) {
|
|
7240
7261
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7241
7262
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7242
7263
|
});
|
|
7243
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7264
|
+
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) {
|
|
7244
7265
|
var height = _a.height;
|
|
7245
7266
|
return height;
|
|
7246
7267
|
}, function (_a) {
|
|
@@ -7287,20 +7308,20 @@ var Drawer = function (_a) {
|
|
|
7287
7308
|
}, [isOpen, onClose, onOpen]);
|
|
7288
7309
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7289
7310
|
};
|
|
7290
|
-
var templateObject_1$
|
|
7311
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7291
7312
|
|
|
7292
7313
|
var TooltipArrow = function (_a) {
|
|
7293
7314
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7294
7315
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
7295
7316
|
};
|
|
7296
7317
|
|
|
7297
|
-
var List = newStyled.ul(templateObject_1$
|
|
7298
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7299
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7318
|
+
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"])));
|
|
7319
|
+
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"])));
|
|
7320
|
+
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"])));
|
|
7300
7321
|
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"])));
|
|
7301
7322
|
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; });
|
|
7302
7323
|
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; });
|
|
7303
|
-
var templateObject_1$
|
|
7324
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7304
7325
|
|
|
7305
7326
|
var DropdownListIcons = function (_a) {
|
|
7306
7327
|
var items = _a.items;
|
|
@@ -7313,13 +7334,13 @@ var Dropdown = function (_a) {
|
|
|
7313
7334
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7314
7335
|
};
|
|
7315
7336
|
|
|
7316
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7317
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7318
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7337
|
+
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"])));
|
|
7338
|
+
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"])));
|
|
7339
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7319
7340
|
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"])));
|
|
7320
7341
|
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"])));
|
|
7321
7342
|
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"])));
|
|
7322
|
-
var templateObject_1$
|
|
7343
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7323
7344
|
|
|
7324
7345
|
var SizeDropdown = function (_a) {
|
|
7325
7346
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7342,9 +7363,9 @@ var SizeDropdown = function (_a) {
|
|
|
7342
7363
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7343
7364
|
};
|
|
7344
7365
|
|
|
7345
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7346
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7347
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7366
|
+
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; });
|
|
7367
|
+
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; });
|
|
7368
|
+
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"])));
|
|
7348
7369
|
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"])));
|
|
7349
7370
|
var DropdownDialog = function (_a) {
|
|
7350
7371
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7354,7 +7375,7 @@ var DropdownDialog = function (_a) {
|
|
|
7354
7375
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7355
7376
|
}) }), void 0) }), void 0));
|
|
7356
7377
|
};
|
|
7357
|
-
var templateObject_1$
|
|
7378
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7358
7379
|
|
|
7359
7380
|
function FilteringDropdown(_a) {
|
|
7360
7381
|
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;
|
|
@@ -7387,9 +7408,9 @@ function FilteringDropdown(_a) {
|
|
|
7387
7408
|
}) }, void 0)] }), void 0));
|
|
7388
7409
|
}
|
|
7389
7410
|
|
|
7390
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7391
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7392
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7411
|
+
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; });
|
|
7412
|
+
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; });
|
|
7413
|
+
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"])));
|
|
7393
7414
|
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'); });
|
|
7394
7415
|
var Accordion = function (_a) {
|
|
7395
7416
|
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;
|
|
@@ -7397,11 +7418,11 @@ var Accordion = function (_a) {
|
|
|
7397
7418
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7398
7419
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7399
7420
|
};
|
|
7400
|
-
var templateObject_1$
|
|
7421
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
7401
7422
|
|
|
7402
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7403
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7404
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7423
|
+
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; });
|
|
7424
|
+
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"])));
|
|
7425
|
+
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"])));
|
|
7405
7426
|
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"])));
|
|
7406
7427
|
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; });
|
|
7407
7428
|
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; });
|
|
@@ -7409,7 +7430,7 @@ var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i =
|
|
|
7409
7430
|
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; });
|
|
7410
7431
|
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"])));
|
|
7411
7432
|
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"])));
|
|
7412
|
-
var templateObject_1$
|
|
7433
|
+
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;
|
|
7413
7434
|
|
|
7414
7435
|
var getStylesBySize$a = function (size, theme) {
|
|
7415
7436
|
switch (size) {
|
|
@@ -7474,9 +7495,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7474
7495
|
} }), id: id }, void 0));
|
|
7475
7496
|
};
|
|
7476
7497
|
|
|
7477
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7478
|
-
var LI = newStyled.li(templateObject_2$
|
|
7479
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7498
|
+
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"])));
|
|
7499
|
+
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; });
|
|
7500
|
+
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"])));
|
|
7480
7501
|
var Tags = function (_a) {
|
|
7481
7502
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7482
7503
|
var theme = useTheme();
|
|
@@ -7484,7 +7505,7 @@ var Tags = function (_a) {
|
|
|
7484
7505
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7485
7506
|
}) }), void 0));
|
|
7486
7507
|
};
|
|
7487
|
-
var templateObject_1$
|
|
7508
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7488
7509
|
|
|
7489
7510
|
var Filters = function (_a) {
|
|
7490
7511
|
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;
|
|
@@ -7620,8 +7641,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7620
7641
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7621
7642
|
};
|
|
7622
7643
|
|
|
7623
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7624
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7644
|
+
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"])));
|
|
7645
|
+
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"])));
|
|
7625
7646
|
var FitGuarantee = function (_a) {
|
|
7626
7647
|
var _b;
|
|
7627
7648
|
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;
|
|
@@ -7639,10 +7660,10 @@ var FitGuarantee = function (_a) {
|
|
|
7639
7660
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7640
7661
|
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7641
7662
|
};
|
|
7642
|
-
var templateObject_1$
|
|
7663
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7643
7664
|
|
|
7644
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7645
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7665
|
+
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"])));
|
|
7666
|
+
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; });
|
|
7646
7667
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7647
7668
|
border: 'none',
|
|
7648
7669
|
background: 'transparent',
|
|
@@ -7657,7 +7678,7 @@ var FitPredictor = function (_a) {
|
|
|
7657
7678
|
var theme = useTheme();
|
|
7658
7679
|
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));
|
|
7659
7680
|
};
|
|
7660
|
-
var templateObject_1$
|
|
7681
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7661
7682
|
|
|
7662
7683
|
var Button$7 = newStyled.button(function () { return ({
|
|
7663
7684
|
background: 'transparent',
|
|
@@ -11901,14 +11922,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11901
11922
|
return Slider;
|
|
11902
11923
|
}(React__default["default"].Component);
|
|
11903
11924
|
|
|
11904
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11925
|
+
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) {
|
|
11905
11926
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11906
11927
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11907
11928
|
}, function (_a) {
|
|
11908
11929
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11909
11930
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11910
11931
|
});
|
|
11911
|
-
var templateObject_1$
|
|
11932
|
+
var templateObject_1$18;
|
|
11912
11933
|
|
|
11913
11934
|
var getStylesBySize$9 = function (size) {
|
|
11914
11935
|
// rem units
|
|
@@ -11967,7 +11988,7 @@ var SliderNavigation = function (_a) {
|
|
|
11967
11988
|
} }, { 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));
|
|
11968
11989
|
};
|
|
11969
11990
|
|
|
11970
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11991
|
+
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) {
|
|
11971
11992
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11972
11993
|
return borderRadiusVariant &&
|
|
11973
11994
|
"\n border-radius: 20px;\n ";
|
|
@@ -11985,7 +12006,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
11985
12006
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11986
12007
|
: 'inherit';
|
|
11987
12008
|
});
|
|
11988
|
-
var templateObject_1$
|
|
12009
|
+
var templateObject_1$17;
|
|
11989
12010
|
|
|
11990
12011
|
var ImageSmallPreview = function (_a) {
|
|
11991
12012
|
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;
|
|
@@ -11993,9 +12014,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11993
12014
|
return (jsxRuntime.jsx(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));
|
|
11994
12015
|
};
|
|
11995
12016
|
|
|
11996
|
-
var horizontalStyles = css(templateObject_1$
|
|
11997
|
-
var verticalStyles = css(templateObject_2$
|
|
11998
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
12017
|
+
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"])));
|
|
12018
|
+
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"])));
|
|
12019
|
+
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) {
|
|
11999
12020
|
var position = _a.position;
|
|
12000
12021
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12001
12022
|
}, function (_a) {
|
|
@@ -12008,7 +12029,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o =
|
|
|
12008
12029
|
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"])));
|
|
12009
12030
|
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"])));
|
|
12010
12031
|
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"])));
|
|
12011
|
-
var templateObject_1$
|
|
12032
|
+
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;
|
|
12012
12033
|
|
|
12013
12034
|
var ImagePreviewList = function (_a) {
|
|
12014
12035
|
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;
|
|
@@ -12027,22 +12048,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12027
12048
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.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 (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12028
12049
|
};
|
|
12029
12050
|
|
|
12030
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12031
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12032
|
-
var templateObject_1$
|
|
12051
|
+
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); });
|
|
12052
|
+
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; });
|
|
12053
|
+
var templateObject_1$15, templateObject_2$O;
|
|
12033
12054
|
|
|
12034
12055
|
var ProgressBar$1 = function (_a) {
|
|
12035
12056
|
var progress = _a.progress, hide = _a.hide;
|
|
12036
12057
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12037
12058
|
};
|
|
12038
12059
|
|
|
12039
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
12040
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12041
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12060
|
+
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"])));
|
|
12061
|
+
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; });
|
|
12062
|
+
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"])));
|
|
12042
12063
|
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"])));
|
|
12043
12064
|
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"])));
|
|
12044
12065
|
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"])));
|
|
12045
|
-
var templateObject_1$
|
|
12066
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12046
12067
|
|
|
12047
12068
|
var Video$1 = function (_a) {
|
|
12048
12069
|
var _b, _c, _d, _e;
|
|
@@ -13682,18 +13703,18 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13682
13703
|
afterZoomOut: PropTypes.func
|
|
13683
13704
|
} : {};
|
|
13684
13705
|
|
|
13685
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13706
|
+
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) {
|
|
13686
13707
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13687
13708
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13688
13709
|
});
|
|
13689
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13710
|
+
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) {
|
|
13690
13711
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13691
13712
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13692
13713
|
}, function (_a) {
|
|
13693
13714
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13694
13715
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13695
13716
|
});
|
|
13696
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13717
|
+
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) {
|
|
13697
13718
|
var isCTAHidden = _a.isCTAHidden;
|
|
13698
13719
|
return (isCTAHidden ? '60px' : '120px');
|
|
13699
13720
|
});
|
|
@@ -13707,7 +13728,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (temp
|
|
|
13707
13728
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13708
13729
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13709
13730
|
});
|
|
13710
|
-
var templateObject_1$
|
|
13731
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13711
13732
|
|
|
13712
13733
|
var ImageProductSlide$1 = function (_a) {
|
|
13713
13734
|
var _b;
|
|
@@ -13720,8 +13741,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13720
13741
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13721
13742
|
};
|
|
13722
13743
|
|
|
13723
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13724
|
-
var templateObject_1$
|
|
13744
|
+
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"])));
|
|
13745
|
+
var templateObject_1$12;
|
|
13725
13746
|
|
|
13726
13747
|
var getInitialIndex = function (images, selectedValue) {
|
|
13727
13748
|
if (selectedValue) {
|
|
@@ -13769,7 +13790,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13769
13790
|
};
|
|
13770
13791
|
}
|
|
13771
13792
|
};
|
|
13772
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13793
|
+
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) {
|
|
13773
13794
|
var backgroundColor = _a.backgroundColor;
|
|
13774
13795
|
return backgroundColor;
|
|
13775
13796
|
}, function (_a) {
|
|
@@ -13799,9 +13820,9 @@ var IconButton = function (_a) {
|
|
|
13799
13820
|
var theme = useTheme();
|
|
13800
13821
|
return (jsxRuntime.jsx(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));
|
|
13801
13822
|
};
|
|
13802
|
-
var templateObject_1$
|
|
13823
|
+
var templateObject_1$11;
|
|
13803
13824
|
|
|
13804
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13825
|
+
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; });
|
|
13805
13826
|
var AmazonButton = function (_a) {
|
|
13806
13827
|
var onClick = _a.onClick;
|
|
13807
13828
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13810,7 +13831,7 @@ var PaypalButton = function (_a) {
|
|
|
13810
13831
|
var onClick = _a.onClick;
|
|
13811
13832
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13812
13833
|
};
|
|
13813
|
-
var templateObject_1$
|
|
13834
|
+
var templateObject_1$10;
|
|
13814
13835
|
|
|
13815
13836
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13816
13837
|
height: 'auto',
|
|
@@ -13865,9 +13886,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13865
13886
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13866
13887
|
};
|
|
13867
13888
|
|
|
13868
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13869
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13870
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13889
|
+
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'); });
|
|
13890
|
+
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'); });
|
|
13891
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13871
13892
|
var titlePosition = _a.titlePosition;
|
|
13872
13893
|
return titlePosition == 'center' &&
|
|
13873
13894
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13877,13 +13898,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13877
13898
|
var isMobile = useWindowDimensions().isMobile;
|
|
13878
13899
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13879
13900
|
};
|
|
13880
|
-
var templateObject_1
|
|
13901
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13881
13902
|
|
|
13882
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13903
|
+
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) {
|
|
13883
13904
|
var color = _a.color;
|
|
13884
13905
|
return color;
|
|
13885
13906
|
});
|
|
13886
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13907
|
+
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) {
|
|
13887
13908
|
var color = _a.color;
|
|
13888
13909
|
return color;
|
|
13889
13910
|
});
|
|
@@ -13892,7 +13913,7 @@ var InputLabel = function (_a) {
|
|
|
13892
13913
|
var theme = useTheme();
|
|
13893
13914
|
return (jsxRuntime.jsxs(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13894
13915
|
};
|
|
13895
|
-
var templateObject_1
|
|
13916
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13896
13917
|
|
|
13897
13918
|
var containerByStatus = function (theme, status) {
|
|
13898
13919
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13901,12 +13922,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13901
13922
|
return theme.colors.semantic.urgent.color;
|
|
13902
13923
|
return '';
|
|
13903
13924
|
};
|
|
13904
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13925
|
+
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) {
|
|
13905
13926
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13906
13927
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13907
13928
|
});
|
|
13908
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13909
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13929
|
+
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"])));
|
|
13930
|
+
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) {
|
|
13910
13931
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13911
13932
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13912
13933
|
}, function (_a) {
|
|
@@ -13961,7 +13982,7 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13961
13982
|
return hasValue &&
|
|
13962
13983
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13963
13984
|
});
|
|
13964
|
-
var InputWrapper
|
|
13985
|
+
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) {
|
|
13965
13986
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13966
13987
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13967
13988
|
});
|
|
@@ -13979,7 +14000,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
13979
14000
|
return theme.component.input.lineHeight;
|
|
13980
14001
|
});
|
|
13981
14002
|
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"])));
|
|
13982
|
-
var templateObject_1$
|
|
14003
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13983
14004
|
|
|
13984
14005
|
var BaseInput = function (_a) {
|
|
13985
14006
|
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"]);
|
|
@@ -14002,7 +14023,7 @@ var BaseInput = function (_a) {
|
|
|
14002
14023
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14003
14024
|
}, [status]);
|
|
14004
14025
|
var hasValue = Boolean(value);
|
|
14005
|
-
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper
|
|
14026
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14006
14027
|
onChange(event.target.value, event);
|
|
14007
14028
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14008
14029
|
onChange('', { target: { value: '' } });
|
|
@@ -14023,11 +14044,11 @@ var Button$5 = function (_a) {
|
|
|
14023
14044
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14024
14045
|
};
|
|
14025
14046
|
|
|
14026
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14047
|
+
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) {
|
|
14027
14048
|
var theme = _a.theme;
|
|
14028
14049
|
return theme.component.inputCustom.input.borderRadius;
|
|
14029
14050
|
});
|
|
14030
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14051
|
+
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) {
|
|
14031
14052
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14032
14053
|
return defaultRounded
|
|
14033
14054
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14044,21 +14065,21 @@ var Custom = function (_a) {
|
|
|
14044
14065
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14045
14066
|
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14046
14067
|
};
|
|
14047
|
-
var templateObject_1$
|
|
14068
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14048
14069
|
|
|
14049
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14070
|
+
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) {
|
|
14050
14071
|
var size = _a.size;
|
|
14051
14072
|
return (size === 'small' ? '36px' : '');
|
|
14052
14073
|
});
|
|
14053
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14054
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14074
|
+
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"])));
|
|
14075
|
+
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"])));
|
|
14055
14076
|
var Success = function (_a) {
|
|
14056
14077
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14057
14078
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14058
14079
|
};
|
|
14059
|
-
var templateObject_1$
|
|
14080
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14060
14081
|
|
|
14061
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14082
|
+
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) {
|
|
14062
14083
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14063
14084
|
return status === exports.InputValidationType.Empty &&
|
|
14064
14085
|
type === 'primary' &&
|
|
@@ -14075,16 +14096,16 @@ var BasePlusButton = function (_a) {
|
|
|
14075
14096
|
}
|
|
14076
14097
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14077
14098
|
};
|
|
14078
|
-
var templateObject_1$
|
|
14099
|
+
var templateObject_1$W;
|
|
14079
14100
|
|
|
14080
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14081
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14101
|
+
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"])));
|
|
14102
|
+
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"])));
|
|
14082
14103
|
var BasePlusIcon = function (_a) {
|
|
14083
14104
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14084
14105
|
var theme = useTheme();
|
|
14085
14106
|
return (jsxRuntime.jsx(Container$H, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14086
14107
|
};
|
|
14087
|
-
var templateObject_1$
|
|
14108
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14088
14109
|
|
|
14089
14110
|
var Input$3 = {
|
|
14090
14111
|
Simple: BaseInput,
|
|
@@ -14129,7 +14150,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14129
14150
|
}, [preventTouch, ref, touchStart]);
|
|
14130
14151
|
}
|
|
14131
14152
|
|
|
14132
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14153
|
+
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) {
|
|
14133
14154
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14134
14155
|
return borderRadiusVariant &&
|
|
14135
14156
|
"\n border-radius: 40px;\n ";
|
|
@@ -14138,8 +14159,8 @@ var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14138
14159
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14139
14160
|
});
|
|
14140
14161
|
// max-height: 31.875rem;
|
|
14141
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14142
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14162
|
+
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'); });
|
|
14163
|
+
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"])));
|
|
14143
14164
|
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"])));
|
|
14144
14165
|
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"])));
|
|
14145
14166
|
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"])));
|
|
@@ -14201,16 +14222,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14201
14222
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14202
14223
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14203
14224
|
};
|
|
14204
|
-
var templateObject_1$
|
|
14225
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14205
14226
|
|
|
14206
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14227
|
+
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"])));
|
|
14207
14228
|
var ProductGalleryMobile = function (_a) {
|
|
14208
14229
|
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;
|
|
14209
14230
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14210
14231
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14211
14232
|
return (jsxRuntime.jsx(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(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));
|
|
14212
14233
|
};
|
|
14213
|
-
var templateObject_1$
|
|
14234
|
+
var templateObject_1$T;
|
|
14214
14235
|
|
|
14215
14236
|
function _extends() {
|
|
14216
14237
|
_extends = Object.assign || function (target) {
|
|
@@ -14477,14 +14498,14 @@ function useSwipeable(options) {
|
|
|
14477
14498
|
return handlers;
|
|
14478
14499
|
}
|
|
14479
14500
|
|
|
14480
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14501
|
+
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"])));
|
|
14481
14502
|
var ArrowButton = function (_a) {
|
|
14482
14503
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14483
14504
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14484
14505
|
};
|
|
14485
|
-
var templateObject_1$
|
|
14506
|
+
var templateObject_1$S;
|
|
14486
14507
|
|
|
14487
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14508
|
+
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"])));
|
|
14488
14509
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14489
14510
|
var SlideDots = function (_a) {
|
|
14490
14511
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14493,11 +14514,11 @@ var SlideDots = function (_a) {
|
|
|
14493
14514
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14494
14515
|
: 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));
|
|
14495
14516
|
};
|
|
14496
|
-
var templateObject_1$
|
|
14517
|
+
var templateObject_1$R;
|
|
14497
14518
|
|
|
14498
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14499
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14500
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14519
|
+
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"])));
|
|
14520
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14521
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14501
14522
|
var SlideNavigation = function (_a) {
|
|
14502
14523
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14503
14524
|
var theme = useTheme();
|
|
@@ -14509,23 +14530,23 @@ var SlideNavigation = function (_a) {
|
|
|
14509
14530
|
onNavigate(selectedIndex + 1);
|
|
14510
14531
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14511
14532
|
};
|
|
14512
|
-
var templateObject_1$
|
|
14533
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14513
14534
|
|
|
14514
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14535
|
+
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) {
|
|
14515
14536
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14516
14537
|
return borderRadiusVariant &&
|
|
14517
14538
|
"\n border-radius: 40px;\n ";
|
|
14518
14539
|
});
|
|
14519
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14520
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14540
|
+
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'); });
|
|
14541
|
+
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"])));
|
|
14521
14542
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14522
14543
|
var _b, _c;
|
|
14523
14544
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14524
14545
|
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
14525
14546
|
});
|
|
14526
|
-
var templateObject_1$
|
|
14547
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14527
14548
|
|
|
14528
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14549
|
+
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"])));
|
|
14529
14550
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14530
14551
|
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;
|
|
14531
14552
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14549,9 +14570,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14549
14570
|
}, [index, images]);
|
|
14550
14571
|
return (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14551
14572
|
};
|
|
14552
|
-
var templateObject_1$
|
|
14573
|
+
var templateObject_1$O;
|
|
14553
14574
|
|
|
14554
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14575
|
+
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) {
|
|
14555
14576
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14556
14577
|
return borderRadiusVariant &&
|
|
14557
14578
|
"\n border-radius: 40px;\n ";
|
|
@@ -14560,8 +14581,8 @@ var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14560
14581
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14561
14582
|
});
|
|
14562
14583
|
// max-height: 31.875rem;
|
|
14563
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14564
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14584
|
+
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'); });
|
|
14585
|
+
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"])));
|
|
14565
14586
|
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"])));
|
|
14566
14587
|
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"])));
|
|
14567
14588
|
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"])));
|
|
@@ -14625,14 +14646,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14625
14646
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14626
14647
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14627
14648
|
};
|
|
14628
|
-
var templateObject_1$
|
|
14649
|
+
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;
|
|
14629
14650
|
|
|
14630
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14651
|
+
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"])));
|
|
14631
14652
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14632
14653
|
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;
|
|
14633
14654
|
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14634
14655
|
};
|
|
14635
|
-
var templateObject_1$
|
|
14656
|
+
var templateObject_1$M;
|
|
14636
14657
|
|
|
14637
14658
|
var __defProp$1 = Object.defineProperty;
|
|
14638
14659
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14765,12 +14786,12 @@ var Portal = function (_a) {
|
|
|
14765
14786
|
var visibleStyle = function (_a) {
|
|
14766
14787
|
var opened = _a.opened;
|
|
14767
14788
|
return opened
|
|
14768
|
-
? css(templateObject_1$
|
|
14789
|
+
? 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 "])));
|
|
14769
14790
|
};
|
|
14770
14791
|
var transformStyle = function (_a) {
|
|
14771
14792
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14772
14793
|
return opened
|
|
14773
|
-
? css(templateObject_3$
|
|
14794
|
+
? 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%)');
|
|
14774
14795
|
};
|
|
14775
14796
|
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) {
|
|
14776
14797
|
var width = _a.width;
|
|
@@ -14820,9 +14841,9 @@ var useModal = function (id) {
|
|
|
14820
14841
|
close: close,
|
|
14821
14842
|
}); }, [close, open, opened]);
|
|
14822
14843
|
};
|
|
14823
|
-
var templateObject_1$
|
|
14844
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14824
14845
|
|
|
14825
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14846
|
+
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) {
|
|
14826
14847
|
var height = _a.height;
|
|
14827
14848
|
return height || '0.5rem';
|
|
14828
14849
|
}, function (_a) {
|
|
@@ -14894,19 +14915,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14894
14915
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14895
14916
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14896
14917
|
};
|
|
14897
|
-
var templateObject_1$
|
|
14918
|
+
var templateObject_1$K;
|
|
14898
14919
|
|
|
14899
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14920
|
+
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) {
|
|
14900
14921
|
var theme = _a.theme;
|
|
14901
14922
|
return theme.component.orderBar.backgroundColor;
|
|
14902
14923
|
});
|
|
14903
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14924
|
+
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; });
|
|
14904
14925
|
var OrderBar = function (_a) {
|
|
14905
14926
|
var message = _a.message, color = _a.color;
|
|
14906
14927
|
var theme = useTheme();
|
|
14907
14928
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14908
14929
|
};
|
|
14909
|
-
var templateObject_1$
|
|
14930
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14910
14931
|
|
|
14911
14932
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14912
14933
|
background: props.bgColor,
|
|
@@ -14930,15 +14951,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14930
14951
|
justifyContent: 'center',
|
|
14931
14952
|
gap: '10px',
|
|
14932
14953
|
});
|
|
14933
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14954
|
+
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) {
|
|
14934
14955
|
var bgColor = _a.bgColor;
|
|
14935
14956
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14936
14957
|
}, function (_a) {
|
|
14937
14958
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14938
14959
|
return width;
|
|
14939
14960
|
});
|
|
14940
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14941
|
-
var templateObject_1$
|
|
14961
|
+
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"])));
|
|
14962
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14942
14963
|
|
|
14943
14964
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14944
14965
|
var background = _a.background, width = _a.width;
|
|
@@ -18758,9 +18779,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18758
18779
|
HTMLReactParser$1.attributesToProps;
|
|
18759
18780
|
HTMLReactParser$1.Element;
|
|
18760
18781
|
|
|
18761
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18762
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18763
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18782
|
+
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"])));
|
|
18783
|
+
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"])));
|
|
18784
|
+
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"])));
|
|
18764
18785
|
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"])));
|
|
18765
18786
|
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"])));
|
|
18766
18787
|
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"])));
|
|
@@ -18795,11 +18816,11 @@ var PackCard = function (_a) {
|
|
|
18795
18816
|
currency: currencyCode || 'USD',
|
|
18796
18817
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18797
18818
|
};
|
|
18798
|
-
var templateObject_1$
|
|
18819
|
+
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;
|
|
18799
18820
|
|
|
18800
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18801
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18802
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18821
|
+
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"])));
|
|
18822
|
+
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"])));
|
|
18823
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18803
18824
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18804
18825
|
}));
|
|
18805
18826
|
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) {
|
|
@@ -18819,7 +18840,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18819
18840
|
var background = _a.background;
|
|
18820
18841
|
return background || 'unset';
|
|
18821
18842
|
});
|
|
18822
|
-
var templateObject_1$
|
|
18843
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$n;
|
|
18823
18844
|
|
|
18824
18845
|
var Pagination = function (_a) {
|
|
18825
18846
|
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;
|
|
@@ -18884,7 +18905,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18884
18905
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18885
18906
|
};
|
|
18886
18907
|
|
|
18887
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18908
|
+
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) {
|
|
18888
18909
|
var width = _a.width;
|
|
18889
18910
|
return width;
|
|
18890
18911
|
}, function (_a) {
|
|
@@ -18902,12 +18923,12 @@ var PaymentMethod = function (_a) {
|
|
|
18902
18923
|
var theme = useTheme();
|
|
18903
18924
|
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
18904
18925
|
};
|
|
18905
|
-
var templateObject_1$
|
|
18926
|
+
var templateObject_1$F;
|
|
18906
18927
|
|
|
18907
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18928
|
+
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"])));
|
|
18908
18929
|
var IMAGE_WIDTH = '63px';
|
|
18909
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18910
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18930
|
+
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);
|
|
18931
|
+
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({
|
|
18911
18932
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18912
18933
|
}), IMAGE_WIDTH);
|
|
18913
18934
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18947,7 +18968,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18947
18968
|
var theme = useTheme();
|
|
18948
18969
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(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, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel$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));
|
|
18949
18970
|
};
|
|
18950
|
-
var templateObject_1$
|
|
18971
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18951
18972
|
|
|
18952
18973
|
var P$1 = newStyled.p(function (_a) {
|
|
18953
18974
|
var color = _a.color;
|
|
@@ -18961,7 +18982,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18961
18982
|
margin: '0.938rem 4.188rem',
|
|
18962
18983
|
});
|
|
18963
18984
|
});
|
|
18964
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18985
|
+
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) {
|
|
18965
18986
|
var height = _a.height;
|
|
18966
18987
|
return height || '0.5rem';
|
|
18967
18988
|
}, function (_a) {
|
|
@@ -19006,11 +19027,11 @@ var ProgressBar = function (_a) {
|
|
|
19006
19027
|
var theme = useTheme();
|
|
19007
19028
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19008
19029
|
};
|
|
19009
|
-
var templateObject_1$
|
|
19030
|
+
var templateObject_1$D;
|
|
19010
19031
|
|
|
19011
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
19012
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19013
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19032
|
+
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; });
|
|
19033
|
+
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"])));
|
|
19034
|
+
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"])));
|
|
19014
19035
|
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)'; });
|
|
19015
19036
|
var QuantityPicker = function (_a) {
|
|
19016
19037
|
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;
|
|
@@ -19036,7 +19057,7 @@ var QuantityPicker = function (_a) {
|
|
|
19036
19057
|
}, [value, clamp]);
|
|
19037
19058
|
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19038
19059
|
};
|
|
19039
|
-
var templateObject_1$
|
|
19060
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$l;
|
|
19040
19061
|
|
|
19041
19062
|
/* base styles & size variants */
|
|
19042
19063
|
var CustomRadioStyles$1 = {
|
|
@@ -19105,9 +19126,9 @@ var ContainerStyles$1 = {
|
|
|
19105
19126
|
},
|
|
19106
19127
|
};
|
|
19107
19128
|
|
|
19108
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19129
|
+
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"])));
|
|
19109
19130
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19110
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19131
|
+
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) {
|
|
19111
19132
|
var disabled = _a.disabled;
|
|
19112
19133
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19113
19134
|
});
|
|
@@ -19115,7 +19136,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19115
19136
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19116
19137
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19117
19138
|
]; });
|
|
19118
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19139
|
+
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"])));
|
|
19119
19140
|
var RadioPrimary = function (_a) {
|
|
19120
19141
|
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 ? exports.ComponentSize.Medium : _d;
|
|
19121
19142
|
var theme = useTheme();
|
|
@@ -19125,7 +19146,7 @@ var RadioPrimary = function (_a) {
|
|
|
19125
19146
|
};
|
|
19126
19147
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19127
19148
|
};
|
|
19128
|
-
var templateObject_1$
|
|
19149
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19129
19150
|
|
|
19130
19151
|
var RadioGroupInput = function (_a) {
|
|
19131
19152
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19204,9 +19225,9 @@ var ContainerStyles = {
|
|
|
19204
19225
|
},
|
|
19205
19226
|
};
|
|
19206
19227
|
|
|
19207
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19228
|
+
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"])));
|
|
19208
19229
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19209
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19230
|
+
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) {
|
|
19210
19231
|
var disabled = _a.disabled;
|
|
19211
19232
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19212
19233
|
});
|
|
@@ -19214,7 +19235,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19214
19235
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19215
19236
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19216
19237
|
]; });
|
|
19217
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19238
|
+
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) {
|
|
19218
19239
|
var theme = _a.theme;
|
|
19219
19240
|
return theme.component.radio.textSize;
|
|
19220
19241
|
}, function (_a) {
|
|
@@ -19230,7 +19251,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19230
19251
|
};
|
|
19231
19252
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19232
19253
|
};
|
|
19233
|
-
var templateObject_1$
|
|
19254
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19234
19255
|
|
|
19235
19256
|
var ClubRadioGroupInput = function (_a) {
|
|
19236
19257
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19258,9 +19279,9 @@ function formatDate(date, format) {
|
|
|
19258
19279
|
}
|
|
19259
19280
|
}
|
|
19260
19281
|
|
|
19261
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19262
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19263
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19282
|
+
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"])));
|
|
19283
|
+
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"])));
|
|
19284
|
+
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"])));
|
|
19264
19285
|
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"])));
|
|
19265
19286
|
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"])));
|
|
19266
19287
|
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"])));
|
|
@@ -19299,13 +19320,13 @@ var Review$1 = function (_a) {
|
|
|
19299
19320
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19300
19321
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19301
19322
|
};
|
|
19302
|
-
var templateObject_1$
|
|
19323
|
+
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;
|
|
19303
19324
|
|
|
19304
19325
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19305
19326
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19306
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19307
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19308
|
-
var Content = newStyled.div(templateObject_3$
|
|
19327
|
+
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"])));
|
|
19328
|
+
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"])));
|
|
19329
|
+
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"])));
|
|
19309
19330
|
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"])));
|
|
19310
19331
|
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"])));
|
|
19311
19332
|
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"])));
|
|
@@ -19355,11 +19376,11 @@ var Review = function (_a) {
|
|
|
19355
19376
|
: description,
|
|
19356
19377
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19357
19378
|
};
|
|
19358
|
-
var templateObject_1$
|
|
19379
|
+
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;
|
|
19359
19380
|
|
|
19360
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19361
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19362
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19381
|
+
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"])));
|
|
19382
|
+
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"])));
|
|
19383
|
+
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"])));
|
|
19363
19384
|
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"])));
|
|
19364
19385
|
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"])));
|
|
19365
19386
|
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"])));
|
|
@@ -19373,17 +19394,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19373
19394
|
var theme = useTheme();
|
|
19374
19395
|
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19375
19396
|
};
|
|
19376
|
-
var templateObject_1$
|
|
19397
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19377
19398
|
|
|
19378
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19379
|
-
var Text = newStyled.p(templateObject_2$
|
|
19399
|
+
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"])));
|
|
19400
|
+
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; });
|
|
19380
19401
|
var ScrollToTop = function (_a) {
|
|
19381
19402
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19382
19403
|
var theme = useTheme();
|
|
19383
19404
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19384
19405
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19385
19406
|
};
|
|
19386
|
-
var templateObject_1$
|
|
19407
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19387
19408
|
|
|
19388
19409
|
var Input = newStyled.input(function (props) { return ({
|
|
19389
19410
|
padding: props.theme.component.input.padding,
|
|
@@ -19414,7 +19435,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19414
19435
|
},
|
|
19415
19436
|
}); });
|
|
19416
19437
|
|
|
19417
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19438
|
+
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({
|
|
19418
19439
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19419
19440
|
}));
|
|
19420
19441
|
var Description = newStyled.div({
|
|
@@ -19433,7 +19454,7 @@ var ProductItem = function (_a) {
|
|
|
19433
19454
|
var theme = useTheme();
|
|
19434
19455
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19435
19456
|
};
|
|
19436
|
-
var templateObject_1$
|
|
19457
|
+
var templateObject_1$v;
|
|
19437
19458
|
|
|
19438
19459
|
var Container$j = newStyled.div({
|
|
19439
19460
|
display: 'flex',
|
|
@@ -19449,7 +19470,7 @@ var Ul = newStyled.ul({
|
|
|
19449
19470
|
margin: '0px',
|
|
19450
19471
|
padding: '0px',
|
|
19451
19472
|
});
|
|
19452
|
-
var Li = newStyled.li(templateObject_1$
|
|
19473
|
+
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({
|
|
19453
19474
|
padding: [0, '0rem 1rem'],
|
|
19454
19475
|
borderRadius: [0, '0.5rem'],
|
|
19455
19476
|
}));
|
|
@@ -19461,12 +19482,12 @@ var Anchor = newStyled.a({
|
|
|
19461
19482
|
padding: 0,
|
|
19462
19483
|
textDecoration: 'none',
|
|
19463
19484
|
});
|
|
19464
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19485
|
+
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({
|
|
19465
19486
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19466
19487
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19467
19488
|
borderRadius: ['0', '0.5rem'],
|
|
19468
19489
|
}));
|
|
19469
|
-
var Header = newStyled.div(templateObject_3$
|
|
19490
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19470
19491
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19471
19492
|
}));
|
|
19472
19493
|
var ResultsPanel = function (_a) {
|
|
@@ -19474,9 +19495,9 @@ var ResultsPanel = function (_a) {
|
|
|
19474
19495
|
var theme = useTheme();
|
|
19475
19496
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19476
19497
|
};
|
|
19477
|
-
var templateObject_1$
|
|
19498
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19478
19499
|
|
|
19479
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19500
|
+
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({
|
|
19480
19501
|
right: ['1rem', '7.75rem'],
|
|
19481
19502
|
top: ['0.75rem', '0.75rem'],
|
|
19482
19503
|
}));
|
|
@@ -19485,7 +19506,7 @@ var ClearButton = function (_a) {
|
|
|
19485
19506
|
var theme = useTheme();
|
|
19486
19507
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19487
19508
|
};
|
|
19488
|
-
var templateObject_1$
|
|
19509
|
+
var templateObject_1$t;
|
|
19489
19510
|
|
|
19490
19511
|
var SearchIconContainer = newStyled.div({
|
|
19491
19512
|
display: 'flex',
|
|
@@ -19495,7 +19516,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19495
19516
|
background: 'white',
|
|
19496
19517
|
alignSelf: 'center',
|
|
19497
19518
|
});
|
|
19498
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19519
|
+
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"])));
|
|
19499
19520
|
var SearchControl = function (_a) {
|
|
19500
19521
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19501
19522
|
var theme = useTheme();
|
|
@@ -19511,7 +19532,7 @@ var SearchControl = function (_a) {
|
|
|
19511
19532
|
}
|
|
19512
19533
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19513
19534
|
};
|
|
19514
|
-
var templateObject_1$
|
|
19535
|
+
var templateObject_1$s;
|
|
19515
19536
|
|
|
19516
19537
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19517
19538
|
var reducer = function (state, action) {
|
|
@@ -19578,9 +19599,9 @@ var SearchBar = function (_a) {
|
|
|
19578
19599
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19579
19600
|
};
|
|
19580
19601
|
|
|
19581
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19582
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19583
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19602
|
+
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"])));
|
|
19603
|
+
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"])));
|
|
19604
|
+
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"])));
|
|
19584
19605
|
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"])));
|
|
19585
19606
|
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"])));
|
|
19586
19607
|
var SearchNavigation = function (_a) {
|
|
@@ -19589,9 +19610,9 @@ var SearchNavigation = function (_a) {
|
|
|
19589
19610
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19590
19611
|
}) }, void 0)] }, void 0));
|
|
19591
19612
|
};
|
|
19592
|
-
var templateObject_1$
|
|
19613
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19593
19614
|
|
|
19594
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19615
|
+
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) {
|
|
19595
19616
|
var alignCenter = _a.alignCenter;
|
|
19596
19617
|
return alignCenter &&
|
|
19597
19618
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19601,18 +19622,18 @@ var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __ma
|
|
|
19601
19622
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19602
19623
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19603
19624
|
});
|
|
19604
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19605
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19625
|
+
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"])));
|
|
19626
|
+
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"])));
|
|
19606
19627
|
var ShortBanner = function (_a) {
|
|
19607
19628
|
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;
|
|
19608
19629
|
var theme = useTheme();
|
|
19609
19630
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19610
19631
|
};
|
|
19611
|
-
var templateObject_1$
|
|
19632
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19612
19633
|
|
|
19613
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19614
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19615
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19634
|
+
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; });
|
|
19635
|
+
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; });
|
|
19636
|
+
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; });
|
|
19616
19637
|
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"])));
|
|
19617
19638
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19618
19639
|
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"])));
|
|
@@ -19620,7 +19641,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19620
19641
|
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"])));
|
|
19621
19642
|
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"])));
|
|
19622
19643
|
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; });
|
|
19623
|
-
var templateObject_1$
|
|
19644
|
+
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;
|
|
19624
19645
|
|
|
19625
19646
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19626
19647
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19661,16 +19682,16 @@ var SizeChartTable = function (_a) {
|
|
|
19661
19682
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19662
19683
|
};
|
|
19663
19684
|
|
|
19664
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19665
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19666
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19685
|
+
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; });
|
|
19686
|
+
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; });
|
|
19687
|
+
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; });
|
|
19667
19688
|
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; });
|
|
19668
19689
|
var SizeTable = function (_a) {
|
|
19669
19690
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19670
19691
|
var theme = useTheme();
|
|
19671
19692
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19672
19693
|
};
|
|
19673
|
-
var templateObject_1$
|
|
19694
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
19674
19695
|
|
|
19675
19696
|
var getStylesBySize$7 = function (size) {
|
|
19676
19697
|
switch (size) {
|
|
@@ -19697,7 +19718,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19697
19718
|
} });
|
|
19698
19719
|
};
|
|
19699
19720
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19700
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19721
|
+
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));
|
|
19701
19722
|
};
|
|
19702
19723
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19703
19724
|
if (disabled)
|
|
@@ -19713,23 +19734,23 @@ var TextButton = function (_a) {
|
|
|
19713
19734
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19714
19735
|
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));
|
|
19715
19736
|
};
|
|
19716
|
-
var templateObject_1$
|
|
19737
|
+
var templateObject_1$n;
|
|
19717
19738
|
|
|
19718
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19719
|
-
var P = newStyled.p(templateObject_2$
|
|
19720
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19739
|
+
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"])));
|
|
19740
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19741
|
+
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"])));
|
|
19721
19742
|
var SizeFitGuide = function (_a) {
|
|
19722
19743
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19723
19744
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19724
19745
|
};
|
|
19725
|
-
var templateObject_1$
|
|
19746
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19726
19747
|
|
|
19727
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19748
|
+
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) {
|
|
19728
19749
|
var inline = _a.inline;
|
|
19729
19750
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19730
19751
|
});
|
|
19731
|
-
var Row = newStyled.div(templateObject_2$
|
|
19732
|
-
var templateObject_1$
|
|
19752
|
+
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"])));
|
|
19753
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19733
19754
|
|
|
19734
19755
|
var SizeSelector = function (_a) {
|
|
19735
19756
|
var _b;
|
|
@@ -19751,7 +19772,7 @@ var SizeSelector = function (_a) {
|
|
|
19751
19772
|
}) }), void 0)] }), void 0));
|
|
19752
19773
|
};
|
|
19753
19774
|
|
|
19754
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19775
|
+
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) {
|
|
19755
19776
|
var titleSize = _a.titleSize;
|
|
19756
19777
|
return titleSize;
|
|
19757
19778
|
}, function (_a) {
|
|
@@ -19768,17 +19789,17 @@ var Tab = function (_a) {
|
|
|
19768
19789
|
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;
|
|
19769
19790
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19770
19791
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19792
|
+
var templateObject_1$k;
|
|
19772
19793
|
|
|
19773
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19774
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19794
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19795
|
+
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) {
|
|
19775
19796
|
var backgroundColor = _a.backgroundColor;
|
|
19776
19797
|
return backgroundColor;
|
|
19777
19798
|
}, function (_a) {
|
|
19778
19799
|
var borderColor = _a.borderColor;
|
|
19779
19800
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19780
19801
|
});
|
|
19781
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19802
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19782
19803
|
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"])));
|
|
19783
19804
|
var Tabs = function (_a) {
|
|
19784
19805
|
var _b;
|
|
@@ -19790,14 +19811,14 @@ var Tabs = function (_a) {
|
|
|
19790
19811
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19791
19812
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19792
19813
|
};
|
|
19793
|
-
var templateObject_1$
|
|
19814
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$e;
|
|
19794
19815
|
|
|
19795
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19816
|
+
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"])));
|
|
19796
19817
|
var Tag = function (_a) {
|
|
19797
19818
|
var text = _a.text, className = _a.className;
|
|
19798
19819
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19799
19820
|
};
|
|
19800
|
-
var templateObject_1$
|
|
19821
|
+
var templateObject_1$i;
|
|
19801
19822
|
|
|
19802
19823
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19803
19824
|
switch (size) {
|
|
@@ -19908,9 +19929,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19908
19929
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19909
19930
|
};
|
|
19910
19931
|
|
|
19911
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19912
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19913
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19932
|
+
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"])));
|
|
19933
|
+
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"])));
|
|
19934
|
+
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"])));
|
|
19914
19935
|
var ImageVideo = function (_a) {
|
|
19915
19936
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19916
19937
|
var video = React$2.useRef(null);
|
|
@@ -19930,11 +19951,11 @@ var ImageVideo = function (_a) {
|
|
|
19930
19951
|
height: '100%',
|
|
19931
19952
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19932
19953
|
};
|
|
19933
|
-
var templateObject_1$
|
|
19954
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19934
19955
|
|
|
19935
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19936
|
-
var ContainerMobile = css(templateObject_2$
|
|
19937
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19956
|
+
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"])));
|
|
19957
|
+
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"])));
|
|
19958
|
+
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);
|
|
19938
19959
|
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"])));
|
|
19939
19960
|
var TextWithImage = function (_a) {
|
|
19940
19961
|
var _b, _c, _d, _e;
|
|
@@ -19965,17 +19986,17 @@ var TextWithImage = function (_a) {
|
|
|
19965
19986
|
},
|
|
19966
19987
|
} }, 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));
|
|
19967
19988
|
};
|
|
19968
|
-
var templateObject_1$
|
|
19989
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$d;
|
|
19969
19990
|
|
|
19970
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19991
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19971
19992
|
var timerColor = _a.timerColor;
|
|
19972
19993
|
return timerColor || '';
|
|
19973
19994
|
});
|
|
19974
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19995
|
+
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) {
|
|
19975
19996
|
var timerColor = _a.timerColor;
|
|
19976
19997
|
return timerColor || '';
|
|
19977
19998
|
});
|
|
19978
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19999
|
+
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) {
|
|
19979
20000
|
var theme = _a.theme;
|
|
19980
20001
|
return theme.colors.shades.white.color;
|
|
19981
20002
|
}, function (_a) {
|
|
@@ -19983,7 +20004,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __
|
|
|
19983
20004
|
return theme.colors.shades.white.color;
|
|
19984
20005
|
});
|
|
19985
20006
|
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"])));
|
|
19986
|
-
var templateObject_1$
|
|
20007
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
19987
20008
|
|
|
19988
20009
|
var HRS = 'HRS';
|
|
19989
20010
|
var MIN = 'MIN';
|
|
@@ -20024,9 +20045,9 @@ var Timer = function (_a) {
|
|
|
20024
20045
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
20025
20046
|
};
|
|
20026
20047
|
|
|
20027
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20028
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20029
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20048
|
+
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"])));
|
|
20049
|
+
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; });
|
|
20050
|
+
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) {
|
|
20030
20051
|
var theme = _a.theme;
|
|
20031
20052
|
return theme.component.total.basicTotal.currency.color;
|
|
20032
20053
|
}, function (_a) {
|
|
@@ -20053,7 +20074,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20053
20074
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20054
20075
|
});
|
|
20055
20076
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20056
|
-
var templateObject_1$
|
|
20077
|
+
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;
|
|
20057
20078
|
|
|
20058
20079
|
var Total = function (_a) {
|
|
20059
20080
|
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;
|
|
@@ -20061,12 +20082,12 @@ var Total = function (_a) {
|
|
|
20061
20082
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20062
20083
|
};
|
|
20063
20084
|
|
|
20064
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20085
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20065
20086
|
var color = _a.color;
|
|
20066
20087
|
return color;
|
|
20067
20088
|
});
|
|
20068
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20069
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20089
|
+
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"])));
|
|
20090
|
+
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) {
|
|
20070
20091
|
var theme = _a.theme;
|
|
20071
20092
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20072
20093
|
}, function (_a) {
|
|
@@ -20086,7 +20107,7 @@ var Subtotal = function (_a) {
|
|
|
20086
20107
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20087
20108
|
})] }), void 0));
|
|
20088
20109
|
};
|
|
20089
|
-
var templateObject_1$
|
|
20110
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
20090
20111
|
|
|
20091
20112
|
var Totals = {
|
|
20092
20113
|
Total: Total,
|
|
@@ -20095,13 +20116,13 @@ var Totals = {
|
|
|
20095
20116
|
|
|
20096
20117
|
var slideInAnimation = function (distanceFromTop) {
|
|
20097
20118
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20098
|
-
return keyframes(templateObject_1$
|
|
20119
|
+
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);
|
|
20099
20120
|
};
|
|
20100
20121
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20101
20122
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20102
|
-
return keyframes(templateObject_2$
|
|
20123
|
+
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);
|
|
20103
20124
|
};
|
|
20104
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20125
|
+
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"])));
|
|
20105
20126
|
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) {
|
|
20106
20127
|
var distanceFromTop = _a.distanceFromTop;
|
|
20107
20128
|
return distanceFromTop || '124px';
|
|
@@ -20120,7 +20141,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20120
20141
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20121
20142
|
});
|
|
20122
20143
|
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"])));
|
|
20123
|
-
var templateObject_1$
|
|
20144
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20124
20145
|
|
|
20125
20146
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20126
20147
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20140,9 +20161,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20140
20161
|
});
|
|
20141
20162
|
Toast.displayName = 'Toast';
|
|
20142
20163
|
|
|
20143
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20144
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20145
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20164
|
+
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"])));
|
|
20165
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20166
|
+
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; });
|
|
20146
20167
|
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'); });
|
|
20147
20168
|
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"])));
|
|
20148
20169
|
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) {
|
|
@@ -20192,11 +20213,11 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20192
20213
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20193
20214
|
})] }), void 0));
|
|
20194
20215
|
};
|
|
20195
|
-
var templateObject_1$
|
|
20216
|
+
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;
|
|
20196
20217
|
|
|
20197
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20198
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20199
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20218
|
+
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"])));
|
|
20219
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20220
|
+
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; });
|
|
20200
20221
|
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'); });
|
|
20201
20222
|
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'); });
|
|
20202
20223
|
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) {
|
|
@@ -20232,9 +20253,9 @@ var TrackingProgress = function (_a) {
|
|
|
20232
20253
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20233
20254
|
})] }), void 0));
|
|
20234
20255
|
};
|
|
20235
|
-
var templateObject_1$
|
|
20256
|
+
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;
|
|
20236
20257
|
|
|
20237
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20258
|
+
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) {
|
|
20238
20259
|
var textPosition = _a.textPosition;
|
|
20239
20260
|
return textPosition;
|
|
20240
20261
|
}, function (_a) {
|
|
@@ -20247,7 +20268,7 @@ var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = _
|
|
|
20247
20268
|
var borderRadius = _a.borderRadius;
|
|
20248
20269
|
return borderRadius || '8px';
|
|
20249
20270
|
});
|
|
20250
|
-
var templateObject_1$
|
|
20271
|
+
var templateObject_1$9;
|
|
20251
20272
|
|
|
20252
20273
|
var getDefaultCountdown = function () {
|
|
20253
20274
|
var tomorrowDate = new Date();
|
|
@@ -20263,7 +20284,7 @@ var HurryUp = function (_a) {
|
|
|
20263
20284
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20264
20285
|
};
|
|
20265
20286
|
|
|
20266
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20287
|
+
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) {
|
|
20267
20288
|
var size = _a.size;
|
|
20268
20289
|
return (size ? size : '100%');
|
|
20269
20290
|
}, function (_a) {
|
|
@@ -20277,7 +20298,7 @@ var borderSize = {
|
|
|
20277
20298
|
large: '3px',
|
|
20278
20299
|
};
|
|
20279
20300
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20280
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20301
|
+
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) {
|
|
20281
20302
|
var size = _a.size;
|
|
20282
20303
|
return borderSize[size];
|
|
20283
20304
|
}, function (_a) {
|
|
@@ -20290,7 +20311,7 @@ var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __
|
|
|
20290
20311
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20291
20312
|
return duration;
|
|
20292
20313
|
});
|
|
20293
|
-
var templateObject_1$
|
|
20314
|
+
var templateObject_1$8, templateObject_2$8;
|
|
20294
20315
|
|
|
20295
20316
|
var Spinner = function (_a) {
|
|
20296
20317
|
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;
|
|
@@ -20311,9 +20332,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20311
20332
|
var Shades700Color = '#292929';
|
|
20312
20333
|
var PrimaryColor = '#f7a08b';
|
|
20313
20334
|
var ClubBorderColor = '#882a2b';
|
|
20314
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20315
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20316
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20335
|
+
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20336
|
+
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);
|
|
20337
|
+
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) {
|
|
20317
20338
|
var selected = _a.selected;
|
|
20318
20339
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20319
20340
|
}, function (_a) {
|
|
@@ -20354,7 +20375,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20354
20375
|
: Shades200Color;
|
|
20355
20376
|
});
|
|
20356
20377
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20357
|
-
var templateObject_1$
|
|
20378
|
+
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;
|
|
20358
20379
|
|
|
20359
20380
|
var ClubOfferSelector = function (_a) {
|
|
20360
20381
|
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;
|
|
@@ -20400,21 +20421,6 @@ var ClubOfferSelector = function (_a) {
|
|
|
20400
20421
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20401
20422
|
};
|
|
20402
20423
|
|
|
20403
|
-
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"])));
|
|
20404
|
-
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"])));
|
|
20405
|
-
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"])));
|
|
20406
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20407
|
-
|
|
20408
|
-
var ToggleComponent = function (_a) {
|
|
20409
|
-
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20410
|
-
var _c = React$2.useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20411
|
-
var handleChange = function (e) {
|
|
20412
|
-
setChecked(function (value) { return !value; });
|
|
20413
|
-
onToggle(e.target.checked);
|
|
20414
|
-
};
|
|
20415
|
-
return (jsxRuntime.jsxs(LabelWrapper, { children: [jsxRuntime.jsx(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsxRuntime.jsx(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20416
|
-
};
|
|
20417
|
-
|
|
20418
20424
|
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) {
|
|
20419
20425
|
var $checked = _a.$checked;
|
|
20420
20426
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
@@ -20424,23 +20430,23 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20424
20430
|
});
|
|
20425
20431
|
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"])));
|
|
20426
20432
|
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"])));
|
|
20427
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n
|
|
20433
|
+
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"])));
|
|
20428
20434
|
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"])));
|
|
20429
20435
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20430
20436
|
|
|
20431
20437
|
function Card(_a) {
|
|
20432
|
-
var children = _a.children, link = _a.link,
|
|
20433
|
-
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [
|
|
20438
|
+
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;
|
|
20439
|
+
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), jsxRuntime.jsxs(CardBody, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20434
20440
|
}
|
|
20435
20441
|
|
|
20436
20442
|
function JoinClubCard(_a) {
|
|
20437
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked,
|
|
20443
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20438
20444
|
var _b = React$2.useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20439
20445
|
var handleToggleValue = function (value) {
|
|
20440
20446
|
setChecked(value);
|
|
20441
20447
|
onCheckToggle(value);
|
|
20442
20448
|
};
|
|
20443
|
-
return (jsxRuntime.jsx(Card, __assign$1({ link: link,
|
|
20449
|
+
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20444
20450
|
}
|
|
20445
20451
|
|
|
20446
20452
|
var ImageContainer$1 = newStyled.div(function (_a) {
|