@trafilea/afrodita-components 6.25.2 → 6.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +52 -52
- package/build/index.esm.js +790 -785
- package/build/index.esm.js.map +1 -1
- package/build/index.js +790 -785
- 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) {
|
|
@@ -6767,7 +6787,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6767
6787
|
letterSpacing: '-0.05rem',
|
|
6768
6788
|
} }), 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
6789
|
};
|
|
6770
|
-
var templateObject_1$
|
|
6790
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6771
6791
|
|
|
6772
6792
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6773
6793
|
var width = _a.width, height = _a.height;
|
|
@@ -6777,9 +6797,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6777
6797
|
height: height,
|
|
6778
6798
|
});
|
|
6779
6799
|
});
|
|
6780
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6781
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6782
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6800
|
+
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; });
|
|
6801
|
+
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"])));
|
|
6802
|
+
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
6803
|
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
6804
|
var getStylesBySize$b = function (size) {
|
|
6785
6805
|
switch (size) {
|
|
@@ -6866,9 +6886,9 @@ var ProductItemTK = function (_a) {
|
|
|
6866
6886
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6867
6887
|
} }, { 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
6888
|
};
|
|
6869
|
-
var templateObject_1$
|
|
6889
|
+
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
6890
|
|
|
6871
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6891
|
+
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
6892
|
function withProductGrid(ProductItemComponent, data) {
|
|
6873
6893
|
function WithProductGrid(props) {
|
|
6874
6894
|
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 +6898,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6878
6898
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6879
6899
|
return WithProductGrid;
|
|
6880
6900
|
}
|
|
6881
|
-
var templateObject_1$
|
|
6901
|
+
var templateObject_1$1o;
|
|
6882
6902
|
|
|
6883
6903
|
var Collection = {
|
|
6884
6904
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6925,9 +6945,9 @@ var OutOfStock = function (_a) {
|
|
|
6925
6945
|
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
6946
|
};
|
|
6927
6947
|
|
|
6928
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6929
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6930
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6948
|
+
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"])));
|
|
6949
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6950
|
+
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
6951
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6932
6952
|
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
6953
|
var Label$4 = function (_a) {
|
|
@@ -6947,23 +6967,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6947
6967
|
Option: Option,
|
|
6948
6968
|
OptionsContainer: OptionsContainer,
|
|
6949
6969
|
});
|
|
6950
|
-
var templateObject_1$
|
|
6970
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6951
6971
|
|
|
6952
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6972
|
+
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
6973
|
var borderColor = _a.borderColor;
|
|
6954
6974
|
return borderColor;
|
|
6955
6975
|
}, function (_a) {
|
|
6956
6976
|
var noStock = _a.noStock;
|
|
6957
6977
|
return (noStock ? '0.4' : '1');
|
|
6958
6978
|
});
|
|
6959
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6979
|
+
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
6980
|
var PatternSelector = function (_a) {
|
|
6961
6981
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6962
6982
|
var theme = useTheme();
|
|
6963
6983
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6964
6984
|
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
6985
|
};
|
|
6966
|
-
var templateObject_1$
|
|
6986
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6967
6987
|
|
|
6968
6988
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6969
6989
|
if (options == null || options.length === 0) {
|
|
@@ -7022,9 +7042,9 @@ var SingleColorPicker = function (_a) {
|
|
|
7022
7042
|
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
7043
|
};
|
|
7024
7044
|
|
|
7025
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7026
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7027
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7045
|
+
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'); });
|
|
7046
|
+
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"])));
|
|
7047
|
+
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
7048
|
return props.rightToLeft &&
|
|
7029
7049
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7030
7050
|
});
|
|
@@ -7036,7 +7056,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7036
7056
|
var theme = useTheme();
|
|
7037
7057
|
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
7058
|
};
|
|
7039
|
-
var templateObject_1$
|
|
7059
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7040
7060
|
|
|
7041
7061
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7042
7062
|
__proto__: null,
|
|
@@ -7064,7 +7084,7 @@ var sizeMapper = (_a = {},
|
|
|
7064
7084
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7065
7085
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7066
7086
|
_a);
|
|
7067
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7087
|
+
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
7088
|
var wide = _a.wide;
|
|
7069
7089
|
return (wide ? '100%' : 'fit-content');
|
|
7070
7090
|
}, function (_a) {
|
|
@@ -7086,11 +7106,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7086
7106
|
var theme = _a.theme;
|
|
7087
7107
|
return theme.colors.text.disabled;
|
|
7088
7108
|
});
|
|
7089
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7109
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7090
7110
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7091
7111
|
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
7112
|
});
|
|
7093
|
-
var templateObject_1$
|
|
7113
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7094
7114
|
|
|
7095
7115
|
var BaseCTA = function (_a) {
|
|
7096
7116
|
var _b, _c, _d;
|
|
@@ -7177,23 +7197,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7177
7197
|
} }), void 0));
|
|
7178
7198
|
};
|
|
7179
7199
|
|
|
7180
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7181
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7182
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7200
|
+
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; });
|
|
7201
|
+
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"])));
|
|
7202
|
+
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
7203
|
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
7204
|
var Note = function (_a) {
|
|
7185
7205
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7186
7206
|
var theme = useTheme();
|
|
7187
7207
|
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
7208
|
};
|
|
7189
|
-
var templateObject_1$
|
|
7209
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7190
7210
|
|
|
7191
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7211
|
+
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
7212
|
var theme = _a.theme;
|
|
7193
7213
|
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
7214
|
});
|
|
7195
|
-
var Line = newStyled.div(templateObject_2$
|
|
7196
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7215
|
+
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; });
|
|
7216
|
+
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
7217
|
flexDirection: ['column', 'row'],
|
|
7198
7218
|
}));
|
|
7199
7219
|
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 +7251,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7231
7251
|
var theme = useTheme();
|
|
7232
7252
|
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
7253
|
};
|
|
7234
|
-
var templateObject_1$
|
|
7254
|
+
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
7255
|
|
|
7236
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7256
|
+
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
7257
|
var top = _a.top;
|
|
7238
7258
|
return top;
|
|
7239
7259
|
}, function (_a) {
|
|
7240
7260
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7241
7261
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7242
7262
|
});
|
|
7243
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7263
|
+
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
7264
|
var height = _a.height;
|
|
7245
7265
|
return height;
|
|
7246
7266
|
}, function (_a) {
|
|
@@ -7287,20 +7307,20 @@ var Drawer = function (_a) {
|
|
|
7287
7307
|
}, [isOpen, onClose, onOpen]);
|
|
7288
7308
|
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
7309
|
};
|
|
7290
|
-
var templateObject_1$
|
|
7310
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7291
7311
|
|
|
7292
7312
|
var TooltipArrow = function (_a) {
|
|
7293
7313
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7294
7314
|
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
7315
|
};
|
|
7296
7316
|
|
|
7297
|
-
var List = newStyled.ul(templateObject_1$
|
|
7298
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7299
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7317
|
+
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"])));
|
|
7318
|
+
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"])));
|
|
7319
|
+
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
7320
|
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
7321
|
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
7322
|
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$
|
|
7323
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7304
7324
|
|
|
7305
7325
|
var DropdownListIcons = function (_a) {
|
|
7306
7326
|
var items = _a.items;
|
|
@@ -7313,13 +7333,13 @@ var Dropdown = function (_a) {
|
|
|
7313
7333
|
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
7334
|
};
|
|
7315
7335
|
|
|
7316
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7317
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7318
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7336
|
+
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"])));
|
|
7337
|
+
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"])));
|
|
7338
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7319
7339
|
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
7340
|
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
7341
|
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$
|
|
7342
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7323
7343
|
|
|
7324
7344
|
var SizeDropdown = function (_a) {
|
|
7325
7345
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7342,9 +7362,9 @@ var SizeDropdown = function (_a) {
|
|
|
7342
7362
|
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
7363
|
};
|
|
7344
7364
|
|
|
7345
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7346
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7347
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7365
|
+
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; });
|
|
7366
|
+
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; });
|
|
7367
|
+
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
7368
|
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
7369
|
var DropdownDialog = function (_a) {
|
|
7350
7370
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7354,7 +7374,7 @@ var DropdownDialog = function (_a) {
|
|
|
7354
7374
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7355
7375
|
}) }), void 0) }), void 0));
|
|
7356
7376
|
};
|
|
7357
|
-
var templateObject_1$
|
|
7377
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7358
7378
|
|
|
7359
7379
|
function FilteringDropdown(_a) {
|
|
7360
7380
|
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 +7407,9 @@ function FilteringDropdown(_a) {
|
|
|
7387
7407
|
}) }, void 0)] }), void 0));
|
|
7388
7408
|
}
|
|
7389
7409
|
|
|
7390
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7391
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7392
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7410
|
+
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; });
|
|
7411
|
+
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; });
|
|
7412
|
+
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
7413
|
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
7414
|
var Accordion = function (_a) {
|
|
7395
7415
|
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 +7417,11 @@ var Accordion = function (_a) {
|
|
|
7397
7417
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7398
7418
|
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
7419
|
};
|
|
7400
|
-
var templateObject_1$
|
|
7420
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
7401
7421
|
|
|
7402
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7403
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7404
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7422
|
+
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; });
|
|
7423
|
+
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"])));
|
|
7424
|
+
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
7425
|
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
7426
|
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
7427
|
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 +7429,7 @@ var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i =
|
|
|
7409
7429
|
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
7430
|
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
7431
|
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$
|
|
7432
|
+
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
7433
|
|
|
7414
7434
|
var getStylesBySize$a = function (size, theme) {
|
|
7415
7435
|
switch (size) {
|
|
@@ -7474,9 +7494,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7474
7494
|
} }), id: id }, void 0));
|
|
7475
7495
|
};
|
|
7476
7496
|
|
|
7477
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7478
|
-
var LI = newStyled.li(templateObject_2$
|
|
7479
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7497
|
+
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"])));
|
|
7498
|
+
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; });
|
|
7499
|
+
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
7500
|
var Tags = function (_a) {
|
|
7481
7501
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7482
7502
|
var theme = useTheme();
|
|
@@ -7484,7 +7504,7 @@ var Tags = function (_a) {
|
|
|
7484
7504
|
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
7505
|
}) }), void 0));
|
|
7486
7506
|
};
|
|
7487
|
-
var templateObject_1$
|
|
7507
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7488
7508
|
|
|
7489
7509
|
var Filters = function (_a) {
|
|
7490
7510
|
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 +7640,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7620
7640
|
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
7641
|
};
|
|
7622
7642
|
|
|
7623
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7624
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7643
|
+
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"])));
|
|
7644
|
+
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
7645
|
var FitGuarantee = function (_a) {
|
|
7626
7646
|
var _b;
|
|
7627
7647
|
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 +7659,10 @@ var FitGuarantee = function (_a) {
|
|
|
7639
7659
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7640
7660
|
} }, { 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
7661
|
};
|
|
7642
|
-
var templateObject_1$
|
|
7662
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7643
7663
|
|
|
7644
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7645
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7664
|
+
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"])));
|
|
7665
|
+
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
7666
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7647
7667
|
border: 'none',
|
|
7648
7668
|
background: 'transparent',
|
|
@@ -7657,7 +7677,7 @@ var FitPredictor = function (_a) {
|
|
|
7657
7677
|
var theme = useTheme();
|
|
7658
7678
|
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
7679
|
};
|
|
7660
|
-
var templateObject_1$
|
|
7680
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7661
7681
|
|
|
7662
7682
|
var Button$7 = newStyled.button(function () { return ({
|
|
7663
7683
|
background: 'transparent',
|
|
@@ -11901,14 +11921,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11901
11921
|
return Slider;
|
|
11902
11922
|
}(React__default["default"].Component);
|
|
11903
11923
|
|
|
11904
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11924
|
+
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
11925
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11906
11926
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11907
11927
|
}, function (_a) {
|
|
11908
11928
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11909
11929
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11910
11930
|
});
|
|
11911
|
-
var templateObject_1$
|
|
11931
|
+
var templateObject_1$18;
|
|
11912
11932
|
|
|
11913
11933
|
var getStylesBySize$9 = function (size) {
|
|
11914
11934
|
// rem units
|
|
@@ -11967,7 +11987,7 @@ var SliderNavigation = function (_a) {
|
|
|
11967
11987
|
} }, { 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
11988
|
};
|
|
11969
11989
|
|
|
11970
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11990
|
+
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
11991
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11972
11992
|
return borderRadiusVariant &&
|
|
11973
11993
|
"\n border-radius: 20px;\n ";
|
|
@@ -11985,7 +12005,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
11985
12005
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11986
12006
|
: 'inherit';
|
|
11987
12007
|
});
|
|
11988
|
-
var templateObject_1$
|
|
12008
|
+
var templateObject_1$17;
|
|
11989
12009
|
|
|
11990
12010
|
var ImageSmallPreview = function (_a) {
|
|
11991
12011
|
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 +12013,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11993
12013
|
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
12014
|
};
|
|
11995
12015
|
|
|
11996
|
-
var horizontalStyles = css(templateObject_1$
|
|
11997
|
-
var verticalStyles = css(templateObject_2$
|
|
11998
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
12016
|
+
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"])));
|
|
12017
|
+
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"])));
|
|
12018
|
+
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
12019
|
var position = _a.position;
|
|
12000
12020
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12001
12021
|
}, function (_a) {
|
|
@@ -12008,7 +12028,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o =
|
|
|
12008
12028
|
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
12029
|
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
12030
|
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$
|
|
12031
|
+
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
12032
|
|
|
12013
12033
|
var ImagePreviewList = function (_a) {
|
|
12014
12034
|
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 +12047,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12027
12047
|
}, 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
12048
|
};
|
|
12029
12049
|
|
|
12030
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12031
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12032
|
-
var templateObject_1$
|
|
12050
|
+
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); });
|
|
12051
|
+
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; });
|
|
12052
|
+
var templateObject_1$15, templateObject_2$O;
|
|
12033
12053
|
|
|
12034
12054
|
var ProgressBar$1 = function (_a) {
|
|
12035
12055
|
var progress = _a.progress, hide = _a.hide;
|
|
12036
12056
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12037
12057
|
};
|
|
12038
12058
|
|
|
12039
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
12040
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12041
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12059
|
+
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"])));
|
|
12060
|
+
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; });
|
|
12061
|
+
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
12062
|
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
12063
|
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
12064
|
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$
|
|
12065
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12046
12066
|
|
|
12047
12067
|
var Video$1 = function (_a) {
|
|
12048
12068
|
var _b, _c, _d, _e;
|
|
@@ -13682,18 +13702,18 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13682
13702
|
afterZoomOut: PropTypes.func
|
|
13683
13703
|
} : {};
|
|
13684
13704
|
|
|
13685
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13705
|
+
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
13706
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13687
13707
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13688
13708
|
});
|
|
13689
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13709
|
+
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
13710
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13691
13711
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13692
13712
|
}, function (_a) {
|
|
13693
13713
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13694
13714
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13695
13715
|
});
|
|
13696
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13716
|
+
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
13717
|
var isCTAHidden = _a.isCTAHidden;
|
|
13698
13718
|
return (isCTAHidden ? '60px' : '120px');
|
|
13699
13719
|
});
|
|
@@ -13707,7 +13727,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (temp
|
|
|
13707
13727
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13708
13728
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13709
13729
|
});
|
|
13710
|
-
var templateObject_1$
|
|
13730
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13711
13731
|
|
|
13712
13732
|
var ImageProductSlide$1 = function (_a) {
|
|
13713
13733
|
var _b;
|
|
@@ -13720,8 +13740,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13720
13740
|
}, 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
13741
|
};
|
|
13722
13742
|
|
|
13723
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13724
|
-
var templateObject_1$
|
|
13743
|
+
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"])));
|
|
13744
|
+
var templateObject_1$12;
|
|
13725
13745
|
|
|
13726
13746
|
var getInitialIndex = function (images, selectedValue) {
|
|
13727
13747
|
if (selectedValue) {
|
|
@@ -13769,7 +13789,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13769
13789
|
};
|
|
13770
13790
|
}
|
|
13771
13791
|
};
|
|
13772
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13792
|
+
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
13793
|
var backgroundColor = _a.backgroundColor;
|
|
13774
13794
|
return backgroundColor;
|
|
13775
13795
|
}, function (_a) {
|
|
@@ -13799,9 +13819,9 @@ var IconButton = function (_a) {
|
|
|
13799
13819
|
var theme = useTheme();
|
|
13800
13820
|
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
13821
|
};
|
|
13802
|
-
var templateObject_1$
|
|
13822
|
+
var templateObject_1$11;
|
|
13803
13823
|
|
|
13804
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13824
|
+
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
13825
|
var AmazonButton = function (_a) {
|
|
13806
13826
|
var onClick = _a.onClick;
|
|
13807
13827
|
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 +13830,7 @@ var PaypalButton = function (_a) {
|
|
|
13810
13830
|
var onClick = _a.onClick;
|
|
13811
13831
|
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
13832
|
};
|
|
13813
|
-
var templateObject_1$
|
|
13833
|
+
var templateObject_1$10;
|
|
13814
13834
|
|
|
13815
13835
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13816
13836
|
height: 'auto',
|
|
@@ -13865,9 +13885,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13865
13885
|
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
13886
|
};
|
|
13867
13887
|
|
|
13868
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13869
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13870
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13888
|
+
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'); });
|
|
13889
|
+
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'); });
|
|
13890
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13871
13891
|
var titlePosition = _a.titlePosition;
|
|
13872
13892
|
return titlePosition == 'center' &&
|
|
13873
13893
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13877,13 +13897,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13877
13897
|
var isMobile = useWindowDimensions().isMobile;
|
|
13878
13898
|
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
13899
|
};
|
|
13880
|
-
var templateObject_1
|
|
13900
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13881
13901
|
|
|
13882
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13902
|
+
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
13903
|
var color = _a.color;
|
|
13884
13904
|
return color;
|
|
13885
13905
|
});
|
|
13886
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13906
|
+
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
13907
|
var color = _a.color;
|
|
13888
13908
|
return color;
|
|
13889
13909
|
});
|
|
@@ -13892,7 +13912,7 @@ var InputLabel = function (_a) {
|
|
|
13892
13912
|
var theme = useTheme();
|
|
13893
13913
|
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
13914
|
};
|
|
13895
|
-
var templateObject_1
|
|
13915
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13896
13916
|
|
|
13897
13917
|
var containerByStatus = function (theme, status) {
|
|
13898
13918
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13901,12 +13921,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13901
13921
|
return theme.colors.semantic.urgent.color;
|
|
13902
13922
|
return '';
|
|
13903
13923
|
};
|
|
13904
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13924
|
+
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
13925
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13906
13926
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13907
13927
|
});
|
|
13908
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13909
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13928
|
+
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"])));
|
|
13929
|
+
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
13930
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13911
13931
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13912
13932
|
}, function (_a) {
|
|
@@ -13961,7 +13981,7 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13961
13981
|
return hasValue &&
|
|
13962
13982
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13963
13983
|
});
|
|
13964
|
-
var InputWrapper
|
|
13984
|
+
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
13985
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13966
13986
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13967
13987
|
});
|
|
@@ -13979,7 +13999,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
13979
13999
|
return theme.component.input.lineHeight;
|
|
13980
14000
|
});
|
|
13981
14001
|
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$
|
|
14002
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13983
14003
|
|
|
13984
14004
|
var BaseInput = function (_a) {
|
|
13985
14005
|
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 +14022,7 @@ var BaseInput = function (_a) {
|
|
|
14002
14022
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14003
14023
|
}, [status]);
|
|
14004
14024
|
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
|
|
14025
|
+
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
14026
|
onChange(event.target.value, event);
|
|
14007
14027
|
}, 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
14028
|
onChange('', { target: { value: '' } });
|
|
@@ -14023,11 +14043,11 @@ var Button$5 = function (_a) {
|
|
|
14023
14043
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14024
14044
|
};
|
|
14025
14045
|
|
|
14026
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14046
|
+
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
14047
|
var theme = _a.theme;
|
|
14028
14048
|
return theme.component.inputCustom.input.borderRadius;
|
|
14029
14049
|
});
|
|
14030
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14050
|
+
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
14051
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14032
14052
|
return defaultRounded
|
|
14033
14053
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14044,21 +14064,21 @@ var Custom = function (_a) {
|
|
|
14044
14064
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14045
14065
|
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
14066
|
};
|
|
14047
|
-
var templateObject_1$
|
|
14067
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14048
14068
|
|
|
14049
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14069
|
+
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
14070
|
var size = _a.size;
|
|
14051
14071
|
return (size === 'small' ? '36px' : '');
|
|
14052
14072
|
});
|
|
14053
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14054
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14073
|
+
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"])));
|
|
14074
|
+
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
14075
|
var Success = function (_a) {
|
|
14056
14076
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14057
14077
|
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
14078
|
};
|
|
14059
|
-
var templateObject_1$
|
|
14079
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14060
14080
|
|
|
14061
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14081
|
+
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
14082
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14063
14083
|
return status === exports.InputValidationType.Empty &&
|
|
14064
14084
|
type === 'primary' &&
|
|
@@ -14075,16 +14095,16 @@ var BasePlusButton = function (_a) {
|
|
|
14075
14095
|
}
|
|
14076
14096
|
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
14097
|
};
|
|
14078
|
-
var templateObject_1$
|
|
14098
|
+
var templateObject_1$W;
|
|
14079
14099
|
|
|
14080
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14081
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14100
|
+
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"])));
|
|
14101
|
+
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
14102
|
var BasePlusIcon = function (_a) {
|
|
14083
14103
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14084
14104
|
var theme = useTheme();
|
|
14085
14105
|
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
14106
|
};
|
|
14087
|
-
var templateObject_1$
|
|
14107
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14088
14108
|
|
|
14089
14109
|
var Input$3 = {
|
|
14090
14110
|
Simple: BaseInput,
|
|
@@ -14129,7 +14149,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14129
14149
|
}, [preventTouch, ref, touchStart]);
|
|
14130
14150
|
}
|
|
14131
14151
|
|
|
14132
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14152
|
+
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
14153
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14134
14154
|
return borderRadiusVariant &&
|
|
14135
14155
|
"\n border-radius: 40px;\n ";
|
|
@@ -14138,8 +14158,8 @@ var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14138
14158
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14139
14159
|
});
|
|
14140
14160
|
// max-height: 31.875rem;
|
|
14141
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14142
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14161
|
+
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'); });
|
|
14162
|
+
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
14163
|
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
14164
|
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
14165
|
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 +14221,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14201
14221
|
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
14222
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14203
14223
|
};
|
|
14204
|
-
var templateObject_1$
|
|
14224
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14205
14225
|
|
|
14206
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14226
|
+
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
14227
|
var ProductGalleryMobile = function (_a) {
|
|
14208
14228
|
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
14229
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14210
14230
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14211
14231
|
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
14232
|
};
|
|
14213
|
-
var templateObject_1$
|
|
14233
|
+
var templateObject_1$T;
|
|
14214
14234
|
|
|
14215
14235
|
function _extends() {
|
|
14216
14236
|
_extends = Object.assign || function (target) {
|
|
@@ -14477,14 +14497,14 @@ function useSwipeable(options) {
|
|
|
14477
14497
|
return handlers;
|
|
14478
14498
|
}
|
|
14479
14499
|
|
|
14480
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14500
|
+
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
14501
|
var ArrowButton = function (_a) {
|
|
14482
14502
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14483
14503
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14484
14504
|
};
|
|
14485
|
-
var templateObject_1$
|
|
14505
|
+
var templateObject_1$S;
|
|
14486
14506
|
|
|
14487
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14507
|
+
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
14508
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14489
14509
|
var SlideDots = function (_a) {
|
|
14490
14510
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14493,11 +14513,11 @@ var SlideDots = function (_a) {
|
|
|
14493
14513
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14494
14514
|
: 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
14515
|
};
|
|
14496
|
-
var templateObject_1$
|
|
14516
|
+
var templateObject_1$R;
|
|
14497
14517
|
|
|
14498
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14499
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14500
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14518
|
+
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"])));
|
|
14519
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14520
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14501
14521
|
var SlideNavigation = function (_a) {
|
|
14502
14522
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14503
14523
|
var theme = useTheme();
|
|
@@ -14509,23 +14529,23 @@ var SlideNavigation = function (_a) {
|
|
|
14509
14529
|
onNavigate(selectedIndex + 1);
|
|
14510
14530
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14511
14531
|
};
|
|
14512
|
-
var templateObject_1$
|
|
14532
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14513
14533
|
|
|
14514
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14534
|
+
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
14535
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14516
14536
|
return borderRadiusVariant &&
|
|
14517
14537
|
"\n border-radius: 40px;\n ";
|
|
14518
14538
|
});
|
|
14519
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14520
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14539
|
+
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'); });
|
|
14540
|
+
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
14541
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14522
14542
|
var _b, _c;
|
|
14523
14543
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14524
14544
|
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
14545
|
});
|
|
14526
|
-
var templateObject_1$
|
|
14546
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14527
14547
|
|
|
14528
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14548
|
+
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
14549
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14530
14550
|
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
14551
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14549,9 +14569,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14549
14569
|
}, [index, images]);
|
|
14550
14570
|
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
14571
|
};
|
|
14552
|
-
var templateObject_1$
|
|
14572
|
+
var templateObject_1$O;
|
|
14553
14573
|
|
|
14554
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14574
|
+
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
14575
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14556
14576
|
return borderRadiusVariant &&
|
|
14557
14577
|
"\n border-radius: 40px;\n ";
|
|
@@ -14560,8 +14580,8 @@ var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14560
14580
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14561
14581
|
});
|
|
14562
14582
|
// max-height: 31.875rem;
|
|
14563
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14564
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14583
|
+
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'); });
|
|
14584
|
+
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
14585
|
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
14586
|
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
14587
|
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 +14645,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14625
14645
|
} }, 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
14646
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14627
14647
|
};
|
|
14628
|
-
var templateObject_1$
|
|
14648
|
+
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
14649
|
|
|
14630
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14650
|
+
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
14651
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14632
14652
|
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
14653
|
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
14654
|
};
|
|
14635
|
-
var templateObject_1$
|
|
14655
|
+
var templateObject_1$M;
|
|
14636
14656
|
|
|
14637
14657
|
var __defProp$1 = Object.defineProperty;
|
|
14638
14658
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14765,12 +14785,12 @@ var Portal = function (_a) {
|
|
|
14765
14785
|
var visibleStyle = function (_a) {
|
|
14766
14786
|
var opened = _a.opened;
|
|
14767
14787
|
return opened
|
|
14768
|
-
? css(templateObject_1$
|
|
14788
|
+
? 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
14789
|
};
|
|
14770
14790
|
var transformStyle = function (_a) {
|
|
14771
14791
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14772
14792
|
return opened
|
|
14773
|
-
? css(templateObject_3$
|
|
14793
|
+
? 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
14794
|
};
|
|
14775
14795
|
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
14796
|
var width = _a.width;
|
|
@@ -14820,9 +14840,9 @@ var useModal = function (id) {
|
|
|
14820
14840
|
close: close,
|
|
14821
14841
|
}); }, [close, open, opened]);
|
|
14822
14842
|
};
|
|
14823
|
-
var templateObject_1$
|
|
14843
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14824
14844
|
|
|
14825
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14845
|
+
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
14846
|
var height = _a.height;
|
|
14827
14847
|
return height || '0.5rem';
|
|
14828
14848
|
}, function (_a) {
|
|
@@ -14894,19 +14914,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14894
14914
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14895
14915
|
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
14916
|
};
|
|
14897
|
-
var templateObject_1$
|
|
14917
|
+
var templateObject_1$K;
|
|
14898
14918
|
|
|
14899
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14919
|
+
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
14920
|
var theme = _a.theme;
|
|
14901
14921
|
return theme.component.orderBar.backgroundColor;
|
|
14902
14922
|
});
|
|
14903
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14923
|
+
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
14924
|
var OrderBar = function (_a) {
|
|
14905
14925
|
var message = _a.message, color = _a.color;
|
|
14906
14926
|
var theme = useTheme();
|
|
14907
14927
|
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
14928
|
};
|
|
14909
|
-
var templateObject_1$
|
|
14929
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14910
14930
|
|
|
14911
14931
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14912
14932
|
background: props.bgColor,
|
|
@@ -14930,15 +14950,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14930
14950
|
justifyContent: 'center',
|
|
14931
14951
|
gap: '10px',
|
|
14932
14952
|
});
|
|
14933
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14953
|
+
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
14954
|
var bgColor = _a.bgColor;
|
|
14935
14955
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14936
14956
|
}, function (_a) {
|
|
14937
14957
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14938
14958
|
return width;
|
|
14939
14959
|
});
|
|
14940
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14941
|
-
var templateObject_1$
|
|
14960
|
+
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"])));
|
|
14961
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14942
14962
|
|
|
14943
14963
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14944
14964
|
var background = _a.background, width = _a.width;
|
|
@@ -18758,9 +18778,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18758
18778
|
HTMLReactParser$1.attributesToProps;
|
|
18759
18779
|
HTMLReactParser$1.Element;
|
|
18760
18780
|
|
|
18761
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18762
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18763
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18781
|
+
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"])));
|
|
18782
|
+
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"])));
|
|
18783
|
+
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
18784
|
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
18785
|
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
18786
|
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 +18815,11 @@ var PackCard = function (_a) {
|
|
|
18795
18815
|
currency: currencyCode || 'USD',
|
|
18796
18816
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18797
18817
|
};
|
|
18798
|
-
var templateObject_1$
|
|
18818
|
+
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
18819
|
|
|
18800
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18801
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18802
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18820
|
+
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"])));
|
|
18821
|
+
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"])));
|
|
18822
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18803
18823
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18804
18824
|
}));
|
|
18805
18825
|
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 +18839,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18819
18839
|
var background = _a.background;
|
|
18820
18840
|
return background || 'unset';
|
|
18821
18841
|
});
|
|
18822
|
-
var templateObject_1$
|
|
18842
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$n;
|
|
18823
18843
|
|
|
18824
18844
|
var Pagination = function (_a) {
|
|
18825
18845
|
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 +18904,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18884
18904
|
: 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
18905
|
};
|
|
18886
18906
|
|
|
18887
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18907
|
+
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
18908
|
var width = _a.width;
|
|
18889
18909
|
return width;
|
|
18890
18910
|
}, function (_a) {
|
|
@@ -18902,12 +18922,12 @@ var PaymentMethod = function (_a) {
|
|
|
18902
18922
|
var theme = useTheme();
|
|
18903
18923
|
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
18924
|
};
|
|
18905
|
-
var templateObject_1$
|
|
18925
|
+
var templateObject_1$F;
|
|
18906
18926
|
|
|
18907
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18927
|
+
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
18928
|
var IMAGE_WIDTH = '63px';
|
|
18909
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18910
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18929
|
+
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);
|
|
18930
|
+
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
18931
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18912
18932
|
}), IMAGE_WIDTH);
|
|
18913
18933
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18947,7 +18967,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18947
18967
|
var theme = useTheme();
|
|
18948
18968
|
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
18969
|
};
|
|
18950
|
-
var templateObject_1$
|
|
18970
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18951
18971
|
|
|
18952
18972
|
var P$1 = newStyled.p(function (_a) {
|
|
18953
18973
|
var color = _a.color;
|
|
@@ -18961,7 +18981,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18961
18981
|
margin: '0.938rem 4.188rem',
|
|
18962
18982
|
});
|
|
18963
18983
|
});
|
|
18964
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18984
|
+
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
18985
|
var height = _a.height;
|
|
18966
18986
|
return height || '0.5rem';
|
|
18967
18987
|
}, function (_a) {
|
|
@@ -19006,11 +19026,11 @@ var ProgressBar = function (_a) {
|
|
|
19006
19026
|
var theme = useTheme();
|
|
19007
19027
|
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
19028
|
};
|
|
19009
|
-
var templateObject_1$
|
|
19029
|
+
var templateObject_1$D;
|
|
19010
19030
|
|
|
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$
|
|
19031
|
+
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; });
|
|
19032
|
+
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"])));
|
|
19033
|
+
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
19034
|
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
19035
|
var QuantityPicker = function (_a) {
|
|
19016
19036
|
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 +19056,7 @@ var QuantityPicker = function (_a) {
|
|
|
19036
19056
|
}, [value, clamp]);
|
|
19037
19057
|
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
19058
|
};
|
|
19039
|
-
var templateObject_1$
|
|
19059
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$l;
|
|
19040
19060
|
|
|
19041
19061
|
/* base styles & size variants */
|
|
19042
19062
|
var CustomRadioStyles$1 = {
|
|
@@ -19105,9 +19125,9 @@ var ContainerStyles$1 = {
|
|
|
19105
19125
|
},
|
|
19106
19126
|
};
|
|
19107
19127
|
|
|
19108
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19128
|
+
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
19129
|
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$
|
|
19130
|
+
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
19131
|
var disabled = _a.disabled;
|
|
19112
19132
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19113
19133
|
});
|
|
@@ -19115,7 +19135,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19115
19135
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19116
19136
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19117
19137
|
]; });
|
|
19118
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19138
|
+
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
19139
|
var RadioPrimary = function (_a) {
|
|
19120
19140
|
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
19141
|
var theme = useTheme();
|
|
@@ -19125,7 +19145,7 @@ var RadioPrimary = function (_a) {
|
|
|
19125
19145
|
};
|
|
19126
19146
|
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
19147
|
};
|
|
19128
|
-
var templateObject_1$
|
|
19148
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19129
19149
|
|
|
19130
19150
|
var RadioGroupInput = function (_a) {
|
|
19131
19151
|
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 +19224,9 @@ var ContainerStyles = {
|
|
|
19204
19224
|
},
|
|
19205
19225
|
};
|
|
19206
19226
|
|
|
19207
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19227
|
+
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
19228
|
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$
|
|
19229
|
+
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
19230
|
var disabled = _a.disabled;
|
|
19211
19231
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19212
19232
|
});
|
|
@@ -19214,7 +19234,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19214
19234
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19215
19235
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19216
19236
|
]; });
|
|
19217
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19237
|
+
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
19238
|
var theme = _a.theme;
|
|
19219
19239
|
return theme.component.radio.textSize;
|
|
19220
19240
|
}, function (_a) {
|
|
@@ -19230,7 +19250,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19230
19250
|
};
|
|
19231
19251
|
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
19252
|
};
|
|
19233
|
-
var templateObject_1$
|
|
19253
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19234
19254
|
|
|
19235
19255
|
var ClubRadioGroupInput = function (_a) {
|
|
19236
19256
|
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 +19278,9 @@ function formatDate(date, format) {
|
|
|
19258
19278
|
}
|
|
19259
19279
|
}
|
|
19260
19280
|
|
|
19261
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19262
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19263
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19281
|
+
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"])));
|
|
19282
|
+
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"])));
|
|
19283
|
+
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
19284
|
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
19285
|
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
19286
|
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 +19319,13 @@ var Review$1 = function (_a) {
|
|
|
19299
19319
|
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
19320
|
(!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
19321
|
};
|
|
19302
|
-
var templateObject_1$
|
|
19322
|
+
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
19323
|
|
|
19304
19324
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19305
19325
|
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$
|
|
19326
|
+
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"])));
|
|
19327
|
+
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"])));
|
|
19328
|
+
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
19329
|
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
19330
|
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
19331
|
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 +19375,11 @@ var Review = function (_a) {
|
|
|
19355
19375
|
: description,
|
|
19356
19376
|
} }, 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
19377
|
};
|
|
19358
|
-
var templateObject_1$
|
|
19378
|
+
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
19379
|
|
|
19360
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19361
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19362
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19380
|
+
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"])));
|
|
19381
|
+
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"])));
|
|
19382
|
+
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
19383
|
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
19384
|
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
19385
|
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 +19393,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19373
19393
|
var theme = useTheme();
|
|
19374
19394
|
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
19395
|
};
|
|
19376
|
-
var templateObject_1$
|
|
19396
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19377
19397
|
|
|
19378
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19379
|
-
var Text = newStyled.p(templateObject_2$
|
|
19398
|
+
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"])));
|
|
19399
|
+
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
19400
|
var ScrollToTop = function (_a) {
|
|
19381
19401
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19382
19402
|
var theme = useTheme();
|
|
19383
19403
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19384
19404
|
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
19405
|
};
|
|
19386
|
-
var templateObject_1$
|
|
19406
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19387
19407
|
|
|
19388
19408
|
var Input = newStyled.input(function (props) { return ({
|
|
19389
19409
|
padding: props.theme.component.input.padding,
|
|
@@ -19414,7 +19434,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19414
19434
|
},
|
|
19415
19435
|
}); });
|
|
19416
19436
|
|
|
19417
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19437
|
+
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
19438
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19419
19439
|
}));
|
|
19420
19440
|
var Description = newStyled.div({
|
|
@@ -19433,7 +19453,7 @@ var ProductItem = function (_a) {
|
|
|
19433
19453
|
var theme = useTheme();
|
|
19434
19454
|
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
19455
|
};
|
|
19436
|
-
var templateObject_1$
|
|
19456
|
+
var templateObject_1$v;
|
|
19437
19457
|
|
|
19438
19458
|
var Container$j = newStyled.div({
|
|
19439
19459
|
display: 'flex',
|
|
@@ -19449,7 +19469,7 @@ var Ul = newStyled.ul({
|
|
|
19449
19469
|
margin: '0px',
|
|
19450
19470
|
padding: '0px',
|
|
19451
19471
|
});
|
|
19452
|
-
var Li = newStyled.li(templateObject_1$
|
|
19472
|
+
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
19473
|
padding: [0, '0rem 1rem'],
|
|
19454
19474
|
borderRadius: [0, '0.5rem'],
|
|
19455
19475
|
}));
|
|
@@ -19461,12 +19481,12 @@ var Anchor = newStyled.a({
|
|
|
19461
19481
|
padding: 0,
|
|
19462
19482
|
textDecoration: 'none',
|
|
19463
19483
|
});
|
|
19464
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19484
|
+
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
19485
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19466
19486
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19467
19487
|
borderRadius: ['0', '0.5rem'],
|
|
19468
19488
|
}));
|
|
19469
|
-
var Header = newStyled.div(templateObject_3$
|
|
19489
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19470
19490
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19471
19491
|
}));
|
|
19472
19492
|
var ResultsPanel = function (_a) {
|
|
@@ -19474,9 +19494,9 @@ var ResultsPanel = function (_a) {
|
|
|
19474
19494
|
var theme = useTheme();
|
|
19475
19495
|
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
19496
|
};
|
|
19477
|
-
var templateObject_1$
|
|
19497
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19478
19498
|
|
|
19479
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19499
|
+
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
19500
|
right: ['1rem', '7.75rem'],
|
|
19481
19501
|
top: ['0.75rem', '0.75rem'],
|
|
19482
19502
|
}));
|
|
@@ -19485,7 +19505,7 @@ var ClearButton = function (_a) {
|
|
|
19485
19505
|
var theme = useTheme();
|
|
19486
19506
|
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
19507
|
};
|
|
19488
|
-
var templateObject_1$
|
|
19508
|
+
var templateObject_1$t;
|
|
19489
19509
|
|
|
19490
19510
|
var SearchIconContainer = newStyled.div({
|
|
19491
19511
|
display: 'flex',
|
|
@@ -19495,7 +19515,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19495
19515
|
background: 'white',
|
|
19496
19516
|
alignSelf: 'center',
|
|
19497
19517
|
});
|
|
19498
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19518
|
+
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
19519
|
var SearchControl = function (_a) {
|
|
19500
19520
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19501
19521
|
var theme = useTheme();
|
|
@@ -19511,7 +19531,7 @@ var SearchControl = function (_a) {
|
|
|
19511
19531
|
}
|
|
19512
19532
|
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
19533
|
};
|
|
19514
|
-
var templateObject_1$
|
|
19534
|
+
var templateObject_1$s;
|
|
19515
19535
|
|
|
19516
19536
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19517
19537
|
var reducer = function (state, action) {
|
|
@@ -19578,9 +19598,9 @@ var SearchBar = function (_a) {
|
|
|
19578
19598
|
} }, 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
19599
|
};
|
|
19580
19600
|
|
|
19581
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19582
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19583
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19601
|
+
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"])));
|
|
19602
|
+
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"])));
|
|
19603
|
+
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
19604
|
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
19605
|
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
19606
|
var SearchNavigation = function (_a) {
|
|
@@ -19589,9 +19609,9 @@ var SearchNavigation = function (_a) {
|
|
|
19589
19609
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19590
19610
|
}) }, void 0)] }, void 0));
|
|
19591
19611
|
};
|
|
19592
|
-
var templateObject_1$
|
|
19612
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19593
19613
|
|
|
19594
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19614
|
+
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
19615
|
var alignCenter = _a.alignCenter;
|
|
19596
19616
|
return alignCenter &&
|
|
19597
19617
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19601,18 +19621,18 @@ var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __ma
|
|
|
19601
19621
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19602
19622
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19603
19623
|
});
|
|
19604
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19605
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19624
|
+
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"])));
|
|
19625
|
+
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
19626
|
var ShortBanner = function (_a) {
|
|
19607
19627
|
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
19628
|
var theme = useTheme();
|
|
19609
19629
|
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
19630
|
};
|
|
19611
|
-
var templateObject_1$
|
|
19631
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19612
19632
|
|
|
19613
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19614
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19615
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19633
|
+
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; });
|
|
19634
|
+
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; });
|
|
19635
|
+
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
19636
|
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
19637
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19618
19638
|
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 +19640,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19620
19640
|
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
19641
|
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
19642
|
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$
|
|
19643
|
+
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
19644
|
|
|
19625
19645
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19626
19646
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19661,16 +19681,16 @@ var SizeChartTable = function (_a) {
|
|
|
19661
19681
|
}, 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
19682
|
};
|
|
19663
19683
|
|
|
19664
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19665
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19666
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19684
|
+
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; });
|
|
19685
|
+
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; });
|
|
19686
|
+
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
19687
|
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
19688
|
var SizeTable = function (_a) {
|
|
19669
19689
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19670
19690
|
var theme = useTheme();
|
|
19671
19691
|
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
19692
|
};
|
|
19673
|
-
var templateObject_1$
|
|
19693
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
19674
19694
|
|
|
19675
19695
|
var getStylesBySize$7 = function (size) {
|
|
19676
19696
|
switch (size) {
|
|
@@ -19697,7 +19717,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19697
19717
|
} });
|
|
19698
19718
|
};
|
|
19699
19719
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19700
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19720
|
+
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
19721
|
};
|
|
19702
19722
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19703
19723
|
if (disabled)
|
|
@@ -19713,23 +19733,23 @@ var TextButton = function (_a) {
|
|
|
19713
19733
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19714
19734
|
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
19735
|
};
|
|
19716
|
-
var templateObject_1$
|
|
19736
|
+
var templateObject_1$n;
|
|
19717
19737
|
|
|
19718
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19719
|
-
var P = newStyled.p(templateObject_2$
|
|
19720
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19738
|
+
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"])));
|
|
19739
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19740
|
+
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
19741
|
var SizeFitGuide = function (_a) {
|
|
19722
19742
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19723
19743
|
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
19744
|
};
|
|
19725
|
-
var templateObject_1$
|
|
19745
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19726
19746
|
|
|
19727
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19747
|
+
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
19748
|
var inline = _a.inline;
|
|
19729
19749
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19730
19750
|
});
|
|
19731
|
-
var Row = newStyled.div(templateObject_2$
|
|
19732
|
-
var templateObject_1$
|
|
19751
|
+
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"])));
|
|
19752
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19733
19753
|
|
|
19734
19754
|
var SizeSelector = function (_a) {
|
|
19735
19755
|
var _b;
|
|
@@ -19751,7 +19771,7 @@ var SizeSelector = function (_a) {
|
|
|
19751
19771
|
}) }), void 0)] }), void 0));
|
|
19752
19772
|
};
|
|
19753
19773
|
|
|
19754
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19774
|
+
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
19775
|
var titleSize = _a.titleSize;
|
|
19756
19776
|
return titleSize;
|
|
19757
19777
|
}, function (_a) {
|
|
@@ -19768,17 +19788,17 @@ var Tab = function (_a) {
|
|
|
19768
19788
|
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
19789
|
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
19790
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19791
|
+
var templateObject_1$k;
|
|
19772
19792
|
|
|
19773
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19774
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19793
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19794
|
+
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
19795
|
var backgroundColor = _a.backgroundColor;
|
|
19776
19796
|
return backgroundColor;
|
|
19777
19797
|
}, function (_a) {
|
|
19778
19798
|
var borderColor = _a.borderColor;
|
|
19779
19799
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19780
19800
|
});
|
|
19781
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19801
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19782
19802
|
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
19803
|
var Tabs = function (_a) {
|
|
19784
19804
|
var _b;
|
|
@@ -19790,14 +19810,14 @@ var Tabs = function (_a) {
|
|
|
19790
19810
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19791
19811
|
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
19812
|
};
|
|
19793
|
-
var templateObject_1$
|
|
19813
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$e;
|
|
19794
19814
|
|
|
19795
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19815
|
+
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
19816
|
var Tag = function (_a) {
|
|
19797
19817
|
var text = _a.text, className = _a.className;
|
|
19798
19818
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19799
19819
|
};
|
|
19800
|
-
var templateObject_1$
|
|
19820
|
+
var templateObject_1$i;
|
|
19801
19821
|
|
|
19802
19822
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19803
19823
|
switch (size) {
|
|
@@ -19908,9 +19928,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19908
19928
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19909
19929
|
};
|
|
19910
19930
|
|
|
19911
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19912
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19913
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19931
|
+
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"])));
|
|
19932
|
+
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"])));
|
|
19933
|
+
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
19934
|
var ImageVideo = function (_a) {
|
|
19915
19935
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19916
19936
|
var video = React$2.useRef(null);
|
|
@@ -19930,11 +19950,11 @@ var ImageVideo = function (_a) {
|
|
|
19930
19950
|
height: '100%',
|
|
19931
19951
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19932
19952
|
};
|
|
19933
|
-
var templateObject_1$
|
|
19953
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19934
19954
|
|
|
19935
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19936
|
-
var ContainerMobile = css(templateObject_2$
|
|
19937
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19955
|
+
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"])));
|
|
19956
|
+
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"])));
|
|
19957
|
+
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
19958
|
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
19959
|
var TextWithImage = function (_a) {
|
|
19940
19960
|
var _b, _c, _d, _e;
|
|
@@ -19965,17 +19985,17 @@ var TextWithImage = function (_a) {
|
|
|
19965
19985
|
},
|
|
19966
19986
|
} }, 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
19987
|
};
|
|
19968
|
-
var templateObject_1$
|
|
19988
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$d;
|
|
19969
19989
|
|
|
19970
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19990
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19971
19991
|
var timerColor = _a.timerColor;
|
|
19972
19992
|
return timerColor || '';
|
|
19973
19993
|
});
|
|
19974
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19994
|
+
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
19995
|
var timerColor = _a.timerColor;
|
|
19976
19996
|
return timerColor || '';
|
|
19977
19997
|
});
|
|
19978
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19998
|
+
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
19999
|
var theme = _a.theme;
|
|
19980
20000
|
return theme.colors.shades.white.color;
|
|
19981
20001
|
}, function (_a) {
|
|
@@ -19983,7 +20003,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __
|
|
|
19983
20003
|
return theme.colors.shades.white.color;
|
|
19984
20004
|
});
|
|
19985
20005
|
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$
|
|
20006
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
19987
20007
|
|
|
19988
20008
|
var HRS = 'HRS';
|
|
19989
20009
|
var MIN = 'MIN';
|
|
@@ -20024,9 +20044,9 @@ var Timer = function (_a) {
|
|
|
20024
20044
|
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
20045
|
};
|
|
20026
20046
|
|
|
20027
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20028
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20029
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20047
|
+
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"])));
|
|
20048
|
+
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; });
|
|
20049
|
+
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
20050
|
var theme = _a.theme;
|
|
20031
20051
|
return theme.component.total.basicTotal.currency.color;
|
|
20032
20052
|
}, function (_a) {
|
|
@@ -20053,7 +20073,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20053
20073
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20054
20074
|
});
|
|
20055
20075
|
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$
|
|
20076
|
+
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
20077
|
|
|
20058
20078
|
var Total = function (_a) {
|
|
20059
20079
|
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 +20081,12 @@ var Total = function (_a) {
|
|
|
20061
20081
|
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
20082
|
};
|
|
20063
20083
|
|
|
20064
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20084
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20065
20085
|
var color = _a.color;
|
|
20066
20086
|
return color;
|
|
20067
20087
|
});
|
|
20068
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20069
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20088
|
+
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"])));
|
|
20089
|
+
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
20090
|
var theme = _a.theme;
|
|
20071
20091
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20072
20092
|
}, function (_a) {
|
|
@@ -20086,7 +20106,7 @@ var Subtotal = function (_a) {
|
|
|
20086
20106
|
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
20107
|
})] }), void 0));
|
|
20088
20108
|
};
|
|
20089
|
-
var templateObject_1$
|
|
20109
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
20090
20110
|
|
|
20091
20111
|
var Totals = {
|
|
20092
20112
|
Total: Total,
|
|
@@ -20095,13 +20115,13 @@ var Totals = {
|
|
|
20095
20115
|
|
|
20096
20116
|
var slideInAnimation = function (distanceFromTop) {
|
|
20097
20117
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20098
|
-
return keyframes(templateObject_1$
|
|
20118
|
+
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
20119
|
};
|
|
20100
20120
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20101
20121
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20102
|
-
return keyframes(templateObject_2$
|
|
20122
|
+
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
20123
|
};
|
|
20104
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20124
|
+
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
20125
|
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
20126
|
var distanceFromTop = _a.distanceFromTop;
|
|
20107
20127
|
return distanceFromTop || '124px';
|
|
@@ -20120,7 +20140,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20120
20140
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20121
20141
|
});
|
|
20122
20142
|
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$
|
|
20143
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20124
20144
|
|
|
20125
20145
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20126
20146
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20140,9 +20160,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20140
20160
|
});
|
|
20141
20161
|
Toast.displayName = 'Toast';
|
|
20142
20162
|
|
|
20143
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20144
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20145
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20163
|
+
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"])));
|
|
20164
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20165
|
+
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
20166
|
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
20167
|
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
20168
|
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 +20212,11 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20192
20212
|
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
20213
|
})] }), void 0));
|
|
20194
20214
|
};
|
|
20195
|
-
var templateObject_1$
|
|
20215
|
+
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
20216
|
|
|
20197
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20198
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20199
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20217
|
+
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"])));
|
|
20218
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20219
|
+
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
20220
|
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
20221
|
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
20222
|
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 +20252,9 @@ var TrackingProgress = function (_a) {
|
|
|
20232
20252
|
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
20253
|
})] }), void 0));
|
|
20234
20254
|
};
|
|
20235
|
-
var templateObject_1$
|
|
20255
|
+
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
20256
|
|
|
20237
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20257
|
+
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
20258
|
var textPosition = _a.textPosition;
|
|
20239
20259
|
return textPosition;
|
|
20240
20260
|
}, function (_a) {
|
|
@@ -20247,7 +20267,7 @@ var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = _
|
|
|
20247
20267
|
var borderRadius = _a.borderRadius;
|
|
20248
20268
|
return borderRadius || '8px';
|
|
20249
20269
|
});
|
|
20250
|
-
var templateObject_1$
|
|
20270
|
+
var templateObject_1$9;
|
|
20251
20271
|
|
|
20252
20272
|
var getDefaultCountdown = function () {
|
|
20253
20273
|
var tomorrowDate = new Date();
|
|
@@ -20263,7 +20283,7 @@ var HurryUp = function (_a) {
|
|
|
20263
20283
|
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
20284
|
};
|
|
20265
20285
|
|
|
20266
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20286
|
+
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
20287
|
var size = _a.size;
|
|
20268
20288
|
return (size ? size : '100%');
|
|
20269
20289
|
}, function (_a) {
|
|
@@ -20277,7 +20297,7 @@ var borderSize = {
|
|
|
20277
20297
|
large: '3px',
|
|
20278
20298
|
};
|
|
20279
20299
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20280
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20300
|
+
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
20301
|
var size = _a.size;
|
|
20282
20302
|
return borderSize[size];
|
|
20283
20303
|
}, function (_a) {
|
|
@@ -20290,7 +20310,7 @@ var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __
|
|
|
20290
20310
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20291
20311
|
return duration;
|
|
20292
20312
|
});
|
|
20293
|
-
var templateObject_1$
|
|
20313
|
+
var templateObject_1$8, templateObject_2$8;
|
|
20294
20314
|
|
|
20295
20315
|
var Spinner = function (_a) {
|
|
20296
20316
|
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 +20331,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20311
20331
|
var Shades700Color = '#292929';
|
|
20312
20332
|
var PrimaryColor = '#f7a08b';
|
|
20313
20333
|
var ClubBorderColor = '#882a2b';
|
|
20314
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20315
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20316
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20334
|
+
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20335
|
+
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);
|
|
20336
|
+
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
20337
|
var selected = _a.selected;
|
|
20318
20338
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20319
20339
|
}, function (_a) {
|
|
@@ -20354,7 +20374,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20354
20374
|
: Shades200Color;
|
|
20355
20375
|
});
|
|
20356
20376
|
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$
|
|
20377
|
+
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
20378
|
|
|
20359
20379
|
var ClubOfferSelector = function (_a) {
|
|
20360
20380
|
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 +20420,6 @@ var ClubOfferSelector = function (_a) {
|
|
|
20400
20420
|
}, 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
20421
|
};
|
|
20402
20422
|
|
|
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
20423
|
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
20424
|
var $checked = _a.$checked;
|
|
20420
20425
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
@@ -20424,23 +20429,23 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20424
20429
|
});
|
|
20425
20430
|
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
20431
|
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
|
|
20432
|
+
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
20433
|
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
20434
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20430
20435
|
|
|
20431
20436
|
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: [
|
|
20437
|
+
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;
|
|
20438
|
+
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
20439
|
}
|
|
20435
20440
|
|
|
20436
20441
|
function JoinClubCard(_a) {
|
|
20437
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked,
|
|
20442
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20438
20443
|
var _b = React$2.useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20439
20444
|
var handleToggleValue = function (value) {
|
|
20440
20445
|
setChecked(value);
|
|
20441
20446
|
onCheckToggle(value);
|
|
20442
20447
|
};
|
|
20443
|
-
return (jsxRuntime.jsx(Card, __assign$1({ link: link,
|
|
20448
|
+
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
20449
|
}
|
|
20445
20450
|
|
|
20446
20451
|
var ImageContainer$1 = newStyled.div(function (_a) {
|