@trafilea/afrodita-components 6.25.2 → 6.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +52 -52
- package/build/index.esm.js +790 -785
- package/build/index.esm.js.map +1 -1
- package/build/index.js +790 -785
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.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) {
|
|
@@ -6741,7 +6761,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6741
6761
|
letterSpacing: '-0.05rem',
|
|
6742
6762
|
} }), void 0)) }), void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6743
6763
|
};
|
|
6744
|
-
var templateObject_1$
|
|
6764
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6745
6765
|
|
|
6746
6766
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6747
6767
|
var width = _a.width, height = _a.height;
|
|
@@ -6751,9 +6771,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6751
6771
|
height: height,
|
|
6752
6772
|
});
|
|
6753
6773
|
});
|
|
6754
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6755
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6756
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6774
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6775
|
+
var Container$X = newStyled.a(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6776
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6757
6777
|
var Title$6 = newStyled.p(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6758
6778
|
var getStylesBySize$b = function (size) {
|
|
6759
6779
|
switch (size) {
|
|
@@ -6840,9 +6860,9 @@ var ProductItemTK = function (_a) {
|
|
|
6840
6860
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6841
6861
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6842
6862
|
};
|
|
6843
|
-
var templateObject_1$
|
|
6863
|
+
var templateObject_1$1p, templateObject_2$13, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$s, templateObject_7$k, templateObject_8$f;
|
|
6844
6864
|
|
|
6845
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6865
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6846
6866
|
function withProductGrid(ProductItemComponent, data) {
|
|
6847
6867
|
function WithProductGrid(props) {
|
|
6848
6868
|
return (jsx$1(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6852,7 +6872,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6852
6872
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6853
6873
|
return WithProductGrid;
|
|
6854
6874
|
}
|
|
6855
|
-
var templateObject_1$
|
|
6875
|
+
var templateObject_1$1o;
|
|
6856
6876
|
|
|
6857
6877
|
var Collection = {
|
|
6858
6878
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6899,9 +6919,9 @@ var OutOfStock = function (_a) {
|
|
|
6899
6919
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6900
6920
|
};
|
|
6901
6921
|
|
|
6902
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6903
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6904
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6922
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6923
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6924
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6905
6925
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6906
6926
|
var OptionsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6907
6927
|
var Label$4 = function (_a) {
|
|
@@ -6921,23 +6941,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6921
6941
|
Option: Option,
|
|
6922
6942
|
OptionsContainer: OptionsContainer,
|
|
6923
6943
|
});
|
|
6924
|
-
var templateObject_1$
|
|
6944
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6925
6945
|
|
|
6926
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6946
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6927
6947
|
var borderColor = _a.borderColor;
|
|
6928
6948
|
return borderColor;
|
|
6929
6949
|
}, function (_a) {
|
|
6930
6950
|
var noStock = _a.noStock;
|
|
6931
6951
|
return (noStock ? '0.4' : '1');
|
|
6932
6952
|
});
|
|
6933
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6953
|
+
var Image$2 = newStyled.img(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6934
6954
|
var PatternSelector = function (_a) {
|
|
6935
6955
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6936
6956
|
var theme = useTheme();
|
|
6937
6957
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6938
6958
|
return (jsx$1(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6939
6959
|
};
|
|
6940
|
-
var templateObject_1$
|
|
6960
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6941
6961
|
|
|
6942
6962
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6943
6963
|
if (options == null || options.length === 0) {
|
|
@@ -6996,9 +7016,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6996
7016
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6997
7017
|
};
|
|
6998
7018
|
|
|
6999
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7000
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7001
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7019
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7020
|
+
var Col$1 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7021
|
+
var Row$2 = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7002
7022
|
return props.rightToLeft &&
|
|
7003
7023
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7004
7024
|
});
|
|
@@ -7010,7 +7030,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7010
7030
|
var theme = useTheme();
|
|
7011
7031
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7012
7032
|
};
|
|
7013
|
-
var templateObject_1$
|
|
7033
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7014
7034
|
|
|
7015
7035
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7016
7036
|
__proto__: null,
|
|
@@ -7038,7 +7058,7 @@ var sizeMapper = (_a = {},
|
|
|
7038
7058
|
_a[ComponentSize.Large] = 'large',
|
|
7039
7059
|
_a[ComponentSize.XSmall] = 'small',
|
|
7040
7060
|
_a);
|
|
7041
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7061
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7042
7062
|
var wide = _a.wide;
|
|
7043
7063
|
return (wide ? '100%' : 'fit-content');
|
|
7044
7064
|
}, function (_a) {
|
|
@@ -7060,11 +7080,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7060
7080
|
var theme = _a.theme;
|
|
7061
7081
|
return theme.colors.text.disabled;
|
|
7062
7082
|
});
|
|
7063
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7083
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7064
7084
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7065
7085
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7066
7086
|
});
|
|
7067
|
-
var templateObject_1$
|
|
7087
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7068
7088
|
|
|
7069
7089
|
var BaseCTA = function (_a) {
|
|
7070
7090
|
var _b, _c, _d;
|
|
@@ -7151,23 +7171,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7151
7171
|
} }), void 0));
|
|
7152
7172
|
};
|
|
7153
7173
|
|
|
7154
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7155
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7156
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7174
|
+
var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7175
|
+
var IconContainer$4 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7176
|
+
var Text$3 = newStyled.p(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7157
7177
|
var Details = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7158
7178
|
var Note = function (_a) {
|
|
7159
7179
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7160
7180
|
var theme = useTheme();
|
|
7161
7181
|
return (jsxs$1(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7162
7182
|
};
|
|
7163
|
-
var templateObject_1$
|
|
7183
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7164
7184
|
|
|
7165
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7185
|
+
var Title$5 = newStyled.h1(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7166
7186
|
var theme = _a.theme;
|
|
7167
7187
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7168
7188
|
});
|
|
7169
|
-
var Line = newStyled.div(templateObject_2$
|
|
7170
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7189
|
+
var Line = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7190
|
+
var Row$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7171
7191
|
flexDirection: ['column', 'row'],
|
|
7172
7192
|
}));
|
|
7173
7193
|
var Col = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -7205,16 +7225,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7205
7225
|
var theme = useTheme();
|
|
7206
7226
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7207
7227
|
};
|
|
7208
|
-
var templateObject_1$
|
|
7228
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7209
7229
|
|
|
7210
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7230
|
+
var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7211
7231
|
var top = _a.top;
|
|
7212
7232
|
return top;
|
|
7213
7233
|
}, function (_a) {
|
|
7214
7234
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7215
7235
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7216
7236
|
});
|
|
7217
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7237
|
+
var Sidebar = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7218
7238
|
var height = _a.height;
|
|
7219
7239
|
return height;
|
|
7220
7240
|
}, function (_a) {
|
|
@@ -7261,20 +7281,20 @@ var Drawer = function (_a) {
|
|
|
7261
7281
|
}, [isOpen, onClose, onOpen]);
|
|
7262
7282
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7263
7283
|
};
|
|
7264
|
-
var templateObject_1$
|
|
7284
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7265
7285
|
|
|
7266
7286
|
var TooltipArrow = function (_a) {
|
|
7267
7287
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7268
7288
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7269
7289
|
};
|
|
7270
7290
|
|
|
7271
|
-
var List = newStyled.ul(templateObject_1$
|
|
7272
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7273
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7291
|
+
var List = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7292
|
+
var Item$2 = newStyled.li(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7293
|
+
var DropdownWrapper = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7274
7294
|
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7275
7295
|
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7276
7296
|
var DropdownItem = newStyled.li(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7277
|
-
var templateObject_1$
|
|
7297
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7278
7298
|
|
|
7279
7299
|
var DropdownListIcons = function (_a) {
|
|
7280
7300
|
var items = _a.items;
|
|
@@ -7287,13 +7307,13 @@ var Dropdown = function (_a) {
|
|
|
7287
7307
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7288
7308
|
};
|
|
7289
7309
|
|
|
7290
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7291
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7292
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7310
|
+
var DropdownContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7311
|
+
var DropdownLabel = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7312
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7293
7313
|
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7294
7314
|
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7295
7315
|
var DropdownOption = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7296
|
-
var templateObject_1$
|
|
7316
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7297
7317
|
|
|
7298
7318
|
var SizeDropdown = function (_a) {
|
|
7299
7319
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7316,9 +7336,9 @@ var SizeDropdown = function (_a) {
|
|
|
7316
7336
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7317
7337
|
};
|
|
7318
7338
|
|
|
7319
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7320
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7321
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7339
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7340
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7341
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7322
7342
|
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7323
7343
|
var DropdownDialog = function (_a) {
|
|
7324
7344
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7328,7 +7348,7 @@ var DropdownDialog = function (_a) {
|
|
|
7328
7348
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7329
7349
|
}) }), void 0) }), void 0));
|
|
7330
7350
|
};
|
|
7331
|
-
var templateObject_1$
|
|
7351
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7332
7352
|
|
|
7333
7353
|
function FilteringDropdown(_a) {
|
|
7334
7354
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7361,9 +7381,9 @@ function FilteringDropdown(_a) {
|
|
|
7361
7381
|
}) }, void 0)] }), void 0));
|
|
7362
7382
|
}
|
|
7363
7383
|
|
|
7364
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7365
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7366
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7384
|
+
var Title$4 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
7385
|
+
var H3 = newStyled.h3(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7386
|
+
var ArrowContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7367
7387
|
var Container$T = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7368
7388
|
var Accordion = function (_a) {
|
|
7369
7389
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
@@ -7371,11 +7391,11 @@ var Accordion = function (_a) {
|
|
|
7371
7391
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7372
7392
|
return (jsxs$1(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7373
7393
|
};
|
|
7374
|
-
var templateObject_1$
|
|
7394
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
7375
7395
|
|
|
7376
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7377
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7378
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7396
|
+
var SectionContent = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
7397
|
+
var Header$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7398
|
+
var MobileHeader = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7379
7399
|
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7380
7400
|
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7381
7401
|
var FilterLink = newStyled.a(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
@@ -7383,7 +7403,7 @@ var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i =
|
|
|
7383
7403
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7384
7404
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7385
7405
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7386
|
-
var templateObject_1$
|
|
7406
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7387
7407
|
|
|
7388
7408
|
var getStylesBySize$a = function (size, theme) {
|
|
7389
7409
|
switch (size) {
|
|
@@ -7448,9 +7468,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7448
7468
|
} }), id: id }, void 0));
|
|
7449
7469
|
};
|
|
7450
7470
|
|
|
7451
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7452
|
-
var LI = newStyled.li(templateObject_2$
|
|
7453
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7471
|
+
var UL = newStyled.ul(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7472
|
+
var LI = newStyled.li(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7473
|
+
var CloseIconContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7454
7474
|
var Tags = function (_a) {
|
|
7455
7475
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7456
7476
|
var theme = useTheme();
|
|
@@ -7458,7 +7478,7 @@ var Tags = function (_a) {
|
|
|
7458
7478
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7459
7479
|
}) }), void 0));
|
|
7460
7480
|
};
|
|
7461
|
-
var templateObject_1$
|
|
7481
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7462
7482
|
|
|
7463
7483
|
var Filters = function (_a) {
|
|
7464
7484
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7594,8 +7614,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7594
7614
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7595
7615
|
};
|
|
7596
7616
|
|
|
7597
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7598
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7617
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7618
|
+
var Container$S = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7599
7619
|
var FitGuarantee = function (_a) {
|
|
7600
7620
|
var _b;
|
|
7601
7621
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7613,10 +7633,10 @@ var FitGuarantee = function (_a) {
|
|
|
7613
7633
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7614
7634
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7615
7635
|
};
|
|
7616
|
-
var templateObject_1$
|
|
7636
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7617
7637
|
|
|
7618
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7619
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7638
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7639
|
+
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7620
7640
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7621
7641
|
border: 'none',
|
|
7622
7642
|
background: 'transparent',
|
|
@@ -7631,7 +7651,7 @@ var FitPredictor = function (_a) {
|
|
|
7631
7651
|
var theme = useTheme();
|
|
7632
7652
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7633
7653
|
};
|
|
7634
|
-
var templateObject_1$
|
|
7654
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7635
7655
|
|
|
7636
7656
|
var Button$7 = newStyled.button(function () { return ({
|
|
7637
7657
|
background: 'transparent',
|
|
@@ -11875,14 +11895,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11875
11895
|
return Slider;
|
|
11876
11896
|
}(React__default.Component);
|
|
11877
11897
|
|
|
11878
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11898
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11879
11899
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11880
11900
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11881
11901
|
}, function (_a) {
|
|
11882
11902
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11883
11903
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11884
11904
|
});
|
|
11885
|
-
var templateObject_1$
|
|
11905
|
+
var templateObject_1$18;
|
|
11886
11906
|
|
|
11887
11907
|
var getStylesBySize$9 = function (size) {
|
|
11888
11908
|
// rem units
|
|
@@ -11941,7 +11961,7 @@ var SliderNavigation = function (_a) {
|
|
|
11941
11961
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11942
11962
|
};
|
|
11943
11963
|
|
|
11944
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11964
|
+
var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11945
11965
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11946
11966
|
return borderRadiusVariant &&
|
|
11947
11967
|
"\n border-radius: 20px;\n ";
|
|
@@ -11959,7 +11979,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
11959
11979
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11960
11980
|
: 'inherit';
|
|
11961
11981
|
});
|
|
11962
|
-
var templateObject_1$
|
|
11982
|
+
var templateObject_1$17;
|
|
11963
11983
|
|
|
11964
11984
|
var ImageSmallPreview = function (_a) {
|
|
11965
11985
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
@@ -11967,9 +11987,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11967
11987
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11968
11988
|
};
|
|
11969
11989
|
|
|
11970
|
-
var horizontalStyles = css(templateObject_1$
|
|
11971
|
-
var verticalStyles = css(templateObject_2$
|
|
11972
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11990
|
+
var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11991
|
+
var verticalStyles = css(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11992
|
+
var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11973
11993
|
var position = _a.position;
|
|
11974
11994
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11975
11995
|
}, function (_a) {
|
|
@@ -11982,7 +12002,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o =
|
|
|
11982
12002
|
var ArrowBaseStyles = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11983
12003
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11984
12004
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11985
|
-
var templateObject_1$
|
|
12005
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
11986
12006
|
|
|
11987
12007
|
var ImagePreviewList = function (_a) {
|
|
11988
12008
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -12001,22 +12021,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12001
12021
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12002
12022
|
};
|
|
12003
12023
|
|
|
12004
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12005
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12006
|
-
var templateObject_1$
|
|
12024
|
+
var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12025
|
+
var ProgressFiller = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12026
|
+
var templateObject_1$15, templateObject_2$O;
|
|
12007
12027
|
|
|
12008
12028
|
var ProgressBar$1 = function (_a) {
|
|
12009
12029
|
var progress = _a.progress, hide = _a.hide;
|
|
12010
12030
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12011
12031
|
};
|
|
12012
12032
|
|
|
12013
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
12014
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12015
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12033
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12034
|
+
var HTMLVideo = newStyled.video(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12035
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12016
12036
|
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12017
12037
|
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12018
12038
|
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12019
|
-
var templateObject_1$
|
|
12039
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12020
12040
|
|
|
12021
12041
|
var Video$1 = function (_a) {
|
|
12022
12042
|
var _b, _c, _d, _e;
|
|
@@ -13656,18 +13676,18 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13656
13676
|
afterZoomOut: PropTypes.func
|
|
13657
13677
|
} : {};
|
|
13658
13678
|
|
|
13659
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13679
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13660
13680
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13661
13681
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13662
13682
|
});
|
|
13663
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13683
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13664
13684
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13665
13685
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13666
13686
|
}, function (_a) {
|
|
13667
13687
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13668
13688
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13669
13689
|
});
|
|
13670
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13690
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13671
13691
|
var isCTAHidden = _a.isCTAHidden;
|
|
13672
13692
|
return (isCTAHidden ? '60px' : '120px');
|
|
13673
13693
|
});
|
|
@@ -13681,7 +13701,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (temp
|
|
|
13681
13701
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13682
13702
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13683
13703
|
});
|
|
13684
|
-
var templateObject_1$
|
|
13704
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13685
13705
|
|
|
13686
13706
|
var ImageProductSlide$1 = function (_a) {
|
|
13687
13707
|
var _b;
|
|
@@ -13694,8 +13714,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13694
13714
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13695
13715
|
};
|
|
13696
13716
|
|
|
13697
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13698
|
-
var templateObject_1$
|
|
13717
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13718
|
+
var templateObject_1$12;
|
|
13699
13719
|
|
|
13700
13720
|
var getInitialIndex = function (images, selectedValue) {
|
|
13701
13721
|
if (selectedValue) {
|
|
@@ -13743,7 +13763,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13743
13763
|
};
|
|
13744
13764
|
}
|
|
13745
13765
|
};
|
|
13746
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13766
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13747
13767
|
var backgroundColor = _a.backgroundColor;
|
|
13748
13768
|
return backgroundColor;
|
|
13749
13769
|
}, function (_a) {
|
|
@@ -13773,9 +13793,9 @@ var IconButton = function (_a) {
|
|
|
13773
13793
|
var theme = useTheme();
|
|
13774
13794
|
return (jsx$1(Container$M, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13775
13795
|
};
|
|
13776
|
-
var templateObject_1$
|
|
13796
|
+
var templateObject_1$11;
|
|
13777
13797
|
|
|
13778
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13798
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13779
13799
|
var AmazonButton = function (_a) {
|
|
13780
13800
|
var onClick = _a.onClick;
|
|
13781
13801
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13784,7 +13804,7 @@ var PaypalButton = function (_a) {
|
|
|
13784
13804
|
var onClick = _a.onClick;
|
|
13785
13805
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13786
13806
|
};
|
|
13787
|
-
var templateObject_1$
|
|
13807
|
+
var templateObject_1$10;
|
|
13788
13808
|
|
|
13789
13809
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13790
13810
|
height: 'auto',
|
|
@@ -13839,9 +13859,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13839
13859
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13840
13860
|
};
|
|
13841
13861
|
|
|
13842
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13843
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13844
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13862
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13863
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13864
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13845
13865
|
var titlePosition = _a.titlePosition;
|
|
13846
13866
|
return titlePosition == 'center' &&
|
|
13847
13867
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13851,13 +13871,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13851
13871
|
var isMobile = useWindowDimensions().isMobile;
|
|
13852
13872
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13853
13873
|
};
|
|
13854
|
-
var templateObject_1
|
|
13874
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13855
13875
|
|
|
13856
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13876
|
+
var Label$3 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13857
13877
|
var color = _a.color;
|
|
13858
13878
|
return color;
|
|
13859
13879
|
});
|
|
13860
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13880
|
+
var MandatoryIcon = newStyled.span(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13861
13881
|
var color = _a.color;
|
|
13862
13882
|
return color;
|
|
13863
13883
|
});
|
|
@@ -13866,7 +13886,7 @@ var InputLabel = function (_a) {
|
|
|
13866
13886
|
var theme = useTheme();
|
|
13867
13887
|
return (jsxs$1(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13868
13888
|
};
|
|
13869
|
-
var templateObject_1
|
|
13889
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13870
13890
|
|
|
13871
13891
|
var containerByStatus = function (theme, status) {
|
|
13872
13892
|
if (status === InputValidationType.Valid)
|
|
@@ -13875,12 +13895,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13875
13895
|
return theme.colors.semantic.urgent.color;
|
|
13876
13896
|
return '';
|
|
13877
13897
|
};
|
|
13878
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13898
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13879
13899
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13880
13900
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13881
13901
|
});
|
|
13882
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13883
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13902
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13903
|
+
var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13884
13904
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13885
13905
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13886
13906
|
}, function (_a) {
|
|
@@ -13935,7 +13955,7 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13935
13955
|
return hasValue &&
|
|
13936
13956
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13937
13957
|
});
|
|
13938
|
-
var InputWrapper
|
|
13958
|
+
var InputWrapper = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13939
13959
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13940
13960
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13941
13961
|
});
|
|
@@ -13953,7 +13973,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
13953
13973
|
return theme.component.input.lineHeight;
|
|
13954
13974
|
});
|
|
13955
13975
|
var ClearInput = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13956
|
-
var templateObject_1$
|
|
13976
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13957
13977
|
|
|
13958
13978
|
var BaseInput = function (_a) {
|
|
13959
13979
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13976,7 +13996,7 @@ var BaseInput = function (_a) {
|
|
|
13976
13996
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13977
13997
|
}, [status]);
|
|
13978
13998
|
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
|
|
13999
|
+
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13980
14000
|
onChange(event.target.value, event);
|
|
13981
14001
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13982
14002
|
onChange('', { target: { value: '' } });
|
|
@@ -13997,11 +14017,11 @@ var Button$5 = function (_a) {
|
|
|
13997
14017
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13998
14018
|
};
|
|
13999
14019
|
|
|
14000
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14020
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14001
14021
|
var theme = _a.theme;
|
|
14002
14022
|
return theme.component.inputCustom.input.borderRadius;
|
|
14003
14023
|
});
|
|
14004
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14024
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14005
14025
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14006
14026
|
return defaultRounded
|
|
14007
14027
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14018,21 +14038,21 @@ var Custom = function (_a) {
|
|
|
14018
14038
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14019
14039
|
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14020
14040
|
};
|
|
14021
|
-
var templateObject_1$
|
|
14041
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14022
14042
|
|
|
14023
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14043
|
+
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14024
14044
|
var size = _a.size;
|
|
14025
14045
|
return (size === 'small' ? '36px' : '');
|
|
14026
14046
|
});
|
|
14027
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14028
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14047
|
+
var SuccessMessage = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14048
|
+
var SuccessText = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14029
14049
|
var Success = function (_a) {
|
|
14030
14050
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14031
14051
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14032
14052
|
};
|
|
14033
|
-
var templateObject_1$
|
|
14053
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14034
14054
|
|
|
14035
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14055
|
+
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14036
14056
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14037
14057
|
return status === InputValidationType.Empty &&
|
|
14038
14058
|
type === 'primary' &&
|
|
@@ -14049,16 +14069,16 @@ var BasePlusButton = function (_a) {
|
|
|
14049
14069
|
}
|
|
14050
14070
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14051
14071
|
};
|
|
14052
|
-
var templateObject_1$
|
|
14072
|
+
var templateObject_1$W;
|
|
14053
14073
|
|
|
14054
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14055
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14074
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14075
|
+
var IconContainer$2 = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14056
14076
|
var BasePlusIcon = function (_a) {
|
|
14057
14077
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14058
14078
|
var theme = useTheme();
|
|
14059
14079
|
return (jsx$1(Container$H, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14060
14080
|
};
|
|
14061
|
-
var templateObject_1$
|
|
14081
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14062
14082
|
|
|
14063
14083
|
var Input$3 = {
|
|
14064
14084
|
Simple: BaseInput,
|
|
@@ -14103,7 +14123,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14103
14123
|
}, [preventTouch, ref, touchStart]);
|
|
14104
14124
|
}
|
|
14105
14125
|
|
|
14106
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14126
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14107
14127
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14108
14128
|
return borderRadiusVariant &&
|
|
14109
14129
|
"\n border-radius: 40px;\n ";
|
|
@@ -14112,8 +14132,8 @@ var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14112
14132
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14113
14133
|
});
|
|
14114
14134
|
// max-height: 31.875rem;
|
|
14115
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14116
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14135
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14136
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14117
14137
|
var BottomTagContainer$5 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14118
14138
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14119
14139
|
var Button$4 = newStyled.button(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
@@ -14175,16 +14195,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14175
14195
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14176
14196
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14177
14197
|
};
|
|
14178
|
-
var templateObject_1$
|
|
14198
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14179
14199
|
|
|
14180
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14200
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14181
14201
|
var ProductGalleryMobile = function (_a) {
|
|
14182
14202
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14183
14203
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14184
14204
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14185
14205
|
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14186
14206
|
};
|
|
14187
|
-
var templateObject_1$
|
|
14207
|
+
var templateObject_1$T;
|
|
14188
14208
|
|
|
14189
14209
|
function _extends() {
|
|
14190
14210
|
_extends = Object.assign || function (target) {
|
|
@@ -14451,14 +14471,14 @@ function useSwipeable(options) {
|
|
|
14451
14471
|
return handlers;
|
|
14452
14472
|
}
|
|
14453
14473
|
|
|
14454
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14474
|
+
var Button$3 = newStyled.button(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14455
14475
|
var ArrowButton = function (_a) {
|
|
14456
14476
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14457
14477
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14458
14478
|
};
|
|
14459
|
-
var templateObject_1$
|
|
14479
|
+
var templateObject_1$S;
|
|
14460
14480
|
|
|
14461
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14481
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14462
14482
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14463
14483
|
var SlideDots = function (_a) {
|
|
14464
14484
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14467,11 +14487,11 @@ var SlideDots = function (_a) {
|
|
|
14467
14487
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14468
14488
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14469
14489
|
};
|
|
14470
|
-
var templateObject_1$
|
|
14490
|
+
var templateObject_1$R;
|
|
14471
14491
|
|
|
14472
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14473
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14474
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14492
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14493
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14494
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14475
14495
|
var SlideNavigation = function (_a) {
|
|
14476
14496
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14477
14497
|
var theme = useTheme();
|
|
@@ -14483,23 +14503,23 @@ var SlideNavigation = function (_a) {
|
|
|
14483
14503
|
onNavigate(selectedIndex + 1);
|
|
14484
14504
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14485
14505
|
};
|
|
14486
|
-
var templateObject_1$
|
|
14506
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14487
14507
|
|
|
14488
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14508
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14489
14509
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14490
14510
|
return borderRadiusVariant &&
|
|
14491
14511
|
"\n border-radius: 40px;\n ";
|
|
14492
14512
|
});
|
|
14493
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14494
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14513
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14514
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14495
14515
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14496
14516
|
var _b, _c;
|
|
14497
14517
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14498
14518
|
return (jsxs$1(Container$D, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14499
14519
|
});
|
|
14500
|
-
var templateObject_1$
|
|
14520
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14501
14521
|
|
|
14502
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14522
|
+
var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14503
14523
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14504
14524
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14505
14525
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14523,9 +14543,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14523
14543
|
}, [index, images]);
|
|
14524
14544
|
return (jsxs$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14525
14545
|
};
|
|
14526
|
-
var templateObject_1$
|
|
14546
|
+
var templateObject_1$O;
|
|
14527
14547
|
|
|
14528
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14548
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14529
14549
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14530
14550
|
return borderRadiusVariant &&
|
|
14531
14551
|
"\n border-radius: 40px;\n ";
|
|
@@ -14534,8 +14554,8 @@ var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14534
14554
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14535
14555
|
});
|
|
14536
14556
|
// max-height: 31.875rem;
|
|
14537
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14538
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14557
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14558
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14539
14559
|
var VideoOverlay$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14540
14560
|
var Video = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14541
14561
|
var VideoTag = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
@@ -14599,14 +14619,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14599
14619
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14600
14620
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14601
14621
|
};
|
|
14602
|
-
var templateObject_1$
|
|
14622
|
+
var templateObject_1$N, templateObject_2$C, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7;
|
|
14603
14623
|
|
|
14604
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14624
|
+
var Container$A = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14605
14625
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14606
14626
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14607
14627
|
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14608
14628
|
};
|
|
14609
|
-
var templateObject_1$
|
|
14629
|
+
var templateObject_1$M;
|
|
14610
14630
|
|
|
14611
14631
|
var __defProp$1 = Object.defineProperty;
|
|
14612
14632
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14739,12 +14759,12 @@ var Portal = function (_a) {
|
|
|
14739
14759
|
var visibleStyle = function (_a) {
|
|
14740
14760
|
var opened = _a.opened;
|
|
14741
14761
|
return opened
|
|
14742
|
-
? css(templateObject_1$
|
|
14762
|
+
? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14743
14763
|
};
|
|
14744
14764
|
var transformStyle = function (_a) {
|
|
14745
14765
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14746
14766
|
return opened
|
|
14747
|
-
? css(templateObject_3$
|
|
14767
|
+
? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14748
14768
|
};
|
|
14749
14769
|
var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14750
14770
|
var width = _a.width;
|
|
@@ -14794,9 +14814,9 @@ var useModal = function (id) {
|
|
|
14794
14814
|
close: close,
|
|
14795
14815
|
}); }, [close, open, opened]);
|
|
14796
14816
|
};
|
|
14797
|
-
var templateObject_1$
|
|
14817
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14798
14818
|
|
|
14799
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14819
|
+
var Bar$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14800
14820
|
var height = _a.height;
|
|
14801
14821
|
return height || '0.5rem';
|
|
14802
14822
|
}, function (_a) {
|
|
@@ -14868,19 +14888,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14868
14888
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14869
14889
|
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14870
14890
|
};
|
|
14871
|
-
var templateObject_1$
|
|
14891
|
+
var templateObject_1$K;
|
|
14872
14892
|
|
|
14873
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14893
|
+
var Container$x = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14874
14894
|
var theme = _a.theme;
|
|
14875
14895
|
return theme.component.orderBar.backgroundColor;
|
|
14876
14896
|
});
|
|
14877
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14897
|
+
var H1 = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14878
14898
|
var OrderBar = function (_a) {
|
|
14879
14899
|
var message = _a.message, color = _a.color;
|
|
14880
14900
|
var theme = useTheme();
|
|
14881
14901
|
return (jsxs$1(Container$x, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14882
14902
|
};
|
|
14883
|
-
var templateObject_1$
|
|
14903
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14884
14904
|
|
|
14885
14905
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14886
14906
|
background: props.bgColor,
|
|
@@ -14904,15 +14924,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14904
14924
|
justifyContent: 'center',
|
|
14905
14925
|
gap: '10px',
|
|
14906
14926
|
});
|
|
14907
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14927
|
+
var StyledContent = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14908
14928
|
var bgColor = _a.bgColor;
|
|
14909
14929
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14910
14930
|
}, function (_a) {
|
|
14911
14931
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14912
14932
|
return width;
|
|
14913
14933
|
});
|
|
14914
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14915
|
-
var templateObject_1$
|
|
14934
|
+
var StyledController = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
14935
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14916
14936
|
|
|
14917
14937
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14918
14938
|
var background = _a.background, width = _a.width;
|
|
@@ -18732,9 +18752,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18732
18752
|
HTMLReactParser$1.attributesToProps;
|
|
18733
18753
|
HTMLReactParser$1.Element;
|
|
18734
18754
|
|
|
18735
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18736
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18737
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18755
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18756
|
+
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18757
|
+
var Tag$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18738
18758
|
var Label$2 = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18739
18759
|
var Check = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18740
18760
|
var IconContainer$1 = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
@@ -18769,11 +18789,11 @@ var PackCard = function (_a) {
|
|
|
18769
18789
|
currency: currencyCode || 'USD',
|
|
18770
18790
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18771
18791
|
};
|
|
18772
|
-
var templateObject_1$
|
|
18792
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$d, templateObject_8$a;
|
|
18773
18793
|
|
|
18774
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18775
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18776
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18794
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18795
|
+
var IconContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18796
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18777
18797
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18778
18798
|
}));
|
|
18779
18799
|
var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
@@ -18793,7 +18813,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18793
18813
|
var background = _a.background;
|
|
18794
18814
|
return background || 'unset';
|
|
18795
18815
|
});
|
|
18796
|
-
var templateObject_1$
|
|
18816
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$n;
|
|
18797
18817
|
|
|
18798
18818
|
var Pagination = function (_a) {
|
|
18799
18819
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18858,7 +18878,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18858
18878
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18859
18879
|
};
|
|
18860
18880
|
|
|
18861
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18881
|
+
var Container$u = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18862
18882
|
var width = _a.width;
|
|
18863
18883
|
return width;
|
|
18864
18884
|
}, function (_a) {
|
|
@@ -18876,12 +18896,12 @@ var PaymentMethod = function (_a) {
|
|
|
18876
18896
|
var theme = useTheme();
|
|
18877
18897
|
return (jsx$1(Container$u, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18878
18898
|
};
|
|
18879
|
-
var templateObject_1$
|
|
18899
|
+
var templateObject_1$F;
|
|
18880
18900
|
|
|
18881
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18901
|
+
var Container$t = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18882
18902
|
var IMAGE_WIDTH = '63px';
|
|
18883
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18884
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18903
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18904
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18885
18905
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18886
18906
|
}), IMAGE_WIDTH);
|
|
18887
18907
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18921,7 +18941,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18921
18941
|
var theme = useTheme();
|
|
18922
18942
|
return (jsxs$1(Container$t, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18923
18943
|
};
|
|
18924
|
-
var templateObject_1$
|
|
18944
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18925
18945
|
|
|
18926
18946
|
var P$1 = newStyled.p(function (_a) {
|
|
18927
18947
|
var color = _a.color;
|
|
@@ -18935,7 +18955,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18935
18955
|
margin: '0.938rem 4.188rem',
|
|
18936
18956
|
});
|
|
18937
18957
|
});
|
|
18938
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18958
|
+
var Bar = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18939
18959
|
var height = _a.height;
|
|
18940
18960
|
return height || '0.5rem';
|
|
18941
18961
|
}, function (_a) {
|
|
@@ -18980,11 +19000,11 @@ var ProgressBar = function (_a) {
|
|
|
18980
19000
|
var theme = useTheme();
|
|
18981
19001
|
return (jsxs$1(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18982
19002
|
};
|
|
18983
|
-
var templateObject_1$
|
|
19003
|
+
var templateObject_1$D;
|
|
18984
19004
|
|
|
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$
|
|
19005
|
+
var Container$r = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19006
|
+
var Item$1 = newStyled.span(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19007
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18988
19008
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18989
19009
|
var QuantityPicker = function (_a) {
|
|
18990
19010
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
@@ -19010,7 +19030,7 @@ var QuantityPicker = function (_a) {
|
|
|
19010
19030
|
}, [value, clamp]);
|
|
19011
19031
|
return (jsxs$1(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19012
19032
|
};
|
|
19013
|
-
var templateObject_1$
|
|
19033
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$l;
|
|
19014
19034
|
|
|
19015
19035
|
/* base styles & size variants */
|
|
19016
19036
|
var CustomRadioStyles$1 = {
|
|
@@ -19079,9 +19099,9 @@ var ContainerStyles$1 = {
|
|
|
19079
19099
|
},
|
|
19080
19100
|
};
|
|
19081
19101
|
|
|
19082
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19102
|
+
var Wrapper$3 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19083
19103
|
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$
|
|
19104
|
+
var Input$2 = newStyled.input(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19085
19105
|
var disabled = _a.disabled;
|
|
19086
19106
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19087
19107
|
});
|
|
@@ -19089,7 +19109,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19089
19109
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19090
19110
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19091
19111
|
]; });
|
|
19092
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19112
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19093
19113
|
var RadioPrimary = function (_a) {
|
|
19094
19114
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19095
19115
|
var theme = useTheme();
|
|
@@ -19099,7 +19119,7 @@ var RadioPrimary = function (_a) {
|
|
|
19099
19119
|
};
|
|
19100
19120
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19101
19121
|
};
|
|
19102
|
-
var templateObject_1$
|
|
19122
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19103
19123
|
|
|
19104
19124
|
var RadioGroupInput = function (_a) {
|
|
19105
19125
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19178,9 +19198,9 @@ var ContainerStyles = {
|
|
|
19178
19198
|
},
|
|
19179
19199
|
};
|
|
19180
19200
|
|
|
19181
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19201
|
+
var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19182
19202
|
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$
|
|
19203
|
+
var Input$1 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19184
19204
|
var disabled = _a.disabled;
|
|
19185
19205
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19186
19206
|
});
|
|
@@ -19188,7 +19208,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19188
19208
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19189
19209
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19190
19210
|
]; });
|
|
19191
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19211
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19192
19212
|
var theme = _a.theme;
|
|
19193
19213
|
return theme.component.radio.textSize;
|
|
19194
19214
|
}, function (_a) {
|
|
@@ -19204,7 +19224,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19204
19224
|
};
|
|
19205
19225
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19206
19226
|
};
|
|
19207
|
-
var templateObject_1$
|
|
19227
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19208
19228
|
|
|
19209
19229
|
var ClubRadioGroupInput = function (_a) {
|
|
19210
19230
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19232,9 +19252,9 @@ function formatDate(date, format) {
|
|
|
19232
19252
|
}
|
|
19233
19253
|
}
|
|
19234
19254
|
|
|
19235
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19236
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19237
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19255
|
+
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19256
|
+
var Content$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19257
|
+
var StarsContent = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19238
19258
|
var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19239
19259
|
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19240
19260
|
var ReviewerName$1 = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
@@ -19273,13 +19293,13 @@ var Review$1 = function (_a) {
|
|
|
19273
19293
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19274
19294
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19275
19295
|
};
|
|
19276
|
-
var templateObject_1$
|
|
19296
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19277
19297
|
|
|
19278
19298
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19279
19299
|
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$
|
|
19300
|
+
var Container$n = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19301
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19302
|
+
var Content = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19283
19303
|
var ReviewContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19284
19304
|
var DateText = newStyled.span(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19285
19305
|
var VariantText = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -19329,11 +19349,11 @@ var Review = function (_a) {
|
|
|
19329
19349
|
: description,
|
|
19330
19350
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19331
19351
|
};
|
|
19332
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19333
19353
|
|
|
19334
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19335
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19336
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19354
|
+
var Container$m = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19355
|
+
var ReviewsContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19356
|
+
var ReviewsCount = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19337
19357
|
var ReviewsStars = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19338
19358
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19339
19359
|
var ReviewsImages = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
@@ -19347,17 +19367,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19347
19367
|
var theme = useTheme();
|
|
19348
19368
|
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19349
19369
|
};
|
|
19350
|
-
var templateObject_1$
|
|
19370
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19351
19371
|
|
|
19352
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19353
|
-
var Text = newStyled.p(templateObject_2$
|
|
19372
|
+
var Container$l = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19373
|
+
var Text = newStyled.p(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19354
19374
|
var ScrollToTop = function (_a) {
|
|
19355
19375
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19356
19376
|
var theme = useTheme();
|
|
19357
19377
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19358
19378
|
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19359
19379
|
};
|
|
19360
|
-
var templateObject_1$
|
|
19380
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19361
19381
|
|
|
19362
19382
|
var Input = newStyled.input(function (props) { return ({
|
|
19363
19383
|
padding: props.theme.component.input.padding,
|
|
@@ -19388,7 +19408,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19388
19408
|
},
|
|
19389
19409
|
}); });
|
|
19390
19410
|
|
|
19391
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19411
|
+
var Container$k = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19392
19412
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19393
19413
|
}));
|
|
19394
19414
|
var Description = newStyled.div({
|
|
@@ -19407,7 +19427,7 @@ var ProductItem = function (_a) {
|
|
|
19407
19427
|
var theme = useTheme();
|
|
19408
19428
|
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19409
19429
|
};
|
|
19410
|
-
var templateObject_1$
|
|
19430
|
+
var templateObject_1$v;
|
|
19411
19431
|
|
|
19412
19432
|
var Container$j = newStyled.div({
|
|
19413
19433
|
display: 'flex',
|
|
@@ -19423,7 +19443,7 @@ var Ul = newStyled.ul({
|
|
|
19423
19443
|
margin: '0px',
|
|
19424
19444
|
padding: '0px',
|
|
19425
19445
|
});
|
|
19426
|
-
var Li = newStyled.li(templateObject_1$
|
|
19446
|
+
var Li = newStyled.li(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19427
19447
|
padding: [0, '0rem 1rem'],
|
|
19428
19448
|
borderRadius: [0, '0.5rem'],
|
|
19429
19449
|
}));
|
|
@@ -19435,12 +19455,12 @@ var Anchor = newStyled.a({
|
|
|
19435
19455
|
padding: 0,
|
|
19436
19456
|
textDecoration: 'none',
|
|
19437
19457
|
});
|
|
19438
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19458
|
+
var Container$i = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19439
19459
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19440
19460
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19441
19461
|
borderRadius: ['0', '0.5rem'],
|
|
19442
19462
|
}));
|
|
19443
|
-
var Header = newStyled.div(templateObject_3$
|
|
19463
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19444
19464
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19445
19465
|
}));
|
|
19446
19466
|
var ResultsPanel = function (_a) {
|
|
@@ -19448,9 +19468,9 @@ var ResultsPanel = function (_a) {
|
|
|
19448
19468
|
var theme = useTheme();
|
|
19449
19469
|
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19450
19470
|
};
|
|
19451
|
-
var templateObject_1$
|
|
19471
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19452
19472
|
|
|
19453
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19473
|
+
var Button$1 = newStyled.button(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19454
19474
|
right: ['1rem', '7.75rem'],
|
|
19455
19475
|
top: ['0.75rem', '0.75rem'],
|
|
19456
19476
|
}));
|
|
@@ -19459,7 +19479,7 @@ var ClearButton = function (_a) {
|
|
|
19459
19479
|
var theme = useTheme();
|
|
19460
19480
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19461
19481
|
};
|
|
19462
|
-
var templateObject_1$
|
|
19482
|
+
var templateObject_1$t;
|
|
19463
19483
|
|
|
19464
19484
|
var SearchIconContainer = newStyled.div({
|
|
19465
19485
|
display: 'flex',
|
|
@@ -19469,7 +19489,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19469
19489
|
background: 'white',
|
|
19470
19490
|
alignSelf: 'center',
|
|
19471
19491
|
});
|
|
19472
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19492
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19473
19493
|
var SearchControl = function (_a) {
|
|
19474
19494
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19475
19495
|
var theme = useTheme();
|
|
@@ -19485,7 +19505,7 @@ var SearchControl = function (_a) {
|
|
|
19485
19505
|
}
|
|
19486
19506
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19487
19507
|
};
|
|
19488
|
-
var templateObject_1$
|
|
19508
|
+
var templateObject_1$s;
|
|
19489
19509
|
|
|
19490
19510
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19491
19511
|
var reducer = function (state, action) {
|
|
@@ -19552,9 +19572,9 @@ var SearchBar = function (_a) {
|
|
|
19552
19572
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19553
19573
|
};
|
|
19554
19574
|
|
|
19555
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19556
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19557
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19575
|
+
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19576
|
+
var BackArrow = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19577
|
+
var BoldSpan = newStyled.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19558
19578
|
var NormalSpan = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19559
19579
|
var SearchNavigationParents = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19560
19580
|
var SearchNavigation = function (_a) {
|
|
@@ -19563,9 +19583,9 @@ var SearchNavigation = function (_a) {
|
|
|
19563
19583
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19564
19584
|
}) }, void 0)] }, void 0));
|
|
19565
19585
|
};
|
|
19566
|
-
var templateObject_1$
|
|
19586
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19567
19587
|
|
|
19568
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19588
|
+
var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19569
19589
|
var alignCenter = _a.alignCenter;
|
|
19570
19590
|
return alignCenter &&
|
|
19571
19591
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19575,18 +19595,18 @@ var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __ma
|
|
|
19575
19595
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19576
19596
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19577
19597
|
});
|
|
19578
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19579
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19598
|
+
var TitleText = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19599
|
+
var BannerText = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19580
19600
|
var ShortBanner = function (_a) {
|
|
19581
19601
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19582
19602
|
var theme = useTheme();
|
|
19583
19603
|
return (jsxs$1(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19584
19604
|
};
|
|
19585
|
-
var templateObject_1$
|
|
19605
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19586
19606
|
|
|
19587
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19588
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19589
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19607
|
+
var TableElement$2 = newStyled.table(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19608
|
+
var TableCell$2 = newStyled.td(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19609
|
+
var TableHead$2 = newStyled.th(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19590
19610
|
var Label$1 = newStyled('div')(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19591
19611
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19592
19612
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
@@ -19594,7 +19614,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19594
19614
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19595
19615
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19596
19616
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19597
|
-
var templateObject_1$
|
|
19617
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19598
19618
|
|
|
19599
19619
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19600
19620
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19635,16 +19655,16 @@ var SizeChartTable = function (_a) {
|
|
|
19635
19655
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19636
19656
|
};
|
|
19637
19657
|
|
|
19638
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19639
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19640
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19658
|
+
var TableElement$1 = newStyled.table(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19659
|
+
var TableCell$1 = newStyled.td(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19660
|
+
var TableHead$1 = newStyled.th(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19641
19661
|
var TableRow$1 = newStyled.tr(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19642
19662
|
var SizeTable = function (_a) {
|
|
19643
19663
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19644
19664
|
var theme = useTheme();
|
|
19645
19665
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19646
19666
|
};
|
|
19647
|
-
var templateObject_1$
|
|
19667
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
19648
19668
|
|
|
19649
19669
|
var getStylesBySize$7 = function (size) {
|
|
19650
19670
|
switch (size) {
|
|
@@ -19671,7 +19691,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19671
19691
|
} });
|
|
19672
19692
|
};
|
|
19673
19693
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19674
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19694
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19675
19695
|
};
|
|
19676
19696
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19677
19697
|
if (disabled)
|
|
@@ -19687,23 +19707,23 @@ var TextButton = function (_a) {
|
|
|
19687
19707
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19688
19708
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19689
19709
|
};
|
|
19690
|
-
var templateObject_1$
|
|
19710
|
+
var templateObject_1$n;
|
|
19691
19711
|
|
|
19692
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19693
|
-
var P = newStyled.p(templateObject_2$
|
|
19694
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19712
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19713
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19714
|
+
var PercentageSpan = newStyled.span(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19695
19715
|
var SizeFitGuide = function (_a) {
|
|
19696
19716
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19697
19717
|
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19698
19718
|
};
|
|
19699
|
-
var templateObject_1$
|
|
19719
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19700
19720
|
|
|
19701
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19721
|
+
var ButtonsContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19702
19722
|
var inline = _a.inline;
|
|
19703
19723
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19704
19724
|
});
|
|
19705
|
-
var Row = newStyled.div(templateObject_2$
|
|
19706
|
-
var templateObject_1$
|
|
19725
|
+
var Row = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19726
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19707
19727
|
|
|
19708
19728
|
var SizeSelector = function (_a) {
|
|
19709
19729
|
var _b;
|
|
@@ -19725,7 +19745,7 @@ var SizeSelector = function (_a) {
|
|
|
19725
19745
|
}) }), void 0)] }), void 0));
|
|
19726
19746
|
};
|
|
19727
19747
|
|
|
19728
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19748
|
+
var TabContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19729
19749
|
var titleSize = _a.titleSize;
|
|
19730
19750
|
return titleSize;
|
|
19731
19751
|
}, function (_a) {
|
|
@@ -19742,17 +19762,17 @@ var Tab = function (_a) {
|
|
|
19742
19762
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19743
19763
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19744
19764
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19765
|
+
var templateObject_1$k;
|
|
19746
19766
|
|
|
19747
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19748
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19767
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19768
|
+
var TabList = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19749
19769
|
var backgroundColor = _a.backgroundColor;
|
|
19750
19770
|
return backgroundColor;
|
|
19751
19771
|
}, function (_a) {
|
|
19752
19772
|
var borderColor = _a.borderColor;
|
|
19753
19773
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19754
19774
|
});
|
|
19755
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19775
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19756
19776
|
var TabSeparator = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19757
19777
|
var Tabs = function (_a) {
|
|
19758
19778
|
var _b;
|
|
@@ -19764,14 +19784,14 @@ var Tabs = function (_a) {
|
|
|
19764
19784
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19765
19785
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19766
19786
|
};
|
|
19767
|
-
var templateObject_1$
|
|
19787
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$e;
|
|
19768
19788
|
|
|
19769
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19789
|
+
var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19770
19790
|
var Tag = function (_a) {
|
|
19771
19791
|
var text = _a.text, className = _a.className;
|
|
19772
19792
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19773
19793
|
};
|
|
19774
|
-
var templateObject_1$
|
|
19794
|
+
var templateObject_1$i;
|
|
19775
19795
|
|
|
19776
19796
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19777
19797
|
switch (size) {
|
|
@@ -19882,9 +19902,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19882
19902
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19883
19903
|
};
|
|
19884
19904
|
|
|
19885
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19886
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19887
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19905
|
+
var ImageWrapper = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19906
|
+
var VideoOverlay = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19907
|
+
var FullscreenVideo = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19888
19908
|
var ImageVideo = function (_a) {
|
|
19889
19909
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19890
19910
|
var video = useRef(null);
|
|
@@ -19904,11 +19924,11 @@ var ImageVideo = function (_a) {
|
|
|
19904
19924
|
height: '100%',
|
|
19905
19925
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19906
19926
|
};
|
|
19907
|
-
var templateObject_1$
|
|
19927
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19908
19928
|
|
|
19909
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19910
|
-
var ContainerMobile = css(templateObject_2$
|
|
19911
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19929
|
+
var ContainerDesktop = css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19930
|
+
var ContainerMobile = css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19931
|
+
var Container$a = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19912
19932
|
var TextContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19913
19933
|
var TextWithImage = function (_a) {
|
|
19914
19934
|
var _b, _c, _d, _e;
|
|
@@ -19939,17 +19959,17 @@ var TextWithImage = function (_a) {
|
|
|
19939
19959
|
},
|
|
19940
19960
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19941
19961
|
};
|
|
19942
|
-
var templateObject_1$
|
|
19962
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$d;
|
|
19943
19963
|
|
|
19944
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19964
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19945
19965
|
var timerColor = _a.timerColor;
|
|
19946
19966
|
return timerColor || '';
|
|
19947
19967
|
});
|
|
19948
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19968
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19949
19969
|
var timerColor = _a.timerColor;
|
|
19950
19970
|
return timerColor || '';
|
|
19951
19971
|
});
|
|
19952
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19972
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
19953
19973
|
var theme = _a.theme;
|
|
19954
19974
|
return theme.colors.shades.white.color;
|
|
19955
19975
|
}, function (_a) {
|
|
@@ -19957,7 +19977,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __
|
|
|
19957
19977
|
return theme.colors.shades.white.color;
|
|
19958
19978
|
});
|
|
19959
19979
|
var Unit = newStyled.p(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
19960
|
-
var templateObject_1$
|
|
19980
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
19961
19981
|
|
|
19962
19982
|
var HRS = 'HRS';
|
|
19963
19983
|
var MIN = 'MIN';
|
|
@@ -19998,9 +20018,9 @@ var Timer = function (_a) {
|
|
|
19998
20018
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19999
20019
|
};
|
|
20000
20020
|
|
|
20001
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20002
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20003
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20021
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20022
|
+
var GrandTotal = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20023
|
+
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20004
20024
|
var theme = _a.theme;
|
|
20005
20025
|
return theme.component.total.basicTotal.currency.color;
|
|
20006
20026
|
}, function (_a) {
|
|
@@ -20027,7 +20047,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20027
20047
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20028
20048
|
});
|
|
20029
20049
|
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$
|
|
20050
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20031
20051
|
|
|
20032
20052
|
var Total = function (_a) {
|
|
20033
20053
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20035,12 +20055,12 @@ var Total = function (_a) {
|
|
|
20035
20055
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20036
20056
|
};
|
|
20037
20057
|
|
|
20038
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20058
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20039
20059
|
var color = _a.color;
|
|
20040
20060
|
return color;
|
|
20041
20061
|
});
|
|
20042
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20043
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20062
|
+
var ItemContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20063
|
+
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20044
20064
|
var theme = _a.theme;
|
|
20045
20065
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20046
20066
|
}, function (_a) {
|
|
@@ -20060,7 +20080,7 @@ var Subtotal = function (_a) {
|
|
|
20060
20080
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20061
20081
|
})] }), void 0));
|
|
20062
20082
|
};
|
|
20063
|
-
var templateObject_1$
|
|
20083
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
20064
20084
|
|
|
20065
20085
|
var Totals = {
|
|
20066
20086
|
Total: Total,
|
|
@@ -20069,13 +20089,13 @@ var Totals = {
|
|
|
20069
20089
|
|
|
20070
20090
|
var slideInAnimation = function (distanceFromTop) {
|
|
20071
20091
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20072
|
-
return keyframes(templateObject_1$
|
|
20092
|
+
return keyframes(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20073
20093
|
};
|
|
20074
20094
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20075
20095
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20076
|
-
return keyframes(templateObject_2$
|
|
20096
|
+
return keyframes(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20077
20097
|
};
|
|
20078
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20098
|
+
var ToastContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20079
20099
|
var ToastContent = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20080
20100
|
var distanceFromTop = _a.distanceFromTop;
|
|
20081
20101
|
return distanceFromTop || '124px';
|
|
@@ -20094,7 +20114,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20094
20114
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20095
20115
|
});
|
|
20096
20116
|
var CloseIcon = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20097
|
-
var templateObject_1$
|
|
20117
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20098
20118
|
|
|
20099
20119
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20100
20120
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20114,9 +20134,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20114
20134
|
});
|
|
20115
20135
|
Toast.displayName = 'Toast';
|
|
20116
20136
|
|
|
20117
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20118
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20119
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20137
|
+
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20138
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20139
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20120
20140
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20121
20141
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20122
20142
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
@@ -20166,11 +20186,11 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20166
20186
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20167
20187
|
})] }), void 0));
|
|
20168
20188
|
};
|
|
20169
|
-
var templateObject_1$
|
|
20189
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20170
20190
|
|
|
20171
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20172
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20173
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20191
|
+
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20192
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20193
|
+
var CheckpointDate = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20174
20194
|
var CheckpointDateLabel = newStyled.p(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20175
20195
|
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20176
20196
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
@@ -20206,9 +20226,9 @@ var TrackingProgress = function (_a) {
|
|
|
20206
20226
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20207
20227
|
})] }), void 0));
|
|
20208
20228
|
};
|
|
20209
|
-
var templateObject_1$
|
|
20229
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20210
20230
|
|
|
20211
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20231
|
+
var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20212
20232
|
var textPosition = _a.textPosition;
|
|
20213
20233
|
return textPosition;
|
|
20214
20234
|
}, function (_a) {
|
|
@@ -20221,7 +20241,7 @@ var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = _
|
|
|
20221
20241
|
var borderRadius = _a.borderRadius;
|
|
20222
20242
|
return borderRadius || '8px';
|
|
20223
20243
|
});
|
|
20224
|
-
var templateObject_1$
|
|
20244
|
+
var templateObject_1$9;
|
|
20225
20245
|
|
|
20226
20246
|
var getDefaultCountdown = function () {
|
|
20227
20247
|
var tomorrowDate = new Date();
|
|
@@ -20237,7 +20257,7 @@ var HurryUp = function (_a) {
|
|
|
20237
20257
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20238
20258
|
};
|
|
20239
20259
|
|
|
20240
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20260
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20241
20261
|
var size = _a.size;
|
|
20242
20262
|
return (size ? size : '100%');
|
|
20243
20263
|
}, function (_a) {
|
|
@@ -20251,7 +20271,7 @@ var borderSize = {
|
|
|
20251
20271
|
large: '3px',
|
|
20252
20272
|
};
|
|
20253
20273
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20254
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20274
|
+
var StyledSpinner = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20255
20275
|
var size = _a.size;
|
|
20256
20276
|
return borderSize[size];
|
|
20257
20277
|
}, function (_a) {
|
|
@@ -20264,7 +20284,7 @@ var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __
|
|
|
20264
20284
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20265
20285
|
return duration;
|
|
20266
20286
|
});
|
|
20267
|
-
var templateObject_1$
|
|
20287
|
+
var templateObject_1$8, templateObject_2$8;
|
|
20268
20288
|
|
|
20269
20289
|
var Spinner = function (_a) {
|
|
20270
20290
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -20285,9 +20305,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20285
20305
|
var Shades700Color = '#292929';
|
|
20286
20306
|
var PrimaryColor = '#f7a08b';
|
|
20287
20307
|
var ClubBorderColor = '#882a2b';
|
|
20288
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20289
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20290
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20308
|
+
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20309
|
+
var DiscountTag = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20310
|
+
var ContainerBase = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
20291
20311
|
var selected = _a.selected;
|
|
20292
20312
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20293
20313
|
}, function (_a) {
|
|
@@ -20328,7 +20348,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20328
20348
|
: Shades200Color;
|
|
20329
20349
|
});
|
|
20330
20350
|
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$
|
|
20351
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20332
20352
|
|
|
20333
20353
|
var ClubOfferSelector = function (_a) {
|
|
20334
20354
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20374,21 +20394,6 @@ var ClubOfferSelector = function (_a) {
|
|
|
20374
20394
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20375
20395
|
};
|
|
20376
20396
|
|
|
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
20397
|
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20393
20398
|
var $checked = _a.$checked;
|
|
20394
20399
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
@@ -20398,23 +20403,23 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20398
20403
|
});
|
|
20399
20404
|
var CardHeaderWrapper = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20400
20405
|
var CardBody = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20401
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n
|
|
20406
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20402
20407
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20403
20408
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20404
20409
|
|
|
20405
20410
|
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: [
|
|
20411
|
+
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20412
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20408
20413
|
}
|
|
20409
20414
|
|
|
20410
20415
|
function JoinClubCard(_a) {
|
|
20411
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked,
|
|
20416
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20412
20417
|
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20413
20418
|
var handleToggleValue = function (value) {
|
|
20414
20419
|
setChecked(value);
|
|
20415
20420
|
onCheckToggle(value);
|
|
20416
20421
|
};
|
|
20417
|
-
return (jsx$1(Card, __assign$1({ link: link,
|
|
20422
|
+
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20418
20423
|
}
|
|
20419
20424
|
|
|
20420
20425
|
var ImageContainer$1 = newStyled.div(function (_a) {
|