@trafilea/afrodita-components 6.15.4 → 6.16.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 +55 -6
- package/build/index.esm.js +542 -363
- package/build/index.esm.js.map +1 -1
- package/build/index.js +544 -361
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React$2 from 'react';
|
|
3
|
-
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement } from 'react';
|
|
3
|
+
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement, memo } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
@@ -3127,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3127
|
desktop: 1280,
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Container$
|
|
3130
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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) {
|
|
3131
3131
|
var height = _a.height;
|
|
3132
3132
|
return (height ? height : '1.5em');
|
|
3133
3133
|
}, function (_a) {
|
|
@@ -3152,11 +3152,11 @@ var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
3152
3152
|
var SkeletonBox = function (_a) {
|
|
3153
3153
|
var width = _a.width, height = _a.height;
|
|
3154
3154
|
var theme = useTheme();
|
|
3155
|
-
return jsx$1(Container$
|
|
3155
|
+
return jsx$1(Container$1e, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3156
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$1$;
|
|
3158
3158
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1_ || (templateObject_1$1_ = __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) {
|
|
3160
3160
|
var width = _a.width;
|
|
3161
3161
|
return width;
|
|
3162
3162
|
}, function (_a) {
|
|
@@ -3172,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X
|
|
|
3172
3172
|
var opacity = _a.opacity;
|
|
3173
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3174
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1l || (templateObject_2$1l = __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) {
|
|
3176
3176
|
var width = _a.width;
|
|
3177
3177
|
return width;
|
|
3178
3178
|
}, function (_a) {
|
|
@@ -3185,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1i || (templateObject_2$
|
|
|
3185
3185
|
var opacity = _a.opacity;
|
|
3186
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3187
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$1_, templateObject_2$1l;
|
|
3189
3189
|
|
|
3190
3190
|
/* eslint-disable no-undef */
|
|
3191
3191
|
var cache = new Map();
|
|
@@ -3361,16 +3361,16 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
3363
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3364
|
+
var Img = newStyled.img(templateObject_1$1Z || (templateObject_1$1Z = __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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
|
-
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,
|
|
3366
|
+
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"]);
|
|
3367
3367
|
var config = useTheme().config;
|
|
3368
3368
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3369
3369
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3370
3370
|
: src;
|
|
3371
|
-
return (jsx$1(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition
|
|
3371
|
+
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));
|
|
3372
3372
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3373
|
+
var templateObject_1$1Z;
|
|
3374
3374
|
|
|
3375
3375
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3376
3376
|
|
|
@@ -4155,11 +4155,11 @@ function jsxs(type, props, key) {
|
|
|
4155
4155
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4156
4156
|
// `variants` styles that are consistent through all themes.
|
|
4157
4157
|
var TAGS = {
|
|
4158
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4159
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4160
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4161
|
-
display1: newStyled.h1(templateObject_4$
|
|
4162
|
-
display2: newStyled.h2(templateObject_5$
|
|
4158
|
+
hero1: newStyled.h1(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject([""], [""]))),
|
|
4159
|
+
hero2: newStyled.h2(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject([""], [""]))),
|
|
4160
|
+
hero3: newStyled.h3(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject([""], [""]))),
|
|
4161
|
+
display1: newStyled.h1(templateObject_4$M || (templateObject_4$M = __makeTemplateObject([""], [""]))),
|
|
4162
|
+
display2: newStyled.h2(templateObject_5$y || (templateObject_5$y = __makeTemplateObject([""], [""]))),
|
|
4163
4163
|
display3: newStyled.h3(templateObject_6$s || (templateObject_6$s = __makeTemplateObject([""], [""]))),
|
|
4164
4164
|
heading1: newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject([""], [""]))),
|
|
4165
4165
|
heading2: newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4184,7 +4184,7 @@ var Text$7 = function (_a) {
|
|
|
4184
4184
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4185
4185
|
var theme = useTheme();
|
|
4186
4186
|
var Tag = asSpan ? 'span' : TAGS[variant] || 'p';
|
|
4187
|
-
var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, props = __rest(_c, ["size", "weight"]);
|
|
4187
|
+
var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, color = _c.color, props = __rest(_c, ["size", "weight", "color"]);
|
|
4188
4188
|
var commonCSS = useMemo(function () {
|
|
4189
4189
|
var _a, _b;
|
|
4190
4190
|
// These are the common style inside a `variant`.
|
|
@@ -4201,7 +4201,7 @@ var Text$7 = function (_a) {
|
|
|
4201
4201
|
var variantName = [variant, size].filter(Boolean).join('-');
|
|
4202
4202
|
// These are styles specific to `variation-size`.
|
|
4203
4203
|
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
4204
|
-
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4204
|
+
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: color || theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4205
4205
|
if (weight) {
|
|
4206
4206
|
style.fontWeight = theme.typography.config.weight[weight];
|
|
4207
4207
|
}
|
|
@@ -4211,7 +4211,7 @@ var Text$7 = function (_a) {
|
|
|
4211
4211
|
style.color = theme.colors.text.disabled;
|
|
4212
4212
|
}
|
|
4213
4213
|
return style;
|
|
4214
|
-
}, [theme, variant, weight, size, props.disabled]);
|
|
4214
|
+
}, [theme, variant, weight, size, color, props.disabled]);
|
|
4215
4215
|
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
4216
4216
|
var propsHref = props.href;
|
|
4217
4217
|
var href = useMemo(function () {
|
|
@@ -4291,17 +4291,17 @@ var DEFAULTS = {
|
|
|
4291
4291
|
size: 'regular',
|
|
4292
4292
|
},
|
|
4293
4293
|
};
|
|
4294
|
-
var templateObject_1$
|
|
4294
|
+
var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4295
4295
|
|
|
4296
|
-
var Container$
|
|
4297
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4298
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4299
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4300
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4296
|
+
var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
4297
|
+
var Card$3 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
4298
|
+
var Tag$2 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
4299
|
+
var Label$5 = newStyled.div(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
4300
|
+
var Check$1 = newStyled.div(templateObject_5$x || (templateObject_5$x = __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"])));
|
|
4301
4301
|
var DiscountContainer$1 = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
4302
4302
|
var PackSelectorV2 = function (_a) {
|
|
4303
4303
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4304
|
-
return (jsx$1(Container$
|
|
4304
|
+
return (jsx$1(Container$1d, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4305
4305
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4306
4306
|
}) }), void 0));
|
|
4307
4307
|
};
|
|
@@ -4323,27 +4323,27 @@ var PackCard$1 = function (_a) {
|
|
|
4323
4323
|
currency: currencyCode || 'USD',
|
|
4324
4324
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4325
4325
|
};
|
|
4326
|
-
var templateObject_1$
|
|
4326
|
+
var templateObject_1$1X, templateObject_2$1j, templateObject_3$$, templateObject_4$L, templateObject_5$x, templateObject_6$r;
|
|
4327
4327
|
|
|
4328
|
-
var Container$
|
|
4329
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4328
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4329
|
+
var DropContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4330
4330
|
var DropList = function (_a) {
|
|
4331
4331
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4332
|
-
return (jsx$1(Container$
|
|
4332
|
+
return (jsx$1(Container$1c, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4333
4333
|
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));
|
|
4334
4334
|
}) }, void 0));
|
|
4335
4335
|
};
|
|
4336
|
-
var templateObject_1$
|
|
4336
|
+
var templateObject_1$1W, templateObject_2$1i;
|
|
4337
4337
|
|
|
4338
4338
|
var DROPS_TOTAL = 5;
|
|
4339
|
-
var Container$
|
|
4340
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4341
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4339
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4340
|
+
var Title$8 = newStyled.p(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
4341
|
+
var Description$3 = newStyled.p(templateObject_3$_ || (templateObject_3$_ = __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"])));
|
|
4342
4342
|
var AbsorbencyLevel = function (_a) {
|
|
4343
4343
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4344
|
-
return (jsxs$1(Container$
|
|
4344
|
+
return (jsxs$1(Container$1b, { children: [jsx$1(Title$8, { 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));
|
|
4345
4345
|
};
|
|
4346
|
-
var templateObject_1$
|
|
4346
|
+
var templateObject_1$1V, templateObject_2$1h, templateObject_3$_;
|
|
4347
4347
|
|
|
4348
4348
|
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(`
|
|
4349
4349
|
`),"","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(`
|
|
@@ -4414,38 +4414,38 @@ var AccordionDetailsStyles = {
|
|
|
4414
4414
|
},
|
|
4415
4415
|
};
|
|
4416
4416
|
|
|
4417
|
-
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4418
|
-
var StyledButton$
|
|
4417
|
+
var StyledDisclosure$1 = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4418
|
+
var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [
|
|
4419
4419
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4420
4420
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4421
|
-
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4422
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4421
|
+
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4422
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1U || (templateObject_1$1U = __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"])));
|
|
4423
4423
|
var Accordion$1 = function (_a) {
|
|
4424
4424
|
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;
|
|
4425
4425
|
var theme = useTheme();
|
|
4426
|
-
return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4426
|
+
return (jsx$1(StyledDisclosure$1, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4427
4427
|
var open = _a.open;
|
|
4428
4428
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
4429
4429
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
4430
4430
|
var showPanel = openWithForce && !disabled;
|
|
4431
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$
|
|
4431
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$3, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor, controlIconPos: controlIconPos }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, controlIconPos === 'right' && (jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open 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)), controlIconPos === 'bottom' && !(backgroundCover === null || backgroundCover === void 0 ? void 0 : backgroundCover.value) && !showPanel && (jsx$1("div", __assign$1({ className: "openIconBottom", style: {
|
|
4432
4432
|
width: '100%',
|
|
4433
4433
|
display: 'flex',
|
|
4434
4434
|
justifyContent: 'center',
|
|
4435
4435
|
padding: '0 0 15px 0',
|
|
4436
4436
|
backgroundColor: backgroundCover.iconBgColor || 'inherit',
|
|
4437
|
-
} }, { children: jsx$1(ControlIcon, { title: "open 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)), controlIconPos === 'bottom' && showPanel && (jsxs$1(Fragment$2, { children: [jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0), jsx$1("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4437
|
+
} }, { children: jsx$1(ControlIcon, { title: "open 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)), controlIconPos === 'bottom' && showPanel && (jsxs$1(Fragment$2, { children: [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), jsx$1("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4438
4438
|
width: '100%',
|
|
4439
4439
|
display: 'flex',
|
|
4440
4440
|
justifyContent: 'center',
|
|
4441
4441
|
margin: '20px 0',
|
|
4442
4442
|
backgroundColor: 'transparent',
|
|
4443
|
-
} }, { 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, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4443
|
+
} }, { 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));
|
|
4444
4444
|
} }), void 0));
|
|
4445
4445
|
};
|
|
4446
|
-
var templateObject_1$
|
|
4446
|
+
var templateObject_1$1U;
|
|
4447
4447
|
|
|
4448
|
-
var Container$
|
|
4448
|
+
var Container$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4449
4449
|
var AccordionOptions = function (_a) {
|
|
4450
4450
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4451
4451
|
var _b = useState({
|
|
@@ -4458,7 +4458,7 @@ var AccordionOptions = function (_a) {
|
|
|
4458
4458
|
}
|
|
4459
4459
|
return false;
|
|
4460
4460
|
};
|
|
4461
|
-
return (jsx$1(Container$
|
|
4461
|
+
return (jsx$1(Container$1a, { children: accordions.map(function (accordion, index) {
|
|
4462
4462
|
var forceOpenValue = getForceOpen(index);
|
|
4463
4463
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4464
4464
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4469,7 +4469,7 @@ var AccordionOptions = function (_a) {
|
|
|
4469
4469
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4470
4470
|
}) }, void 0));
|
|
4471
4471
|
};
|
|
4472
|
-
var templateObject_1$
|
|
4472
|
+
var templateObject_1$1T;
|
|
4473
4473
|
|
|
4474
4474
|
var CardSectionType;
|
|
4475
4475
|
(function (CardSectionType) {
|
|
@@ -4631,14 +4631,73 @@ var isValidDate = function (value) {
|
|
|
4631
4631
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4632
4632
|
};
|
|
4633
4633
|
|
|
4634
|
-
var
|
|
4635
|
-
var
|
|
4634
|
+
var Bold = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4635
|
+
var FlexContainer$2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
4636
|
+
var templateObject_1$1S, templateObject_2$1g;
|
|
4637
|
+
|
|
4638
|
+
var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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) {
|
|
4639
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4640
|
+
return width;
|
|
4641
|
+
}, function (_a) {
|
|
4642
|
+
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4643
|
+
return height;
|
|
4644
|
+
});
|
|
4645
|
+
var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n margin-bottom: 3px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n margin-bottom: 3px;\n"])));
|
|
4646
|
+
var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 40%;\n height: 100%;\n resize: vertical;\n"], ["\n width: 40%;\n height: 100%;\n resize: vertical;\n"])));
|
|
4647
|
+
var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 60%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 60%;\n height: 100%;\n"])));
|
|
4648
|
+
var FlexStart = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
4649
|
+
var templateObject_1$1R, templateObject_2$1f, templateObject_3$Z, templateObject_4$K, templateObject_5$w;
|
|
4650
|
+
|
|
4651
|
+
var _this$1 = undefined;
|
|
4652
|
+
var Coupon = function (_a) {
|
|
4653
|
+
var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
|
|
4654
|
+
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4655
|
+
var _d = useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
|
|
4656
|
+
var handleCopy = useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4657
|
+
useEffect(function () {
|
|
4658
|
+
setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
|
|
4659
|
+
}, [showCoupon]);
|
|
4660
|
+
return (jsxs$1(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
4661
|
+
name: 'actions/copy_outlined',
|
|
4662
|
+
position: 'right',
|
|
4663
|
+
margin: '10px',
|
|
4664
|
+
}, onClick: handleCopy.bind(_this$1, couponCode !== null && couponCode !== void 0 ? couponCode : '') }, void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi", underline: true, href: offerLink }, { children: "Go to offer" }), void 0)] }, void 0)) }, void 0)] }, void 0)] }), void 0));
|
|
4665
|
+
};
|
|
4666
|
+
|
|
4667
|
+
// Partner titles
|
|
4668
|
+
var REVEL_BEAUTY_TITLE = 'REVEL BEAUTY';
|
|
4669
|
+
var THE_SPA_DR_TITLE = 'THE SPA DR.';
|
|
4670
|
+
// Coupon contents
|
|
4671
|
+
var CouponDefaultBody = function (firstLine, secondLine) { return (jsxs$1(Fragment$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { textAlign: 'initial' } }, { children: firstLine }), void 0), jsx$1(Text$7, __assign$1({ variant: "heading5", weight: "bold" }, { children: secondLine }), void 0)] }, void 0)); };
|
|
4672
|
+
var TheBodConContent = function () { return (jsxs$1(FlexContainer$2, { children: [jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsx$1(Bold, { children: "FREE and PREMIUM" }, void 0), " access to The BodCon Community App."] }), void 0), jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: ["The #1 Body Confidence Community. You'll have ", jsx$1(Bold, { children: "FREE access to:" }, void 0)] }), void 0), jsxs$1("ul", __assign$1({ style: { marginBottom: '5px', padding: '11px' } }, { children: [jsx$1("li", __assign$1({ style: { marginBottom: '5px' } }, { children: jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our confidence series: great courses made by the top influencers in the field, just for you to start your body-confidence journey!" }), void 0) }), void 0), jsx$1("li", { children: jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our more than 1.000 women's community and get-togethers to talk about women's empowerment." }), void 0) }, void 0)] }), void 0), jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsx$1(Bold, { children: "FREE" }, void 0), " access to The BodCon 2023 replays!"] }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Empower yourself and change how you see and feel about your body forever." }), void 0)] }, void 0)); };
|
|
4673
|
+
var cancellationFlowContentPerKey = {
|
|
4674
|
+
'RevelBeauty-1': CouponDefaultBody('Beauty Lift and Tighten Serum', '$10 OFF'),
|
|
4675
|
+
'RevelBeauty-2': CouponDefaultBody('Orders above $50', 'FREE SHIPPING'),
|
|
4676
|
+
'TheSpaDr-1': CouponDefaultBody('Daily Essentials 4-Step Skin Care System', '25% OFF'),
|
|
4677
|
+
'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
|
|
4678
|
+
TheBodCon: TheBodConContent(),
|
|
4679
|
+
};
|
|
4680
|
+
var couponWidth = '90%';
|
|
4681
|
+
var CancellationFlowAccordionContentPerPartner = {
|
|
4682
|
+
RevelBeauty: [
|
|
4683
|
+
jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
|
|
4684
|
+
jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
|
|
4685
|
+
],
|
|
4686
|
+
TheSpaDr: [
|
|
4687
|
+
jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
|
|
4688
|
+
jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
|
|
4689
|
+
],
|
|
4690
|
+
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4691
|
+
};
|
|
4692
|
+
|
|
4693
|
+
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
4694
|
+
var ErrorContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
4636
4695
|
var Error$1 = function (_a) {
|
|
4637
4696
|
var error = _a.error;
|
|
4638
4697
|
var theme = useTheme();
|
|
4639
4698
|
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));
|
|
4640
4699
|
};
|
|
4641
|
-
var templateObject_1$
|
|
4700
|
+
var templateObject_1$1Q, templateObject_2$1e;
|
|
4642
4701
|
|
|
4643
4702
|
var BaseSelectButton = function (_a) {
|
|
4644
4703
|
var children = _a.children, as = _a.as;
|
|
@@ -4655,7 +4714,7 @@ function BaseSelectOption(_a) {
|
|
|
4655
4714
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4656
4715
|
}
|
|
4657
4716
|
|
|
4658
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4717
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4659
4718
|
function BaseSelect(_a) {
|
|
4660
4719
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4661
4720
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4665,7 +4724,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4665
4724
|
Options: BaseSelectOptions,
|
|
4666
4725
|
Option: BaseSelectOption,
|
|
4667
4726
|
});
|
|
4668
|
-
var templateObject_1$
|
|
4727
|
+
var templateObject_1$1P;
|
|
4669
4728
|
|
|
4670
4729
|
var CustomButton = newStyled.button(function (_a) {
|
|
4671
4730
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4703,8 +4762,8 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4703
4762
|
},
|
|
4704
4763
|
});
|
|
4705
4764
|
});
|
|
4706
|
-
//TODO Remove this when we find the real solution
|
|
4707
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4765
|
+
// TODO Remove this when we find the real solution
|
|
4766
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4708
4767
|
var open = _a.open;
|
|
4709
4768
|
return open &&
|
|
4710
4769
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4724,7 +4783,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4724
4783
|
} }), void 0));
|
|
4725
4784
|
};
|
|
4726
4785
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4727
|
-
var templateObject_1$
|
|
4786
|
+
var templateObject_1$1O;
|
|
4728
4787
|
|
|
4729
4788
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4730
4789
|
var theme = _a.theme;
|
|
@@ -4891,7 +4950,7 @@ var CustomCheckboxStyles = {
|
|
|
4891
4950
|
},
|
|
4892
4951
|
};
|
|
4893
4952
|
|
|
4894
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
4953
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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"])));
|
|
4895
4954
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4896
4955
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4897
4956
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4902,7 +4961,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4902
4961
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4903
4962
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4904
4963
|
]; });
|
|
4905
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4964
|
+
var Input$5 = newStyled.input(templateObject_2$1d || (templateObject_2$1d = __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) {
|
|
4906
4965
|
var disabled = _a.disabled;
|
|
4907
4966
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4908
4967
|
});
|
|
@@ -4918,7 +4977,7 @@ var Checkbox = function (_a) {
|
|
|
4918
4977
|
};
|
|
4919
4978
|
return (jsxs$1(Container$18, { 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$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4920
4979
|
};
|
|
4921
|
-
var templateObject_1$
|
|
4980
|
+
var templateObject_1$1N, templateObject_2$1d;
|
|
4922
4981
|
|
|
4923
4982
|
var CustomOption = newStyled.li(function (_a) {
|
|
4924
4983
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -4967,10 +5026,14 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4967
5026
|
Option: BaseDropdownOption,
|
|
4968
5027
|
});
|
|
4969
5028
|
|
|
4970
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
4971
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5029
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
5030
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
5031
|
+
var SelectedOption = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5032
|
+
var fontWeight = _a.fontWeight;
|
|
5033
|
+
return fontWeight || '';
|
|
5034
|
+
});
|
|
4972
5035
|
function SimpleDropdown(_a) {
|
|
4973
|
-
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
5036
|
+
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder, selectedOptionWeight = _a.selectedOptionWeight;
|
|
4974
5037
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
4975
5038
|
var selectedOptionLabel = useMemo(function () {
|
|
4976
5039
|
if (selectedValue) {
|
|
@@ -4998,9 +5061,9 @@ function SimpleDropdown(_a) {
|
|
|
4998
5061
|
setSelectedValue(value);
|
|
4999
5062
|
}, [value, options, initialValue]);
|
|
5000
5063
|
var DropdownContainer = showRequiredPlaceholder ? Container$17 : Fragment$1;
|
|
5001
|
-
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)), selectedOptionLabel] }), 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));
|
|
5064
|
+
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));
|
|
5002
5065
|
}
|
|
5003
|
-
var templateObject_1$
|
|
5066
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y;
|
|
5004
5067
|
|
|
5005
5068
|
/* base styles & size variants */
|
|
5006
5069
|
var CustomRadioStyles$2 = {
|
|
@@ -5065,9 +5128,9 @@ var ContainerStyles$2 = {
|
|
|
5065
5128
|
},
|
|
5066
5129
|
};
|
|
5067
5130
|
|
|
5068
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5131
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5069
5132
|
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5070
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5133
|
+
var Input$4 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
5071
5134
|
var disabled = _a.disabled;
|
|
5072
5135
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5073
5136
|
});
|
|
@@ -5098,7 +5161,7 @@ var RadioInput = function (_a) {
|
|
|
5098
5161
|
};
|
|
5099
5162
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$16, __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 }, { 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));
|
|
5100
5163
|
};
|
|
5101
|
-
var templateObject_1$
|
|
5164
|
+
var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J;
|
|
5102
5165
|
|
|
5103
5166
|
var getWrapperFlexDirection = function (position) {
|
|
5104
5167
|
switch (position) {
|
|
@@ -5149,7 +5212,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5149
5212
|
}
|
|
5150
5213
|
};
|
|
5151
5214
|
|
|
5152
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5215
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5153
5216
|
var position = _a.position;
|
|
5154
5217
|
return getWrapperFlexDirection(position);
|
|
5155
5218
|
}, function (_a) {
|
|
@@ -5159,7 +5222,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __ma
|
|
|
5159
5222
|
var disableHover = _a.disableHover;
|
|
5160
5223
|
return (disableHover ? 0 : 1);
|
|
5161
5224
|
});
|
|
5162
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5225
|
+
var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
5163
5226
|
var position = _a.position;
|
|
5164
5227
|
return getContainerFlexDirection(position);
|
|
5165
5228
|
}, function (_a) {
|
|
@@ -5208,7 +5271,7 @@ var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g =
|
|
|
5208
5271
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5209
5272
|
return right;
|
|
5210
5273
|
});
|
|
5211
|
-
var templateObject_1$
|
|
5274
|
+
var templateObject_1$1K, templateObject_2$1a, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
|
|
5212
5275
|
|
|
5213
5276
|
var useOnClickOutside = function (ref, handler) {
|
|
5214
5277
|
useEffect(function () {
|
|
@@ -5282,6 +5345,29 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
5282
5345
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5283
5346
|
};
|
|
5284
5347
|
|
|
5348
|
+
var useDeviceType = function () {
|
|
5349
|
+
var mobileBreakpoint = 768;
|
|
5350
|
+
var tabletBreakpoint = 1024;
|
|
5351
|
+
var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5352
|
+
var handleResize = function () {
|
|
5353
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
5354
|
+
setDeviceType('mobile');
|
|
5355
|
+
}
|
|
5356
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
5357
|
+
setDeviceType('tablet');
|
|
5358
|
+
}
|
|
5359
|
+
else {
|
|
5360
|
+
setDeviceType('desktop');
|
|
5361
|
+
}
|
|
5362
|
+
};
|
|
5363
|
+
useLayoutEffect(function () {
|
|
5364
|
+
window.addEventListener('resize', handleResize);
|
|
5365
|
+
handleResize();
|
|
5366
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5367
|
+
}, []);
|
|
5368
|
+
return deviceType;
|
|
5369
|
+
};
|
|
5370
|
+
|
|
5285
5371
|
var Tooltip = function (_a) {
|
|
5286
5372
|
var _b;
|
|
5287
5373
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
|
|
@@ -5351,7 +5437,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5351
5437
|
};
|
|
5352
5438
|
}
|
|
5353
5439
|
};
|
|
5354
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
5440
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5355
5441
|
var backgroundColor = _a.backgroundColor;
|
|
5356
5442
|
return backgroundColor;
|
|
5357
5443
|
}, function (_a) {
|
|
@@ -5373,7 +5459,7 @@ var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5373
5459
|
var size = _a.size;
|
|
5374
5460
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5375
5461
|
});
|
|
5376
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5462
|
+
var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5377
5463
|
var textColor = _a.textColor;
|
|
5378
5464
|
return textColor;
|
|
5379
5465
|
}, function (_a) {
|
|
@@ -5390,7 +5476,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5390
5476
|
var theme = useTheme();
|
|
5391
5477
|
return (jsx$1(Container$15, __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));
|
|
5392
5478
|
};
|
|
5393
|
-
var templateObject_1$
|
|
5479
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5394
5480
|
|
|
5395
5481
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5396
5482
|
var _a, _b, _c;
|
|
@@ -5421,7 +5507,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5421
5507
|
};
|
|
5422
5508
|
}
|
|
5423
5509
|
};
|
|
5424
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
5510
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5425
5511
|
var backgroundColor = _a.backgroundColor;
|
|
5426
5512
|
return backgroundColor;
|
|
5427
5513
|
}, function (_a) {
|
|
@@ -5443,7 +5529,7 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5443
5529
|
var size = _a.size;
|
|
5444
5530
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5445
5531
|
});
|
|
5446
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5532
|
+
var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5447
5533
|
var textColor = _a.textColor;
|
|
5448
5534
|
return textColor;
|
|
5449
5535
|
}, function (_a) {
|
|
@@ -5460,7 +5546,7 @@ var DiscountTag$1 = function (_a) {
|
|
|
5460
5546
|
var theme = useTheme();
|
|
5461
5547
|
return (jsx$1(Container$14, __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));
|
|
5462
5548
|
};
|
|
5463
|
-
var templateObject_1$
|
|
5549
|
+
var templateObject_1$1I, templateObject_2$18;
|
|
5464
5550
|
|
|
5465
5551
|
var getStylesBySize$b = function (size, theme) {
|
|
5466
5552
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5502,8 +5588,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5502
5588
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5503
5589
|
}
|
|
5504
5590
|
};
|
|
5505
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
5506
|
-
var Price = newStyled.p(templateObject_2$
|
|
5591
|
+
var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5592
|
+
var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5507
5593
|
var weight = _a.weight;
|
|
5508
5594
|
return (weight ? weight : '400');
|
|
5509
5595
|
}, function (_a) {
|
|
@@ -5560,9 +5646,9 @@ var PriceLabel = function (_a) {
|
|
|
5560
5646
|
};
|
|
5561
5647
|
return (jsxs$1(Container$13, __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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5562
5648
|
};
|
|
5563
|
-
var templateObject_1$
|
|
5649
|
+
var templateObject_1$1H, templateObject_2$17, templateObject_3$V;
|
|
5564
5650
|
|
|
5565
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5651
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5566
5652
|
var PriceLabelV2 = function (_a) {
|
|
5567
5653
|
var _b;
|
|
5568
5654
|
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"]);
|
|
@@ -5633,10 +5719,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5633
5719
|
lineHeight: '22px',
|
|
5634
5720
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5635
5721
|
};
|
|
5636
|
-
var templateObject_1$
|
|
5722
|
+
var templateObject_1$1G;
|
|
5637
5723
|
|
|
5638
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5639
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5724
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5725
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5640
5726
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5641
5727
|
var PriceLabelV3 = function (_a) {
|
|
5642
5728
|
var _b;
|
|
@@ -5708,10 +5794,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5708
5794
|
lineHeight: '22px',
|
|
5709
5795
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5710
5796
|
};
|
|
5711
|
-
var templateObject_1$
|
|
5797
|
+
var templateObject_1$1F, templateObject_2$16, templateObject_3$U;
|
|
5712
5798
|
|
|
5713
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5714
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5799
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5800
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5715
5801
|
var selected = _a.selected, theme = _a.theme;
|
|
5716
5802
|
return selected
|
|
5717
5803
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5748,7 +5834,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
|
|
|
5748
5834
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5749
5835
|
});
|
|
5750
5836
|
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5751
|
-
var templateObject_1$
|
|
5837
|
+
var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
5752
5838
|
|
|
5753
5839
|
var radioIds$1 = {
|
|
5754
5840
|
oneTime: {
|
|
@@ -5803,12 +5889,12 @@ var Autoship = function (_a) {
|
|
|
5803
5889
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { 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$1, { 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));
|
|
5804
5890
|
};
|
|
5805
5891
|
|
|
5806
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5892
|
+
var FlexContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
5807
5893
|
var theme = _a.theme;
|
|
5808
5894
|
return theme.name === 'TheSpaDr' &&
|
|
5809
5895
|
"\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 ";
|
|
5810
5896
|
});
|
|
5811
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5897
|
+
var DiscountTag = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5812
5898
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5813
5899
|
return isSelected
|
|
5814
5900
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5857,7 +5943,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
|
|
|
5857
5943
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5858
5944
|
});
|
|
5859
5945
|
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5860
|
-
var templateObject_1$
|
|
5946
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
5861
5947
|
|
|
5862
5948
|
var radioIds = {
|
|
5863
5949
|
oneTime: {
|
|
@@ -5935,13 +6021,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5935
6021
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5936
6022
|
_a$2);
|
|
5937
6023
|
|
|
5938
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5939
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6024
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
6025
|
+
var CustomerInfo = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
5940
6026
|
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
5941
6027
|
var StarIconContainer = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
5942
6028
|
var Description$2 = newStyled.p(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
5943
6029
|
var ReviewDays = newStyled.span(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
5944
|
-
var templateObject_1$
|
|
6030
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5945
6031
|
|
|
5946
6032
|
var NameWithStars = function (_a) {
|
|
5947
6033
|
var name = _a.name, size = _a.size;
|
|
@@ -5959,8 +6045,8 @@ var ResultFeedback = function (_a) {
|
|
|
5959
6045
|
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));
|
|
5960
6046
|
};
|
|
5961
6047
|
|
|
5962
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5963
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6048
|
+
var Container$10 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
6049
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
5964
6050
|
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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; });
|
|
5965
6051
|
var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __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) {
|
|
5966
6052
|
var theme = _a.theme;
|
|
@@ -5972,7 +6058,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
5972
6058
|
var theme = _a.theme, size = _a.size;
|
|
5973
6059
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5974
6060
|
});
|
|
5975
|
-
var templateObject_1$
|
|
6061
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
5976
6062
|
|
|
5977
6063
|
/* base styles & size variants */
|
|
5978
6064
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6050,7 +6136,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6050
6136
|
return (jsxs$1(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __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));
|
|
6051
6137
|
};
|
|
6052
6138
|
|
|
6053
|
-
var Section = newStyled.div(templateObject_1$
|
|
6139
|
+
var Section = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
6054
6140
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6055
6141
|
});
|
|
6056
6142
|
var CardHeader = function (_a) {
|
|
@@ -6061,16 +6147,16 @@ var CardFooter = function (_a) {
|
|
|
6061
6147
|
var children = _a.children;
|
|
6062
6148
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6063
6149
|
};
|
|
6064
|
-
var templateObject_1$
|
|
6150
|
+
var templateObject_1$1A;
|
|
6065
6151
|
|
|
6066
|
-
var Body = newStyled.div(templateObject_1$
|
|
6152
|
+
var Body = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6067
6153
|
var CardBody = function (_a) {
|
|
6068
6154
|
var children = _a.children;
|
|
6069
6155
|
return jsx$1(Body, { children: children }, void 0);
|
|
6070
6156
|
};
|
|
6071
|
-
var templateObject_1$
|
|
6157
|
+
var templateObject_1$1z;
|
|
6072
6158
|
|
|
6073
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6159
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
6074
6160
|
var flex = _a.flex;
|
|
6075
6161
|
return flex &&
|
|
6076
6162
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6092,16 +6178,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
6092
6178
|
Footer: CardFooter,
|
|
6093
6179
|
Body: CardBody,
|
|
6094
6180
|
});
|
|
6095
|
-
var templateObject_1$
|
|
6181
|
+
var templateObject_1$1y;
|
|
6096
6182
|
|
|
6097
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6098
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6183
|
+
var StyledWrapper = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6184
|
+
var StyledContainer = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
6099
6185
|
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __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) {
|
|
6100
6186
|
var color = _a.color;
|
|
6101
6187
|
return color;
|
|
6102
6188
|
});
|
|
6103
6189
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
6104
|
-
var templateObject_1$
|
|
6190
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6105
6191
|
|
|
6106
6192
|
var Minimalistic = function (_a) {
|
|
6107
6193
|
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;
|
|
@@ -6109,8 +6195,8 @@ var Minimalistic = function (_a) {
|
|
|
6109
6195
|
return (jsx$1(Card$2, __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, { 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));
|
|
6110
6196
|
};
|
|
6111
6197
|
|
|
6112
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6113
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
6198
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6199
|
+
var Title$6 = newStyled.h1(templateObject_2$10 || (templateObject_2$10 = __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; });
|
|
6114
6200
|
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __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; });
|
|
6115
6201
|
var PriceContainer$2 = newStyled.span(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
6116
6202
|
var Simple = function (_a) {
|
|
@@ -6118,18 +6204,18 @@ var Simple = function (_a) {
|
|
|
6118
6204
|
var theme = useTheme();
|
|
6119
6205
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$_, { children: [jsx$1(Title$6, __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, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6120
6206
|
};
|
|
6121
|
-
var templateObject_1$
|
|
6207
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O, templateObject_4$C;
|
|
6122
6208
|
|
|
6123
6209
|
var Bundle = {
|
|
6124
6210
|
Minimalistic: Minimalistic,
|
|
6125
6211
|
Simple: Simple,
|
|
6126
6212
|
};
|
|
6127
6213
|
|
|
6128
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
6214
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
6129
6215
|
var displayBNPL = _a.displayBNPL;
|
|
6130
6216
|
return (displayBNPL ? 'flex' : 'none');
|
|
6131
6217
|
});
|
|
6132
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6218
|
+
var TextContainer$1 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
6133
6219
|
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
6134
6220
|
var BuyNowPayLater = function (_a) {
|
|
6135
6221
|
var _b;
|
|
@@ -6142,41 +6228,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6142
6228
|
}
|
|
6143
6229
|
return (jsx$1(Container$Z, __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));
|
|
6144
6230
|
};
|
|
6145
|
-
var templateObject_1$
|
|
6231
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$N;
|
|
6146
6232
|
|
|
6147
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6233
|
+
var Text$6 = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6148
6234
|
var Title$5 = function (_a) {
|
|
6149
6235
|
var title = _a.title;
|
|
6150
6236
|
var theme = useTheme();
|
|
6151
6237
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6152
6238
|
};
|
|
6153
|
-
var templateObject_1$
|
|
6239
|
+
var templateObject_1$1u;
|
|
6154
6240
|
|
|
6155
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6241
|
+
var P$3 = newStyled.p(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6156
6242
|
var Promo = function (_a) {
|
|
6157
6243
|
var text = _a.text;
|
|
6158
6244
|
var theme = useTheme();
|
|
6159
6245
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6160
6246
|
};
|
|
6161
|
-
var templateObject_1$
|
|
6247
|
+
var templateObject_1$1t;
|
|
6162
6248
|
|
|
6163
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6249
|
+
var Text$5 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6164
6250
|
var Description$1 = function (_a) {
|
|
6165
6251
|
var text = _a.text;
|
|
6166
6252
|
var theme = useTheme();
|
|
6167
6253
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6168
6254
|
};
|
|
6169
|
-
var templateObject_1$
|
|
6255
|
+
var templateObject_1$1s;
|
|
6170
6256
|
|
|
6171
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
6257
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"); });
|
|
6172
6258
|
var CloseButton$1 = function (_a) {
|
|
6173
6259
|
var onClick = _a.onClick, size = _a.size;
|
|
6174
6260
|
var theme = useTheme();
|
|
6175
6261
|
return (jsx$1(Container$Y, __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));
|
|
6176
6262
|
};
|
|
6177
|
-
var templateObject_1$
|
|
6263
|
+
var templateObject_1$1r;
|
|
6178
6264
|
|
|
6179
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6265
|
+
var Text$4 = newStyled.h3(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
6180
6266
|
var backgroundColor = _a.backgroundColor;
|
|
6181
6267
|
return backgroundColor;
|
|
6182
6268
|
}, function (_a) {
|
|
@@ -6191,7 +6277,7 @@ var OfferBanner = function (_a) {
|
|
|
6191
6277
|
var theme = useTheme();
|
|
6192
6278
|
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));
|
|
6193
6279
|
};
|
|
6194
|
-
var templateObject_1$
|
|
6280
|
+
var templateObject_1$1q;
|
|
6195
6281
|
|
|
6196
6282
|
var CartProductItem = {
|
|
6197
6283
|
Title: Title$5,
|
|
@@ -6201,8 +6287,8 @@ var CartProductItem = {
|
|
|
6201
6287
|
CloseButton: CloseButton$1,
|
|
6202
6288
|
};
|
|
6203
6289
|
|
|
6204
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
6205
|
-
var MobileContainer = newStyled(Container$X)(templateObject_2$
|
|
6290
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6291
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6206
6292
|
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6207
6293
|
var ClubMembersText = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
6208
6294
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6214,7 +6300,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6214
6300
|
var isMobile = useWindowDimensions().isMobile;
|
|
6215
6301
|
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$X, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6216
6302
|
};
|
|
6217
|
-
var templateObject_1$
|
|
6303
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$d;
|
|
6218
6304
|
|
|
6219
6305
|
var Spacing = function (_a) {
|
|
6220
6306
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6222,8 +6308,8 @@ var Spacing = function (_a) {
|
|
|
6222
6308
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6223
6309
|
};
|
|
6224
6310
|
|
|
6225
|
-
var Container$W = newStyled('div')(templateObject_1$
|
|
6226
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6311
|
+
var Container$W = newStyled('div')(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6312
|
+
var Content$2 = newStyled('div')(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
6227
6313
|
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6228
6314
|
var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __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) {
|
|
6229
6315
|
var index = _a.index;
|
|
@@ -6236,10 +6322,10 @@ var StrengthBars = function (_a) {
|
|
|
6236
6322
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6237
6323
|
return (jsxs$1(Container$W, __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));
|
|
6238
6324
|
};
|
|
6239
|
-
var templateObject_1$
|
|
6325
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A;
|
|
6240
6326
|
|
|
6241
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6242
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6327
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6328
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6243
6329
|
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6244
6330
|
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6245
6331
|
var PriceWithTagContainer = newStyled.span(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -6295,12 +6381,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6295
6381
|
? finalPriceArray[0]
|
|
6296
6382
|
: (_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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6297
6383
|
};
|
|
6298
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6299
6385
|
|
|
6300
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6301
|
-
var templateObject_1$
|
|
6386
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6387
|
+
var templateObject_1$1m;
|
|
6302
6388
|
|
|
6303
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6389
|
+
var StarContainer = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6304
6390
|
var marginRight = _a.marginRight;
|
|
6305
6391
|
return marginRight;
|
|
6306
6392
|
});
|
|
@@ -6316,7 +6402,7 @@ var StarList = function (_a) {
|
|
|
6316
6402
|
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)));
|
|
6317
6403
|
}) }, void 0));
|
|
6318
6404
|
};
|
|
6319
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1l;
|
|
6320
6406
|
|
|
6321
6407
|
/* base styles & size variants */
|
|
6322
6408
|
var LabelStyles = {
|
|
@@ -6357,8 +6443,8 @@ var LabelStyles = {
|
|
|
6357
6443
|
});
|
|
6358
6444
|
},
|
|
6359
6445
|
};
|
|
6360
|
-
var Container$U = newStyled.a(templateObject_1$
|
|
6361
|
-
var templateObject_1$
|
|
6446
|
+
var Container$U = newStyled.a(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
6447
|
+
var templateObject_1$1k;
|
|
6362
6448
|
|
|
6363
6449
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6364
6450
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6378,7 +6464,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6378
6464
|
}),
|
|
6379
6465
|
];
|
|
6380
6466
|
});
|
|
6381
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6467
|
+
var RatingLabel = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
6382
6468
|
var starsNumber = 5;
|
|
6383
6469
|
var Rating = function (_a) {
|
|
6384
6470
|
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;
|
|
@@ -6401,7 +6487,7 @@ var Rating = function (_a) {
|
|
|
6401
6487
|
: {};
|
|
6402
6488
|
return (jsxs$1(Container$U, __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));
|
|
6403
6489
|
};
|
|
6404
|
-
var templateObject_1$
|
|
6490
|
+
var templateObject_1$1j;
|
|
6405
6491
|
|
|
6406
6492
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6407
6493
|
var width = _a.width, height = _a.height;
|
|
@@ -6411,8 +6497,8 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6411
6497
|
height: height,
|
|
6412
6498
|
});
|
|
6413
6499
|
});
|
|
6414
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6415
|
-
var Container$T = newStyled.a(templateObject_2$
|
|
6500
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6501
|
+
var Container$T = newStyled.a(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6416
6502
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6417
6503
|
var Title$4 = newStyled.p(templateObject_4$y || (templateObject_4$y = __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; });
|
|
6418
6504
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6507,7 +6593,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6507
6593
|
};
|
|
6508
6594
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), 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));
|
|
6509
6595
|
};
|
|
6510
|
-
var templateObject_1$
|
|
6596
|
+
var templateObject_1$1i, templateObject_2$X, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6511
6597
|
|
|
6512
6598
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6513
6599
|
var width = _a.width, height = _a.height;
|
|
@@ -6517,8 +6603,8 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6517
6603
|
height: height,
|
|
6518
6604
|
});
|
|
6519
6605
|
});
|
|
6520
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6521
|
-
var Container$S = newStyled.a(templateObject_2$
|
|
6606
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6607
|
+
var Container$S = newStyled.a(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6522
6608
|
var ProdCardContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
6523
6609
|
var Title$3 = newStyled.p(templateObject_4$x || (templateObject_4$x = __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; });
|
|
6524
6610
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6606,9 +6692,9 @@ var ProductItemTK = function (_a) {
|
|
|
6606
6692
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6607
6693
|
} }, { children: title }), void 0)) : (jsx(Title$3, __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));
|
|
6608
6694
|
};
|
|
6609
|
-
var templateObject_1$
|
|
6695
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$k, templateObject_7$d, templateObject_8$c;
|
|
6610
6696
|
|
|
6611
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
6697
|
+
var Container$R = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6612
6698
|
function withProductGrid(ProductItemComponent, data) {
|
|
6613
6699
|
function WithProductGrid(props) {
|
|
6614
6700
|
return (jsx$1(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6618,7 +6704,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6618
6704
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6619
6705
|
return WithProductGrid;
|
|
6620
6706
|
}
|
|
6621
|
-
var templateObject_1$
|
|
6707
|
+
var templateObject_1$1g;
|
|
6622
6708
|
|
|
6623
6709
|
var Collection = {
|
|
6624
6710
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6665,8 +6751,8 @@ var OutOfStock = function (_a) {
|
|
|
6665
6751
|
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));
|
|
6666
6752
|
};
|
|
6667
6753
|
|
|
6668
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6669
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6754
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6755
|
+
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6670
6756
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6671
6757
|
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6672
6758
|
var OptionsContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
@@ -6687,23 +6773,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6687
6773
|
Option: Option,
|
|
6688
6774
|
OptionsContainer: OptionsContainer,
|
|
6689
6775
|
});
|
|
6690
|
-
var templateObject_1$
|
|
6776
|
+
var templateObject_1$1f, templateObject_2$V, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6691
6777
|
|
|
6692
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6778
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
6693
6779
|
var borderColor = _a.borderColor;
|
|
6694
6780
|
return borderColor;
|
|
6695
6781
|
}, function (_a) {
|
|
6696
6782
|
var noStock = _a.noStock;
|
|
6697
6783
|
return (noStock ? '0.4' : '1');
|
|
6698
6784
|
});
|
|
6699
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6785
|
+
var Image$2 = newStyled.img(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6700
6786
|
var PatternSelector = function (_a) {
|
|
6701
6787
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6702
6788
|
var theme = useTheme();
|
|
6703
6789
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6704
6790
|
return (jsx$1(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6705
6791
|
};
|
|
6706
|
-
var templateObject_1$
|
|
6792
|
+
var templateObject_1$1e, templateObject_2$U;
|
|
6707
6793
|
|
|
6708
6794
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6709
6795
|
if (options == null || options.length === 0) {
|
|
@@ -6762,8 +6848,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6762
6848
|
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));
|
|
6763
6849
|
};
|
|
6764
6850
|
|
|
6765
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6766
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6851
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
6852
|
+
var Col$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6767
6853
|
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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) {
|
|
6768
6854
|
return props.rightToLeft &&
|
|
6769
6855
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -6776,7 +6862,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6776
6862
|
var theme = useTheme();
|
|
6777
6863
|
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));
|
|
6778
6864
|
};
|
|
6779
|
-
var templateObject_1$
|
|
6865
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6780
6866
|
|
|
6781
6867
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6782
6868
|
__proto__: null,
|
|
@@ -6804,7 +6890,7 @@ var sizeMapper = (_a = {},
|
|
|
6804
6890
|
_a[ComponentSize.Large] = 'large',
|
|
6805
6891
|
_a[ComponentSize.XSmall] = 'small',
|
|
6806
6892
|
_a);
|
|
6807
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6893
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6808
6894
|
var wide = _a.wide;
|
|
6809
6895
|
return (wide ? '100%' : 'fit-content');
|
|
6810
6896
|
}, function (_a) {
|
|
@@ -6826,13 +6912,36 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1b || (templateObj
|
|
|
6826
6912
|
var theme = _a.theme;
|
|
6827
6913
|
return theme.colors.text.disabled;
|
|
6828
6914
|
});
|
|
6829
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6830
|
-
var
|
|
6915
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6916
|
+
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6917
|
+
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6918
|
+
});
|
|
6919
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6831
6920
|
|
|
6832
6921
|
var BaseCTA = function (_a) {
|
|
6833
|
-
var
|
|
6922
|
+
var _b, _c, _d;
|
|
6923
|
+
var text = _a.text, _e = _a.wide, wide = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, iconName = _a.iconName, icon = _a.icon, props = __rest(_a, ["text", "wide", "size", "iconName", "icon"]);
|
|
6834
6924
|
var theme = useTheme();
|
|
6835
|
-
|
|
6925
|
+
var currentIconName, iconPos = 'right', iconMargin = '10px', iconSize = '24px';
|
|
6926
|
+
if (icon) {
|
|
6927
|
+
if (!icon.name) {
|
|
6928
|
+
throw new Error('name must be provided when using the icon prop');
|
|
6929
|
+
}
|
|
6930
|
+
currentIconName = icon.name;
|
|
6931
|
+
iconPos = (_b = icon.position) !== null && _b !== void 0 ? _b : iconPos;
|
|
6932
|
+
iconMargin = (_c = icon.margin) !== null && _c !== void 0 ? _c : iconMargin;
|
|
6933
|
+
iconSize = (_d = icon.size) !== null && _d !== void 0 ? _d : iconSize;
|
|
6934
|
+
}
|
|
6935
|
+
else {
|
|
6936
|
+
currentIconName = iconName;
|
|
6937
|
+
}
|
|
6938
|
+
var commonIconProps = {
|
|
6939
|
+
fill: theme.colors.shades.white.color,
|
|
6940
|
+
name: currentIconName,
|
|
6941
|
+
width: iconSize,
|
|
6942
|
+
height: iconSize,
|
|
6943
|
+
};
|
|
6944
|
+
return (jsxs$1(StyledBaseButton, __assign$1({}, props, { wide: wide, size: size }, { children: [currentIconName && iconPos === 'left' && (jsx$1(StyledIcon, __assign$1({}, commonIconProps, { marginRight: iconMargin }), void 0)), text, currentIconName && iconPos === 'right' && (jsx$1(StyledIcon, __assign$1({}, commonIconProps, { marginLeft: iconMargin }), void 0))] }), void 0));
|
|
6836
6945
|
};
|
|
6837
6946
|
|
|
6838
6947
|
var ButtonPrimary = function (_a) {
|
|
@@ -6894,8 +7003,8 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6894
7003
|
} }), void 0));
|
|
6895
7004
|
};
|
|
6896
7005
|
|
|
6897
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
6898
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7006
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
7007
|
+
var IconContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
6899
7008
|
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __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; });
|
|
6900
7009
|
var Details = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6901
7010
|
var Note = function (_a) {
|
|
@@ -6903,13 +7012,13 @@ var Note = function (_a) {
|
|
|
6903
7012
|
var theme = useTheme();
|
|
6904
7013
|
return (jsxs$1(Container$P, __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));
|
|
6905
7014
|
};
|
|
6906
|
-
var templateObject_1$
|
|
7015
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u;
|
|
6907
7016
|
|
|
6908
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7017
|
+
var Title$2 = newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6909
7018
|
var theme = _a.theme;
|
|
6910
7019
|
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 ");
|
|
6911
7020
|
});
|
|
6912
|
-
var Line = newStyled.div(templateObject_2$
|
|
7021
|
+
var Line = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
6913
7022
|
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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({
|
|
6914
7023
|
flexDirection: ['column', 'row'],
|
|
6915
7024
|
}));
|
|
@@ -6948,16 +7057,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6948
7057
|
var theme = useTheme();
|
|
6949
7058
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __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));
|
|
6950
7059
|
};
|
|
6951
|
-
var templateObject_1$
|
|
7060
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$b;
|
|
6952
7061
|
|
|
6953
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7062
|
+
var Backdrop = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6954
7063
|
var top = _a.top;
|
|
6955
7064
|
return top;
|
|
6956
7065
|
}, function (_a) {
|
|
6957
7066
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6958
7067
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6959
7068
|
});
|
|
6960
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7069
|
+
var Sidebar = newStyled.div(templateObject_2$P || (templateObject_2$P = __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) {
|
|
6961
7070
|
var height = _a.height;
|
|
6962
7071
|
return height;
|
|
6963
7072
|
}, function (_a) {
|
|
@@ -7004,20 +7113,20 @@ var Drawer = function (_a) {
|
|
|
7004
7113
|
}, [isOpen, onClose, onOpen]);
|
|
7005
7114
|
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;
|
|
7006
7115
|
};
|
|
7007
|
-
var templateObject_1$
|
|
7116
|
+
var templateObject_1$19, templateObject_2$P;
|
|
7008
7117
|
|
|
7009
7118
|
var TooltipArrow = function (_a) {
|
|
7010
7119
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7011
7120
|
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));
|
|
7012
7121
|
};
|
|
7013
7122
|
|
|
7014
|
-
var List = newStyled.ul(templateObject_1$
|
|
7015
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7123
|
+
var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7124
|
+
var Item$2 = newStyled.li(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
7016
7125
|
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
7017
7126
|
var ArrowContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
7018
7127
|
var StyledDropdown = newStyled.ul(templateObject_5$k || (templateObject_5$k = __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; });
|
|
7019
7128
|
var DropdownItem = newStyled.li(templateObject_6$h || (templateObject_6$h = __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; });
|
|
7020
|
-
var templateObject_1$
|
|
7129
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7021
7130
|
|
|
7022
7131
|
var DropdownListIcons = function (_a) {
|
|
7023
7132
|
var items = _a.items;
|
|
@@ -7030,13 +7139,13 @@ var Dropdown = function (_a) {
|
|
|
7030
7139
|
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));
|
|
7031
7140
|
};
|
|
7032
7141
|
|
|
7033
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7034
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7142
|
+
var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
7143
|
+
var DropdownLabel = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
7035
7144
|
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7036
7145
|
var DetailLabel = newStyled.span(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
7037
7146
|
var DropdownOptions = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
7038
7147
|
var DropdownOption = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
7039
|
-
var templateObject_1$
|
|
7148
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7040
7149
|
|
|
7041
7150
|
var SizeDropdown = function (_a) {
|
|
7042
7151
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7059,8 +7168,8 @@ var SizeDropdown = function (_a) {
|
|
|
7059
7168
|
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));
|
|
7060
7169
|
};
|
|
7061
7170
|
|
|
7062
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7063
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7171
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
7172
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$M || (templateObject_2$M = __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; });
|
|
7064
7173
|
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
7065
7174
|
var DialogDropdownLink = newStyled.a(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
7066
7175
|
var DropdownDialog = function (_a) {
|
|
@@ -7071,7 +7180,7 @@ var DropdownDialog = function (_a) {
|
|
|
7071
7180
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7072
7181
|
}) }), void 0) }), void 0));
|
|
7073
7182
|
};
|
|
7074
|
-
var templateObject_1$
|
|
7183
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7075
7184
|
|
|
7076
7185
|
function FilteringDropdown(_a) {
|
|
7077
7186
|
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;
|
|
@@ -7104,8 +7213,8 @@ function FilteringDropdown(_a) {
|
|
|
7104
7213
|
}) }, void 0)] }), void 0));
|
|
7105
7214
|
}
|
|
7106
7215
|
|
|
7107
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7108
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7216
|
+
var Title$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
7217
|
+
var H3 = newStyled.h3(templateObject_2$L || (templateObject_2$L = __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; });
|
|
7109
7218
|
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7110
7219
|
var Container$O = newStyled.div(templateObject_4$p || (templateObject_4$p = __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'); });
|
|
7111
7220
|
var Accordion = function (_a) {
|
|
@@ -7114,10 +7223,10 @@ var Accordion = function (_a) {
|
|
|
7114
7223
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7115
7224
|
return (jsxs$1(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __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));
|
|
7116
7225
|
};
|
|
7117
|
-
var templateObject_1$
|
|
7226
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$A, templateObject_4$p;
|
|
7118
7227
|
|
|
7119
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7120
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7228
|
+
var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
7229
|
+
var Header$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
7121
7230
|
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
7122
7231
|
var MobileIconsContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
7123
7232
|
var H4 = newStyled.h4(templateObject_5$i || (templateObject_5$i = __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; });
|
|
@@ -7126,7 +7235,7 @@ var OptionContainer = newStyled.div(templateObject_7$b || (templateObject_7$b =
|
|
|
7126
7235
|
var ClearAll = newStyled.span(templateObject_8$a || (templateObject_8$a = __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; });
|
|
7127
7236
|
var MobileFooter = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __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"])));
|
|
7128
7237
|
var MobileClearContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __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"])));
|
|
7129
|
-
var templateObject_1$
|
|
7238
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a, templateObject_9$6, templateObject_10$4;
|
|
7130
7239
|
|
|
7131
7240
|
var getStylesBySize$7 = function (size, theme) {
|
|
7132
7241
|
switch (size) {
|
|
@@ -7191,8 +7300,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7191
7300
|
} }), id: id }, void 0));
|
|
7192
7301
|
};
|
|
7193
7302
|
|
|
7194
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7195
|
-
var LI = newStyled.li(templateObject_2$
|
|
7303
|
+
var UL = newStyled.ul(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7304
|
+
var LI = newStyled.li(templateObject_2$J || (templateObject_2$J = __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; });
|
|
7196
7305
|
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
7197
7306
|
var Tags = function (_a) {
|
|
7198
7307
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7201,7 +7310,7 @@ var Tags = function (_a) {
|
|
|
7201
7310
|
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));
|
|
7202
7311
|
}) }), void 0));
|
|
7203
7312
|
};
|
|
7204
|
-
var templateObject_1$
|
|
7313
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$y;
|
|
7205
7314
|
|
|
7206
7315
|
var Filters = function (_a) {
|
|
7207
7316
|
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;
|
|
@@ -7337,8 +7446,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7337
7446
|
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));
|
|
7338
7447
|
};
|
|
7339
7448
|
|
|
7340
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7341
|
-
var Container$N = newStyled.div(templateObject_2$
|
|
7449
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7450
|
+
var Container$N = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
7342
7451
|
var FitGuarantee = function (_a) {
|
|
7343
7452
|
var _b;
|
|
7344
7453
|
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;
|
|
@@ -7356,10 +7465,10 @@ var FitGuarantee = function (_a) {
|
|
|
7356
7465
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7357
7466
|
} }, { 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));
|
|
7358
7467
|
};
|
|
7359
|
-
var templateObject_1$
|
|
7468
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7360
7469
|
|
|
7361
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
7362
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7470
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7471
|
+
var P$2 = newStyled.p(templateObject_2$H || (templateObject_2$H = __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; });
|
|
7363
7472
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7364
7473
|
border: 'none',
|
|
7365
7474
|
background: 'transparent',
|
|
@@ -7374,7 +7483,7 @@ var FitPredictor = function (_a) {
|
|
|
7374
7483
|
var theme = useTheme();
|
|
7375
7484
|
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { 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));
|
|
7376
7485
|
};
|
|
7377
|
-
var templateObject_1$
|
|
7486
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7378
7487
|
|
|
7379
7488
|
var Button$7 = newStyled.button(function () { return ({
|
|
7380
7489
|
background: 'transparent',
|
|
@@ -11618,14 +11727,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11618
11727
|
return Slider;
|
|
11619
11728
|
}(React__default.Component);
|
|
11620
11729
|
|
|
11621
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11730
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
11622
11731
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11623
11732
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11624
11733
|
}, function (_a) {
|
|
11625
11734
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11626
11735
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11627
11736
|
});
|
|
11628
|
-
var templateObject_1
|
|
11737
|
+
var templateObject_1$10;
|
|
11629
11738
|
|
|
11630
11739
|
var getStylesBySize$6 = function (size) {
|
|
11631
11740
|
// rem units
|
|
@@ -11684,7 +11793,7 @@ var SliderNavigation = function (_a) {
|
|
|
11684
11793
|
} }, { 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));
|
|
11685
11794
|
};
|
|
11686
11795
|
|
|
11687
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11796
|
+
var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11688
11797
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11689
11798
|
return borderRadiusVariant &&
|
|
11690
11799
|
"\nborder-radius: 20px;\n";
|
|
@@ -11699,10 +11808,10 @@ var ImageSmallPreview = function (_a) {
|
|
|
11699
11808
|
var theme = useTheme();
|
|
11700
11809
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11701
11810
|
};
|
|
11702
|
-
var templateObject_1
|
|
11811
|
+
var templateObject_1$$;
|
|
11703
11812
|
|
|
11704
|
-
var horizontalStyles = css(templateObject_1$
|
|
11705
|
-
var verticalStyles = css(templateObject_2$
|
|
11813
|
+
var horizontalStyles = css(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
11814
|
+
var verticalStyles = css(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
11706
11815
|
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __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) {
|
|
11707
11816
|
var position = _a.position;
|
|
11708
11817
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11732,7 +11841,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11732
11841
|
arrowPadding: 1.625,
|
|
11733
11842
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { 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 }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { 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 }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11734
11843
|
};
|
|
11735
|
-
var templateObject_1$
|
|
11844
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9;
|
|
11736
11845
|
|
|
11737
11846
|
var propTypes = {exports: {}};
|
|
11738
11847
|
|
|
@@ -13325,25 +13434,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13325
13434
|
afterZoomOut: PropTypes.func
|
|
13326
13435
|
} : {};
|
|
13327
13436
|
|
|
13328
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13329
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13330
|
-
var templateObject_1$
|
|
13437
|
+
var ProgressContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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); });
|
|
13438
|
+
var ProgressFiller = newStyled.div(templateObject_2$F || (templateObject_2$F = __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; });
|
|
13439
|
+
var templateObject_1$Z, templateObject_2$F;
|
|
13331
13440
|
|
|
13332
13441
|
var ProgressBar$1 = function (_a) {
|
|
13333
13442
|
var progress = _a.progress, hide = _a.hide;
|
|
13334
13443
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13335
13444
|
};
|
|
13336
13445
|
|
|
13337
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
13338
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13446
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13447
|
+
var HTMLVideo = newStyled.video(templateObject_2$E || (templateObject_2$E = __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; });
|
|
13339
13448
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
13340
|
-
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13341
|
-
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13342
|
-
var templateObject_1$
|
|
13449
|
+
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
13450
|
+
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
13451
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13343
13452
|
|
|
13344
13453
|
var Video$1 = function (_a) {
|
|
13345
13454
|
var _b, _c, _d, _e;
|
|
13346
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13455
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
|
|
13347
13456
|
var videoRef = useRef(null);
|
|
13348
13457
|
var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13349
13458
|
var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13378,15 +13487,15 @@ var Video$1 = function (_a) {
|
|
|
13378
13487
|
setVideoProgress(videoRef.current.currentTime);
|
|
13379
13488
|
}
|
|
13380
13489
|
};
|
|
13381
|
-
return (jsxs$1(Container$K, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13490
|
+
return (jsxs$1(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13382
13491
|
};
|
|
13383
13492
|
|
|
13384
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13493
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
13385
13494
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13386
13495
|
return borderRadiusVariant &&
|
|
13387
13496
|
"\n border-radius: 40px;\n ";
|
|
13388
13497
|
});
|
|
13389
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13498
|
+
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 ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13390
13499
|
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13391
13500
|
var TopRightTagContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13392
13501
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
@@ -13400,9 +13509,9 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13400
13509
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13401
13510
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { 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));
|
|
13402
13511
|
};
|
|
13403
|
-
var templateObject_1$
|
|
13512
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13404
13513
|
|
|
13405
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
13514
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13406
13515
|
var ProductGallery = function (_a) {
|
|
13407
13516
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
|
|
13408
13517
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13414,7 +13523,7 @@ var ProductGallery = function (_a) {
|
|
|
13414
13523
|
setSelectedImage(value);
|
|
13415
13524
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13416
13525
|
};
|
|
13417
|
-
var templateObject_1$
|
|
13526
|
+
var templateObject_1$W;
|
|
13418
13527
|
|
|
13419
13528
|
var getStylesBySize$5 = function (size) {
|
|
13420
13529
|
switch (size) {
|
|
@@ -13435,7 +13544,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13435
13544
|
};
|
|
13436
13545
|
}
|
|
13437
13546
|
};
|
|
13438
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
13547
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
13439
13548
|
var backgroundColor = _a.backgroundColor;
|
|
13440
13549
|
return backgroundColor;
|
|
13441
13550
|
}, function (_a) {
|
|
@@ -13465,18 +13574,18 @@ var IconButton = function (_a) {
|
|
|
13465
13574
|
var theme = useTheme();
|
|
13466
13575
|
return (jsx$1(Container$H, __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));
|
|
13467
13576
|
};
|
|
13468
|
-
var templateObject_1$
|
|
13577
|
+
var templateObject_1$V;
|
|
13469
13578
|
|
|
13470
|
-
var StyledButton$
|
|
13579
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$U || (templateObject_1$U = __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; });
|
|
13471
13580
|
var AmazonButton = function (_a) {
|
|
13472
13581
|
var onClick = _a.onClick;
|
|
13473
|
-
return (jsx$1(StyledButton$
|
|
13582
|
+
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));
|
|
13474
13583
|
};
|
|
13475
13584
|
var PaypalButton = function (_a) {
|
|
13476
13585
|
var onClick = _a.onClick;
|
|
13477
|
-
return (jsx$1(StyledButton$
|
|
13586
|
+
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));
|
|
13478
13587
|
};
|
|
13479
|
-
var templateObject_1$
|
|
13588
|
+
var templateObject_1$U;
|
|
13480
13589
|
|
|
13481
13590
|
var Container$G = newStyled.div(function (props) { return ({
|
|
13482
13591
|
height: 'auto',
|
|
@@ -13531,8 +13640,8 @@ var IconsWithTitle = function (_a) {
|
|
|
13531
13640
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$G, __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));
|
|
13532
13641
|
};
|
|
13533
13642
|
|
|
13534
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
13535
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13643
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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'); });
|
|
13644
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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'); });
|
|
13536
13645
|
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13537
13646
|
var titlePosition = _a.titlePosition;
|
|
13538
13647
|
return titlePosition == 'center' &&
|
|
@@ -13543,13 +13652,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13543
13652
|
var isMobile = useWindowDimensions().isMobile;
|
|
13544
13653
|
return (jsxs$1(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __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));
|
|
13545
13654
|
};
|
|
13546
|
-
var templateObject_1$
|
|
13655
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$u;
|
|
13547
13656
|
|
|
13548
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13657
|
+
var Label$2 = newStyled.span(templateObject_1$S || (templateObject_1$S = __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) {
|
|
13549
13658
|
var color = _a.color;
|
|
13550
13659
|
return color;
|
|
13551
13660
|
});
|
|
13552
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13661
|
+
var MandatoryIcon = newStyled.span(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13553
13662
|
var color = _a.color;
|
|
13554
13663
|
return color;
|
|
13555
13664
|
});
|
|
@@ -13558,7 +13667,7 @@ var InputLabel = function (_a) {
|
|
|
13558
13667
|
var theme = useTheme();
|
|
13559
13668
|
return (jsxs$1(Label$2, __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));
|
|
13560
13669
|
};
|
|
13561
|
-
var templateObject_1$
|
|
13670
|
+
var templateObject_1$S, templateObject_2$B;
|
|
13562
13671
|
|
|
13563
13672
|
var containerByStatus = function (theme, status) {
|
|
13564
13673
|
if (status === InputValidationType.Valid)
|
|
@@ -13567,11 +13676,11 @@ var containerByStatus = function (theme, status) {
|
|
|
13567
13676
|
return theme.colors.semantic.urgent.color;
|
|
13568
13677
|
return '';
|
|
13569
13678
|
};
|
|
13570
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
13679
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13571
13680
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13572
13681
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13573
13682
|
});
|
|
13574
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13683
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
13575
13684
|
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __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) {
|
|
13576
13685
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13577
13686
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13645,7 +13754,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13645
13754
|
return theme.component.input.lineHeight;
|
|
13646
13755
|
});
|
|
13647
13756
|
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
13648
|
-
var templateObject_1$
|
|
13757
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13649
13758
|
|
|
13650
13759
|
var BaseInput = function (_a) {
|
|
13651
13760
|
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"]);
|
|
@@ -13689,11 +13798,11 @@ var Button$5 = function (_a) {
|
|
|
13689
13798
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13690
13799
|
};
|
|
13691
13800
|
|
|
13692
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
13801
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
13693
13802
|
var theme = _a.theme;
|
|
13694
13803
|
return theme.component.inputCustom.input.borderRadius;
|
|
13695
13804
|
});
|
|
13696
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13805
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
13697
13806
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13698
13807
|
return defaultRounded
|
|
13699
13808
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13710,21 +13819,21 @@ var Custom = function (_a) {
|
|
|
13710
13819
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13711
13820
|
return (jsx$1(Container$D, __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));
|
|
13712
13821
|
};
|
|
13713
|
-
var templateObject_1$
|
|
13822
|
+
var templateObject_1$Q, templateObject_2$z;
|
|
13714
13823
|
|
|
13715
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13824
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13716
13825
|
var size = _a.size;
|
|
13717
13826
|
return (size === 'small' ? '36px' : '');
|
|
13718
13827
|
});
|
|
13719
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13828
|
+
var SuccessMessage = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13720
13829
|
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
13721
13830
|
var Success = function (_a) {
|
|
13722
13831
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13723
13832
|
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));
|
|
13724
13833
|
};
|
|
13725
|
-
var templateObject_1$
|
|
13834
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13726
13835
|
|
|
13727
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13836
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
13728
13837
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13729
13838
|
return status === InputValidationType.Empty &&
|
|
13730
13839
|
type === 'primary' &&
|
|
@@ -13741,16 +13850,16 @@ var BasePlusButton = function (_a) {
|
|
|
13741
13850
|
}
|
|
13742
13851
|
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));
|
|
13743
13852
|
};
|
|
13744
|
-
var templateObject_1$
|
|
13853
|
+
var templateObject_1$O;
|
|
13745
13854
|
|
|
13746
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
13747
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13855
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13856
|
+
var IconContainer$2 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
13748
13857
|
var BasePlusIcon = function (_a) {
|
|
13749
13858
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13750
13859
|
var theme = useTheme();
|
|
13751
13860
|
return (jsx$1(Container$C, { 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));
|
|
13752
13861
|
};
|
|
13753
|
-
var templateObject_1$
|
|
13862
|
+
var templateObject_1$N, templateObject_2$x;
|
|
13754
13863
|
|
|
13755
13864
|
var Input$3 = {
|
|
13756
13865
|
Simple: BaseInput,
|
|
@@ -13795,7 +13904,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13795
13904
|
}, [preventTouch, ref, touchStart]);
|
|
13796
13905
|
}
|
|
13797
13906
|
|
|
13798
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13907
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
13799
13908
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13800
13909
|
return borderRadiusVariant &&
|
|
13801
13910
|
"\n border-radius: 40px;\n ";
|
|
@@ -13804,7 +13913,7 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
13804
13913
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13805
13914
|
});
|
|
13806
13915
|
// max-height: 31.875rem;
|
|
13807
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13916
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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'); });
|
|
13808
13917
|
var TopRightTagContainer = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
13809
13918
|
var BottomTagContainer$3 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13810
13919
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -13866,14 +13975,14 @@ var ImageProductSlide = function (_a) {
|
|
|
13866
13975
|
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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __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));
|
|
13867
13976
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13868
13977
|
};
|
|
13869
|
-
var templateObject_1$
|
|
13978
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13870
13979
|
|
|
13871
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13980
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
13872
13981
|
var ProductGalleryMobile = function (_a) {
|
|
13873
13982
|
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;
|
|
13874
13983
|
return (jsx$1(Container$A, __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: selectedValue }, void 0) }), void 0));
|
|
13875
13984
|
};
|
|
13876
|
-
var templateObject_1$
|
|
13985
|
+
var templateObject_1$L;
|
|
13877
13986
|
|
|
13878
13987
|
function _extends() {
|
|
13879
13988
|
_extends = Object.assign || function (target) {
|
|
@@ -14140,14 +14249,14 @@ function useSwipeable(options) {
|
|
|
14140
14249
|
return handlers;
|
|
14141
14250
|
}
|
|
14142
14251
|
|
|
14143
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14252
|
+
var Button$3 = newStyled.button(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
14144
14253
|
var ArrowButton = function (_a) {
|
|
14145
14254
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14146
14255
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14147
14256
|
};
|
|
14148
|
-
var templateObject_1$
|
|
14257
|
+
var templateObject_1$K;
|
|
14149
14258
|
|
|
14150
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
14259
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
14151
14260
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14152
14261
|
var SlideDots = function (_a) {
|
|
14153
14262
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14156,10 +14265,10 @@ var SlideDots = function (_a) {
|
|
|
14156
14265
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14157
14266
|
: 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));
|
|
14158
14267
|
};
|
|
14159
|
-
var templateObject_1$
|
|
14268
|
+
var templateObject_1$J;
|
|
14160
14269
|
|
|
14161
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14162
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14270
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
14271
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14163
14272
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14164
14273
|
var SlideNavigation = function (_a) {
|
|
14165
14274
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -14172,23 +14281,23 @@ var SlideNavigation = function (_a) {
|
|
|
14172
14281
|
onNavigate(selectedIndex + 1);
|
|
14173
14282
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14174
14283
|
};
|
|
14175
|
-
var templateObject_1$
|
|
14284
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14176
14285
|
|
|
14177
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
14286
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
14178
14287
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14179
14288
|
return borderRadiusVariant &&
|
|
14180
14289
|
"\n border-radius: 40px;\n ";
|
|
14181
14290
|
});
|
|
14182
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14291
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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'); });
|
|
14183
14292
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14184
14293
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14185
14294
|
var _b, _c;
|
|
14186
14295
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14187
14296
|
return (jsxs$1(Container$y, __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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { 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));
|
|
14188
14297
|
});
|
|
14189
|
-
var templateObject_1$
|
|
14298
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$p;
|
|
14190
14299
|
|
|
14191
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14300
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
14192
14301
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14193
14302
|
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;
|
|
14194
14303
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14212,9 +14321,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14212
14321
|
}, [index, images]);
|
|
14213
14322
|
return (jsxs$1(Container$x, __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));
|
|
14214
14323
|
};
|
|
14215
|
-
var templateObject_1$
|
|
14324
|
+
var templateObject_1$G;
|
|
14216
14325
|
|
|
14217
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
14326
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
14218
14327
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14219
14328
|
return borderRadiusVariant &&
|
|
14220
14329
|
"\n border-radius: 40px;\n ";
|
|
@@ -14223,7 +14332,7 @@ var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __ma
|
|
|
14223
14332
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14224
14333
|
});
|
|
14225
14334
|
// max-height: 31.875rem;
|
|
14226
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14335
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __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'); });
|
|
14227
14336
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14228
14337
|
var VideoOverlay$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
14229
14338
|
var Video = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
@@ -14288,14 +14397,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14288
14397
|
} }, 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));
|
|
14289
14398
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14290
14399
|
};
|
|
14291
|
-
var templateObject_1$
|
|
14400
|
+
var templateObject_1$F, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$5;
|
|
14292
14401
|
|
|
14293
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
14402
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
14294
14403
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14295
14404
|
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;
|
|
14296
14405
|
return (jsx$1(Container$v, __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));
|
|
14297
14406
|
};
|
|
14298
|
-
var templateObject_1$
|
|
14407
|
+
var templateObject_1$E;
|
|
14299
14408
|
|
|
14300
14409
|
var __defProp$1 = Object.defineProperty;
|
|
14301
14410
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14428,7 +14537,7 @@ var Portal = function (_a) {
|
|
|
14428
14537
|
var visibleStyle = function (_a) {
|
|
14429
14538
|
var opened = _a.opened;
|
|
14430
14539
|
return opened
|
|
14431
|
-
? css(templateObject_1$
|
|
14540
|
+
? css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14432
14541
|
};
|
|
14433
14542
|
var transformStyle = function (_a) {
|
|
14434
14543
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14476,9 +14585,9 @@ var useModal = function (id) {
|
|
|
14476
14585
|
close: close,
|
|
14477
14586
|
}); }, [close, open, opened]);
|
|
14478
14587
|
};
|
|
14479
|
-
var templateObject_1$
|
|
14588
|
+
var templateObject_1$D, templateObject_2$s, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14480
14589
|
|
|
14481
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14590
|
+
var Bar$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
14482
14591
|
var height = _a.height;
|
|
14483
14592
|
return height || '0.5rem';
|
|
14484
14593
|
}, function (_a) {
|
|
@@ -14550,19 +14659,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14550
14659
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14551
14660
|
return (jsxs$1(Container$t, __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));
|
|
14552
14661
|
};
|
|
14553
|
-
var templateObject_1$
|
|
14662
|
+
var templateObject_1$C;
|
|
14554
14663
|
|
|
14555
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
14664
|
+
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
14556
14665
|
var theme = _a.theme;
|
|
14557
14666
|
return theme.component.orderBar.backgroundColor;
|
|
14558
14667
|
});
|
|
14559
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14668
|
+
var H1 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __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; });
|
|
14560
14669
|
var OrderBar = function (_a) {
|
|
14561
14670
|
var message = _a.message, color = _a.color;
|
|
14562
14671
|
var theme = useTheme();
|
|
14563
14672
|
return (jsxs$1(Container$s, __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));
|
|
14564
14673
|
};
|
|
14565
|
-
var templateObject_1$
|
|
14674
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14566
14675
|
|
|
14567
14676
|
var htmlReactParser = {exports: {}};
|
|
14568
14677
|
|
|
@@ -18343,8 +18452,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18343
18452
|
HTMLReactParser$1.attributesToProps;
|
|
18344
18453
|
HTMLReactParser$1.Element;
|
|
18345
18454
|
|
|
18346
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18347
|
-
var Card = newStyled.div(templateObject_2$
|
|
18455
|
+
var Container$r = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
18456
|
+
var Card = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
18348
18457
|
var Tag$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
18349
18458
|
var Label$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
18350
18459
|
var Check = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
@@ -18380,10 +18489,10 @@ var PackCard = function (_a) {
|
|
|
18380
18489
|
currency: currencyCode || 'USD',
|
|
18381
18490
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18382
18491
|
};
|
|
18383
|
-
var templateObject_1$
|
|
18492
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$7;
|
|
18384
18493
|
|
|
18385
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
18386
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18494
|
+
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
18495
|
+
var IconContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
18387
18496
|
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18388
18497
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18389
18498
|
}));
|
|
@@ -18404,7 +18513,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18404
18513
|
var background = _a.background;
|
|
18405
18514
|
return background || 'unset';
|
|
18406
18515
|
});
|
|
18407
|
-
var templateObject_1$
|
|
18516
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
18408
18517
|
|
|
18409
18518
|
var Pagination = function (_a) {
|
|
18410
18519
|
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;
|
|
@@ -18469,7 +18578,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18469
18578
|
: 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));
|
|
18470
18579
|
};
|
|
18471
18580
|
|
|
18472
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
18581
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
18473
18582
|
var width = _a.width;
|
|
18474
18583
|
return width;
|
|
18475
18584
|
}, function (_a) {
|
|
@@ -18487,11 +18596,11 @@ var PaymentMethod = function (_a) {
|
|
|
18487
18596
|
var theme = useTheme();
|
|
18488
18597
|
return (jsx$1(Container$p, __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));
|
|
18489
18598
|
};
|
|
18490
|
-
var templateObject_1$
|
|
18599
|
+
var templateObject_1$y;
|
|
18491
18600
|
|
|
18492
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
18601
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
18493
18602
|
var IMAGE_WIDTH = '63px';
|
|
18494
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18603
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __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);
|
|
18495
18604
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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({
|
|
18496
18605
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18497
18606
|
}), IMAGE_WIDTH);
|
|
@@ -18531,7 +18640,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18531
18640
|
var theme = useTheme();
|
|
18532
18641
|
return (jsxs$1(Container$o, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { 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, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), 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, { 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));
|
|
18533
18642
|
};
|
|
18534
|
-
var templateObject_1$
|
|
18643
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18535
18644
|
|
|
18536
18645
|
var P$1 = newStyled.p(function (_a) {
|
|
18537
18646
|
var color = _a.color;
|
|
@@ -18545,7 +18654,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18545
18654
|
margin: '0.938rem 4.188rem',
|
|
18546
18655
|
});
|
|
18547
18656
|
});
|
|
18548
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18657
|
+
var Bar = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
18549
18658
|
var height = _a.height;
|
|
18550
18659
|
return height || '0.5rem';
|
|
18551
18660
|
}, function (_a) {
|
|
@@ -18590,10 +18699,10 @@ var ProgressBar = function (_a) {
|
|
|
18590
18699
|
var theme = useTheme();
|
|
18591
18700
|
return (jsxs$1(Container$n, __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));
|
|
18592
18701
|
};
|
|
18593
|
-
var templateObject_1$
|
|
18702
|
+
var templateObject_1$w;
|
|
18594
18703
|
|
|
18595
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
18596
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18704
|
+
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __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; });
|
|
18705
|
+
var Item$1 = newStyled.span(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
18597
18706
|
var Number$1 = newStyled(Item$1)(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
18598
18707
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$d || (templateObject_4$d = __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)'; });
|
|
18599
18708
|
var QuantityPicker = function (_a) {
|
|
@@ -18620,7 +18729,7 @@ var QuantityPicker = function (_a) {
|
|
|
18620
18729
|
}, [value, clamp]);
|
|
18621
18730
|
return (jsxs$1(Container$m, __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));
|
|
18622
18731
|
};
|
|
18623
|
-
var templateObject_1$
|
|
18732
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$j, templateObject_4$d;
|
|
18624
18733
|
|
|
18625
18734
|
/* base styles & size variants */
|
|
18626
18735
|
var CustomRadioStyles$1 = {
|
|
@@ -18689,9 +18798,9 @@ var ContainerStyles$1 = {
|
|
|
18689
18798
|
},
|
|
18690
18799
|
};
|
|
18691
18800
|
|
|
18692
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18801
|
+
var Wrapper$3 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18693
18802
|
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18694
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18803
|
+
var Input$2 = newStyled.input(templateObject_2$m || (templateObject_2$m = __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) {
|
|
18695
18804
|
var disabled = _a.disabled;
|
|
18696
18805
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18697
18806
|
});
|
|
@@ -18709,7 +18818,7 @@ var RadioPrimary = function (_a) {
|
|
|
18709
18818
|
};
|
|
18710
18819
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$l, __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));
|
|
18711
18820
|
};
|
|
18712
|
-
var templateObject_1$
|
|
18821
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$i;
|
|
18713
18822
|
|
|
18714
18823
|
var RadioGroupInput = function (_a) {
|
|
18715
18824
|
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;
|
|
@@ -18788,9 +18897,9 @@ var ContainerStyles = {
|
|
|
18788
18897
|
},
|
|
18789
18898
|
};
|
|
18790
18899
|
|
|
18791
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18900
|
+
var Wrapper$2 = newStyled.div(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
18792
18901
|
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18793
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18902
|
+
var Input$1 = newStyled.input(templateObject_2$l || (templateObject_2$l = __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) {
|
|
18794
18903
|
var disabled = _a.disabled;
|
|
18795
18904
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18796
18905
|
});
|
|
@@ -18814,7 +18923,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18814
18923
|
};
|
|
18815
18924
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$k, __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));
|
|
18816
18925
|
};
|
|
18817
|
-
var templateObject_1$
|
|
18926
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$h;
|
|
18818
18927
|
|
|
18819
18928
|
var ClubRadioGroupInput = function (_a) {
|
|
18820
18929
|
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;
|
|
@@ -18842,8 +18951,8 @@ function formatDate(date, format) {
|
|
|
18842
18951
|
}
|
|
18843
18952
|
}
|
|
18844
18953
|
|
|
18845
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
18846
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18954
|
+
var Container$j = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
18955
|
+
var Content$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
18847
18956
|
var StarsContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18848
18957
|
var ReviewContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
18849
18958
|
var DateText$1 = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
@@ -18883,12 +18992,12 @@ var Review$1 = function (_a) {
|
|
|
18883
18992
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$j, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18884
18993
|
(!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));
|
|
18885
18994
|
};
|
|
18886
|
-
var templateObject_1$
|
|
18995
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$2, 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;
|
|
18887
18996
|
|
|
18888
18997
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18889
18998
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18890
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
18891
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18999
|
+
var Container$i = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
19000
|
+
var Heading = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
18892
19001
|
var Content = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18893
19002
|
var ReviewContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18894
19003
|
var DateText = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
@@ -18939,10 +19048,10 @@ var Review = function (_a) {
|
|
|
18939
19048
|
: description,
|
|
18940
19049
|
} }, 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));
|
|
18941
19050
|
};
|
|
18942
|
-
var templateObject_1$
|
|
19051
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18943
19052
|
|
|
18944
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18945
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19053
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
19054
|
+
var ReviewsContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
18946
19055
|
var ReviewsCount = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
18947
19056
|
var ReviewsStars = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
18948
19057
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
@@ -18957,17 +19066,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18957
19066
|
var theme = useTheme();
|
|
18958
19067
|
return (jsxs$1(Container$h, { 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));
|
|
18959
19068
|
};
|
|
18960
|
-
var templateObject_1$
|
|
19069
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
18961
19070
|
|
|
18962
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18963
|
-
var Text = newStyled.p(templateObject_2$
|
|
19071
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
19072
|
+
var Text = newStyled.p(templateObject_2$h || (templateObject_2$h = __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; });
|
|
18964
19073
|
var ScrollToTop = function (_a) {
|
|
18965
19074
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18966
19075
|
var theme = useTheme();
|
|
18967
19076
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18968
19077
|
return (jsxs$1(Container$g, __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));
|
|
18969
19078
|
};
|
|
18970
|
-
var templateObject_1$
|
|
19079
|
+
var templateObject_1$p, templateObject_2$h;
|
|
18971
19080
|
|
|
18972
19081
|
var Input = newStyled.input(function (props) { return ({
|
|
18973
19082
|
padding: props.theme.component.input.padding,
|
|
@@ -18998,7 +19107,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18998
19107
|
},
|
|
18999
19108
|
}); });
|
|
19000
19109
|
|
|
19001
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19110
|
+
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __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({
|
|
19002
19111
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19003
19112
|
}));
|
|
19004
19113
|
var Description = newStyled.div({
|
|
@@ -19017,7 +19126,7 @@ var ProductItem = function (_a) {
|
|
|
19017
19126
|
var theme = useTheme();
|
|
19018
19127
|
return (jsxs$1(Container$f, __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, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19019
19128
|
};
|
|
19020
|
-
var templateObject_1$
|
|
19129
|
+
var templateObject_1$o;
|
|
19021
19130
|
|
|
19022
19131
|
var Container$e = newStyled.div({
|
|
19023
19132
|
display: 'flex',
|
|
@@ -19033,7 +19142,7 @@ var Ul = newStyled.ul({
|
|
|
19033
19142
|
margin: '0px',
|
|
19034
19143
|
padding: '0px',
|
|
19035
19144
|
});
|
|
19036
|
-
var Li = newStyled.li(templateObject_1$
|
|
19145
|
+
var Li = newStyled.li(templateObject_1$n || (templateObject_1$n = __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({
|
|
19037
19146
|
padding: [0, '0rem 1rem'],
|
|
19038
19147
|
borderRadius: [0, '0.5rem'],
|
|
19039
19148
|
}));
|
|
@@ -19045,7 +19154,7 @@ var Anchor = newStyled.a({
|
|
|
19045
19154
|
padding: 0,
|
|
19046
19155
|
textDecoration: 'none',
|
|
19047
19156
|
});
|
|
19048
|
-
var Container$d = newStyled.div(templateObject_2$
|
|
19157
|
+
var Container$d = newStyled.div(templateObject_2$g || (templateObject_2$g = __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({
|
|
19049
19158
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19050
19159
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19051
19160
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19058,9 +19167,9 @@ var ResultsPanel = function (_a) {
|
|
|
19058
19167
|
var theme = useTheme();
|
|
19059
19168
|
return (jsxs$1(Container$d, __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));
|
|
19060
19169
|
};
|
|
19061
|
-
var templateObject_1$
|
|
19170
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$d;
|
|
19062
19171
|
|
|
19063
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19172
|
+
var Button$1 = newStyled.button(templateObject_1$m || (templateObject_1$m = __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({
|
|
19064
19173
|
right: ['1rem', '7.75rem'],
|
|
19065
19174
|
top: ['0.75rem', '0.75rem'],
|
|
19066
19175
|
}));
|
|
@@ -19069,7 +19178,7 @@ var ClearButton = function (_a) {
|
|
|
19069
19178
|
var theme = useTheme();
|
|
19070
19179
|
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));
|
|
19071
19180
|
};
|
|
19072
|
-
var templateObject_1$
|
|
19181
|
+
var templateObject_1$m;
|
|
19073
19182
|
|
|
19074
19183
|
var SearchIconContainer = newStyled.div({
|
|
19075
19184
|
display: 'flex',
|
|
@@ -19079,7 +19188,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19079
19188
|
background: 'white',
|
|
19080
19189
|
alignSelf: 'center',
|
|
19081
19190
|
});
|
|
19082
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19191
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
19083
19192
|
var SearchControl = function (_a) {
|
|
19084
19193
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19085
19194
|
var theme = useTheme();
|
|
@@ -19093,9 +19202,9 @@ var SearchControl = function (_a) {
|
|
|
19093
19202
|
}
|
|
19094
19203
|
return (jsx$1(SearchIconContainer, { children: jsx$1(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
|
|
19095
19204
|
}
|
|
19096
|
-
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));
|
|
19205
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19097
19206
|
};
|
|
19098
|
-
var templateObject_1$
|
|
19207
|
+
var templateObject_1$l;
|
|
19099
19208
|
|
|
19100
19209
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19101
19210
|
var reducer = function (state, action) {
|
|
@@ -19162,8 +19271,8 @@ var SearchBar = function (_a) {
|
|
|
19162
19271
|
} }, 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));
|
|
19163
19272
|
};
|
|
19164
19273
|
|
|
19165
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19166
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19274
|
+
var Container$b = newStyled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
19275
|
+
var BackArrow = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19167
19276
|
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
19168
19277
|
var NormalSpan = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
19169
19278
|
var SearchNavigationParents = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
@@ -19173,9 +19282,9 @@ var SearchNavigation = function (_a) {
|
|
|
19173
19282
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19174
19283
|
}) }, void 0)] }, void 0));
|
|
19175
19284
|
};
|
|
19176
|
-
var templateObject_1$
|
|
19285
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19177
19286
|
|
|
19178
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
19287
|
+
var Container$a = newStyled.div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
19179
19288
|
var alignCenter = _a.alignCenter;
|
|
19180
19289
|
return alignCenter &&
|
|
19181
19290
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19185,17 +19294,17 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19185
19294
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19186
19295
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19187
19296
|
});
|
|
19188
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19297
|
+
var TitleText = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
19189
19298
|
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
19190
19299
|
var ShortBanner = function (_a) {
|
|
19191
19300
|
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;
|
|
19192
19301
|
var theme = useTheme();
|
|
19193
19302
|
return (jsxs$1(Container$a, __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));
|
|
19194
19303
|
};
|
|
19195
|
-
var templateObject_1$
|
|
19304
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$b;
|
|
19196
19305
|
|
|
19197
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19198
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19306
|
+
var TableElement$1 = newStyled.table(templateObject_1$i || (templateObject_1$i = __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; });
|
|
19307
|
+
var TableCell$1 = newStyled.td(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\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 text-align: center;\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; });
|
|
19199
19308
|
var TableHead$1 = newStyled.th(templateObject_3$a || (templateObject_3$a = __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; });
|
|
19200
19309
|
var Label = newStyled('div')(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
19201
19310
|
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
@@ -19204,7 +19313,7 @@ var Container$9 = newStyled('div')(templateObject_7$4 || (templateObject_7$4 = _
|
|
|
19204
19313
|
var LabelText = newStyled('span')(templateObject_8$4 || (templateObject_8$4 = __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"])));
|
|
19205
19314
|
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
19206
19315
|
var TableRow$1 = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __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; });
|
|
19207
|
-
var templateObject_1$
|
|
19316
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$a, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$2, templateObject_10$1;
|
|
19208
19317
|
|
|
19209
19318
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19210
19319
|
var getCellColor = function (index, cell) {
|
|
@@ -19245,8 +19354,8 @@ var SizeChartTable = function (_a) {
|
|
|
19245
19354
|
}, 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$1, __assign$1({ className: getIsOdd(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$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19246
19355
|
};
|
|
19247
19356
|
|
|
19248
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19249
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19357
|
+
var TableElement = newStyled.table(templateObject_1$h || (templateObject_1$h = __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; });
|
|
19358
|
+
var TableCell = newStyled.td(templateObject_2$c || (templateObject_2$c = __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; });
|
|
19250
19359
|
var TableHead = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __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; });
|
|
19251
19360
|
var TableRow = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __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; });
|
|
19252
19361
|
var SizeTable = function (_a) {
|
|
@@ -19254,7 +19363,7 @@ var SizeTable = function (_a) {
|
|
|
19254
19363
|
var theme = useTheme();
|
|
19255
19364
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __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, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19256
19365
|
};
|
|
19257
|
-
var templateObject_1$
|
|
19366
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$9, templateObject_4$7;
|
|
19258
19367
|
|
|
19259
19368
|
var getStylesBySize$4 = function (size) {
|
|
19260
19369
|
switch (size) {
|
|
@@ -19281,7 +19390,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19281
19390
|
} });
|
|
19282
19391
|
};
|
|
19283
19392
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19284
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19393
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$g || (templateObject_1$g = __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));
|
|
19285
19394
|
};
|
|
19286
19395
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19287
19396
|
if (disabled)
|
|
@@ -19297,23 +19406,23 @@ var TextButton = function (_a) {
|
|
|
19297
19406
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19298
19407
|
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));
|
|
19299
19408
|
};
|
|
19300
|
-
var templateObject_1$
|
|
19409
|
+
var templateObject_1$g;
|
|
19301
19410
|
|
|
19302
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
19303
|
-
var P = newStyled.p(templateObject_2$
|
|
19411
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
19412
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19304
19413
|
var PercentageSpan = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
19305
19414
|
var SizeFitGuide = function (_a) {
|
|
19306
19415
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19307
19416
|
return (jsxs$1(Container$8, { 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));
|
|
19308
19417
|
};
|
|
19309
|
-
var templateObject_1$
|
|
19418
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$8;
|
|
19310
19419
|
|
|
19311
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19420
|
+
var ButtonsContainer = newStyled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
19312
19421
|
var inline = _a.inline;
|
|
19313
19422
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19314
19423
|
});
|
|
19315
|
-
var Row = newStyled.div(templateObject_2$
|
|
19316
|
-
var templateObject_1$
|
|
19424
|
+
var Row = newStyled.div(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
19425
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19317
19426
|
|
|
19318
19427
|
var SizeSelector = function (_a) {
|
|
19319
19428
|
var _b;
|
|
@@ -19333,7 +19442,7 @@ var SizeSelector = function (_a) {
|
|
|
19333
19442
|
}) }), void 0)] }), void 0));
|
|
19334
19443
|
};
|
|
19335
19444
|
|
|
19336
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19445
|
+
var TabContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
19337
19446
|
var titleSize = _a.titleSize;
|
|
19338
19447
|
return titleSize;
|
|
19339
19448
|
}, function (_a) {
|
|
@@ -19350,10 +19459,10 @@ var Tab = function (_a) {
|
|
|
19350
19459
|
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;
|
|
19351
19460
|
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));
|
|
19352
19461
|
};
|
|
19353
|
-
var templateObject_1$
|
|
19462
|
+
var templateObject_1$d;
|
|
19354
19463
|
|
|
19355
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
19356
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19464
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19465
|
+
var TabList = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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) {
|
|
19357
19466
|
var backgroundColor = _a.backgroundColor;
|
|
19358
19467
|
return backgroundColor;
|
|
19359
19468
|
}, function (_a) {
|
|
@@ -19372,14 +19481,14 @@ var Tabs = function (_a) {
|
|
|
19372
19481
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19373
19482
|
return (jsxs$1(Container$7, __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));
|
|
19374
19483
|
};
|
|
19375
|
-
var templateObject_1$
|
|
19484
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$6;
|
|
19376
19485
|
|
|
19377
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
19486
|
+
var Container$6 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
19378
19487
|
var Tag = function (_a) {
|
|
19379
19488
|
var text = _a.text, className = _a.className;
|
|
19380
19489
|
return jsx$1(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19381
19490
|
};
|
|
19382
|
-
var templateObject_1$
|
|
19491
|
+
var templateObject_1$b;
|
|
19383
19492
|
|
|
19384
19493
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19385
19494
|
switch (size) {
|
|
@@ -19490,8 +19599,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19490
19599
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19491
19600
|
};
|
|
19492
19601
|
|
|
19493
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19494
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19602
|
+
var ImageWrapper = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
19603
|
+
var VideoOverlay = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
19495
19604
|
var FullscreenVideo = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
19496
19605
|
var ImageVideo = function (_a) {
|
|
19497
19606
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19512,10 +19621,10 @@ var ImageVideo = function (_a) {
|
|
|
19512
19621
|
height: '100%',
|
|
19513
19622
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19514
19623
|
};
|
|
19515
|
-
var templateObject_1$
|
|
19624
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6;
|
|
19516
19625
|
|
|
19517
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19518
|
-
var ContainerMobile = css(templateObject_2$
|
|
19626
|
+
var ContainerDesktop = css(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
19627
|
+
var ContainerMobile = css(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
19519
19628
|
var Container$5 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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);
|
|
19520
19629
|
var TextContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
19521
19630
|
var TextWithImage = function (_a) {
|
|
@@ -19537,7 +19646,7 @@ var TextWithImage = function (_a) {
|
|
|
19537
19646
|
// @ts-ignore
|
|
19538
19647
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19539
19648
|
};
|
|
19540
|
-
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile
|
|
19649
|
+
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19541
19650
|
backgroundColor: props.btnBGColor,
|
|
19542
19651
|
color: '#ffffff',
|
|
19543
19652
|
border: props.btnBGColor,
|
|
@@ -19547,9 +19656,9 @@ var TextWithImage = function (_a) {
|
|
|
19547
19656
|
},
|
|
19548
19657
|
} }, 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));
|
|
19549
19658
|
};
|
|
19550
|
-
var templateObject_1$
|
|
19659
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$5;
|
|
19551
19660
|
|
|
19552
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19661
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19553
19662
|
var timerColor = _a.timerColor;
|
|
19554
19663
|
return timerColor || '';
|
|
19555
19664
|
});
|
|
@@ -19585,10 +19694,10 @@ var Timer = function (_a) {
|
|
|
19585
19694
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19586
19695
|
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));
|
|
19587
19696
|
};
|
|
19588
|
-
var templateObject_1$
|
|
19697
|
+
var templateObject_1$8;
|
|
19589
19698
|
|
|
19590
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19591
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19699
|
+
var Wrapper$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
19700
|
+
var GrandTotal = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __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; });
|
|
19592
19701
|
var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __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) {
|
|
19593
19702
|
var theme = _a.theme;
|
|
19594
19703
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19616,7 +19725,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$3 || (templateObject_7$3 = __
|
|
|
19616
19725
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19617
19726
|
});
|
|
19618
19727
|
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19619
|
-
var templateObject_1$
|
|
19728
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3;
|
|
19620
19729
|
|
|
19621
19730
|
var Total = function (_a) {
|
|
19622
19731
|
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;
|
|
@@ -19624,11 +19733,11 @@ var Total = function (_a) {
|
|
|
19624
19733
|
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$4, __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));
|
|
19625
19734
|
};
|
|
19626
19735
|
|
|
19627
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19736
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19628
19737
|
var color = _a.color;
|
|
19629
19738
|
return color;
|
|
19630
19739
|
});
|
|
19631
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19740
|
+
var ItemContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
19632
19741
|
var Item = newStyled.h4(templateObject_3$3 || (templateObject_3$3 = __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) {
|
|
19633
19742
|
var theme = _a.theme;
|
|
19634
19743
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19649,15 +19758,15 @@ var Subtotal = function (_a) {
|
|
|
19649
19758
|
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));
|
|
19650
19759
|
})] }), void 0));
|
|
19651
19760
|
};
|
|
19652
|
-
var templateObject_1$
|
|
19761
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$3;
|
|
19653
19762
|
|
|
19654
19763
|
var Totals = {
|
|
19655
19764
|
Total: Total,
|
|
19656
19765
|
Subtotal: Subtotal,
|
|
19657
19766
|
};
|
|
19658
19767
|
|
|
19659
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
19660
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19768
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19769
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19661
19770
|
var CheckpointDate$1 = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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; });
|
|
19662
19771
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __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'); });
|
|
19663
19772
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$2 || (templateObject_5$2 = __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"])));
|
|
@@ -19708,10 +19817,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19708
19817
|
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));
|
|
19709
19818
|
})] }), void 0));
|
|
19710
19819
|
};
|
|
19711
|
-
var templateObject_1$
|
|
19820
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11;
|
|
19712
19821
|
|
|
19713
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19714
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19822
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19823
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19715
19824
|
var CheckpointDate = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __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; });
|
|
19716
19825
|
var CheckpointDateLabel = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __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'); });
|
|
19717
19826
|
var CheckpointStatus = newStyled.p(templateObject_5$1 || (templateObject_5$1 = __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'); });
|
|
@@ -19748,7 +19857,77 @@ var TrackingProgress = function (_a) {
|
|
|
19748
19857
|
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));
|
|
19749
19858
|
})] }), void 0));
|
|
19750
19859
|
};
|
|
19751
|
-
var templateObject_1$
|
|
19860
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
19861
|
+
|
|
19862
|
+
var StyledButton = newStyled(Ye.Button)(function (props) { return ({
|
|
19863
|
+
background: props.bgColor,
|
|
19864
|
+
height: '100%',
|
|
19865
|
+
maxHeight: '48px',
|
|
19866
|
+
border: 'none',
|
|
19867
|
+
display: 'flex',
|
|
19868
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
19869
|
+
justifyContent: 'space-between',
|
|
19870
|
+
alignItems: 'center',
|
|
19871
|
+
padding: '10px 24px',
|
|
19872
|
+
}); });
|
|
19873
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
19874
|
+
width: '100%',
|
|
19875
|
+
background: 'transparent',
|
|
19876
|
+
border: 'none',
|
|
19877
|
+
display: 'flex',
|
|
19878
|
+
flexDirection: 'column',
|
|
19879
|
+
alignItems: 'center',
|
|
19880
|
+
justifyContent: 'center',
|
|
19881
|
+
gap: '10px',
|
|
19882
|
+
});
|
|
19883
|
+
var StyledContent = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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) {
|
|
19884
|
+
var bgColor = _a.bgColor;
|
|
19885
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
19886
|
+
}, function (_a) {
|
|
19887
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
19888
|
+
return width;
|
|
19889
|
+
});
|
|
19890
|
+
var StyledController = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
19891
|
+
var templateObject_1$3, templateObject_2$2;
|
|
19892
|
+
|
|
19893
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
19894
|
+
var background = _a.background;
|
|
19895
|
+
return ({
|
|
19896
|
+
display: 'flex',
|
|
19897
|
+
flexDirection: 'column',
|
|
19898
|
+
justifyContent: 'center',
|
|
19899
|
+
gap: '10px',
|
|
19900
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
19901
|
+
width: 'auto',
|
|
19902
|
+
borderRadius: '8px',
|
|
19903
|
+
border: '0.063rem solid',
|
|
19904
|
+
borderColor: '#e5e5e5',
|
|
19905
|
+
padding: 'unset',
|
|
19906
|
+
overflow: 'hidden',
|
|
19907
|
+
});
|
|
19908
|
+
});
|
|
19909
|
+
var ControlIconComponent = memo(function (_a) {
|
|
19910
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
19911
|
+
var Icon = open ? closeIcon : openIcon;
|
|
19912
|
+
return jsx$1(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
19913
|
+
});
|
|
19914
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
19915
|
+
var HeaderContentComponent = memo(function (_a) {
|
|
19916
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
19917
|
+
return jsx$1(Fragment$2, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
19918
|
+
});
|
|
19919
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
19920
|
+
var AccordionContent = function (_a) {
|
|
19921
|
+
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
19922
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
19923
|
+
};
|
|
19924
|
+
var BasicAccordion = function (_a) {
|
|
19925
|
+
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.contentWidth, contentWidth = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
19926
|
+
return (jsx$1(StyledDisclosure, __assign$1({ as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick }, { children: function (_a) {
|
|
19927
|
+
var open = _a.open;
|
|
19928
|
+
return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon, contentWidth: contentWidth }, { children: children }), void 0));
|
|
19929
|
+
} }), void 0));
|
|
19930
|
+
};
|
|
19752
19931
|
|
|
19753
19932
|
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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) {
|
|
19754
19933
|
var textPosition = _a.textPosition;
|
|
@@ -19909,5 +20088,5 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
19909
20088
|
}) }), void 0)] }), void 0) }), void 0));
|
|
19910
20089
|
};
|
|
19911
20090
|
|
|
19912
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20091
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, Coupon, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19913
20092
|
//# sourceMappingURL=index.esm.js.map
|