@trafilea/afrodita-components 6.25.2 → 6.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +53 -52
- package/build/index.esm.js +795 -789
- package/build/index.esm.js.map +1 -1
- package/build/index.js +795 -789
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3127,265 +3127,6 @@ var formatPrice = function (value, _a) {
|
|
|
3127
3127
|
}).format(valueToFormat);
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Viewports = {
|
|
3131
|
-
mobile: 'mobile',
|
|
3132
|
-
tablet: 'tablet',
|
|
3133
|
-
desktop: 'desktop',
|
|
3134
|
-
desktopLarge: 'desktopLarge',
|
|
3135
|
-
};
|
|
3136
|
-
|
|
3137
|
-
//ANNOTATION: Those values are up to.
|
|
3138
|
-
var DEFAULT_BREAKPOINTS = {
|
|
3139
|
-
mobile: 640,
|
|
3140
|
-
tablet: 1024,
|
|
3141
|
-
desktop: 1280,
|
|
3142
|
-
};
|
|
3143
|
-
|
|
3144
|
-
var Container$1j = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3145
|
-
var height = _a.height;
|
|
3146
|
-
return (height ? height : '1.5em');
|
|
3147
|
-
}, function (_a) {
|
|
3148
|
-
var width = _a.width;
|
|
3149
|
-
return (width ? width : '100%');
|
|
3150
|
-
}, function (_a) {
|
|
3151
|
-
var theme = _a.theme;
|
|
3152
|
-
return theme.colors.background.disabled;
|
|
3153
|
-
}, function (_a) {
|
|
3154
|
-
var theme = _a.theme;
|
|
3155
|
-
return theme.radius.regular;
|
|
3156
|
-
}, function (_a) {
|
|
3157
|
-
var theme = _a.theme;
|
|
3158
|
-
return theme.colors.shades['10'].color;
|
|
3159
|
-
}, function (_a) {
|
|
3160
|
-
var theme = _a.theme;
|
|
3161
|
-
return theme.colors.background.disabled;
|
|
3162
|
-
}, function (_a) {
|
|
3163
|
-
var theme = _a.theme;
|
|
3164
|
-
return theme.colors.shades['10'].color;
|
|
3165
|
-
});
|
|
3166
|
-
var SkeletonBox = function (_a) {
|
|
3167
|
-
var width = _a.width, height = _a.height;
|
|
3168
|
-
var theme = useTheme();
|
|
3169
|
-
return jsx$1(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3170
|
-
};
|
|
3171
|
-
var templateObject_1$2a;
|
|
3172
|
-
|
|
3173
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3174
|
-
var width = _a.width;
|
|
3175
|
-
return width;
|
|
3176
|
-
}, function (_a) {
|
|
3177
|
-
var height = _a.height;
|
|
3178
|
-
return height;
|
|
3179
|
-
}, function (_a) {
|
|
3180
|
-
var fill = _a.fill;
|
|
3181
|
-
return fill;
|
|
3182
|
-
}, function (_a) {
|
|
3183
|
-
var backgroundColor = _a.backgroundColor;
|
|
3184
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3185
|
-
}, function (_a) {
|
|
3186
|
-
var opacity = _a.opacity;
|
|
3187
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3188
|
-
});
|
|
3189
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3190
|
-
var width = _a.width;
|
|
3191
|
-
return width;
|
|
3192
|
-
}, function (_a) {
|
|
3193
|
-
var height = _a.height;
|
|
3194
|
-
return height;
|
|
3195
|
-
}, function (_a) {
|
|
3196
|
-
var backgroundColor = _a.backgroundColor;
|
|
3197
|
-
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3198
|
-
}, function (_a) {
|
|
3199
|
-
var opacity = _a.opacity;
|
|
3200
|
-
return opacity && "opacity: ".concat(opacity, ";");
|
|
3201
|
-
});
|
|
3202
|
-
var templateObject_1$29, templateObject_2$1v;
|
|
3203
|
-
|
|
3204
|
-
/* eslint-disable no-undef */
|
|
3205
|
-
var cache = new Map();
|
|
3206
|
-
var fetching = new Map();
|
|
3207
|
-
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3208
|
-
if (cache.has(request)) {
|
|
3209
|
-
return cache.get(request);
|
|
3210
|
-
}
|
|
3211
|
-
if (fetching.has(request)) {
|
|
3212
|
-
return fetching.get(request);
|
|
3213
|
-
}
|
|
3214
|
-
var fetchPromise = fetch(request)
|
|
3215
|
-
.then(function (response) {
|
|
3216
|
-
if (response.status !== 200) {
|
|
3217
|
-
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3218
|
-
}
|
|
3219
|
-
return response;
|
|
3220
|
-
})
|
|
3221
|
-
.then(saveToCacheFn)
|
|
3222
|
-
.then(function (data) {
|
|
3223
|
-
cache.set(request, data);
|
|
3224
|
-
fetching.delete(request);
|
|
3225
|
-
return data;
|
|
3226
|
-
})
|
|
3227
|
-
.catch(function (error) {
|
|
3228
|
-
fetching.delete(request);
|
|
3229
|
-
throw error;
|
|
3230
|
-
});
|
|
3231
|
-
fetching.set(request, fetchPromise);
|
|
3232
|
-
return fetchPromise;
|
|
3233
|
-
};
|
|
3234
|
-
|
|
3235
|
-
var createIconImage = function (_a) {
|
|
3236
|
-
var src = _a.src;
|
|
3237
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
3238
|
-
var localUrl, error_1;
|
|
3239
|
-
return __generator(this, function (_b) {
|
|
3240
|
-
switch (_b.label) {
|
|
3241
|
-
case 0:
|
|
3242
|
-
_b.trys.push([0, 2, , 3]);
|
|
3243
|
-
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3244
|
-
var blob;
|
|
3245
|
-
return __generator(this, function (_a) {
|
|
3246
|
-
switch (_a.label) {
|
|
3247
|
-
case 0: return [4 /*yield*/, response.blob()];
|
|
3248
|
-
case 1:
|
|
3249
|
-
blob = _a.sent();
|
|
3250
|
-
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3251
|
-
}
|
|
3252
|
-
});
|
|
3253
|
-
}); })];
|
|
3254
|
-
case 1:
|
|
3255
|
-
localUrl = _b.sent();
|
|
3256
|
-
return [2 /*return*/, {
|
|
3257
|
-
src: localUrl,
|
|
3258
|
-
}];
|
|
3259
|
-
case 2:
|
|
3260
|
-
error_1 = _b.sent();
|
|
3261
|
-
console.warn(error_1);
|
|
3262
|
-
return [2 /*return*/, undefined];
|
|
3263
|
-
case 3: return [2 /*return*/];
|
|
3264
|
-
}
|
|
3265
|
-
});
|
|
3266
|
-
});
|
|
3267
|
-
};
|
|
3268
|
-
|
|
3269
|
-
var getIconDimension = function (dimension) {
|
|
3270
|
-
if (!dimension)
|
|
3271
|
-
return '100%';
|
|
3272
|
-
if (String(dimension).includes('px') ||
|
|
3273
|
-
String(dimension).includes('%') ||
|
|
3274
|
-
String(dimension).includes('rem')) {
|
|
3275
|
-
return dimension;
|
|
3276
|
-
}
|
|
3277
|
-
return "".concat(dimension, "rem");
|
|
3278
|
-
};
|
|
3279
|
-
|
|
3280
|
-
var UnmemoIconFromExtSource = function (_a) {
|
|
3281
|
-
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3282
|
-
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3283
|
-
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3284
|
-
useEffect(function () {
|
|
3285
|
-
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3286
|
-
var localSource;
|
|
3287
|
-
return __generator(this, function (_a) {
|
|
3288
|
-
switch (_a.label) {
|
|
3289
|
-
case 0: return [4 /*yield*/, createIconImage({
|
|
3290
|
-
src: iconURL,
|
|
3291
|
-
})];
|
|
3292
|
-
case 1:
|
|
3293
|
-
localSource = _a.sent();
|
|
3294
|
-
if (localSource) {
|
|
3295
|
-
setLocalSource(localSource);
|
|
3296
|
-
return [2 /*return*/];
|
|
3297
|
-
}
|
|
3298
|
-
setError(true);
|
|
3299
|
-
return [2 /*return*/];
|
|
3300
|
-
}
|
|
3301
|
-
});
|
|
3302
|
-
}); };
|
|
3303
|
-
if (!localSource) {
|
|
3304
|
-
fetchIcon();
|
|
3305
|
-
}
|
|
3306
|
-
}, [iconURL]);
|
|
3307
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3308
|
-
if (error) {
|
|
3309
|
-
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3310
|
-
}
|
|
3311
|
-
if (!localSource) {
|
|
3312
|
-
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3313
|
-
}
|
|
3314
|
-
if (!fill && !svgProps) {
|
|
3315
|
-
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3316
|
-
}
|
|
3317
|
-
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3318
|
-
};
|
|
3319
|
-
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3320
|
-
|
|
3321
|
-
/* eslint-disable react/forbid-component-props */
|
|
3322
|
-
var UnmemoIcon = function (_a) {
|
|
3323
|
-
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
|
|
3324
|
-
var assets = useTheme().assets;
|
|
3325
|
-
var newWidth = width && getIconDimension(width);
|
|
3326
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3327
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3328
|
-
var svgSplit = name.split('/');
|
|
3329
|
-
var svgId = svgSplit[svgSplit.length - 1];
|
|
3330
|
-
if (assets.isSameOriginIcons) {
|
|
3331
|
-
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3332
|
-
}
|
|
3333
|
-
return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3334
|
-
};
|
|
3335
|
-
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3336
|
-
|
|
3337
|
-
var getValidSize = function (size) {
|
|
3338
|
-
if (!size) {
|
|
3339
|
-
return 'auto';
|
|
3340
|
-
}
|
|
3341
|
-
if (typeof size === 'number') {
|
|
3342
|
-
return String(size);
|
|
3343
|
-
}
|
|
3344
|
-
if (size.endsWith('px')) {
|
|
3345
|
-
return size.replace('px', '');
|
|
3346
|
-
}
|
|
3347
|
-
if (Number(size))
|
|
3348
|
-
return String(Number(size));
|
|
3349
|
-
return 'auto';
|
|
3350
|
-
};
|
|
3351
|
-
|
|
3352
|
-
var DEFAULT_QUALITY = 100;
|
|
3353
|
-
var buildImageUrl = function (_a) {
|
|
3354
|
-
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3355
|
-
try {
|
|
3356
|
-
new URL(src);
|
|
3357
|
-
var baseUrl = new URL(src);
|
|
3358
|
-
if (!baseUrl.host) {
|
|
3359
|
-
return src;
|
|
3360
|
-
}
|
|
3361
|
-
if (cdn.includes(baseUrl.host)) {
|
|
3362
|
-
return src;
|
|
3363
|
-
}
|
|
3364
|
-
var url = encodeURIComponent(src);
|
|
3365
|
-
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3366
|
-
var width = getValidSize(widthString);
|
|
3367
|
-
var height = getValidSize(heightString);
|
|
3368
|
-
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3369
|
-
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3370
|
-
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3371
|
-
}
|
|
3372
|
-
catch (e) {
|
|
3373
|
-
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3374
|
-
return src;
|
|
3375
|
-
}
|
|
3376
|
-
};
|
|
3377
|
-
|
|
3378
|
-
var Img = newStyled.img(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3379
|
-
var Image$3 = function (_a) {
|
|
3380
|
-
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3381
|
-
var config = useTheme().config;
|
|
3382
|
-
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3383
|
-
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3384
|
-
: src;
|
|
3385
|
-
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3386
|
-
};
|
|
3387
|
-
var templateObject_1$28;
|
|
3388
|
-
|
|
3389
3130
|
var CardSectionType;
|
|
3390
3131
|
(function (CardSectionType) {
|
|
3391
3132
|
CardSectionType[CardSectionType["Header"] = 0] = "Header";
|
|
@@ -3440,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3440
3181
|
};
|
|
3441
3182
|
}
|
|
3442
3183
|
};
|
|
3443
|
-
var Container$
|
|
3184
|
+
var Container$1j = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3444
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3445
3186
|
return backgroundColor;
|
|
3446
3187
|
}, function (_a) {
|
|
@@ -3462,7 +3203,7 @@ var Container$1i = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
3462
3203
|
var size = _a.size;
|
|
3463
3204
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3464
3205
|
});
|
|
3465
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3206
|
+
var H3$3 = newStyled.h3(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3466
3207
|
var textColor = _a.textColor;
|
|
3467
3208
|
return textColor;
|
|
3468
3209
|
}, function (_a) {
|
|
@@ -3477,9 +3218,9 @@ var H3$3 = newStyled.h3(templateObject_2$1u || (templateObject_2$1u = __makeTemp
|
|
|
3477
3218
|
var ClubOfferTag = function (_a) {
|
|
3478
3219
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3479
3220
|
var theme = useTheme();
|
|
3480
|
-
return (jsx$1(Container$
|
|
3221
|
+
return (jsx$1(Container$1j, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3481
3222
|
};
|
|
3482
|
-
var templateObject_1$
|
|
3223
|
+
var templateObject_1$2b, templateObject_2$1w;
|
|
3483
3224
|
|
|
3484
3225
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3485
3226
|
var _a, _b, _c;
|
|
@@ -3510,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3510
3251
|
};
|
|
3511
3252
|
}
|
|
3512
3253
|
};
|
|
3513
|
-
var Container$
|
|
3254
|
+
var Container$1i = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3514
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3515
3256
|
return backgroundColor;
|
|
3516
3257
|
}, function (_a) {
|
|
@@ -3532,7 +3273,7 @@ var Container$1h = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
3532
3273
|
var size = _a.size;
|
|
3533
3274
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3534
3275
|
});
|
|
3535
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3276
|
+
var H3$2 = newStyled.h3(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3536
3277
|
var textColor = _a.textColor;
|
|
3537
3278
|
return textColor;
|
|
3538
3279
|
}, function (_a) {
|
|
@@ -3547,9 +3288,23 @@ var H3$2 = newStyled.h3(templateObject_2$1t || (templateObject_2$1t = __makeTemp
|
|
|
3547
3288
|
var DiscountTag$2 = function (_a) {
|
|
3548
3289
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3549
3290
|
var theme = useTheme();
|
|
3550
|
-
return (jsx$1(Container$
|
|
3291
|
+
return (jsx$1(Container$1i, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3551
3292
|
};
|
|
3552
|
-
var templateObject_1$
|
|
3293
|
+
var templateObject_1$2a, templateObject_2$1v;
|
|
3294
|
+
|
|
3295
|
+
var Viewports = {
|
|
3296
|
+
mobile: 'mobile',
|
|
3297
|
+
tablet: 'tablet',
|
|
3298
|
+
desktop: 'desktop',
|
|
3299
|
+
desktopLarge: 'desktopLarge',
|
|
3300
|
+
};
|
|
3301
|
+
|
|
3302
|
+
//ANNOTATION: Those values are up to.
|
|
3303
|
+
var DEFAULT_BREAKPOINTS = {
|
|
3304
|
+
mobile: 640,
|
|
3305
|
+
tablet: 1024,
|
|
3306
|
+
desktop: 1280,
|
|
3307
|
+
};
|
|
3553
3308
|
|
|
3554
3309
|
function getWindowDimensions() {
|
|
3555
3310
|
if (typeof window === 'undefined')
|
|
@@ -3644,8 +3399,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3644
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3645
3400
|
}
|
|
3646
3401
|
};
|
|
3647
|
-
var Container$
|
|
3648
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1h = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3649
3404
|
var weight = _a.weight;
|
|
3650
3405
|
return (weight ? weight : '400');
|
|
3651
3406
|
}, function (_a) {
|
|
@@ -3700,11 +3455,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3700
3455
|
: ComponentSize.XSmall;
|
|
3701
3456
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3702
3457
|
};
|
|
3703
|
-
return (jsxs$1(Container$
|
|
3458
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3704
3459
|
};
|
|
3705
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$29, templateObject_2$1u, templateObject_3$19;
|
|
3706
3461
|
|
|
3707
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3708
3463
|
var PriceLabelV2$1 = function (_a) {
|
|
3709
3464
|
var _b;
|
|
3710
3465
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3757,7 +3512,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3757
3512
|
var savetoString = saveto.toFixed(2);
|
|
3758
3513
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3759
3514
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3760
|
-
return (jsxs$1(Container$
|
|
3515
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3761
3516
|
marginTop: '-5px',
|
|
3762
3517
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3763
3518
|
? finalPriceArray[0]
|
|
@@ -3775,10 +3530,10 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3775
3530
|
lineHeight: '22px',
|
|
3776
3531
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3777
3532
|
};
|
|
3778
|
-
var templateObject_1$
|
|
3533
|
+
var templateObject_1$28;
|
|
3779
3534
|
|
|
3780
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3781
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3535
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3536
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3782
3537
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3783
3538
|
var PriceLabelV3 = function (_a) {
|
|
3784
3539
|
var _b;
|
|
@@ -3814,115 +3569,380 @@ var PriceLabelV3 = function (_a) {
|
|
|
3814
3569
|
originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
|
|
3815
3570
|
finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
|
|
3816
3571
|
}
|
|
3817
|
-
else {
|
|
3818
|
-
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
3819
|
-
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
3572
|
+
else {
|
|
3573
|
+
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
3574
|
+
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
3575
|
+
}
|
|
3576
|
+
var saveto = originalPriceNum - finalPriceNum;
|
|
3577
|
+
var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
|
|
3578
|
+
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
3579
|
+
saveto = Math.floor(saveto) + 0.0;
|
|
3580
|
+
}
|
|
3581
|
+
else if (decimalPart >= 0.51 && decimalPart < 1.0) {
|
|
3582
|
+
saveto = Math.floor(saveto) + 0.5;
|
|
3583
|
+
}
|
|
3584
|
+
var savetoString = saveto.toFixed(2);
|
|
3585
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3586
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3587
|
+
var DiscountedPriceOfEach = function () {
|
|
3588
|
+
if (!itemsQuantity || itemsQuantity < 2)
|
|
3589
|
+
return null;
|
|
3590
|
+
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3591
|
+
};
|
|
3592
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1h, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1h, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3593
|
+
marginTop: '-5px',
|
|
3594
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3595
|
+
marginTop: '-6px',
|
|
3596
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag$2, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
3597
|
+
letterSpacing: '-0.05rem',
|
|
3598
|
+
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
3599
|
+
borderRadius: '8px',
|
|
3600
|
+
width: '107px',
|
|
3601
|
+
height: '28px',
|
|
3602
|
+
alignItems: 'center',
|
|
3603
|
+
padding: '3px 8px 3px 8px',
|
|
3604
|
+
fontSize: '14px',
|
|
3605
|
+
lineHeight: '22px',
|
|
3606
|
+
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3607
|
+
};
|
|
3608
|
+
var templateObject_1$27, templateObject_2$1t, templateObject_3$18;
|
|
3609
|
+
|
|
3610
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3611
|
+
var PriceLabel = function (_a) {
|
|
3612
|
+
var _b;
|
|
3613
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3614
|
+
var theme = useTheme();
|
|
3615
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3616
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3617
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3618
|
+
var currencySymbol = '$';
|
|
3619
|
+
if (typeof finalPrice === 'string') {
|
|
3620
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3621
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
3622
|
+
currencySymbol = availableCurrency;
|
|
3623
|
+
}
|
|
3624
|
+
});
|
|
3625
|
+
}
|
|
3626
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
3627
|
+
finalPrice.includes('.') &&
|
|
3628
|
+
finalPrice.includes(currencySymbol)
|
|
3629
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3630
|
+
: ['', ''];
|
|
3631
|
+
var priceCommonProps = {
|
|
3632
|
+
size: ComponentSize.Small,
|
|
3633
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
3634
|
+
weight: 700,
|
|
3635
|
+
};
|
|
3636
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3637
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3638
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3639
|
+
marginTop: '-5px',
|
|
3640
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3641
|
+
marginTop: '-6px',
|
|
3642
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3643
|
+
};
|
|
3644
|
+
var templateObject_1$26;
|
|
3645
|
+
|
|
3646
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3647
|
+
var PriceLabelV2 = function (_a) {
|
|
3648
|
+
var _b;
|
|
3649
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3650
|
+
var theme = useTheme();
|
|
3651
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3652
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3653
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3654
|
+
var currencySymbol = '$';
|
|
3655
|
+
if (typeof finalPrice === 'string') {
|
|
3656
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3657
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
3658
|
+
currencySymbol = availableCurrency;
|
|
3659
|
+
}
|
|
3660
|
+
});
|
|
3661
|
+
}
|
|
3662
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
3663
|
+
finalPrice.includes('.') &&
|
|
3664
|
+
finalPrice.includes(currencySymbol)
|
|
3665
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3666
|
+
: ['', ''];
|
|
3667
|
+
var priceCommonProps = {
|
|
3668
|
+
size: ComponentSize.Small,
|
|
3669
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
3670
|
+
weight: 700,
|
|
3671
|
+
};
|
|
3672
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ style: { marginRight: '10px' }, size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3673
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3674
|
+
var finalPriceString = finalPriceArray[0]
|
|
3675
|
+
? finalPriceArray[0]
|
|
3676
|
+
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3677
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3678
|
+
};
|
|
3679
|
+
var templateObject_1$25;
|
|
3680
|
+
|
|
3681
|
+
var ClubGradient$1 = "linear-gradient(90deg, #882a2b 0%, #f27c65 226.92%)";
|
|
3682
|
+
newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"])));
|
|
3683
|
+
newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"], ["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"])), ClubGradient$1);
|
|
3684
|
+
var templateObject_1$24, templateObject_2$1s;
|
|
3685
|
+
|
|
3686
|
+
var Container$1g = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3687
|
+
var height = _a.height;
|
|
3688
|
+
return (height ? height : '1.5em');
|
|
3689
|
+
}, function (_a) {
|
|
3690
|
+
var width = _a.width;
|
|
3691
|
+
return (width ? width : '100%');
|
|
3692
|
+
}, function (_a) {
|
|
3693
|
+
var theme = _a.theme;
|
|
3694
|
+
return theme.colors.background.disabled;
|
|
3695
|
+
}, function (_a) {
|
|
3696
|
+
var theme = _a.theme;
|
|
3697
|
+
return theme.radius.regular;
|
|
3698
|
+
}, function (_a) {
|
|
3699
|
+
var theme = _a.theme;
|
|
3700
|
+
return theme.colors.shades['10'].color;
|
|
3701
|
+
}, function (_a) {
|
|
3702
|
+
var theme = _a.theme;
|
|
3703
|
+
return theme.colors.background.disabled;
|
|
3704
|
+
}, function (_a) {
|
|
3705
|
+
var theme = _a.theme;
|
|
3706
|
+
return theme.colors.shades['10'].color;
|
|
3707
|
+
});
|
|
3708
|
+
var SkeletonBox = function (_a) {
|
|
3709
|
+
var width = _a.width, height = _a.height;
|
|
3710
|
+
var theme = useTheme();
|
|
3711
|
+
return jsx$1(Container$1g, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3712
|
+
};
|
|
3713
|
+
var templateObject_1$23;
|
|
3714
|
+
|
|
3715
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3716
|
+
var width = _a.width;
|
|
3717
|
+
return width;
|
|
3718
|
+
}, function (_a) {
|
|
3719
|
+
var height = _a.height;
|
|
3720
|
+
return height;
|
|
3721
|
+
}, function (_a) {
|
|
3722
|
+
var fill = _a.fill;
|
|
3723
|
+
return fill;
|
|
3724
|
+
}, function (_a) {
|
|
3725
|
+
var backgroundColor = _a.backgroundColor;
|
|
3726
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3727
|
+
}, function (_a) {
|
|
3728
|
+
var opacity = _a.opacity;
|
|
3729
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3730
|
+
});
|
|
3731
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3732
|
+
var width = _a.width;
|
|
3733
|
+
return width;
|
|
3734
|
+
}, function (_a) {
|
|
3735
|
+
var height = _a.height;
|
|
3736
|
+
return height;
|
|
3737
|
+
}, function (_a) {
|
|
3738
|
+
var backgroundColor = _a.backgroundColor;
|
|
3739
|
+
return backgroundColor && "background-color: ".concat(backgroundColor, ";");
|
|
3740
|
+
}, function (_a) {
|
|
3741
|
+
var opacity = _a.opacity;
|
|
3742
|
+
return opacity && "opacity: ".concat(opacity, ";");
|
|
3743
|
+
});
|
|
3744
|
+
var templateObject_1$22, templateObject_2$1r;
|
|
3745
|
+
|
|
3746
|
+
/* eslint-disable no-undef */
|
|
3747
|
+
var cache = new Map();
|
|
3748
|
+
var fetching = new Map();
|
|
3749
|
+
var fetchWithCache = function (request, saveToCacheFn) {
|
|
3750
|
+
if (cache.has(request)) {
|
|
3751
|
+
return cache.get(request);
|
|
3752
|
+
}
|
|
3753
|
+
if (fetching.has(request)) {
|
|
3754
|
+
return fetching.get(request);
|
|
3755
|
+
}
|
|
3756
|
+
var fetchPromise = fetch(request)
|
|
3757
|
+
.then(function (response) {
|
|
3758
|
+
if (response.status !== 200) {
|
|
3759
|
+
throw new Error("Failed to fetch: ".concat(response.status, " ").concat(response.statusText));
|
|
3760
|
+
}
|
|
3761
|
+
return response;
|
|
3762
|
+
})
|
|
3763
|
+
.then(saveToCacheFn)
|
|
3764
|
+
.then(function (data) {
|
|
3765
|
+
cache.set(request, data);
|
|
3766
|
+
fetching.delete(request);
|
|
3767
|
+
return data;
|
|
3768
|
+
})
|
|
3769
|
+
.catch(function (error) {
|
|
3770
|
+
fetching.delete(request);
|
|
3771
|
+
throw error;
|
|
3772
|
+
});
|
|
3773
|
+
fetching.set(request, fetchPromise);
|
|
3774
|
+
return fetchPromise;
|
|
3775
|
+
};
|
|
3776
|
+
|
|
3777
|
+
var createIconImage = function (_a) {
|
|
3778
|
+
var src = _a.src;
|
|
3779
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
3780
|
+
var localUrl, error_1;
|
|
3781
|
+
return __generator(this, function (_b) {
|
|
3782
|
+
switch (_b.label) {
|
|
3783
|
+
case 0:
|
|
3784
|
+
_b.trys.push([0, 2, , 3]);
|
|
3785
|
+
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3786
|
+
var blob;
|
|
3787
|
+
return __generator(this, function (_a) {
|
|
3788
|
+
switch (_a.label) {
|
|
3789
|
+
case 0: return [4 /*yield*/, response.blob()];
|
|
3790
|
+
case 1:
|
|
3791
|
+
blob = _a.sent();
|
|
3792
|
+
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3793
|
+
}
|
|
3794
|
+
});
|
|
3795
|
+
}); })];
|
|
3796
|
+
case 1:
|
|
3797
|
+
localUrl = _b.sent();
|
|
3798
|
+
return [2 /*return*/, {
|
|
3799
|
+
src: localUrl,
|
|
3800
|
+
}];
|
|
3801
|
+
case 2:
|
|
3802
|
+
error_1 = _b.sent();
|
|
3803
|
+
console.warn(error_1);
|
|
3804
|
+
return [2 /*return*/, undefined];
|
|
3805
|
+
case 3: return [2 /*return*/];
|
|
3806
|
+
}
|
|
3807
|
+
});
|
|
3808
|
+
});
|
|
3809
|
+
};
|
|
3810
|
+
|
|
3811
|
+
var getIconDimension = function (dimension) {
|
|
3812
|
+
if (!dimension)
|
|
3813
|
+
return '100%';
|
|
3814
|
+
if (String(dimension).includes('px') ||
|
|
3815
|
+
String(dimension).includes('%') ||
|
|
3816
|
+
String(dimension).includes('rem')) {
|
|
3817
|
+
return dimension;
|
|
3818
|
+
}
|
|
3819
|
+
return "".concat(dimension, "rem");
|
|
3820
|
+
};
|
|
3821
|
+
|
|
3822
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3823
|
+
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3824
|
+
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3825
|
+
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3826
|
+
useEffect(function () {
|
|
3827
|
+
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3828
|
+
var localSource;
|
|
3829
|
+
return __generator(this, function (_a) {
|
|
3830
|
+
switch (_a.label) {
|
|
3831
|
+
case 0: return [4 /*yield*/, createIconImage({
|
|
3832
|
+
src: iconURL,
|
|
3833
|
+
})];
|
|
3834
|
+
case 1:
|
|
3835
|
+
localSource = _a.sent();
|
|
3836
|
+
if (localSource) {
|
|
3837
|
+
setLocalSource(localSource);
|
|
3838
|
+
return [2 /*return*/];
|
|
3839
|
+
}
|
|
3840
|
+
setError(true);
|
|
3841
|
+
return [2 /*return*/];
|
|
3842
|
+
}
|
|
3843
|
+
});
|
|
3844
|
+
}); };
|
|
3845
|
+
if (!localSource) {
|
|
3846
|
+
fetchIcon();
|
|
3847
|
+
}
|
|
3848
|
+
}, [iconURL]);
|
|
3849
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3850
|
+
if (error) {
|
|
3851
|
+
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3820
3852
|
}
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
3824
|
-
saveto = Math.floor(saveto) + 0.0;
|
|
3853
|
+
if (!localSource) {
|
|
3854
|
+
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3825
3855
|
}
|
|
3826
|
-
|
|
3827
|
-
|
|
3856
|
+
if (!fill && !svgProps) {
|
|
3857
|
+
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3828
3858
|
}
|
|
3829
|
-
|
|
3830
|
-
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3831
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3832
|
-
var DiscountedPriceOfEach = function () {
|
|
3833
|
-
if (!itemsQuantity || itemsQuantity < 2)
|
|
3834
|
-
return null;
|
|
3835
|
-
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3836
|
-
};
|
|
3837
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1g, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1g, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3838
|
-
marginTop: '-5px',
|
|
3839
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3840
|
-
marginTop: '-6px',
|
|
3841
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag$2, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
3842
|
-
letterSpacing: '-0.05rem',
|
|
3843
|
-
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
3844
|
-
borderRadius: '8px',
|
|
3845
|
-
width: '107px',
|
|
3846
|
-
height: '28px',
|
|
3847
|
-
alignItems: 'center',
|
|
3848
|
-
padding: '3px 8px 3px 8px',
|
|
3849
|
-
fontSize: '14px',
|
|
3850
|
-
lineHeight: '22px',
|
|
3851
|
-
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3859
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3852
3860
|
};
|
|
3853
|
-
var
|
|
3861
|
+
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3854
3862
|
|
|
3855
|
-
|
|
3856
|
-
var
|
|
3857
|
-
var _b;
|
|
3858
|
-
var
|
|
3859
|
-
var
|
|
3860
|
-
var
|
|
3861
|
-
var
|
|
3862
|
-
var
|
|
3863
|
-
var
|
|
3864
|
-
if (
|
|
3865
|
-
|
|
3866
|
-
if (finalPrice.includes(availableCurrency)) {
|
|
3867
|
-
currencySymbol = availableCurrency;
|
|
3868
|
-
}
|
|
3869
|
-
});
|
|
3863
|
+
/* eslint-disable react/forbid-component-props */
|
|
3864
|
+
var UnmemoIcon = function (_a) {
|
|
3865
|
+
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
|
|
3866
|
+
var assets = useTheme().assets;
|
|
3867
|
+
var newWidth = width && getIconDimension(width);
|
|
3868
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3869
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3870
|
+
var svgSplit = name.split('/');
|
|
3871
|
+
var svgId = svgSplit[svgSplit.length - 1];
|
|
3872
|
+
if (assets.isSameOriginIcons) {
|
|
3873
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3870
3874
|
}
|
|
3871
|
-
|
|
3872
|
-
finalPrice.includes('.') &&
|
|
3873
|
-
finalPrice.includes(currencySymbol)
|
|
3874
|
-
? finalPrice.split(currencySymbol)[1].split('.')
|
|
3875
|
-
: ['', ''];
|
|
3876
|
-
var priceCommonProps = {
|
|
3877
|
-
size: ComponentSize.Small,
|
|
3878
|
-
color: color || theme.colors.pallete.secondary.color,
|
|
3879
|
-
weight: 700,
|
|
3880
|
-
};
|
|
3881
|
-
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3882
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3883
|
-
return (jsxs$1(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3884
|
-
marginTop: '-5px',
|
|
3885
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3886
|
-
marginTop: '-6px',
|
|
3887
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3875
|
+
return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3888
3876
|
};
|
|
3889
|
-
var
|
|
3877
|
+
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3890
3878
|
|
|
3891
|
-
var
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3895
|
-
var theme = useTheme();
|
|
3896
|
-
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3897
|
-
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3898
|
-
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
3899
|
-
var currencySymbol = '$';
|
|
3900
|
-
if (typeof finalPrice === 'string') {
|
|
3901
|
-
supportedCurrencies.forEach(function (availableCurrency) {
|
|
3902
|
-
if (finalPrice.includes(availableCurrency)) {
|
|
3903
|
-
currencySymbol = availableCurrency;
|
|
3904
|
-
}
|
|
3905
|
-
});
|
|
3879
|
+
var getValidSize = function (size) {
|
|
3880
|
+
if (!size) {
|
|
3881
|
+
return 'auto';
|
|
3906
3882
|
}
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3883
|
+
if (typeof size === 'number') {
|
|
3884
|
+
return String(size);
|
|
3885
|
+
}
|
|
3886
|
+
if (size.endsWith('px')) {
|
|
3887
|
+
return size.replace('px', '');
|
|
3888
|
+
}
|
|
3889
|
+
if (Number(size))
|
|
3890
|
+
return String(Number(size));
|
|
3891
|
+
return 'auto';
|
|
3892
|
+
};
|
|
3893
|
+
|
|
3894
|
+
var DEFAULT_QUALITY = 100;
|
|
3895
|
+
var buildImageUrl = function (_a) {
|
|
3896
|
+
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3897
|
+
try {
|
|
3898
|
+
new URL(src);
|
|
3899
|
+
var baseUrl = new URL(src);
|
|
3900
|
+
if (!baseUrl.host) {
|
|
3901
|
+
return src;
|
|
3902
|
+
}
|
|
3903
|
+
if (cdn.includes(baseUrl.host)) {
|
|
3904
|
+
return src;
|
|
3905
|
+
}
|
|
3906
|
+
var url = encodeURIComponent(src);
|
|
3907
|
+
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3908
|
+
var width = getValidSize(widthString);
|
|
3909
|
+
var height = getValidSize(heightString);
|
|
3910
|
+
var format = src.includes('.svg') ? '&format=svg' : '';
|
|
3911
|
+
var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
|
|
3912
|
+
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
|
|
3913
|
+
}
|
|
3914
|
+
catch (e) {
|
|
3915
|
+
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3916
|
+
return src;
|
|
3917
|
+
}
|
|
3918
|
+
};
|
|
3919
|
+
|
|
3920
|
+
var Img = newStyled.img(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3921
|
+
var Image$3 = function (_a) {
|
|
3922
|
+
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3923
|
+
var config = useTheme().config;
|
|
3924
|
+
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3925
|
+
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3926
|
+
: src;
|
|
3927
|
+
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3923
3928
|
};
|
|
3924
3929
|
var templateObject_1$21;
|
|
3925
3930
|
|
|
3931
|
+
var LabelWrapper = newStyled.label(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3932
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3933
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3934
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17;
|
|
3935
|
+
|
|
3936
|
+
var ToggleComponent = function (_a) {
|
|
3937
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
3938
|
+
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
3939
|
+
var handleChange = function (e) {
|
|
3940
|
+
setChecked(function (value) { return !value; });
|
|
3941
|
+
onToggle(e.target.checked);
|
|
3942
|
+
};
|
|
3943
|
+
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper$1, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
3944
|
+
};
|
|
3945
|
+
|
|
3926
3946
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3927
3947
|
|
|
3928
3948
|
var Camera = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/camera" }), void 0); };
|
|
@@ -4745,9 +4765,9 @@ function jsxs(type, props, key) {
|
|
|
4745
4765
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4746
4766
|
// `variants` styles that are consistent through all themes.
|
|
4747
4767
|
var TAGS = {
|
|
4748
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4749
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4750
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4768
|
+
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4769
|
+
hero2: newStyled.h2(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject([""], [""]))),
|
|
4770
|
+
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4751
4771
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4752
4772
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4753
4773
|
display3: newStyled.h3(templateObject_6$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
@@ -4881,11 +4901,11 @@ var DEFAULTS = {
|
|
|
4881
4901
|
size: 'regular',
|
|
4882
4902
|
},
|
|
4883
4903
|
};
|
|
4884
|
-
var templateObject_1$
|
|
4904
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$U, templateObject_5$F, templateObject_6$A, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4885
4905
|
|
|
4886
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4887
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4888
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4906
|
+
var Container$1f = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4907
|
+
var Card$4 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4908
|
+
var Tag$2 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4889
4909
|
var Label$6 = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4890
4910
|
var Check$1 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4891
4911
|
var DiscountContainer$1 = newStyled.div(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
@@ -4913,27 +4933,27 @@ var PackCard$1 = function (_a) {
|
|
|
4913
4933
|
currency: currencyCode || 'USD',
|
|
4914
4934
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4915
4935
|
};
|
|
4916
|
-
var templateObject_1$
|
|
4936
|
+
var templateObject_1$1_, templateObject_2$1o, templateObject_3$15, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4917
4937
|
|
|
4918
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4919
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4938
|
+
var Container$1e = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4939
|
+
var DropContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4920
4940
|
var DropList = function (_a) {
|
|
4921
4941
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4922
4942
|
return (jsx$1(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4923
4943
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4924
4944
|
}) }, void 0));
|
|
4925
4945
|
};
|
|
4926
|
-
var templateObject_1$
|
|
4946
|
+
var templateObject_1$1Z, templateObject_2$1n;
|
|
4927
4947
|
|
|
4928
4948
|
var DROPS_TOTAL = 5;
|
|
4929
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4930
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4931
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4949
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4950
|
+
var Title$b = newStyled.p(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4951
|
+
var Description$3 = newStyled.p(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4932
4952
|
var AbsorbencyLevel = function (_a) {
|
|
4933
4953
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4934
4954
|
return (jsxs$1(Container$1d, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4935
4955
|
};
|
|
4936
|
-
var templateObject_1$
|
|
4956
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$14;
|
|
4937
4957
|
|
|
4938
4958
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4939
4959
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5009,7 +5029,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5009
5029
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5010
5030
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5011
5031
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5012
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5032
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5013
5033
|
var Accordion$1 = function (_a) {
|
|
5014
5034
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5015
5035
|
var theme = useTheme();
|
|
@@ -5033,9 +5053,9 @@ var Accordion$1 = function (_a) {
|
|
|
5033
5053
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5034
5054
|
} }), void 0));
|
|
5035
5055
|
};
|
|
5036
|
-
var templateObject_1$
|
|
5056
|
+
var templateObject_1$1X;
|
|
5037
5057
|
|
|
5038
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5058
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5039
5059
|
var AccordionOptions = function (_a) {
|
|
5040
5060
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5041
5061
|
var _b = useState({
|
|
@@ -5059,7 +5079,7 @@ var AccordionOptions = function (_a) {
|
|
|
5059
5079
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5060
5080
|
}) }, void 0));
|
|
5061
5081
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$1W;
|
|
5063
5083
|
|
|
5064
5084
|
/**
|
|
5065
5085
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5195,22 +5215,22 @@ var isValidDate = function (value) {
|
|
|
5195
5215
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5196
5216
|
};
|
|
5197
5217
|
|
|
5198
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5199
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5200
|
-
var templateObject_1$
|
|
5218
|
+
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5219
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5220
|
+
var templateObject_1$1V, templateObject_2$1l;
|
|
5201
5221
|
|
|
5202
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5222
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5203
5223
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5204
5224
|
return width;
|
|
5205
5225
|
}, function (_a) {
|
|
5206
5226
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5207
5227
|
return height;
|
|
5208
5228
|
});
|
|
5209
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5210
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5229
|
+
var FlexCentered = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5230
|
+
var LeftSide = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5211
5231
|
var RightSide = newStyled.div(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5212
5232
|
var FlexStart = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5213
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1U, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$D;
|
|
5214
5234
|
|
|
5215
5235
|
var CouponCard = function (_a) {
|
|
5216
5236
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5266,14 +5286,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5266
5286
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5267
5287
|
};
|
|
5268
5288
|
|
|
5269
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5270
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5289
|
+
var ErrorText = newStyled.h3(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5290
|
+
var ErrorContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5271
5291
|
var Error$1 = function (_a) {
|
|
5272
5292
|
var error = _a.error;
|
|
5273
5293
|
var theme = useTheme();
|
|
5274
5294
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5275
5295
|
};
|
|
5276
|
-
var templateObject_1$
|
|
5296
|
+
var templateObject_1$1T, templateObject_2$1j;
|
|
5277
5297
|
|
|
5278
5298
|
var BaseSelectButton = function (_a) {
|
|
5279
5299
|
var children = _a.children, as = _a.as;
|
|
@@ -5290,7 +5310,7 @@ function BaseSelectOption(_a) {
|
|
|
5290
5310
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5291
5311
|
}
|
|
5292
5312
|
|
|
5293
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5313
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5294
5314
|
function BaseSelect(_a) {
|
|
5295
5315
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5296
5316
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5300,7 +5320,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5300
5320
|
Options: BaseSelectOptions,
|
|
5301
5321
|
Option: BaseSelectOption,
|
|
5302
5322
|
});
|
|
5303
|
-
var templateObject_1$
|
|
5323
|
+
var templateObject_1$1S;
|
|
5304
5324
|
|
|
5305
5325
|
var CustomButton = newStyled.button(function (_a) {
|
|
5306
5326
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5339,7 +5359,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5339
5359
|
});
|
|
5340
5360
|
});
|
|
5341
5361
|
// TODO Remove this when we find the real solution
|
|
5342
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5362
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5343
5363
|
var open = _a.open;
|
|
5344
5364
|
return open &&
|
|
5345
5365
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5359,7 +5379,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5359
5379
|
} }), void 0));
|
|
5360
5380
|
};
|
|
5361
5381
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5362
|
-
var templateObject_1$
|
|
5382
|
+
var templateObject_1$1R;
|
|
5363
5383
|
|
|
5364
5384
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5365
5385
|
var theme = _a.theme;
|
|
@@ -5526,7 +5546,7 @@ var CustomCheckboxStyles = {
|
|
|
5526
5546
|
},
|
|
5527
5547
|
};
|
|
5528
5548
|
|
|
5529
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5549
|
+
var Container$1a = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5530
5550
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5531
5551
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5532
5552
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5537,7 +5557,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5537
5557
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5538
5558
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5539
5559
|
]; });
|
|
5540
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5560
|
+
var Input$5 = newStyled.input(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5541
5561
|
var disabled = _a.disabled;
|
|
5542
5562
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5543
5563
|
});
|
|
@@ -5553,7 +5573,7 @@ var Checkbox = function (_a) {
|
|
|
5553
5573
|
};
|
|
5554
5574
|
return (jsxs$1(Container$1a, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5555
5575
|
};
|
|
5556
|
-
var templateObject_1$
|
|
5576
|
+
var templateObject_1$1Q, templateObject_2$1i;
|
|
5557
5577
|
|
|
5558
5578
|
var CustomOption = newStyled.li(function (_a) {
|
|
5559
5579
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5602,9 +5622,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5602
5622
|
Option: BaseDropdownOption,
|
|
5603
5623
|
});
|
|
5604
5624
|
|
|
5605
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5606
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5607
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5625
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5626
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5627
|
+
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5608
5628
|
var fontWeight = _a.fontWeight;
|
|
5609
5629
|
return fontWeight || '';
|
|
5610
5630
|
});
|
|
@@ -5639,7 +5659,7 @@ function SimpleDropdown(_a) {
|
|
|
5639
5659
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : Fragment$1;
|
|
5640
5660
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5641
5661
|
}
|
|
5642
|
-
var templateObject_1$
|
|
5662
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12;
|
|
5643
5663
|
|
|
5644
5664
|
/* base styles & size variants */
|
|
5645
5665
|
var CustomRadioStyles$2 = {
|
|
@@ -5704,9 +5724,9 @@ var ContainerStyles$2 = {
|
|
|
5704
5724
|
},
|
|
5705
5725
|
};
|
|
5706
5726
|
|
|
5707
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5727
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5708
5728
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5709
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5729
|
+
var Input$4 = newStyled.input(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5710
5730
|
var disabled = _a.disabled;
|
|
5711
5731
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5712
5732
|
});
|
|
@@ -5714,7 +5734,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5714
5734
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5715
5735
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5716
5736
|
]; });
|
|
5717
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$
|
|
5737
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5718
5738
|
var theme = _a.theme;
|
|
5719
5739
|
return theme.component.radio.textSize;
|
|
5720
5740
|
}, function (_a) {
|
|
@@ -5737,7 +5757,7 @@ var RadioInput = function (_a) {
|
|
|
5737
5757
|
};
|
|
5738
5758
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5739
5759
|
};
|
|
5740
|
-
var templateObject_1$
|
|
5760
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$R;
|
|
5741
5761
|
|
|
5742
5762
|
var useOnClickOutside = function (ref, handler) {
|
|
5743
5763
|
useEffect(function () {
|
|
@@ -5830,7 +5850,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5830
5850
|
}
|
|
5831
5851
|
};
|
|
5832
5852
|
|
|
5833
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5853
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5834
5854
|
var position = _a.position;
|
|
5835
5855
|
return getWrapperFlexDirection(position);
|
|
5836
5856
|
}, function (_a) {
|
|
@@ -5840,7 +5860,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __ma
|
|
|
5840
5860
|
var disableHover = _a.disableHover;
|
|
5841
5861
|
return (disableHover ? 0 : 1);
|
|
5842
5862
|
});
|
|
5843
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5863
|
+
var TooltipContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5844
5864
|
var position = _a.position;
|
|
5845
5865
|
return getContainerFlexDirection(position);
|
|
5846
5866
|
}, function (_a) {
|
|
@@ -5868,7 +5888,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g
|
|
|
5868
5888
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5869
5889
|
return actual === expected ? margin : '0';
|
|
5870
5890
|
};
|
|
5871
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5891
|
+
var ContentWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5872
5892
|
var borderColor = _a.borderColor;
|
|
5873
5893
|
return borderColor;
|
|
5874
5894
|
}, function (_a) {
|
|
@@ -5895,7 +5915,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5895
5915
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5896
5916
|
return right;
|
|
5897
5917
|
});
|
|
5898
|
-
var templateObject_1$
|
|
5918
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j;
|
|
5899
5919
|
|
|
5900
5920
|
var Tooltip = function (_a) {
|
|
5901
5921
|
var _b;
|
|
@@ -5938,8 +5958,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5938
5958
|
};
|
|
5939
5959
|
};
|
|
5940
5960
|
|
|
5941
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5942
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5961
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5962
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5943
5963
|
var selected = _a.selected, theme = _a.theme;
|
|
5944
5964
|
return selected
|
|
5945
5965
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5953,7 +5973,7 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5953
5973
|
var theme = _a.theme;
|
|
5954
5974
|
return theme.colors.pallete.primary.color;
|
|
5955
5975
|
});
|
|
5956
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
5976
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5957
5977
|
var onClick = _a.onClick;
|
|
5958
5978
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5959
5979
|
});
|
|
@@ -5976,7 +5996,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5976
5996
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5977
5997
|
});
|
|
5978
5998
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5979
|
-
var templateObject_1$
|
|
5999
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x, templateObject_7$o, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
5980
6000
|
|
|
5981
6001
|
var radioIds$2 = {
|
|
5982
6002
|
oneTime: {
|
|
@@ -6031,12 +6051,12 @@ var Autoship = function (_a) {
|
|
|
6031
6051
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6032
6052
|
};
|
|
6033
6053
|
|
|
6034
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6054
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6035
6055
|
var theme = _a.theme;
|
|
6036
6056
|
return theme.name === 'TheSpaDr' &&
|
|
6037
6057
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6038
6058
|
});
|
|
6039
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6059
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6040
6060
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6041
6061
|
return isSelected
|
|
6042
6062
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6052,7 +6072,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6052
6072
|
}
|
|
6053
6073
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6054
6074
|
};
|
|
6055
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6075
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6056
6076
|
var selected = _a.selected, theme = _a.theme;
|
|
6057
6077
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6058
6078
|
}, function (_a) {
|
|
@@ -6089,7 +6109,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6089
6109
|
var theme = _a.theme;
|
|
6090
6110
|
return theme.component.autoship.tooltip.margin;
|
|
6091
6111
|
});
|
|
6092
|
-
var templateObject_1$
|
|
6112
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$O, templateObject_5$A, templateObject_6$w, templateObject_7$n, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6093
6113
|
|
|
6094
6114
|
var radioIds$1 = {
|
|
6095
6115
|
oneTime: {
|
|
@@ -6167,13 +6187,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6167
6187
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6168
6188
|
_a$2);
|
|
6169
6189
|
|
|
6170
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6171
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6172
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6190
|
+
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6191
|
+
var CustomerInfo = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6192
|
+
var Name = newStyled.h4(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6173
6193
|
var StarIconContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6174
6194
|
var Description$2 = newStyled.p(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6175
6195
|
var ReviewDays = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6176
|
-
var templateObject_1$
|
|
6196
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6177
6197
|
|
|
6178
6198
|
var NameWithStars = function (_a) {
|
|
6179
6199
|
var name = _a.name, size = _a.size;
|
|
@@ -6191,9 +6211,9 @@ var ResultFeedback = function (_a) {
|
|
|
6191
6211
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6192
6212
|
};
|
|
6193
6213
|
|
|
6194
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6195
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6196
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6214
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6215
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6216
|
+
var ImageCard = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6197
6217
|
var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6198
6218
|
var theme = _a.theme;
|
|
6199
6219
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6204,7 +6224,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6204
6224
|
var theme = _a.theme, size = _a.size;
|
|
6205
6225
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6206
6226
|
});
|
|
6207
|
-
var templateObject_1$
|
|
6227
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6208
6228
|
|
|
6209
6229
|
/* base styles & size variants */
|
|
6210
6230
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6282,7 +6302,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6282
6302
|
return (jsxs$1(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6283
6303
|
};
|
|
6284
6304
|
|
|
6285
|
-
var Section = newStyled.div(templateObject_1$
|
|
6305
|
+
var Section = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6286
6306
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6287
6307
|
});
|
|
6288
6308
|
var CardHeader = function (_a) {
|
|
@@ -6293,16 +6313,16 @@ var CardFooter = function (_a) {
|
|
|
6293
6313
|
var children = _a.children;
|
|
6294
6314
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6295
6315
|
};
|
|
6296
|
-
var templateObject_1$
|
|
6316
|
+
var templateObject_1$1I;
|
|
6297
6317
|
|
|
6298
|
-
var Body = newStyled.div(templateObject_1$
|
|
6318
|
+
var Body = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6299
6319
|
var CardBody$1 = function (_a) {
|
|
6300
6320
|
var children = _a.children;
|
|
6301
6321
|
return jsx$1(Body, { children: children }, void 0);
|
|
6302
6322
|
};
|
|
6303
|
-
var templateObject_1$
|
|
6323
|
+
var templateObject_1$1H;
|
|
6304
6324
|
|
|
6305
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6325
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6306
6326
|
var flex = _a.flex;
|
|
6307
6327
|
return flex &&
|
|
6308
6328
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6324,16 +6344,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6324
6344
|
Footer: CardFooter,
|
|
6325
6345
|
Body: CardBody$1,
|
|
6326
6346
|
});
|
|
6327
|
-
var templateObject_1$
|
|
6347
|
+
var templateObject_1$1G;
|
|
6328
6348
|
|
|
6329
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6330
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6331
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6349
|
+
var StyledWrapper = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6350
|
+
var StyledContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6351
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6332
6352
|
var color = _a.color;
|
|
6333
6353
|
return color;
|
|
6334
6354
|
});
|
|
6335
6355
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6336
|
-
var templateObject_1$
|
|
6356
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$L;
|
|
6337
6357
|
|
|
6338
6358
|
var Minimalistic = function (_a) {
|
|
6339
6359
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6341,28 +6361,28 @@ var Minimalistic = function (_a) {
|
|
|
6341
6361
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6342
6362
|
};
|
|
6343
6363
|
|
|
6344
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6345
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6346
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6364
|
+
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6365
|
+
var Title$9 = newStyled.h1(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6366
|
+
var Details$1 = newStyled.span(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6347
6367
|
var PriceContainer$2 = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6348
6368
|
var Simple = function (_a) {
|
|
6349
6369
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6350
6370
|
var theme = useTheme();
|
|
6351
6371
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$13, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6352
6372
|
};
|
|
6353
|
-
var templateObject_1$
|
|
6373
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W, templateObject_4$K;
|
|
6354
6374
|
|
|
6355
6375
|
var Bundle = {
|
|
6356
6376
|
Minimalistic: Minimalistic,
|
|
6357
6377
|
Simple: Simple,
|
|
6358
6378
|
};
|
|
6359
6379
|
|
|
6360
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6380
|
+
var Container$12 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6361
6381
|
var displayBNPL = _a.displayBNPL;
|
|
6362
6382
|
return (displayBNPL ? 'flex' : 'none');
|
|
6363
6383
|
});
|
|
6364
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6365
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6384
|
+
var TextContainer$1 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6385
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6366
6386
|
var BuyNowPayLater = function (_a) {
|
|
6367
6387
|
var _b;
|
|
6368
6388
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6374,41 +6394,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6374
6394
|
}
|
|
6375
6395
|
return (jsx$1(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6376
6396
|
};
|
|
6377
|
-
var templateObject_1$
|
|
6397
|
+
var templateObject_1$1D, templateObject_2$18, templateObject_3$V;
|
|
6378
6398
|
|
|
6379
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6399
|
+
var Text$6 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6380
6400
|
var Title$8 = function (_a) {
|
|
6381
6401
|
var title = _a.title;
|
|
6382
6402
|
var theme = useTheme();
|
|
6383
6403
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6384
6404
|
};
|
|
6385
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1C;
|
|
6386
6406
|
|
|
6387
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6407
|
+
var P$3 = newStyled.p(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6388
6408
|
var Promo = function (_a) {
|
|
6389
6409
|
var text = _a.text;
|
|
6390
6410
|
var theme = useTheme();
|
|
6391
6411
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6392
6412
|
};
|
|
6393
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1B;
|
|
6394
6414
|
|
|
6395
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6415
|
+
var Text$5 = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6396
6416
|
var Description$1 = function (_a) {
|
|
6397
6417
|
var text = _a.text;
|
|
6398
6418
|
var theme = useTheme();
|
|
6399
6419
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6400
6420
|
};
|
|
6401
|
-
var templateObject_1$
|
|
6421
|
+
var templateObject_1$1A;
|
|
6402
6422
|
|
|
6403
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6423
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6404
6424
|
var CloseButton$1 = function (_a) {
|
|
6405
6425
|
var onClick = _a.onClick, size = _a.size;
|
|
6406
6426
|
var theme = useTheme();
|
|
6407
6427
|
return (jsx$1(Container$11, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6408
6428
|
};
|
|
6409
|
-
var templateObject_1$
|
|
6429
|
+
var templateObject_1$1z;
|
|
6410
6430
|
|
|
6411
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6431
|
+
var Text$4 = newStyled.h3(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6412
6432
|
var backgroundColor = _a.backgroundColor;
|
|
6413
6433
|
return backgroundColor;
|
|
6414
6434
|
}, function (_a) {
|
|
@@ -6423,7 +6443,7 @@ var OfferBanner = function (_a) {
|
|
|
6423
6443
|
var theme = useTheme();
|
|
6424
6444
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6425
6445
|
};
|
|
6426
|
-
var templateObject_1$
|
|
6446
|
+
var templateObject_1$1y;
|
|
6427
6447
|
|
|
6428
6448
|
var CartProductItem = {
|
|
6429
6449
|
Title: Title$8,
|
|
@@ -6433,9 +6453,9 @@ var CartProductItem = {
|
|
|
6433
6453
|
CloseButton: CloseButton$1,
|
|
6434
6454
|
};
|
|
6435
6455
|
|
|
6436
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6437
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6438
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6456
|
+
var Container$10 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6457
|
+
var MobileContainer = newStyled(Container$10)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6458
|
+
var DollarPart = newStyled.span(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6439
6459
|
var ClubMembersText = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6440
6460
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6441
6461
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6446,7 +6466,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6446
6466
|
var isMobile = useWindowDimensions().isMobile;
|
|
6447
6467
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$10, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6448
6468
|
};
|
|
6449
|
-
var templateObject_1$
|
|
6469
|
+
var templateObject_1$1x, templateObject_2$17, templateObject_3$U, templateObject_4$J, templateObject_5$y, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6450
6470
|
|
|
6451
6471
|
var Spacing = function (_a) {
|
|
6452
6472
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6454,9 +6474,9 @@ var Spacing = function (_a) {
|
|
|
6454
6474
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6455
6475
|
};
|
|
6456
6476
|
|
|
6457
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6458
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6459
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6477
|
+
var Container$$ = newStyled('div')(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6478
|
+
var Content$2 = newStyled('div')(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6479
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6460
6480
|
var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6461
6481
|
var index = _a.index;
|
|
6462
6482
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6468,11 +6488,11 @@ var StrengthBars = function (_a) {
|
|
|
6468
6488
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6469
6489
|
return (jsxs$1(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6470
6490
|
};
|
|
6471
|
-
var templateObject_1$
|
|
6491
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$I;
|
|
6472
6492
|
|
|
6473
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6474
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6475
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6493
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6494
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6495
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6476
6496
|
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6477
6497
|
var PriceWithTagContainer = newStyled.span(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6478
6498
|
var RegularPriceTag = function () {
|
|
@@ -6523,16 +6543,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6523
6543
|
: ComponentSize.XSmall;
|
|
6524
6544
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6525
6545
|
};
|
|
6526
|
-
return (jsxs$1(Container$
|
|
6546
|
+
return (jsxs$1(Container$1h, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6527
6547
|
? finalPriceArray[0]
|
|
6528
6548
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6529
6549
|
};
|
|
6530
|
-
var templateObject_1$
|
|
6550
|
+
var templateObject_1$1v, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x;
|
|
6531
6551
|
|
|
6532
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6533
|
-
var templateObject_1$
|
|
6552
|
+
var Container$_ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6553
|
+
var templateObject_1$1u;
|
|
6534
6554
|
|
|
6535
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6555
|
+
var StarContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6536
6556
|
var marginRight = _a.marginRight;
|
|
6537
6557
|
return marginRight;
|
|
6538
6558
|
});
|
|
@@ -6548,7 +6568,7 @@ var StarList = function (_a) {
|
|
|
6548
6568
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6549
6569
|
}) }, void 0));
|
|
6550
6570
|
};
|
|
6551
|
-
var templateObject_1$
|
|
6571
|
+
var templateObject_1$1t;
|
|
6552
6572
|
|
|
6553
6573
|
/* base styles & size variants */
|
|
6554
6574
|
var LabelStyles = {
|
|
@@ -6589,8 +6609,8 @@ var LabelStyles = {
|
|
|
6589
6609
|
});
|
|
6590
6610
|
},
|
|
6591
6611
|
};
|
|
6592
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6593
|
-
var templateObject_1$
|
|
6612
|
+
var Container$Z = newStyled.a(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6613
|
+
var templateObject_1$1s;
|
|
6594
6614
|
|
|
6595
6615
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6596
6616
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6610,7 +6630,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6610
6630
|
}),
|
|
6611
6631
|
];
|
|
6612
6632
|
});
|
|
6613
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6633
|
+
var RatingLabel = newStyled.span(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6614
6634
|
var starsNumber = 5;
|
|
6615
6635
|
var Rating = function (_a) {
|
|
6616
6636
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6633,7 +6653,7 @@ var Rating = function (_a) {
|
|
|
6633
6653
|
: {};
|
|
6634
6654
|
return (jsxs$1(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6635
6655
|
};
|
|
6636
|
-
var templateObject_1$
|
|
6656
|
+
var templateObject_1$1r;
|
|
6637
6657
|
|
|
6638
6658
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6639
6659
|
var width = _a.width, height = _a.height;
|
|
@@ -6643,9 +6663,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6643
6663
|
height: height,
|
|
6644
6664
|
});
|
|
6645
6665
|
});
|
|
6646
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6647
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6648
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6666
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6667
|
+
var Container$Y = newStyled.a(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6668
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6649
6669
|
var Title$7 = newStyled.p(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6650
6670
|
var getStylesBySize$c = function (size) {
|
|
6651
6671
|
switch (size) {
|
|
@@ -6698,7 +6718,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6698
6718
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6699
6719
|
strength: -1,
|
|
6700
6720
|
description: '',
|
|
6701
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTag = _a.discountTag;
|
|
6721
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag;
|
|
6702
6722
|
var theme = useTheme();
|
|
6703
6723
|
var styles = getStylesBySize$c(size);
|
|
6704
6724
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6737,11 +6757,12 @@ var ProductItemMobile = function (_a) {
|
|
|
6737
6757
|
return jsx(Fragment, {}, void 0);
|
|
6738
6758
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6739
6759
|
};
|
|
6740
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), showDiscountPercentageTag &&
|
|
6741
|
-
|
|
6742
|
-
|
|
6760
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), showDiscountPercentageTag &&
|
|
6761
|
+
(discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6762
|
+
letterSpacing: '-0.05rem',
|
|
6763
|
+
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6743
6764
|
};
|
|
6744
|
-
var templateObject_1$
|
|
6765
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6745
6766
|
|
|
6746
6767
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6747
6768
|
var width = _a.width, height = _a.height;
|
|
@@ -6751,9 +6772,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6751
6772
|
height: height,
|
|
6752
6773
|
});
|
|
6753
6774
|
});
|
|
6754
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6755
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6756
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6775
|
+
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; });
|
|
6776
|
+
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"])));
|
|
6777
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6757
6778
|
var Title$6 = newStyled.p(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6758
6779
|
var getStylesBySize$b = function (size) {
|
|
6759
6780
|
switch (size) {
|
|
@@ -6840,9 +6861,9 @@ var ProductItemTK = function (_a) {
|
|
|
6840
6861
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6841
6862
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6842
6863
|
};
|
|
6843
|
-
var templateObject_1$
|
|
6864
|
+
var templateObject_1$1p, templateObject_2$13, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$s, templateObject_7$k, templateObject_8$f;
|
|
6844
6865
|
|
|
6845
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6866
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6846
6867
|
function withProductGrid(ProductItemComponent, data) {
|
|
6847
6868
|
function WithProductGrid(props) {
|
|
6848
6869
|
return (jsx$1(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6852,7 +6873,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6852
6873
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6853
6874
|
return WithProductGrid;
|
|
6854
6875
|
}
|
|
6855
|
-
var templateObject_1$
|
|
6876
|
+
var templateObject_1$1o;
|
|
6856
6877
|
|
|
6857
6878
|
var Collection = {
|
|
6858
6879
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6899,9 +6920,9 @@ var OutOfStock = function (_a) {
|
|
|
6899
6920
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6900
6921
|
};
|
|
6901
6922
|
|
|
6902
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6903
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6904
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6923
|
+
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"])));
|
|
6924
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6925
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6905
6926
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6906
6927
|
var OptionsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6907
6928
|
var Label$4 = function (_a) {
|
|
@@ -6921,23 +6942,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6921
6942
|
Option: Option,
|
|
6922
6943
|
OptionsContainer: OptionsContainer,
|
|
6923
6944
|
});
|
|
6924
|
-
var templateObject_1$
|
|
6945
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6925
6946
|
|
|
6926
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6947
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6927
6948
|
var borderColor = _a.borderColor;
|
|
6928
6949
|
return borderColor;
|
|
6929
6950
|
}, function (_a) {
|
|
6930
6951
|
var noStock = _a.noStock;
|
|
6931
6952
|
return (noStock ? '0.4' : '1');
|
|
6932
6953
|
});
|
|
6933
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6954
|
+
var Image$2 = newStyled.img(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6934
6955
|
var PatternSelector = function (_a) {
|
|
6935
6956
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6936
6957
|
var theme = useTheme();
|
|
6937
6958
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6938
6959
|
return (jsx$1(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6939
6960
|
};
|
|
6940
|
-
var templateObject_1$
|
|
6961
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6941
6962
|
|
|
6942
6963
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6943
6964
|
if (options == null || options.length === 0) {
|
|
@@ -6996,9 +7017,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6996
7017
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6997
7018
|
};
|
|
6998
7019
|
|
|
6999
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7000
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7001
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7020
|
+
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'); });
|
|
7021
|
+
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"])));
|
|
7022
|
+
var Row$2 = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7002
7023
|
return props.rightToLeft &&
|
|
7003
7024
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7004
7025
|
});
|
|
@@ -7010,7 +7031,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7010
7031
|
var theme = useTheme();
|
|
7011
7032
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7012
7033
|
};
|
|
7013
|
-
var templateObject_1$
|
|
7034
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7014
7035
|
|
|
7015
7036
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7016
7037
|
__proto__: null,
|
|
@@ -7038,7 +7059,7 @@ var sizeMapper = (_a = {},
|
|
|
7038
7059
|
_a[ComponentSize.Large] = 'large',
|
|
7039
7060
|
_a[ComponentSize.XSmall] = 'small',
|
|
7040
7061
|
_a);
|
|
7041
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7062
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7042
7063
|
var wide = _a.wide;
|
|
7043
7064
|
return (wide ? '100%' : 'fit-content');
|
|
7044
7065
|
}, function (_a) {
|
|
@@ -7060,11 +7081,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7060
7081
|
var theme = _a.theme;
|
|
7061
7082
|
return theme.colors.text.disabled;
|
|
7062
7083
|
});
|
|
7063
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7084
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7064
7085
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7065
7086
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7066
7087
|
});
|
|
7067
|
-
var templateObject_1$
|
|
7088
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7068
7089
|
|
|
7069
7090
|
var BaseCTA = function (_a) {
|
|
7070
7091
|
var _b, _c, _d;
|
|
@@ -7151,23 +7172,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7151
7172
|
} }), void 0));
|
|
7152
7173
|
};
|
|
7153
7174
|
|
|
7154
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7155
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7156
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7175
|
+
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; });
|
|
7176
|
+
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"])));
|
|
7177
|
+
var Text$3 = newStyled.p(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7157
7178
|
var Details = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7158
7179
|
var Note = function (_a) {
|
|
7159
7180
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7160
7181
|
var theme = useTheme();
|
|
7161
7182
|
return (jsxs$1(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7162
7183
|
};
|
|
7163
|
-
var templateObject_1$
|
|
7184
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7164
7185
|
|
|
7165
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7186
|
+
var Title$5 = newStyled.h1(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7166
7187
|
var theme = _a.theme;
|
|
7167
7188
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7168
7189
|
});
|
|
7169
|
-
var Line = newStyled.div(templateObject_2$
|
|
7170
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7190
|
+
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; });
|
|
7191
|
+
var Row$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7171
7192
|
flexDirection: ['column', 'row'],
|
|
7172
7193
|
}));
|
|
7173
7194
|
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({
|
|
@@ -7205,16 +7226,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7205
7226
|
var theme = useTheme();
|
|
7206
7227
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7207
7228
|
};
|
|
7208
|
-
var templateObject_1$
|
|
7229
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7209
7230
|
|
|
7210
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7231
|
+
var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7211
7232
|
var top = _a.top;
|
|
7212
7233
|
return top;
|
|
7213
7234
|
}, function (_a) {
|
|
7214
7235
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7215
7236
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7216
7237
|
});
|
|
7217
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7238
|
+
var Sidebar = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7218
7239
|
var height = _a.height;
|
|
7219
7240
|
return height;
|
|
7220
7241
|
}, function (_a) {
|
|
@@ -7261,20 +7282,20 @@ var Drawer = function (_a) {
|
|
|
7261
7282
|
}, [isOpen, onClose, onOpen]);
|
|
7262
7283
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7263
7284
|
};
|
|
7264
|
-
var templateObject_1$
|
|
7285
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7265
7286
|
|
|
7266
7287
|
var TooltipArrow = function (_a) {
|
|
7267
7288
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7268
7289
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7269
7290
|
};
|
|
7270
7291
|
|
|
7271
|
-
var List = newStyled.ul(templateObject_1$
|
|
7272
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7273
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7292
|
+
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"])));
|
|
7293
|
+
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"])));
|
|
7294
|
+
var DropdownWrapper = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7274
7295
|
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7275
7296
|
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7276
7297
|
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; });
|
|
7277
|
-
var templateObject_1$
|
|
7298
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7278
7299
|
|
|
7279
7300
|
var DropdownListIcons = function (_a) {
|
|
7280
7301
|
var items = _a.items;
|
|
@@ -7287,13 +7308,13 @@ var Dropdown = function (_a) {
|
|
|
7287
7308
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7288
7309
|
};
|
|
7289
7310
|
|
|
7290
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7291
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7292
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7311
|
+
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"])));
|
|
7312
|
+
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"])));
|
|
7313
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7293
7314
|
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7294
7315
|
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7295
7316
|
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"])));
|
|
7296
|
-
var templateObject_1$
|
|
7317
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7297
7318
|
|
|
7298
7319
|
var SizeDropdown = function (_a) {
|
|
7299
7320
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7316,9 +7337,9 @@ var SizeDropdown = function (_a) {
|
|
|
7316
7337
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7317
7338
|
};
|
|
7318
7339
|
|
|
7319
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7320
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7321
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7340
|
+
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; });
|
|
7341
|
+
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; });
|
|
7342
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7322
7343
|
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7323
7344
|
var DropdownDialog = function (_a) {
|
|
7324
7345
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7328,7 +7349,7 @@ var DropdownDialog = function (_a) {
|
|
|
7328
7349
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7329
7350
|
}) }), void 0) }), void 0));
|
|
7330
7351
|
};
|
|
7331
|
-
var templateObject_1$
|
|
7352
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7332
7353
|
|
|
7333
7354
|
function FilteringDropdown(_a) {
|
|
7334
7355
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7361,9 +7382,9 @@ function FilteringDropdown(_a) {
|
|
|
7361
7382
|
}) }, void 0)] }), void 0));
|
|
7362
7383
|
}
|
|
7363
7384
|
|
|
7364
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7365
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7366
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7385
|
+
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; });
|
|
7386
|
+
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; });
|
|
7387
|
+
var ArrowContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7367
7388
|
var Container$T = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7368
7389
|
var Accordion = function (_a) {
|
|
7369
7390
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
@@ -7371,11 +7392,11 @@ var Accordion = function (_a) {
|
|
|
7371
7392
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7372
7393
|
return (jsxs$1(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7373
7394
|
};
|
|
7374
|
-
var templateObject_1$
|
|
7395
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
7375
7396
|
|
|
7376
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7377
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7378
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7397
|
+
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; });
|
|
7398
|
+
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"])));
|
|
7399
|
+
var MobileHeader = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7379
7400
|
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7380
7401
|
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7381
7402
|
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; });
|
|
@@ -7383,7 +7404,7 @@ var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i =
|
|
|
7383
7404
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7384
7405
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7385
7406
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7386
|
-
var templateObject_1$
|
|
7407
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7387
7408
|
|
|
7388
7409
|
var getStylesBySize$a = function (size, theme) {
|
|
7389
7410
|
switch (size) {
|
|
@@ -7448,9 +7469,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7448
7469
|
} }), id: id }, void 0));
|
|
7449
7470
|
};
|
|
7450
7471
|
|
|
7451
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7452
|
-
var LI = newStyled.li(templateObject_2$
|
|
7453
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7472
|
+
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"])));
|
|
7473
|
+
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; });
|
|
7474
|
+
var CloseIconContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7454
7475
|
var Tags = function (_a) {
|
|
7455
7476
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7456
7477
|
var theme = useTheme();
|
|
@@ -7458,7 +7479,7 @@ var Tags = function (_a) {
|
|
|
7458
7479
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7459
7480
|
}) }), void 0));
|
|
7460
7481
|
};
|
|
7461
|
-
var templateObject_1$
|
|
7482
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7462
7483
|
|
|
7463
7484
|
var Filters = function (_a) {
|
|
7464
7485
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7594,8 +7615,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7594
7615
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7595
7616
|
};
|
|
7596
7617
|
|
|
7597
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7598
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7618
|
+
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"])));
|
|
7619
|
+
var Container$S = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7599
7620
|
var FitGuarantee = function (_a) {
|
|
7600
7621
|
var _b;
|
|
7601
7622
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7613,10 +7634,10 @@ var FitGuarantee = function (_a) {
|
|
|
7613
7634
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7614
7635
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7615
7636
|
};
|
|
7616
|
-
var templateObject_1$
|
|
7637
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7617
7638
|
|
|
7618
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7619
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7639
|
+
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"])));
|
|
7640
|
+
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7620
7641
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7621
7642
|
border: 'none',
|
|
7622
7643
|
background: 'transparent',
|
|
@@ -7631,7 +7652,7 @@ var FitPredictor = function (_a) {
|
|
|
7631
7652
|
var theme = useTheme();
|
|
7632
7653
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7633
7654
|
};
|
|
7634
|
-
var templateObject_1$
|
|
7655
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7635
7656
|
|
|
7636
7657
|
var Button$7 = newStyled.button(function () { return ({
|
|
7637
7658
|
background: 'transparent',
|
|
@@ -11875,14 +11896,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11875
11896
|
return Slider;
|
|
11876
11897
|
}(React__default.Component);
|
|
11877
11898
|
|
|
11878
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11899
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11879
11900
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11880
11901
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11881
11902
|
}, function (_a) {
|
|
11882
11903
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11883
11904
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11884
11905
|
});
|
|
11885
|
-
var templateObject_1$
|
|
11906
|
+
var templateObject_1$18;
|
|
11886
11907
|
|
|
11887
11908
|
var getStylesBySize$9 = function (size) {
|
|
11888
11909
|
// rem units
|
|
@@ -11941,7 +11962,7 @@ var SliderNavigation = function (_a) {
|
|
|
11941
11962
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11942
11963
|
};
|
|
11943
11964
|
|
|
11944
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11965
|
+
var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11945
11966
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11946
11967
|
return borderRadiusVariant &&
|
|
11947
11968
|
"\n border-radius: 20px;\n ";
|
|
@@ -11959,7 +11980,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
11959
11980
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11960
11981
|
: 'inherit';
|
|
11961
11982
|
});
|
|
11962
|
-
var templateObject_1$
|
|
11983
|
+
var templateObject_1$17;
|
|
11963
11984
|
|
|
11964
11985
|
var ImageSmallPreview = function (_a) {
|
|
11965
11986
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
@@ -11967,9 +11988,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11967
11988
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11968
11989
|
};
|
|
11969
11990
|
|
|
11970
|
-
var horizontalStyles = css(templateObject_1$
|
|
11971
|
-
var verticalStyles = css(templateObject_2$
|
|
11972
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11991
|
+
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"])));
|
|
11992
|
+
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"])));
|
|
11993
|
+
var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11973
11994
|
var position = _a.position;
|
|
11974
11995
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11975
11996
|
}, function (_a) {
|
|
@@ -11982,7 +12003,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o =
|
|
|
11982
12003
|
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"])));
|
|
11983
12004
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11984
12005
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11985
|
-
var templateObject_1$
|
|
12006
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
11986
12007
|
|
|
11987
12008
|
var ImagePreviewList = function (_a) {
|
|
11988
12009
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -12001,22 +12022,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12001
12022
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12002
12023
|
};
|
|
12003
12024
|
|
|
12004
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12005
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12006
|
-
var templateObject_1$
|
|
12025
|
+
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); });
|
|
12026
|
+
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; });
|
|
12027
|
+
var templateObject_1$15, templateObject_2$O;
|
|
12007
12028
|
|
|
12008
12029
|
var ProgressBar$1 = function (_a) {
|
|
12009
12030
|
var progress = _a.progress, hide = _a.hide;
|
|
12010
12031
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12011
12032
|
};
|
|
12012
12033
|
|
|
12013
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
12014
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12015
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12034
|
+
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"])));
|
|
12035
|
+
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; });
|
|
12036
|
+
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"])));
|
|
12016
12037
|
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"])));
|
|
12017
12038
|
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"])));
|
|
12018
12039
|
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"])));
|
|
12019
|
-
var templateObject_1$
|
|
12040
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12020
12041
|
|
|
12021
12042
|
var Video$1 = function (_a) {
|
|
12022
12043
|
var _b, _c, _d, _e;
|
|
@@ -13656,18 +13677,18 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13656
13677
|
afterZoomOut: PropTypes.func
|
|
13657
13678
|
} : {};
|
|
13658
13679
|
|
|
13659
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13680
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13660
13681
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13661
13682
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13662
13683
|
});
|
|
13663
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13684
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13664
13685
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13665
13686
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13666
13687
|
}, function (_a) {
|
|
13667
13688
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13668
13689
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13669
13690
|
});
|
|
13670
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13691
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13671
13692
|
var isCTAHidden = _a.isCTAHidden;
|
|
13672
13693
|
return (isCTAHidden ? '60px' : '120px');
|
|
13673
13694
|
});
|
|
@@ -13681,7 +13702,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (temp
|
|
|
13681
13702
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13682
13703
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13683
13704
|
});
|
|
13684
|
-
var templateObject_1$
|
|
13705
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13685
13706
|
|
|
13686
13707
|
var ImageProductSlide$1 = function (_a) {
|
|
13687
13708
|
var _b;
|
|
@@ -13694,8 +13715,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13694
13715
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13695
13716
|
};
|
|
13696
13717
|
|
|
13697
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13698
|
-
var templateObject_1$
|
|
13718
|
+
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"])));
|
|
13719
|
+
var templateObject_1$12;
|
|
13699
13720
|
|
|
13700
13721
|
var getInitialIndex = function (images, selectedValue) {
|
|
13701
13722
|
if (selectedValue) {
|
|
@@ -13743,7 +13764,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13743
13764
|
};
|
|
13744
13765
|
}
|
|
13745
13766
|
};
|
|
13746
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13767
|
+
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) {
|
|
13747
13768
|
var backgroundColor = _a.backgroundColor;
|
|
13748
13769
|
return backgroundColor;
|
|
13749
13770
|
}, function (_a) {
|
|
@@ -13773,9 +13794,9 @@ var IconButton = function (_a) {
|
|
|
13773
13794
|
var theme = useTheme();
|
|
13774
13795
|
return (jsx$1(Container$M, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13775
13796
|
};
|
|
13776
|
-
var templateObject_1$
|
|
13797
|
+
var templateObject_1$11;
|
|
13777
13798
|
|
|
13778
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13799
|
+
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; });
|
|
13779
13800
|
var AmazonButton = function (_a) {
|
|
13780
13801
|
var onClick = _a.onClick;
|
|
13781
13802
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13784,7 +13805,7 @@ var PaypalButton = function (_a) {
|
|
|
13784
13805
|
var onClick = _a.onClick;
|
|
13785
13806
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13786
13807
|
};
|
|
13787
|
-
var templateObject_1$
|
|
13808
|
+
var templateObject_1$10;
|
|
13788
13809
|
|
|
13789
13810
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13790
13811
|
height: 'auto',
|
|
@@ -13839,9 +13860,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13839
13860
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13840
13861
|
};
|
|
13841
13862
|
|
|
13842
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13843
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13844
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13863
|
+
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'); });
|
|
13864
|
+
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'); });
|
|
13865
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13845
13866
|
var titlePosition = _a.titlePosition;
|
|
13846
13867
|
return titlePosition == 'center' &&
|
|
13847
13868
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13851,13 +13872,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13851
13872
|
var isMobile = useWindowDimensions().isMobile;
|
|
13852
13873
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13853
13874
|
};
|
|
13854
|
-
var templateObject_1
|
|
13875
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13855
13876
|
|
|
13856
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13877
|
+
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) {
|
|
13857
13878
|
var color = _a.color;
|
|
13858
13879
|
return color;
|
|
13859
13880
|
});
|
|
13860
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13881
|
+
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) {
|
|
13861
13882
|
var color = _a.color;
|
|
13862
13883
|
return color;
|
|
13863
13884
|
});
|
|
@@ -13866,7 +13887,7 @@ var InputLabel = function (_a) {
|
|
|
13866
13887
|
var theme = useTheme();
|
|
13867
13888
|
return (jsxs$1(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13868
13889
|
};
|
|
13869
|
-
var templateObject_1
|
|
13890
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13870
13891
|
|
|
13871
13892
|
var containerByStatus = function (theme, status) {
|
|
13872
13893
|
if (status === InputValidationType.Valid)
|
|
@@ -13875,12 +13896,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13875
13896
|
return theme.colors.semantic.urgent.color;
|
|
13876
13897
|
return '';
|
|
13877
13898
|
};
|
|
13878
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13899
|
+
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) {
|
|
13879
13900
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13880
13901
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13881
13902
|
});
|
|
13882
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13883
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13903
|
+
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"])));
|
|
13904
|
+
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) {
|
|
13884
13905
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13885
13906
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13886
13907
|
}, function (_a) {
|
|
@@ -13935,7 +13956,7 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13935
13956
|
return hasValue &&
|
|
13936
13957
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13937
13958
|
});
|
|
13938
|
-
var InputWrapper
|
|
13959
|
+
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) {
|
|
13939
13960
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13940
13961
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13941
13962
|
});
|
|
@@ -13953,7 +13974,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
13953
13974
|
return theme.component.input.lineHeight;
|
|
13954
13975
|
});
|
|
13955
13976
|
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"])));
|
|
13956
|
-
var templateObject_1$
|
|
13977
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13957
13978
|
|
|
13958
13979
|
var BaseInput = function (_a) {
|
|
13959
13980
|
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"]);
|
|
@@ -13976,7 +13997,7 @@ var BaseInput = function (_a) {
|
|
|
13976
13997
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13977
13998
|
}, [status]);
|
|
13978
13999
|
var hasValue = Boolean(value);
|
|
13979
|
-
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper
|
|
14000
|
+
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13980
14001
|
onChange(event.target.value, event);
|
|
13981
14002
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13982
14003
|
onChange('', { target: { value: '' } });
|
|
@@ -13997,11 +14018,11 @@ var Button$5 = function (_a) {
|
|
|
13997
14018
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13998
14019
|
};
|
|
13999
14020
|
|
|
14000
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14021
|
+
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) {
|
|
14001
14022
|
var theme = _a.theme;
|
|
14002
14023
|
return theme.component.inputCustom.input.borderRadius;
|
|
14003
14024
|
});
|
|
14004
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14025
|
+
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) {
|
|
14005
14026
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14006
14027
|
return defaultRounded
|
|
14007
14028
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14018,21 +14039,21 @@ var Custom = function (_a) {
|
|
|
14018
14039
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14019
14040
|
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14020
14041
|
};
|
|
14021
|
-
var templateObject_1$
|
|
14042
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14022
14043
|
|
|
14023
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14044
|
+
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) {
|
|
14024
14045
|
var size = _a.size;
|
|
14025
14046
|
return (size === 'small' ? '36px' : '');
|
|
14026
14047
|
});
|
|
14027
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14028
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14048
|
+
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"])));
|
|
14049
|
+
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"])));
|
|
14029
14050
|
var Success = function (_a) {
|
|
14030
14051
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14031
14052
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14032
14053
|
};
|
|
14033
|
-
var templateObject_1$
|
|
14054
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14034
14055
|
|
|
14035
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14056
|
+
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) {
|
|
14036
14057
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14037
14058
|
return status === InputValidationType.Empty &&
|
|
14038
14059
|
type === 'primary' &&
|
|
@@ -14049,16 +14070,16 @@ var BasePlusButton = function (_a) {
|
|
|
14049
14070
|
}
|
|
14050
14071
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14051
14072
|
};
|
|
14052
|
-
var templateObject_1$
|
|
14073
|
+
var templateObject_1$W;
|
|
14053
14074
|
|
|
14054
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14055
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14075
|
+
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"])));
|
|
14076
|
+
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"])));
|
|
14056
14077
|
var BasePlusIcon = function (_a) {
|
|
14057
14078
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14058
14079
|
var theme = useTheme();
|
|
14059
14080
|
return (jsx$1(Container$H, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14060
14081
|
};
|
|
14061
|
-
var templateObject_1$
|
|
14082
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14062
14083
|
|
|
14063
14084
|
var Input$3 = {
|
|
14064
14085
|
Simple: BaseInput,
|
|
@@ -14103,7 +14124,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14103
14124
|
}, [preventTouch, ref, touchStart]);
|
|
14104
14125
|
}
|
|
14105
14126
|
|
|
14106
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14127
|
+
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) {
|
|
14107
14128
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14108
14129
|
return borderRadiusVariant &&
|
|
14109
14130
|
"\n border-radius: 40px;\n ";
|
|
@@ -14112,8 +14133,8 @@ var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14112
14133
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14113
14134
|
});
|
|
14114
14135
|
// max-height: 31.875rem;
|
|
14115
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14116
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14136
|
+
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'); });
|
|
14137
|
+
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"])));
|
|
14117
14138
|
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"])));
|
|
14118
14139
|
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"])));
|
|
14119
14140
|
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"])));
|
|
@@ -14175,16 +14196,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14175
14196
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14176
14197
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14177
14198
|
};
|
|
14178
|
-
var templateObject_1$
|
|
14199
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14179
14200
|
|
|
14180
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14201
|
+
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"])));
|
|
14181
14202
|
var ProductGalleryMobile = function (_a) {
|
|
14182
14203
|
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;
|
|
14183
14204
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14184
14205
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14185
14206
|
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14186
14207
|
};
|
|
14187
|
-
var templateObject_1$
|
|
14208
|
+
var templateObject_1$T;
|
|
14188
14209
|
|
|
14189
14210
|
function _extends() {
|
|
14190
14211
|
_extends = Object.assign || function (target) {
|
|
@@ -14451,14 +14472,14 @@ function useSwipeable(options) {
|
|
|
14451
14472
|
return handlers;
|
|
14452
14473
|
}
|
|
14453
14474
|
|
|
14454
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14475
|
+
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"])));
|
|
14455
14476
|
var ArrowButton = function (_a) {
|
|
14456
14477
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14457
14478
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14458
14479
|
};
|
|
14459
|
-
var templateObject_1$
|
|
14480
|
+
var templateObject_1$S;
|
|
14460
14481
|
|
|
14461
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14482
|
+
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"])));
|
|
14462
14483
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14463
14484
|
var SlideDots = function (_a) {
|
|
14464
14485
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14467,11 +14488,11 @@ var SlideDots = function (_a) {
|
|
|
14467
14488
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14468
14489
|
: 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));
|
|
14469
14490
|
};
|
|
14470
|
-
var templateObject_1$
|
|
14491
|
+
var templateObject_1$R;
|
|
14471
14492
|
|
|
14472
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14473
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14474
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14493
|
+
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"])));
|
|
14494
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14495
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14475
14496
|
var SlideNavigation = function (_a) {
|
|
14476
14497
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14477
14498
|
var theme = useTheme();
|
|
@@ -14483,23 +14504,23 @@ var SlideNavigation = function (_a) {
|
|
|
14483
14504
|
onNavigate(selectedIndex + 1);
|
|
14484
14505
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14485
14506
|
};
|
|
14486
|
-
var templateObject_1$
|
|
14507
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14487
14508
|
|
|
14488
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14509
|
+
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) {
|
|
14489
14510
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14490
14511
|
return borderRadiusVariant &&
|
|
14491
14512
|
"\n border-radius: 40px;\n ";
|
|
14492
14513
|
});
|
|
14493
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14494
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14514
|
+
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'); });
|
|
14515
|
+
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"])));
|
|
14495
14516
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14496
14517
|
var _b, _c;
|
|
14497
14518
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14498
14519
|
return (jsxs$1(Container$D, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14499
14520
|
});
|
|
14500
|
-
var templateObject_1$
|
|
14521
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14501
14522
|
|
|
14502
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14523
|
+
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"])));
|
|
14503
14524
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14504
14525
|
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;
|
|
14505
14526
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14523,9 +14544,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14523
14544
|
}, [index, images]);
|
|
14524
14545
|
return (jsxs$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14525
14546
|
};
|
|
14526
|
-
var templateObject_1$
|
|
14547
|
+
var templateObject_1$O;
|
|
14527
14548
|
|
|
14528
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14549
|
+
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) {
|
|
14529
14550
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14530
14551
|
return borderRadiusVariant &&
|
|
14531
14552
|
"\n border-radius: 40px;\n ";
|
|
@@ -14534,8 +14555,8 @@ var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14534
14555
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14535
14556
|
});
|
|
14536
14557
|
// max-height: 31.875rem;
|
|
14537
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14538
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14558
|
+
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'); });
|
|
14559
|
+
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"])));
|
|
14539
14560
|
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"])));
|
|
14540
14561
|
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"])));
|
|
14541
14562
|
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"])));
|
|
@@ -14599,14 +14620,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14599
14620
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14600
14621
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14601
14622
|
};
|
|
14602
|
-
var templateObject_1$
|
|
14623
|
+
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;
|
|
14603
14624
|
|
|
14604
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14625
|
+
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"])));
|
|
14605
14626
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14606
14627
|
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;
|
|
14607
14628
|
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14608
14629
|
};
|
|
14609
|
-
var templateObject_1$
|
|
14630
|
+
var templateObject_1$M;
|
|
14610
14631
|
|
|
14611
14632
|
var __defProp$1 = Object.defineProperty;
|
|
14612
14633
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14739,12 +14760,12 @@ var Portal = function (_a) {
|
|
|
14739
14760
|
var visibleStyle = function (_a) {
|
|
14740
14761
|
var opened = _a.opened;
|
|
14741
14762
|
return opened
|
|
14742
|
-
? css(templateObject_1$
|
|
14763
|
+
? 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 "])));
|
|
14743
14764
|
};
|
|
14744
14765
|
var transformStyle = function (_a) {
|
|
14745
14766
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14746
14767
|
return opened
|
|
14747
|
-
? css(templateObject_3$
|
|
14768
|
+
? 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%)');
|
|
14748
14769
|
};
|
|
14749
14770
|
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) {
|
|
14750
14771
|
var width = _a.width;
|
|
@@ -14794,9 +14815,9 @@ var useModal = function (id) {
|
|
|
14794
14815
|
close: close,
|
|
14795
14816
|
}); }, [close, open, opened]);
|
|
14796
14817
|
};
|
|
14797
|
-
var templateObject_1$
|
|
14818
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14798
14819
|
|
|
14799
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14820
|
+
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) {
|
|
14800
14821
|
var height = _a.height;
|
|
14801
14822
|
return height || '0.5rem';
|
|
14802
14823
|
}, function (_a) {
|
|
@@ -14868,19 +14889,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14868
14889
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14869
14890
|
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14870
14891
|
};
|
|
14871
|
-
var templateObject_1$
|
|
14892
|
+
var templateObject_1$K;
|
|
14872
14893
|
|
|
14873
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14894
|
+
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) {
|
|
14874
14895
|
var theme = _a.theme;
|
|
14875
14896
|
return theme.component.orderBar.backgroundColor;
|
|
14876
14897
|
});
|
|
14877
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14898
|
+
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; });
|
|
14878
14899
|
var OrderBar = function (_a) {
|
|
14879
14900
|
var message = _a.message, color = _a.color;
|
|
14880
14901
|
var theme = useTheme();
|
|
14881
14902
|
return (jsxs$1(Container$x, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14882
14903
|
};
|
|
14883
|
-
var templateObject_1$
|
|
14904
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14884
14905
|
|
|
14885
14906
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14886
14907
|
background: props.bgColor,
|
|
@@ -14904,15 +14925,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14904
14925
|
justifyContent: 'center',
|
|
14905
14926
|
gap: '10px',
|
|
14906
14927
|
});
|
|
14907
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14928
|
+
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) {
|
|
14908
14929
|
var bgColor = _a.bgColor;
|
|
14909
14930
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14910
14931
|
}, function (_a) {
|
|
14911
14932
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14912
14933
|
return width;
|
|
14913
14934
|
});
|
|
14914
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14915
|
-
var templateObject_1$
|
|
14935
|
+
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"])));
|
|
14936
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14916
14937
|
|
|
14917
14938
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14918
14939
|
var background = _a.background, width = _a.width;
|
|
@@ -18732,9 +18753,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18732
18753
|
HTMLReactParser$1.attributesToProps;
|
|
18733
18754
|
HTMLReactParser$1.Element;
|
|
18734
18755
|
|
|
18735
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18736
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18737
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18756
|
+
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"])));
|
|
18757
|
+
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"])));
|
|
18758
|
+
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"])));
|
|
18738
18759
|
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"])));
|
|
18739
18760
|
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"])));
|
|
18740
18761
|
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"])));
|
|
@@ -18769,11 +18790,11 @@ var PackCard = function (_a) {
|
|
|
18769
18790
|
currency: currencyCode || 'USD',
|
|
18770
18791
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18771
18792
|
};
|
|
18772
|
-
var templateObject_1$
|
|
18793
|
+
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;
|
|
18773
18794
|
|
|
18774
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18775
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18776
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18795
|
+
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"])));
|
|
18796
|
+
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"])));
|
|
18797
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18777
18798
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18778
18799
|
}));
|
|
18779
18800
|
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) {
|
|
@@ -18793,7 +18814,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18793
18814
|
var background = _a.background;
|
|
18794
18815
|
return background || 'unset';
|
|
18795
18816
|
});
|
|
18796
|
-
var templateObject_1$
|
|
18817
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$n;
|
|
18797
18818
|
|
|
18798
18819
|
var Pagination = function (_a) {
|
|
18799
18820
|
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;
|
|
@@ -18858,7 +18879,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18858
18879
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18859
18880
|
};
|
|
18860
18881
|
|
|
18861
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18882
|
+
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) {
|
|
18862
18883
|
var width = _a.width;
|
|
18863
18884
|
return width;
|
|
18864
18885
|
}, function (_a) {
|
|
@@ -18876,12 +18897,12 @@ var PaymentMethod = function (_a) {
|
|
|
18876
18897
|
var theme = useTheme();
|
|
18877
18898
|
return (jsx$1(Container$u, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18878
18899
|
};
|
|
18879
|
-
var templateObject_1$
|
|
18900
|
+
var templateObject_1$F;
|
|
18880
18901
|
|
|
18881
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18902
|
+
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"])));
|
|
18882
18903
|
var IMAGE_WIDTH = '63px';
|
|
18883
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18884
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18904
|
+
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);
|
|
18905
|
+
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({
|
|
18885
18906
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18886
18907
|
}), IMAGE_WIDTH);
|
|
18887
18908
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18921,7 +18942,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18921
18942
|
var theme = useTheme();
|
|
18922
18943
|
return (jsxs$1(Container$t, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18923
18944
|
};
|
|
18924
|
-
var templateObject_1$
|
|
18945
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18925
18946
|
|
|
18926
18947
|
var P$1 = newStyled.p(function (_a) {
|
|
18927
18948
|
var color = _a.color;
|
|
@@ -18935,7 +18956,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18935
18956
|
margin: '0.938rem 4.188rem',
|
|
18936
18957
|
});
|
|
18937
18958
|
});
|
|
18938
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18959
|
+
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) {
|
|
18939
18960
|
var height = _a.height;
|
|
18940
18961
|
return height || '0.5rem';
|
|
18941
18962
|
}, function (_a) {
|
|
@@ -18980,11 +19001,11 @@ var ProgressBar = function (_a) {
|
|
|
18980
19001
|
var theme = useTheme();
|
|
18981
19002
|
return (jsxs$1(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18982
19003
|
};
|
|
18983
|
-
var templateObject_1$
|
|
19004
|
+
var templateObject_1$D;
|
|
18984
19005
|
|
|
18985
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18986
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18987
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19006
|
+
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; });
|
|
19007
|
+
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"])));
|
|
19008
|
+
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"])));
|
|
18988
19009
|
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)'; });
|
|
18989
19010
|
var QuantityPicker = function (_a) {
|
|
18990
19011
|
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;
|
|
@@ -19010,7 +19031,7 @@ var QuantityPicker = function (_a) {
|
|
|
19010
19031
|
}, [value, clamp]);
|
|
19011
19032
|
return (jsxs$1(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19012
19033
|
};
|
|
19013
|
-
var templateObject_1$
|
|
19034
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$l;
|
|
19014
19035
|
|
|
19015
19036
|
/* base styles & size variants */
|
|
19016
19037
|
var CustomRadioStyles$1 = {
|
|
@@ -19079,9 +19100,9 @@ var ContainerStyles$1 = {
|
|
|
19079
19100
|
},
|
|
19080
19101
|
};
|
|
19081
19102
|
|
|
19082
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19103
|
+
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"])));
|
|
19083
19104
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19084
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19105
|
+
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) {
|
|
19085
19106
|
var disabled = _a.disabled;
|
|
19086
19107
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19087
19108
|
});
|
|
@@ -19089,7 +19110,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19089
19110
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19090
19111
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19091
19112
|
]; });
|
|
19092
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19113
|
+
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"])));
|
|
19093
19114
|
var RadioPrimary = function (_a) {
|
|
19094
19115
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19095
19116
|
var theme = useTheme();
|
|
@@ -19099,7 +19120,7 @@ var RadioPrimary = function (_a) {
|
|
|
19099
19120
|
};
|
|
19100
19121
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19101
19122
|
};
|
|
19102
|
-
var templateObject_1$
|
|
19123
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19103
19124
|
|
|
19104
19125
|
var RadioGroupInput = function (_a) {
|
|
19105
19126
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19178,9 +19199,9 @@ var ContainerStyles = {
|
|
|
19178
19199
|
},
|
|
19179
19200
|
};
|
|
19180
19201
|
|
|
19181
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19202
|
+
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"])));
|
|
19182
19203
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19183
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19204
|
+
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) {
|
|
19184
19205
|
var disabled = _a.disabled;
|
|
19185
19206
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19186
19207
|
});
|
|
@@ -19188,7 +19209,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19188
19209
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19189
19210
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19190
19211
|
]; });
|
|
19191
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19212
|
+
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) {
|
|
19192
19213
|
var theme = _a.theme;
|
|
19193
19214
|
return theme.component.radio.textSize;
|
|
19194
19215
|
}, function (_a) {
|
|
@@ -19204,7 +19225,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19204
19225
|
};
|
|
19205
19226
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19206
19227
|
};
|
|
19207
|
-
var templateObject_1$
|
|
19228
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19208
19229
|
|
|
19209
19230
|
var ClubRadioGroupInput = function (_a) {
|
|
19210
19231
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19232,9 +19253,9 @@ function formatDate(date, format) {
|
|
|
19232
19253
|
}
|
|
19233
19254
|
}
|
|
19234
19255
|
|
|
19235
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19236
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19237
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19256
|
+
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"])));
|
|
19257
|
+
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"])));
|
|
19258
|
+
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"])));
|
|
19238
19259
|
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"])));
|
|
19239
19260
|
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"])));
|
|
19240
19261
|
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"])));
|
|
@@ -19273,13 +19294,13 @@ var Review$1 = function (_a) {
|
|
|
19273
19294
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19274
19295
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19275
19296
|
};
|
|
19276
|
-
var templateObject_1$
|
|
19297
|
+
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;
|
|
19277
19298
|
|
|
19278
19299
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19279
19300
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19280
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19281
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19282
|
-
var Content = newStyled.div(templateObject_3$
|
|
19301
|
+
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"])));
|
|
19302
|
+
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"])));
|
|
19303
|
+
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"])));
|
|
19283
19304
|
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"])));
|
|
19284
19305
|
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"])));
|
|
19285
19306
|
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"])));
|
|
@@ -19329,11 +19350,11 @@ var Review = function (_a) {
|
|
|
19329
19350
|
: description,
|
|
19330
19351
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19331
19352
|
};
|
|
19332
|
-
var templateObject_1$
|
|
19353
|
+
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;
|
|
19333
19354
|
|
|
19334
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19335
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19336
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19355
|
+
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"])));
|
|
19356
|
+
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"])));
|
|
19357
|
+
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"])));
|
|
19337
19358
|
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"])));
|
|
19338
19359
|
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"])));
|
|
19339
19360
|
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"])));
|
|
@@ -19347,17 +19368,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19347
19368
|
var theme = useTheme();
|
|
19348
19369
|
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19349
19370
|
};
|
|
19350
|
-
var templateObject_1$
|
|
19371
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19351
19372
|
|
|
19352
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19353
|
-
var Text = newStyled.p(templateObject_2$
|
|
19373
|
+
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"])));
|
|
19374
|
+
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; });
|
|
19354
19375
|
var ScrollToTop = function (_a) {
|
|
19355
19376
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19356
19377
|
var theme = useTheme();
|
|
19357
19378
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19358
19379
|
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19359
19380
|
};
|
|
19360
|
-
var templateObject_1$
|
|
19381
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19361
19382
|
|
|
19362
19383
|
var Input = newStyled.input(function (props) { return ({
|
|
19363
19384
|
padding: props.theme.component.input.padding,
|
|
@@ -19388,7 +19409,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19388
19409
|
},
|
|
19389
19410
|
}); });
|
|
19390
19411
|
|
|
19391
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19412
|
+
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({
|
|
19392
19413
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19393
19414
|
}));
|
|
19394
19415
|
var Description = newStyled.div({
|
|
@@ -19407,7 +19428,7 @@ var ProductItem = function (_a) {
|
|
|
19407
19428
|
var theme = useTheme();
|
|
19408
19429
|
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19409
19430
|
};
|
|
19410
|
-
var templateObject_1$
|
|
19431
|
+
var templateObject_1$v;
|
|
19411
19432
|
|
|
19412
19433
|
var Container$j = newStyled.div({
|
|
19413
19434
|
display: 'flex',
|
|
@@ -19423,7 +19444,7 @@ var Ul = newStyled.ul({
|
|
|
19423
19444
|
margin: '0px',
|
|
19424
19445
|
padding: '0px',
|
|
19425
19446
|
});
|
|
19426
|
-
var Li = newStyled.li(templateObject_1$
|
|
19447
|
+
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({
|
|
19427
19448
|
padding: [0, '0rem 1rem'],
|
|
19428
19449
|
borderRadius: [0, '0.5rem'],
|
|
19429
19450
|
}));
|
|
@@ -19435,12 +19456,12 @@ var Anchor = newStyled.a({
|
|
|
19435
19456
|
padding: 0,
|
|
19436
19457
|
textDecoration: 'none',
|
|
19437
19458
|
});
|
|
19438
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19459
|
+
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({
|
|
19439
19460
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19440
19461
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19441
19462
|
borderRadius: ['0', '0.5rem'],
|
|
19442
19463
|
}));
|
|
19443
|
-
var Header = newStyled.div(templateObject_3$
|
|
19464
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19444
19465
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19445
19466
|
}));
|
|
19446
19467
|
var ResultsPanel = function (_a) {
|
|
@@ -19448,9 +19469,9 @@ var ResultsPanel = function (_a) {
|
|
|
19448
19469
|
var theme = useTheme();
|
|
19449
19470
|
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19450
19471
|
};
|
|
19451
|
-
var templateObject_1$
|
|
19472
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19452
19473
|
|
|
19453
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19474
|
+
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({
|
|
19454
19475
|
right: ['1rem', '7.75rem'],
|
|
19455
19476
|
top: ['0.75rem', '0.75rem'],
|
|
19456
19477
|
}));
|
|
@@ -19459,7 +19480,7 @@ var ClearButton = function (_a) {
|
|
|
19459
19480
|
var theme = useTheme();
|
|
19460
19481
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19461
19482
|
};
|
|
19462
|
-
var templateObject_1$
|
|
19483
|
+
var templateObject_1$t;
|
|
19463
19484
|
|
|
19464
19485
|
var SearchIconContainer = newStyled.div({
|
|
19465
19486
|
display: 'flex',
|
|
@@ -19469,7 +19490,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19469
19490
|
background: 'white',
|
|
19470
19491
|
alignSelf: 'center',
|
|
19471
19492
|
});
|
|
19472
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19493
|
+
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"])));
|
|
19473
19494
|
var SearchControl = function (_a) {
|
|
19474
19495
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19475
19496
|
var theme = useTheme();
|
|
@@ -19485,7 +19506,7 @@ var SearchControl = function (_a) {
|
|
|
19485
19506
|
}
|
|
19486
19507
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19487
19508
|
};
|
|
19488
|
-
var templateObject_1$
|
|
19509
|
+
var templateObject_1$s;
|
|
19489
19510
|
|
|
19490
19511
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19491
19512
|
var reducer = function (state, action) {
|
|
@@ -19552,9 +19573,9 @@ var SearchBar = function (_a) {
|
|
|
19552
19573
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19553
19574
|
};
|
|
19554
19575
|
|
|
19555
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19556
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19557
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19576
|
+
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"])));
|
|
19577
|
+
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"])));
|
|
19578
|
+
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"])));
|
|
19558
19579
|
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"])));
|
|
19559
19580
|
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"])));
|
|
19560
19581
|
var SearchNavigation = function (_a) {
|
|
@@ -19563,9 +19584,9 @@ var SearchNavigation = function (_a) {
|
|
|
19563
19584
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19564
19585
|
}) }, void 0)] }, void 0));
|
|
19565
19586
|
};
|
|
19566
|
-
var templateObject_1$
|
|
19587
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19567
19588
|
|
|
19568
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19589
|
+
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) {
|
|
19569
19590
|
var alignCenter = _a.alignCenter;
|
|
19570
19591
|
return alignCenter &&
|
|
19571
19592
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19575,18 +19596,18 @@ var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __ma
|
|
|
19575
19596
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19576
19597
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19577
19598
|
});
|
|
19578
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19579
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19599
|
+
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"])));
|
|
19600
|
+
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"])));
|
|
19580
19601
|
var ShortBanner = function (_a) {
|
|
19581
19602
|
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;
|
|
19582
19603
|
var theme = useTheme();
|
|
19583
19604
|
return (jsxs$1(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19584
19605
|
};
|
|
19585
|
-
var templateObject_1$
|
|
19606
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19586
19607
|
|
|
19587
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19588
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19589
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19608
|
+
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; });
|
|
19609
|
+
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; });
|
|
19610
|
+
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; });
|
|
19590
19611
|
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"])));
|
|
19591
19612
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19592
19613
|
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"])));
|
|
@@ -19594,7 +19615,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19594
19615
|
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"])));
|
|
19595
19616
|
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"])));
|
|
19596
19617
|
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; });
|
|
19597
|
-
var templateObject_1$
|
|
19618
|
+
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;
|
|
19598
19619
|
|
|
19599
19620
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19600
19621
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19635,16 +19656,16 @@ var SizeChartTable = function (_a) {
|
|
|
19635
19656
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19636
19657
|
};
|
|
19637
19658
|
|
|
19638
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19639
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19640
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19659
|
+
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; });
|
|
19660
|
+
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; });
|
|
19661
|
+
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; });
|
|
19641
19662
|
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; });
|
|
19642
19663
|
var SizeTable = function (_a) {
|
|
19643
19664
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19644
19665
|
var theme = useTheme();
|
|
19645
19666
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19646
19667
|
};
|
|
19647
|
-
var templateObject_1$
|
|
19668
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
19648
19669
|
|
|
19649
19670
|
var getStylesBySize$7 = function (size) {
|
|
19650
19671
|
switch (size) {
|
|
@@ -19671,7 +19692,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19671
19692
|
} });
|
|
19672
19693
|
};
|
|
19673
19694
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19674
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19695
|
+
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));
|
|
19675
19696
|
};
|
|
19676
19697
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19677
19698
|
if (disabled)
|
|
@@ -19687,23 +19708,23 @@ var TextButton = function (_a) {
|
|
|
19687
19708
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19688
19709
|
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));
|
|
19689
19710
|
};
|
|
19690
|
-
var templateObject_1$
|
|
19711
|
+
var templateObject_1$n;
|
|
19691
19712
|
|
|
19692
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19693
|
-
var P = newStyled.p(templateObject_2$
|
|
19694
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19713
|
+
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"])));
|
|
19714
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19715
|
+
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"])));
|
|
19695
19716
|
var SizeFitGuide = function (_a) {
|
|
19696
19717
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19697
19718
|
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19698
19719
|
};
|
|
19699
|
-
var templateObject_1$
|
|
19720
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19700
19721
|
|
|
19701
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19722
|
+
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) {
|
|
19702
19723
|
var inline = _a.inline;
|
|
19703
19724
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19704
19725
|
});
|
|
19705
|
-
var Row = newStyled.div(templateObject_2$
|
|
19706
|
-
var templateObject_1$
|
|
19726
|
+
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"])));
|
|
19727
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19707
19728
|
|
|
19708
19729
|
var SizeSelector = function (_a) {
|
|
19709
19730
|
var _b;
|
|
@@ -19725,7 +19746,7 @@ var SizeSelector = function (_a) {
|
|
|
19725
19746
|
}) }), void 0)] }), void 0));
|
|
19726
19747
|
};
|
|
19727
19748
|
|
|
19728
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19749
|
+
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) {
|
|
19729
19750
|
var titleSize = _a.titleSize;
|
|
19730
19751
|
return titleSize;
|
|
19731
19752
|
}, function (_a) {
|
|
@@ -19742,17 +19763,17 @@ var Tab = function (_a) {
|
|
|
19742
19763
|
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;
|
|
19743
19764
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19744
19765
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19766
|
+
var templateObject_1$k;
|
|
19746
19767
|
|
|
19747
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19748
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19768
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19769
|
+
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) {
|
|
19749
19770
|
var backgroundColor = _a.backgroundColor;
|
|
19750
19771
|
return backgroundColor;
|
|
19751
19772
|
}, function (_a) {
|
|
19752
19773
|
var borderColor = _a.borderColor;
|
|
19753
19774
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19754
19775
|
});
|
|
19755
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19776
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19756
19777
|
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"])));
|
|
19757
19778
|
var Tabs = function (_a) {
|
|
19758
19779
|
var _b;
|
|
@@ -19764,14 +19785,14 @@ var Tabs = function (_a) {
|
|
|
19764
19785
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19765
19786
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19766
19787
|
};
|
|
19767
|
-
var templateObject_1$
|
|
19788
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$e;
|
|
19768
19789
|
|
|
19769
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19790
|
+
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"])));
|
|
19770
19791
|
var Tag = function (_a) {
|
|
19771
19792
|
var text = _a.text, className = _a.className;
|
|
19772
19793
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19773
19794
|
};
|
|
19774
|
-
var templateObject_1$
|
|
19795
|
+
var templateObject_1$i;
|
|
19775
19796
|
|
|
19776
19797
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19777
19798
|
switch (size) {
|
|
@@ -19882,9 +19903,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19882
19903
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19883
19904
|
};
|
|
19884
19905
|
|
|
19885
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19886
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19887
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19906
|
+
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"])));
|
|
19907
|
+
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"])));
|
|
19908
|
+
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"])));
|
|
19888
19909
|
var ImageVideo = function (_a) {
|
|
19889
19910
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19890
19911
|
var video = useRef(null);
|
|
@@ -19904,11 +19925,11 @@ var ImageVideo = function (_a) {
|
|
|
19904
19925
|
height: '100%',
|
|
19905
19926
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19906
19927
|
};
|
|
19907
|
-
var templateObject_1$
|
|
19928
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19908
19929
|
|
|
19909
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19910
|
-
var ContainerMobile = css(templateObject_2$
|
|
19911
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19930
|
+
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"])));
|
|
19931
|
+
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"])));
|
|
19932
|
+
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);
|
|
19912
19933
|
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"])));
|
|
19913
19934
|
var TextWithImage = function (_a) {
|
|
19914
19935
|
var _b, _c, _d, _e;
|
|
@@ -19939,17 +19960,17 @@ var TextWithImage = function (_a) {
|
|
|
19939
19960
|
},
|
|
19940
19961
|
} }, 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));
|
|
19941
19962
|
};
|
|
19942
|
-
var templateObject_1$
|
|
19963
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$d;
|
|
19943
19964
|
|
|
19944
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19965
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19945
19966
|
var timerColor = _a.timerColor;
|
|
19946
19967
|
return timerColor || '';
|
|
19947
19968
|
});
|
|
19948
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19969
|
+
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) {
|
|
19949
19970
|
var timerColor = _a.timerColor;
|
|
19950
19971
|
return timerColor || '';
|
|
19951
19972
|
});
|
|
19952
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19973
|
+
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) {
|
|
19953
19974
|
var theme = _a.theme;
|
|
19954
19975
|
return theme.colors.shades.white.color;
|
|
19955
19976
|
}, function (_a) {
|
|
@@ -19957,7 +19978,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __
|
|
|
19957
19978
|
return theme.colors.shades.white.color;
|
|
19958
19979
|
});
|
|
19959
19980
|
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"])));
|
|
19960
|
-
var templateObject_1$
|
|
19981
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
19961
19982
|
|
|
19962
19983
|
var HRS = 'HRS';
|
|
19963
19984
|
var MIN = 'MIN';
|
|
@@ -19998,9 +20019,9 @@ var Timer = function (_a) {
|
|
|
19998
20019
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19999
20020
|
};
|
|
20000
20021
|
|
|
20001
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20002
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20003
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20022
|
+
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"])));
|
|
20023
|
+
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; });
|
|
20024
|
+
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) {
|
|
20004
20025
|
var theme = _a.theme;
|
|
20005
20026
|
return theme.component.total.basicTotal.currency.color;
|
|
20006
20027
|
}, function (_a) {
|
|
@@ -20027,7 +20048,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20027
20048
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20028
20049
|
});
|
|
20029
20050
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20030
|
-
var templateObject_1$
|
|
20051
|
+
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;
|
|
20031
20052
|
|
|
20032
20053
|
var Total = function (_a) {
|
|
20033
20054
|
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;
|
|
@@ -20035,12 +20056,12 @@ var Total = function (_a) {
|
|
|
20035
20056
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20036
20057
|
};
|
|
20037
20058
|
|
|
20038
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20059
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20039
20060
|
var color = _a.color;
|
|
20040
20061
|
return color;
|
|
20041
20062
|
});
|
|
20042
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20043
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20063
|
+
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"])));
|
|
20064
|
+
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) {
|
|
20044
20065
|
var theme = _a.theme;
|
|
20045
20066
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20046
20067
|
}, function (_a) {
|
|
@@ -20060,7 +20081,7 @@ var Subtotal = function (_a) {
|
|
|
20060
20081
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20061
20082
|
})] }), void 0));
|
|
20062
20083
|
};
|
|
20063
|
-
var templateObject_1$
|
|
20084
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
20064
20085
|
|
|
20065
20086
|
var Totals = {
|
|
20066
20087
|
Total: Total,
|
|
@@ -20069,13 +20090,13 @@ var Totals = {
|
|
|
20069
20090
|
|
|
20070
20091
|
var slideInAnimation = function (distanceFromTop) {
|
|
20071
20092
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20072
|
-
return keyframes(templateObject_1$
|
|
20093
|
+
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);
|
|
20073
20094
|
};
|
|
20074
20095
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20075
20096
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20076
|
-
return keyframes(templateObject_2$
|
|
20097
|
+
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);
|
|
20077
20098
|
};
|
|
20078
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20099
|
+
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"])));
|
|
20079
20100
|
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) {
|
|
20080
20101
|
var distanceFromTop = _a.distanceFromTop;
|
|
20081
20102
|
return distanceFromTop || '124px';
|
|
@@ -20094,7 +20115,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20094
20115
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20095
20116
|
});
|
|
20096
20117
|
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"])));
|
|
20097
|
-
var templateObject_1$
|
|
20118
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20098
20119
|
|
|
20099
20120
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20100
20121
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20114,9 +20135,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20114
20135
|
});
|
|
20115
20136
|
Toast.displayName = 'Toast';
|
|
20116
20137
|
|
|
20117
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20118
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20119
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20138
|
+
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"])));
|
|
20139
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20140
|
+
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; });
|
|
20120
20141
|
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'); });
|
|
20121
20142
|
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"])));
|
|
20122
20143
|
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) {
|
|
@@ -20166,11 +20187,11 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20166
20187
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20167
20188
|
})] }), void 0));
|
|
20168
20189
|
};
|
|
20169
|
-
var templateObject_1$
|
|
20190
|
+
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;
|
|
20170
20191
|
|
|
20171
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20172
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20173
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20192
|
+
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"])));
|
|
20193
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20194
|
+
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; });
|
|
20174
20195
|
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'); });
|
|
20175
20196
|
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'); });
|
|
20176
20197
|
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) {
|
|
@@ -20206,9 +20227,9 @@ var TrackingProgress = function (_a) {
|
|
|
20206
20227
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20207
20228
|
})] }), void 0));
|
|
20208
20229
|
};
|
|
20209
|
-
var templateObject_1$
|
|
20230
|
+
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;
|
|
20210
20231
|
|
|
20211
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20232
|
+
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) {
|
|
20212
20233
|
var textPosition = _a.textPosition;
|
|
20213
20234
|
return textPosition;
|
|
20214
20235
|
}, function (_a) {
|
|
@@ -20221,7 +20242,7 @@ var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = _
|
|
|
20221
20242
|
var borderRadius = _a.borderRadius;
|
|
20222
20243
|
return borderRadius || '8px';
|
|
20223
20244
|
});
|
|
20224
|
-
var templateObject_1$
|
|
20245
|
+
var templateObject_1$9;
|
|
20225
20246
|
|
|
20226
20247
|
var getDefaultCountdown = function () {
|
|
20227
20248
|
var tomorrowDate = new Date();
|
|
@@ -20237,7 +20258,7 @@ var HurryUp = function (_a) {
|
|
|
20237
20258
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20238
20259
|
};
|
|
20239
20260
|
|
|
20240
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20261
|
+
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) {
|
|
20241
20262
|
var size = _a.size;
|
|
20242
20263
|
return (size ? size : '100%');
|
|
20243
20264
|
}, function (_a) {
|
|
@@ -20251,7 +20272,7 @@ var borderSize = {
|
|
|
20251
20272
|
large: '3px',
|
|
20252
20273
|
};
|
|
20253
20274
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20254
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20275
|
+
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) {
|
|
20255
20276
|
var size = _a.size;
|
|
20256
20277
|
return borderSize[size];
|
|
20257
20278
|
}, function (_a) {
|
|
@@ -20264,7 +20285,7 @@ var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __
|
|
|
20264
20285
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20265
20286
|
return duration;
|
|
20266
20287
|
});
|
|
20267
|
-
var templateObject_1$
|
|
20288
|
+
var templateObject_1$8, templateObject_2$8;
|
|
20268
20289
|
|
|
20269
20290
|
var Spinner = function (_a) {
|
|
20270
20291
|
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;
|
|
@@ -20285,9 +20306,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20285
20306
|
var Shades700Color = '#292929';
|
|
20286
20307
|
var PrimaryColor = '#f7a08b';
|
|
20287
20308
|
var ClubBorderColor = '#882a2b';
|
|
20288
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20289
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20290
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20309
|
+
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20310
|
+
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);
|
|
20311
|
+
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) {
|
|
20291
20312
|
var selected = _a.selected;
|
|
20292
20313
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20293
20314
|
}, function (_a) {
|
|
@@ -20328,7 +20349,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20328
20349
|
: Shades200Color;
|
|
20329
20350
|
});
|
|
20330
20351
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20331
|
-
var templateObject_1$
|
|
20352
|
+
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;
|
|
20332
20353
|
|
|
20333
20354
|
var ClubOfferSelector = function (_a) {
|
|
20334
20355
|
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;
|
|
@@ -20374,21 +20395,6 @@ var ClubOfferSelector = function (_a) {
|
|
|
20374
20395
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20375
20396
|
};
|
|
20376
20397
|
|
|
20377
|
-
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"])));
|
|
20378
|
-
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"])));
|
|
20379
|
-
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"])));
|
|
20380
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20381
|
-
|
|
20382
|
-
var ToggleComponent = function (_a) {
|
|
20383
|
-
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20384
|
-
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20385
|
-
var handleChange = function (e) {
|
|
20386
|
-
setChecked(function (value) { return !value; });
|
|
20387
|
-
onToggle(e.target.checked);
|
|
20388
|
-
};
|
|
20389
|
-
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20390
|
-
};
|
|
20391
|
-
|
|
20392
20398
|
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) {
|
|
20393
20399
|
var $checked = _a.$checked;
|
|
20394
20400
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
@@ -20398,23 +20404,23 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20398
20404
|
});
|
|
20399
20405
|
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"])));
|
|
20400
20406
|
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"])));
|
|
20401
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n
|
|
20407
|
+
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"])));
|
|
20402
20408
|
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"])));
|
|
20403
20409
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20404
20410
|
|
|
20405
20411
|
function Card(_a) {
|
|
20406
|
-
var children = _a.children, link = _a.link,
|
|
20407
|
-
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [
|
|
20412
|
+
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;
|
|
20413
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20408
20414
|
}
|
|
20409
20415
|
|
|
20410
20416
|
function JoinClubCard(_a) {
|
|
20411
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked,
|
|
20417
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20412
20418
|
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20413
20419
|
var handleToggleValue = function (value) {
|
|
20414
20420
|
setChecked(value);
|
|
20415
20421
|
onCheckToggle(value);
|
|
20416
20422
|
};
|
|
20417
|
-
return (jsx$1(Card, __assign$1({ link: link,
|
|
20423
|
+
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20418
20424
|
}
|
|
20419
20425
|
|
|
20420
20426
|
var ImageContainer$1 = newStyled.div(function (_a) {
|