@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.js
CHANGED
|
@@ -3153,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3153
|
desktop: 1280,
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Container$
|
|
3156
|
+
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) {
|
|
3157
3157
|
var height = _a.height;
|
|
3158
3158
|
return (height ? height : '1.5em');
|
|
3159
3159
|
}, function (_a) {
|
|
@@ -3178,11 +3178,11 @@ var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
3178
3178
|
var SkeletonBox = function (_a) {
|
|
3179
3179
|
var width = _a.width, height = _a.height;
|
|
3180
3180
|
var theme = useTheme();
|
|
3181
|
-
return jsxRuntime.jsx(Container$
|
|
3181
|
+
return jsxRuntime.jsx(Container$1e, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3182
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$1$;
|
|
3184
3184
|
|
|
3185
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3185
|
+
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) {
|
|
3186
3186
|
var width = _a.width;
|
|
3187
3187
|
return width;
|
|
3188
3188
|
}, function (_a) {
|
|
@@ -3198,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X
|
|
|
3198
3198
|
var opacity = _a.opacity;
|
|
3199
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3200
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
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) {
|
|
3202
3202
|
var width = _a.width;
|
|
3203
3203
|
return width;
|
|
3204
3204
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1i || (templateObject_2$
|
|
|
3211
3211
|
var opacity = _a.opacity;
|
|
3212
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3213
|
});
|
|
3214
|
-
var templateObject_1$
|
|
3214
|
+
var templateObject_1$1_, templateObject_2$1l;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3387,16 +3387,16 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3387
|
}
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3390
|
+
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; });
|
|
3391
3391
|
var Image$3 = function (_a) {
|
|
3392
|
-
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,
|
|
3392
|
+
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"]);
|
|
3393
3393
|
var config = useTheme().config;
|
|
3394
3394
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3395
3395
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3396
3396
|
: src;
|
|
3397
|
-
return (jsxRuntime.jsx(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition
|
|
3397
|
+
return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3398
3398
|
};
|
|
3399
|
-
var templateObject_1$
|
|
3399
|
+
var templateObject_1$1Z;
|
|
3400
3400
|
|
|
3401
3401
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3402
3402
|
|
|
@@ -4181,11 +4181,11 @@ function jsxs(type, props, key) {
|
|
|
4181
4181
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4182
4182
|
// `variants` styles that are consistent through all themes.
|
|
4183
4183
|
var TAGS = {
|
|
4184
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4185
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4186
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4187
|
-
display1: newStyled.h1(templateObject_4$
|
|
4188
|
-
display2: newStyled.h2(templateObject_5$
|
|
4184
|
+
hero1: newStyled.h1(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject([""], [""]))),
|
|
4185
|
+
hero2: newStyled.h2(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject([""], [""]))),
|
|
4186
|
+
hero3: newStyled.h3(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject([""], [""]))),
|
|
4187
|
+
display1: newStyled.h1(templateObject_4$M || (templateObject_4$M = __makeTemplateObject([""], [""]))),
|
|
4188
|
+
display2: newStyled.h2(templateObject_5$y || (templateObject_5$y = __makeTemplateObject([""], [""]))),
|
|
4189
4189
|
display3: newStyled.h3(templateObject_6$s || (templateObject_6$s = __makeTemplateObject([""], [""]))),
|
|
4190
4190
|
heading1: newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject([""], [""]))),
|
|
4191
4191
|
heading2: newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4210,7 +4210,7 @@ var Text$7 = function (_a) {
|
|
|
4210
4210
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4211
4211
|
var theme = useTheme();
|
|
4212
4212
|
var Tag = asSpan ? 'span' : TAGS[variant] || 'p';
|
|
4213
|
-
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"]);
|
|
4213
|
+
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"]);
|
|
4214
4214
|
var commonCSS = React$2.useMemo(function () {
|
|
4215
4215
|
var _a, _b;
|
|
4216
4216
|
// These are the common style inside a `variant`.
|
|
@@ -4227,7 +4227,7 @@ var Text$7 = function (_a) {
|
|
|
4227
4227
|
var variantName = [variant, size].filter(Boolean).join('-');
|
|
4228
4228
|
// These are styles specific to `variation-size`.
|
|
4229
4229
|
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
4230
|
-
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4230
|
+
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: color || theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4231
4231
|
if (weight) {
|
|
4232
4232
|
style.fontWeight = theme.typography.config.weight[weight];
|
|
4233
4233
|
}
|
|
@@ -4237,7 +4237,7 @@ var Text$7 = function (_a) {
|
|
|
4237
4237
|
style.color = theme.colors.text.disabled;
|
|
4238
4238
|
}
|
|
4239
4239
|
return style;
|
|
4240
|
-
}, [theme, variant, weight, size, props.disabled]);
|
|
4240
|
+
}, [theme, variant, weight, size, color, props.disabled]);
|
|
4241
4241
|
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
4242
4242
|
var propsHref = props.href;
|
|
4243
4243
|
var href = React$2.useMemo(function () {
|
|
@@ -4317,17 +4317,17 @@ var DEFAULTS = {
|
|
|
4317
4317
|
size: 'regular',
|
|
4318
4318
|
},
|
|
4319
4319
|
};
|
|
4320
|
-
var templateObject_1$
|
|
4320
|
+
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;
|
|
4321
4321
|
|
|
4322
|
-
var Container$
|
|
4323
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4324
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4325
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4326
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4322
|
+
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"])));
|
|
4323
|
+
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"])));
|
|
4324
|
+
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"])));
|
|
4325
|
+
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"])));
|
|
4326
|
+
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"])));
|
|
4327
4327
|
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"])));
|
|
4328
4328
|
var PackSelectorV2 = function (_a) {
|
|
4329
4329
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4330
|
-
return (jsxRuntime.jsx(Container$
|
|
4330
|
+
return (jsxRuntime.jsx(Container$1d, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4331
4331
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4332
4332
|
}) }), void 0));
|
|
4333
4333
|
};
|
|
@@ -4349,27 +4349,27 @@ var PackCard$1 = function (_a) {
|
|
|
4349
4349
|
currency: currencyCode || 'USD',
|
|
4350
4350
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4351
4351
|
};
|
|
4352
|
-
var templateObject_1$
|
|
4352
|
+
var templateObject_1$1X, templateObject_2$1j, templateObject_3$$, templateObject_4$L, templateObject_5$x, templateObject_6$r;
|
|
4353
4353
|
|
|
4354
|
-
var Container$
|
|
4355
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4354
|
+
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"])));
|
|
4355
|
+
var DropContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4356
4356
|
var DropList = function (_a) {
|
|
4357
4357
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4358
|
-
return (jsxRuntime.jsx(Container$
|
|
4358
|
+
return (jsxRuntime.jsx(Container$1c, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4359
4359
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4360
4360
|
}) }, void 0));
|
|
4361
4361
|
};
|
|
4362
|
-
var templateObject_1$
|
|
4362
|
+
var templateObject_1$1W, templateObject_2$1i;
|
|
4363
4363
|
|
|
4364
4364
|
var DROPS_TOTAL = 5;
|
|
4365
|
-
var Container$
|
|
4366
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4367
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4365
|
+
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"])));
|
|
4366
|
+
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"])));
|
|
4367
|
+
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"])));
|
|
4368
4368
|
var AbsorbencyLevel = function (_a) {
|
|
4369
4369
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4370
|
-
return (jsxRuntime.jsxs(Container$
|
|
4370
|
+
return (jsxRuntime.jsxs(Container$1b, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4371
4371
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1V, templateObject_2$1h, templateObject_3$_;
|
|
4373
4373
|
|
|
4374
4374
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4375
4375
|
`),"","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(`
|
|
@@ -4440,38 +4440,38 @@ var AccordionDetailsStyles = {
|
|
|
4440
4440
|
},
|
|
4441
4441
|
};
|
|
4442
4442
|
|
|
4443
|
-
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4444
|
-
var StyledButton$
|
|
4443
|
+
var StyledDisclosure$1 = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4444
|
+
var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [
|
|
4445
4445
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4446
4446
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4447
|
-
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4448
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4447
|
+
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4448
|
+
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"])));
|
|
4449
4449
|
var Accordion$1 = function (_a) {
|
|
4450
4450
|
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;
|
|
4451
4451
|
var theme = useTheme();
|
|
4452
|
-
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4452
|
+
return (jsxRuntime.jsx(StyledDisclosure$1, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4453
4453
|
var open = _a.open;
|
|
4454
4454
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
4455
4455
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
4456
4456
|
var showPanel = openWithForce && !disabled;
|
|
4457
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$
|
|
4457
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$3, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor, controlIconPos: controlIconPos }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, controlIconPos === 'right' && (jsxRuntime.jsx(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 && (jsxRuntime.jsx("div", __assign$1({ className: "openIconBottom", style: {
|
|
4458
4458
|
width: '100%',
|
|
4459
4459
|
display: 'flex',
|
|
4460
4460
|
justifyContent: 'center',
|
|
4461
4461
|
padding: '0 0 15px 0',
|
|
4462
4462
|
backgroundColor: backgroundCover.iconBgColor || 'inherit',
|
|
4463
|
-
} }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0), jsxRuntime.jsx("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4463
|
+
} }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0), jsxRuntime.jsx("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4464
4464
|
width: '100%',
|
|
4465
4465
|
display: 'flex',
|
|
4466
4466
|
justifyContent: 'center',
|
|
4467
4467
|
margin: '20px 0',
|
|
4468
4468
|
backgroundColor: 'transparent',
|
|
4469
|
-
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4469
|
+
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4470
4470
|
} }), void 0));
|
|
4471
4471
|
};
|
|
4472
|
-
var templateObject_1$
|
|
4472
|
+
var templateObject_1$1U;
|
|
4473
4473
|
|
|
4474
|
-
var Container$
|
|
4474
|
+
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"])));
|
|
4475
4475
|
var AccordionOptions = function (_a) {
|
|
4476
4476
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4477
4477
|
var _b = React$2.useState({
|
|
@@ -4484,7 +4484,7 @@ var AccordionOptions = function (_a) {
|
|
|
4484
4484
|
}
|
|
4485
4485
|
return false;
|
|
4486
4486
|
};
|
|
4487
|
-
return (jsxRuntime.jsx(Container$
|
|
4487
|
+
return (jsxRuntime.jsx(Container$1a, { children: accordions.map(function (accordion, index) {
|
|
4488
4488
|
var forceOpenValue = getForceOpen(index);
|
|
4489
4489
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4490
4490
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4495,7 +4495,7 @@ var AccordionOptions = function (_a) {
|
|
|
4495
4495
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4496
4496
|
}) }, void 0));
|
|
4497
4497
|
};
|
|
4498
|
-
var templateObject_1$
|
|
4498
|
+
var templateObject_1$1T;
|
|
4499
4499
|
|
|
4500
4500
|
exports.CardSectionType = void 0;
|
|
4501
4501
|
(function (CardSectionType) {
|
|
@@ -4657,14 +4657,73 @@ var isValidDate = function (value) {
|
|
|
4657
4657
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4658
4658
|
};
|
|
4659
4659
|
|
|
4660
|
-
var
|
|
4661
|
-
var
|
|
4660
|
+
var Bold = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4661
|
+
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"])));
|
|
4662
|
+
var templateObject_1$1S, templateObject_2$1g;
|
|
4663
|
+
|
|
4664
|
+
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) {
|
|
4665
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4666
|
+
return width;
|
|
4667
|
+
}, function (_a) {
|
|
4668
|
+
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4669
|
+
return height;
|
|
4670
|
+
});
|
|
4671
|
+
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"])));
|
|
4672
|
+
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"])));
|
|
4673
|
+
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"])));
|
|
4674
|
+
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"])));
|
|
4675
|
+
var templateObject_1$1R, templateObject_2$1f, templateObject_3$Z, templateObject_4$K, templateObject_5$w;
|
|
4676
|
+
|
|
4677
|
+
var _this$1 = undefined;
|
|
4678
|
+
var Coupon = function (_a) {
|
|
4679
|
+
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;
|
|
4680
|
+
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4681
|
+
var _d = React$2.useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
|
|
4682
|
+
var handleCopy = React$2.useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4683
|
+
React$2.useEffect(function () {
|
|
4684
|
+
setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
|
|
4685
|
+
}, [showCoupon]);
|
|
4686
|
+
return (jsxRuntime.jsxs(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
4687
|
+
name: 'actions/copy_outlined',
|
|
4688
|
+
position: 'right',
|
|
4689
|
+
margin: '10px',
|
|
4690
|
+
}, onClick: handleCopy.bind(_this$1, couponCode !== null && couponCode !== void 0 ? couponCode : '') }, void 0), jsxRuntime.jsx(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));
|
|
4691
|
+
};
|
|
4692
|
+
|
|
4693
|
+
// Partner titles
|
|
4694
|
+
var REVEL_BEAUTY_TITLE = 'REVEL BEAUTY';
|
|
4695
|
+
var THE_SPA_DR_TITLE = 'THE SPA DR.';
|
|
4696
|
+
// Coupon contents
|
|
4697
|
+
var CouponDefaultBody = function (firstLine, secondLine) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { textAlign: 'initial' } }, { children: firstLine }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading5", weight: "bold" }, { children: secondLine }), void 0)] }, void 0)); };
|
|
4698
|
+
var TheBodConContent = function () { return (jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE and PREMIUM" }, void 0), " access to The BodCon Community App."] }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: ["The #1 Body Confidence Community. You'll have ", jsxRuntime.jsx(Bold, { children: "FREE access to:" }, void 0)] }), void 0), jsxRuntime.jsxs("ul", __assign$1({ style: { marginBottom: '5px', padding: '11px' } }, { children: [jsxRuntime.jsx("li", __assign$1({ style: { marginBottom: '5px' } }, { children: jsxRuntime.jsx(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), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(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), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE" }, void 0), " access to The BodCon 2023 replays!"] }), void 0), jsxRuntime.jsx(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)); };
|
|
4699
|
+
var cancellationFlowContentPerKey = {
|
|
4700
|
+
'RevelBeauty-1': CouponDefaultBody('Beauty Lift and Tighten Serum', '$10 OFF'),
|
|
4701
|
+
'RevelBeauty-2': CouponDefaultBody('Orders above $50', 'FREE SHIPPING'),
|
|
4702
|
+
'TheSpaDr-1': CouponDefaultBody('Daily Essentials 4-Step Skin Care System', '25% OFF'),
|
|
4703
|
+
'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
|
|
4704
|
+
TheBodCon: TheBodConContent(),
|
|
4705
|
+
};
|
|
4706
|
+
var couponWidth = '90%';
|
|
4707
|
+
var CancellationFlowAccordionContentPerPartner = {
|
|
4708
|
+
RevelBeauty: [
|
|
4709
|
+
jsxRuntime.jsx(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"),
|
|
4710
|
+
jsxRuntime.jsx(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"),
|
|
4711
|
+
],
|
|
4712
|
+
TheSpaDr: [
|
|
4713
|
+
jsxRuntime.jsx(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"),
|
|
4714
|
+
jsxRuntime.jsx(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"),
|
|
4715
|
+
],
|
|
4716
|
+
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4717
|
+
};
|
|
4718
|
+
|
|
4719
|
+
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; });
|
|
4720
|
+
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"])));
|
|
4662
4721
|
var Error$1 = function (_a) {
|
|
4663
4722
|
var error = _a.error;
|
|
4664
4723
|
var theme = useTheme();
|
|
4665
4724
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4666
4725
|
};
|
|
4667
|
-
var templateObject_1$
|
|
4726
|
+
var templateObject_1$1Q, templateObject_2$1e;
|
|
4668
4727
|
|
|
4669
4728
|
var BaseSelectButton = function (_a) {
|
|
4670
4729
|
var children = _a.children, as = _a.as;
|
|
@@ -4681,7 +4740,7 @@ function BaseSelectOption(_a) {
|
|
|
4681
4740
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4682
4741
|
}
|
|
4683
4742
|
|
|
4684
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4743
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4685
4744
|
function BaseSelect(_a) {
|
|
4686
4745
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4687
4746
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4691,7 +4750,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4691
4750
|
Options: BaseSelectOptions,
|
|
4692
4751
|
Option: BaseSelectOption,
|
|
4693
4752
|
});
|
|
4694
|
-
var templateObject_1$
|
|
4753
|
+
var templateObject_1$1P;
|
|
4695
4754
|
|
|
4696
4755
|
var CustomButton = newStyled.button(function (_a) {
|
|
4697
4756
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4729,8 +4788,8 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4729
4788
|
},
|
|
4730
4789
|
});
|
|
4731
4790
|
});
|
|
4732
|
-
//TODO Remove this when we find the real solution
|
|
4733
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4791
|
+
// TODO Remove this when we find the real solution
|
|
4792
|
+
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) {
|
|
4734
4793
|
var open = _a.open;
|
|
4735
4794
|
return open &&
|
|
4736
4795
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4750,7 +4809,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4750
4809
|
} }), void 0));
|
|
4751
4810
|
};
|
|
4752
4811
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4753
|
-
var templateObject_1$
|
|
4812
|
+
var templateObject_1$1O;
|
|
4754
4813
|
|
|
4755
4814
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4756
4815
|
var theme = _a.theme;
|
|
@@ -4917,7 +4976,7 @@ var CustomCheckboxStyles = {
|
|
|
4917
4976
|
},
|
|
4918
4977
|
};
|
|
4919
4978
|
|
|
4920
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
4979
|
+
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"])));
|
|
4921
4980
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4922
4981
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4923
4982
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4928,7 +4987,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4928
4987
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4929
4988
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4930
4989
|
]; });
|
|
4931
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4990
|
+
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) {
|
|
4932
4991
|
var disabled = _a.disabled;
|
|
4933
4992
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4934
4993
|
});
|
|
@@ -4944,7 +5003,7 @@ var Checkbox = function (_a) {
|
|
|
4944
5003
|
};
|
|
4945
5004
|
return (jsxRuntime.jsxs(Container$18, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4946
5005
|
};
|
|
4947
|
-
var templateObject_1$
|
|
5006
|
+
var templateObject_1$1N, templateObject_2$1d;
|
|
4948
5007
|
|
|
4949
5008
|
var CustomOption = newStyled.li(function (_a) {
|
|
4950
5009
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -4993,10 +5052,14 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4993
5052
|
Option: BaseDropdownOption,
|
|
4994
5053
|
});
|
|
4995
5054
|
|
|
4996
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
4997
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5055
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
5056
|
+
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"])));
|
|
5057
|
+
var SelectedOption = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5058
|
+
var fontWeight = _a.fontWeight;
|
|
5059
|
+
return fontWeight || '';
|
|
5060
|
+
});
|
|
4998
5061
|
function SimpleDropdown(_a) {
|
|
4999
|
-
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;
|
|
5062
|
+
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;
|
|
5000
5063
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
5001
5064
|
var selectedOptionLabel = React$2.useMemo(function () {
|
|
5002
5065
|
if (selectedValue) {
|
|
@@ -5024,9 +5087,9 @@ function SimpleDropdown(_a) {
|
|
|
5024
5087
|
setSelectedValue(value);
|
|
5025
5088
|
}, [value, options, initialValue]);
|
|
5026
5089
|
var DropdownContainer = showRequiredPlaceholder ? Container$17 : React$2.Fragment;
|
|
5027
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5090
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5028
5091
|
}
|
|
5029
|
-
var templateObject_1$
|
|
5092
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y;
|
|
5030
5093
|
|
|
5031
5094
|
/* base styles & size variants */
|
|
5032
5095
|
var CustomRadioStyles$2 = {
|
|
@@ -5091,9 +5154,9 @@ var ContainerStyles$2 = {
|
|
|
5091
5154
|
},
|
|
5092
5155
|
};
|
|
5093
5156
|
|
|
5094
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5157
|
+
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"])));
|
|
5095
5158
|
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5096
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5159
|
+
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) {
|
|
5097
5160
|
var disabled = _a.disabled;
|
|
5098
5161
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5099
5162
|
});
|
|
@@ -5124,7 +5187,7 @@ var RadioInput = function (_a) {
|
|
|
5124
5187
|
};
|
|
5125
5188
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$16, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5126
5189
|
};
|
|
5127
|
-
var templateObject_1$
|
|
5190
|
+
var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J;
|
|
5128
5191
|
|
|
5129
5192
|
var getWrapperFlexDirection = function (position) {
|
|
5130
5193
|
switch (position) {
|
|
@@ -5175,7 +5238,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5175
5238
|
}
|
|
5176
5239
|
};
|
|
5177
5240
|
|
|
5178
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5241
|
+
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) {
|
|
5179
5242
|
var position = _a.position;
|
|
5180
5243
|
return getWrapperFlexDirection(position);
|
|
5181
5244
|
}, function (_a) {
|
|
@@ -5185,7 +5248,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __ma
|
|
|
5185
5248
|
var disableHover = _a.disableHover;
|
|
5186
5249
|
return (disableHover ? 0 : 1);
|
|
5187
5250
|
});
|
|
5188
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5251
|
+
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) {
|
|
5189
5252
|
var position = _a.position;
|
|
5190
5253
|
return getContainerFlexDirection(position);
|
|
5191
5254
|
}, function (_a) {
|
|
@@ -5234,7 +5297,7 @@ var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g =
|
|
|
5234
5297
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5235
5298
|
return right;
|
|
5236
5299
|
});
|
|
5237
|
-
var templateObject_1$
|
|
5300
|
+
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;
|
|
5238
5301
|
|
|
5239
5302
|
var useOnClickOutside = function (ref, handler) {
|
|
5240
5303
|
React$2.useEffect(function () {
|
|
@@ -5308,6 +5371,29 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
5308
5371
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5309
5372
|
};
|
|
5310
5373
|
|
|
5374
|
+
var useDeviceType = function () {
|
|
5375
|
+
var mobileBreakpoint = 768;
|
|
5376
|
+
var tabletBreakpoint = 1024;
|
|
5377
|
+
var _a = React$2.useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5378
|
+
var handleResize = function () {
|
|
5379
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
5380
|
+
setDeviceType('mobile');
|
|
5381
|
+
}
|
|
5382
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
5383
|
+
setDeviceType('tablet');
|
|
5384
|
+
}
|
|
5385
|
+
else {
|
|
5386
|
+
setDeviceType('desktop');
|
|
5387
|
+
}
|
|
5388
|
+
};
|
|
5389
|
+
React$2.useLayoutEffect(function () {
|
|
5390
|
+
window.addEventListener('resize', handleResize);
|
|
5391
|
+
handleResize();
|
|
5392
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5393
|
+
}, []);
|
|
5394
|
+
return deviceType;
|
|
5395
|
+
};
|
|
5396
|
+
|
|
5311
5397
|
var Tooltip = function (_a) {
|
|
5312
5398
|
var _b;
|
|
5313
5399
|
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;
|
|
@@ -5377,7 +5463,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5377
5463
|
};
|
|
5378
5464
|
}
|
|
5379
5465
|
};
|
|
5380
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
5466
|
+
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) {
|
|
5381
5467
|
var backgroundColor = _a.backgroundColor;
|
|
5382
5468
|
return backgroundColor;
|
|
5383
5469
|
}, function (_a) {
|
|
@@ -5399,7 +5485,7 @@ var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5399
5485
|
var size = _a.size;
|
|
5400
5486
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5401
5487
|
});
|
|
5402
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5488
|
+
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) {
|
|
5403
5489
|
var textColor = _a.textColor;
|
|
5404
5490
|
return textColor;
|
|
5405
5491
|
}, function (_a) {
|
|
@@ -5416,7 +5502,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5416
5502
|
var theme = useTheme();
|
|
5417
5503
|
return (jsxRuntime.jsx(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: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5418
5504
|
};
|
|
5419
|
-
var templateObject_1$
|
|
5505
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5420
5506
|
|
|
5421
5507
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5422
5508
|
var _a, _b, _c;
|
|
@@ -5447,7 +5533,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5447
5533
|
};
|
|
5448
5534
|
}
|
|
5449
5535
|
};
|
|
5450
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
5536
|
+
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) {
|
|
5451
5537
|
var backgroundColor = _a.backgroundColor;
|
|
5452
5538
|
return backgroundColor;
|
|
5453
5539
|
}, function (_a) {
|
|
@@ -5469,7 +5555,7 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5469
5555
|
var size = _a.size;
|
|
5470
5556
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5471
5557
|
});
|
|
5472
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5558
|
+
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) {
|
|
5473
5559
|
var textColor = _a.textColor;
|
|
5474
5560
|
return textColor;
|
|
5475
5561
|
}, function (_a) {
|
|
@@ -5486,7 +5572,7 @@ var DiscountTag$1 = function (_a) {
|
|
|
5486
5572
|
var theme = useTheme();
|
|
5487
5573
|
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5488
5574
|
};
|
|
5489
|
-
var templateObject_1$
|
|
5575
|
+
var templateObject_1$1I, templateObject_2$18;
|
|
5490
5576
|
|
|
5491
5577
|
var getStylesBySize$b = function (size, theme) {
|
|
5492
5578
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5528,8 +5614,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5528
5614
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5529
5615
|
}
|
|
5530
5616
|
};
|
|
5531
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
5532
|
-
var Price = newStyled.p(templateObject_2$
|
|
5617
|
+
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"])));
|
|
5618
|
+
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) {
|
|
5533
5619
|
var weight = _a.weight;
|
|
5534
5620
|
return (weight ? weight : '400');
|
|
5535
5621
|
}, function (_a) {
|
|
@@ -5586,9 +5672,9 @@ var PriceLabel = function (_a) {
|
|
|
5586
5672
|
};
|
|
5587
5673
|
return (jsxRuntime.jsxs(Container$13, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5588
5674
|
};
|
|
5589
|
-
var templateObject_1$
|
|
5675
|
+
var templateObject_1$1H, templateObject_2$17, templateObject_3$V;
|
|
5590
5676
|
|
|
5591
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5677
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5592
5678
|
var PriceLabelV2 = function (_a) {
|
|
5593
5679
|
var _b;
|
|
5594
5680
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5659,10 +5745,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5659
5745
|
lineHeight: '22px',
|
|
5660
5746
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5661
5747
|
};
|
|
5662
|
-
var templateObject_1$
|
|
5748
|
+
var templateObject_1$1G;
|
|
5663
5749
|
|
|
5664
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5665
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5750
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5751
|
+
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"])));
|
|
5666
5752
|
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"])));
|
|
5667
5753
|
var PriceLabelV3 = function (_a) {
|
|
5668
5754
|
var _b;
|
|
@@ -5734,10 +5820,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5734
5820
|
lineHeight: '22px',
|
|
5735
5821
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5736
5822
|
};
|
|
5737
|
-
var templateObject_1$
|
|
5823
|
+
var templateObject_1$1F, templateObject_2$16, templateObject_3$U;
|
|
5738
5824
|
|
|
5739
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5740
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5825
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5826
|
+
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) {
|
|
5741
5827
|
var selected = _a.selected, theme = _a.theme;
|
|
5742
5828
|
return selected
|
|
5743
5829
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5774,7 +5860,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
|
|
|
5774
5860
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5775
5861
|
});
|
|
5776
5862
|
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5777
|
-
var templateObject_1$
|
|
5863
|
+
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;
|
|
5778
5864
|
|
|
5779
5865
|
var radioIds$1 = {
|
|
5780
5866
|
oneTime: {
|
|
@@ -5829,12 +5915,12 @@ var Autoship = function (_a) {
|
|
|
5829
5915
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5830
5916
|
};
|
|
5831
5917
|
|
|
5832
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5918
|
+
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) {
|
|
5833
5919
|
var theme = _a.theme;
|
|
5834
5920
|
return theme.name === 'TheSpaDr' &&
|
|
5835
5921
|
"\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 ";
|
|
5836
5922
|
});
|
|
5837
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5923
|
+
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) {
|
|
5838
5924
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5839
5925
|
return isSelected
|
|
5840
5926
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5883,7 +5969,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
|
|
|
5883
5969
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5884
5970
|
});
|
|
5885
5971
|
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5886
|
-
var templateObject_1$
|
|
5972
|
+
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;
|
|
5887
5973
|
|
|
5888
5974
|
var radioIds = {
|
|
5889
5975
|
oneTime: {
|
|
@@ -5961,13 +6047,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5961
6047
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5962
6048
|
_a$2);
|
|
5963
6049
|
|
|
5964
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5965
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6050
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
6051
|
+
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"])));
|
|
5966
6052
|
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"])));
|
|
5967
6053
|
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"])));
|
|
5968
6054
|
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"])));
|
|
5969
6055
|
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"])));
|
|
5970
|
-
var templateObject_1$
|
|
6056
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5971
6057
|
|
|
5972
6058
|
var NameWithStars = function (_a) {
|
|
5973
6059
|
var name = _a.name, size = _a.size;
|
|
@@ -5985,8 +6071,8 @@ var ResultFeedback = function (_a) {
|
|
|
5985
6071
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5986
6072
|
};
|
|
5987
6073
|
|
|
5988
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5989
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6074
|
+
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; });
|
|
6075
|
+
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"])));
|
|
5990
6076
|
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; });
|
|
5991
6077
|
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) {
|
|
5992
6078
|
var theme = _a.theme;
|
|
@@ -5998,7 +6084,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
5998
6084
|
var theme = _a.theme, size = _a.size;
|
|
5999
6085
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6000
6086
|
});
|
|
6001
|
-
var templateObject_1$
|
|
6087
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
6002
6088
|
|
|
6003
6089
|
/* base styles & size variants */
|
|
6004
6090
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6076,7 +6162,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6076
6162
|
return (jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6077
6163
|
};
|
|
6078
6164
|
|
|
6079
|
-
var Section = newStyled.div(templateObject_1$
|
|
6165
|
+
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) {
|
|
6080
6166
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6081
6167
|
});
|
|
6082
6168
|
var CardHeader = function (_a) {
|
|
@@ -6087,16 +6173,16 @@ var CardFooter = function (_a) {
|
|
|
6087
6173
|
var children = _a.children;
|
|
6088
6174
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6089
6175
|
};
|
|
6090
|
-
var templateObject_1$
|
|
6176
|
+
var templateObject_1$1A;
|
|
6091
6177
|
|
|
6092
|
-
var Body = newStyled.div(templateObject_1$
|
|
6178
|
+
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"])));
|
|
6093
6179
|
var CardBody = function (_a) {
|
|
6094
6180
|
var children = _a.children;
|
|
6095
6181
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6096
6182
|
};
|
|
6097
|
-
var templateObject_1$
|
|
6183
|
+
var templateObject_1$1z;
|
|
6098
6184
|
|
|
6099
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6185
|
+
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) {
|
|
6100
6186
|
var flex = _a.flex;
|
|
6101
6187
|
return flex &&
|
|
6102
6188
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6118,16 +6204,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
6118
6204
|
Footer: CardFooter,
|
|
6119
6205
|
Body: CardBody,
|
|
6120
6206
|
});
|
|
6121
|
-
var templateObject_1$
|
|
6207
|
+
var templateObject_1$1y;
|
|
6122
6208
|
|
|
6123
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6124
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6209
|
+
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"])));
|
|
6210
|
+
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"])));
|
|
6125
6211
|
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) {
|
|
6126
6212
|
var color = _a.color;
|
|
6127
6213
|
return color;
|
|
6128
6214
|
});
|
|
6129
6215
|
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"])));
|
|
6130
|
-
var templateObject_1$
|
|
6216
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6131
6217
|
|
|
6132
6218
|
var Minimalistic = function (_a) {
|
|
6133
6219
|
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;
|
|
@@ -6135,8 +6221,8 @@ var Minimalistic = function (_a) {
|
|
|
6135
6221
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6136
6222
|
};
|
|
6137
6223
|
|
|
6138
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6139
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
6224
|
+
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"])));
|
|
6225
|
+
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; });
|
|
6140
6226
|
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; });
|
|
6141
6227
|
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"])));
|
|
6142
6228
|
var Simple = function (_a) {
|
|
@@ -6144,18 +6230,18 @@ var Simple = function (_a) {
|
|
|
6144
6230
|
var theme = useTheme();
|
|
6145
6231
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$_, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6146
6232
|
};
|
|
6147
|
-
var templateObject_1$
|
|
6233
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O, templateObject_4$C;
|
|
6148
6234
|
|
|
6149
6235
|
var Bundle = {
|
|
6150
6236
|
Minimalistic: Minimalistic,
|
|
6151
6237
|
Simple: Simple,
|
|
6152
6238
|
};
|
|
6153
6239
|
|
|
6154
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
6240
|
+
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) {
|
|
6155
6241
|
var displayBNPL = _a.displayBNPL;
|
|
6156
6242
|
return (displayBNPL ? 'flex' : 'none');
|
|
6157
6243
|
});
|
|
6158
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6244
|
+
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"])));
|
|
6159
6245
|
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"])));
|
|
6160
6246
|
var BuyNowPayLater = function (_a) {
|
|
6161
6247
|
var _b;
|
|
@@ -6168,41 +6254,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6168
6254
|
}
|
|
6169
6255
|
return (jsxRuntime.jsx(Container$Z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6170
6256
|
};
|
|
6171
|
-
var templateObject_1$
|
|
6257
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$N;
|
|
6172
6258
|
|
|
6173
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6259
|
+
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; });
|
|
6174
6260
|
var Title$5 = function (_a) {
|
|
6175
6261
|
var title = _a.title;
|
|
6176
6262
|
var theme = useTheme();
|
|
6177
6263
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6178
6264
|
};
|
|
6179
|
-
var templateObject_1$
|
|
6265
|
+
var templateObject_1$1u;
|
|
6180
6266
|
|
|
6181
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6267
|
+
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; });
|
|
6182
6268
|
var Promo = function (_a) {
|
|
6183
6269
|
var text = _a.text;
|
|
6184
6270
|
var theme = useTheme();
|
|
6185
6271
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6186
6272
|
};
|
|
6187
|
-
var templateObject_1$
|
|
6273
|
+
var templateObject_1$1t;
|
|
6188
6274
|
|
|
6189
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6275
|
+
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; });
|
|
6190
6276
|
var Description$1 = function (_a) {
|
|
6191
6277
|
var text = _a.text;
|
|
6192
6278
|
var theme = useTheme();
|
|
6193
6279
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6194
6280
|
};
|
|
6195
|
-
var templateObject_1$
|
|
6281
|
+
var templateObject_1$1s;
|
|
6196
6282
|
|
|
6197
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
6283
|
+
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"); });
|
|
6198
6284
|
var CloseButton$1 = function (_a) {
|
|
6199
6285
|
var onClick = _a.onClick, size = _a.size;
|
|
6200
6286
|
var theme = useTheme();
|
|
6201
6287
|
return (jsxRuntime.jsx(Container$Y, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6202
6288
|
};
|
|
6203
|
-
var templateObject_1$
|
|
6289
|
+
var templateObject_1$1r;
|
|
6204
6290
|
|
|
6205
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6291
|
+
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) {
|
|
6206
6292
|
var backgroundColor = _a.backgroundColor;
|
|
6207
6293
|
return backgroundColor;
|
|
6208
6294
|
}, function (_a) {
|
|
@@ -6217,7 +6303,7 @@ var OfferBanner = function (_a) {
|
|
|
6217
6303
|
var theme = useTheme();
|
|
6218
6304
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6219
6305
|
};
|
|
6220
|
-
var templateObject_1$
|
|
6306
|
+
var templateObject_1$1q;
|
|
6221
6307
|
|
|
6222
6308
|
var CartProductItem = {
|
|
6223
6309
|
Title: Title$5,
|
|
@@ -6227,8 +6313,8 @@ var CartProductItem = {
|
|
|
6227
6313
|
CloseButton: CloseButton$1,
|
|
6228
6314
|
};
|
|
6229
6315
|
|
|
6230
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
6231
|
-
var MobileContainer = newStyled(Container$X)(templateObject_2$
|
|
6316
|
+
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"])));
|
|
6317
|
+
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"])));
|
|
6232
6318
|
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"])));
|
|
6233
6319
|
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"])));
|
|
6234
6320
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6240,7 +6326,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6240
6326
|
var isMobile = useWindowDimensions().isMobile;
|
|
6241
6327
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$X, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6242
6328
|
};
|
|
6243
|
-
var templateObject_1$
|
|
6329
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$d;
|
|
6244
6330
|
|
|
6245
6331
|
var Spacing = function (_a) {
|
|
6246
6332
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6248,8 +6334,8 @@ var Spacing = function (_a) {
|
|
|
6248
6334
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6249
6335
|
};
|
|
6250
6336
|
|
|
6251
|
-
var Container$W = newStyled('div')(templateObject_1$
|
|
6252
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6337
|
+
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"])));
|
|
6338
|
+
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"])));
|
|
6253
6339
|
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"])));
|
|
6254
6340
|
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) {
|
|
6255
6341
|
var index = _a.index;
|
|
@@ -6262,10 +6348,10 @@ var StrengthBars = function (_a) {
|
|
|
6262
6348
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6263
6349
|
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6264
6350
|
};
|
|
6265
|
-
var templateObject_1$
|
|
6351
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A;
|
|
6266
6352
|
|
|
6267
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6268
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6353
|
+
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"])));
|
|
6354
|
+
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"])));
|
|
6269
6355
|
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"])));
|
|
6270
6356
|
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6271
6357
|
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"])));
|
|
@@ -6321,12 +6407,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6321
6407
|
? finalPriceArray[0]
|
|
6322
6408
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6323
6409
|
};
|
|
6324
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6325
6411
|
|
|
6326
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6327
|
-
var templateObject_1$
|
|
6412
|
+
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"])));
|
|
6413
|
+
var templateObject_1$1m;
|
|
6328
6414
|
|
|
6329
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6415
|
+
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) {
|
|
6330
6416
|
var marginRight = _a.marginRight;
|
|
6331
6417
|
return marginRight;
|
|
6332
6418
|
});
|
|
@@ -6342,7 +6428,7 @@ var StarList = function (_a) {
|
|
|
6342
6428
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6343
6429
|
}) }, void 0));
|
|
6344
6430
|
};
|
|
6345
|
-
var templateObject_1$
|
|
6431
|
+
var templateObject_1$1l;
|
|
6346
6432
|
|
|
6347
6433
|
/* base styles & size variants */
|
|
6348
6434
|
var LabelStyles = {
|
|
@@ -6383,8 +6469,8 @@ var LabelStyles = {
|
|
|
6383
6469
|
});
|
|
6384
6470
|
},
|
|
6385
6471
|
};
|
|
6386
|
-
var Container$U = newStyled.a(templateObject_1$
|
|
6387
|
-
var templateObject_1$
|
|
6472
|
+
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"])));
|
|
6473
|
+
var templateObject_1$1k;
|
|
6388
6474
|
|
|
6389
6475
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6390
6476
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6404,7 +6490,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6404
6490
|
}),
|
|
6405
6491
|
];
|
|
6406
6492
|
});
|
|
6407
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6493
|
+
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; });
|
|
6408
6494
|
var starsNumber = 5;
|
|
6409
6495
|
var Rating = function (_a) {
|
|
6410
6496
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6427,7 +6513,7 @@ var Rating = function (_a) {
|
|
|
6427
6513
|
: {};
|
|
6428
6514
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6429
6515
|
};
|
|
6430
|
-
var templateObject_1$
|
|
6516
|
+
var templateObject_1$1j;
|
|
6431
6517
|
|
|
6432
6518
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6433
6519
|
var width = _a.width, height = _a.height;
|
|
@@ -6437,8 +6523,8 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6437
6523
|
height: height,
|
|
6438
6524
|
});
|
|
6439
6525
|
});
|
|
6440
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6441
|
-
var Container$T = newStyled.a(templateObject_2$
|
|
6526
|
+
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"])));
|
|
6527
|
+
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"])));
|
|
6442
6528
|
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"])));
|
|
6443
6529
|
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; });
|
|
6444
6530
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6533,7 +6619,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6533
6619
|
};
|
|
6534
6620
|
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));
|
|
6535
6621
|
};
|
|
6536
|
-
var templateObject_1$
|
|
6622
|
+
var templateObject_1$1i, templateObject_2$X, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6537
6623
|
|
|
6538
6624
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6539
6625
|
var width = _a.width, height = _a.height;
|
|
@@ -6543,8 +6629,8 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6543
6629
|
height: height,
|
|
6544
6630
|
});
|
|
6545
6631
|
});
|
|
6546
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6547
|
-
var Container$S = newStyled.a(templateObject_2$
|
|
6632
|
+
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; });
|
|
6633
|
+
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"])));
|
|
6548
6634
|
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"])));
|
|
6549
6635
|
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; });
|
|
6550
6636
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6632,9 +6718,9 @@ var ProductItemTK = function (_a) {
|
|
|
6632
6718
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6633
6719
|
} }, { 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));
|
|
6634
6720
|
};
|
|
6635
|
-
var templateObject_1$
|
|
6721
|
+
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;
|
|
6636
6722
|
|
|
6637
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
6723
|
+
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"])));
|
|
6638
6724
|
function withProductGrid(ProductItemComponent, data) {
|
|
6639
6725
|
function WithProductGrid(props) {
|
|
6640
6726
|
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6644,7 +6730,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6644
6730
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6645
6731
|
return WithProductGrid;
|
|
6646
6732
|
}
|
|
6647
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$1g;
|
|
6648
6734
|
|
|
6649
6735
|
var Collection = {
|
|
6650
6736
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6691,8 +6777,8 @@ var OutOfStock = function (_a) {
|
|
|
6691
6777
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6692
6778
|
};
|
|
6693
6779
|
|
|
6694
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6695
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6780
|
+
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"])));
|
|
6781
|
+
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6696
6782
|
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"])));
|
|
6697
6783
|
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6698
6784
|
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"])));
|
|
@@ -6713,23 +6799,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6713
6799
|
Option: Option,
|
|
6714
6800
|
OptionsContainer: OptionsContainer,
|
|
6715
6801
|
});
|
|
6716
|
-
var templateObject_1$
|
|
6802
|
+
var templateObject_1$1f, templateObject_2$V, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6717
6803
|
|
|
6718
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6804
|
+
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) {
|
|
6719
6805
|
var borderColor = _a.borderColor;
|
|
6720
6806
|
return borderColor;
|
|
6721
6807
|
}, function (_a) {
|
|
6722
6808
|
var noStock = _a.noStock;
|
|
6723
6809
|
return (noStock ? '0.4' : '1');
|
|
6724
6810
|
});
|
|
6725
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6811
|
+
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"])));
|
|
6726
6812
|
var PatternSelector = function (_a) {
|
|
6727
6813
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6728
6814
|
var theme = useTheme();
|
|
6729
6815
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6730
6816
|
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6731
6817
|
};
|
|
6732
|
-
var templateObject_1$
|
|
6818
|
+
var templateObject_1$1e, templateObject_2$U;
|
|
6733
6819
|
|
|
6734
6820
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6735
6821
|
if (options == null || options.length === 0) {
|
|
@@ -6788,8 +6874,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6788
6874
|
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));
|
|
6789
6875
|
};
|
|
6790
6876
|
|
|
6791
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6792
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6877
|
+
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'); });
|
|
6878
|
+
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"])));
|
|
6793
6879
|
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) {
|
|
6794
6880
|
return props.rightToLeft &&
|
|
6795
6881
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -6802,7 +6888,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6802
6888
|
var theme = useTheme();
|
|
6803
6889
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6804
6890
|
};
|
|
6805
|
-
var templateObject_1$
|
|
6891
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6806
6892
|
|
|
6807
6893
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6808
6894
|
__proto__: null,
|
|
@@ -6830,7 +6916,7 @@ var sizeMapper = (_a = {},
|
|
|
6830
6916
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6831
6917
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6832
6918
|
_a);
|
|
6833
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6919
|
+
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) {
|
|
6834
6920
|
var wide = _a.wide;
|
|
6835
6921
|
return (wide ? '100%' : 'fit-content');
|
|
6836
6922
|
}, function (_a) {
|
|
@@ -6852,13 +6938,36 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1b || (templateObj
|
|
|
6852
6938
|
var theme = _a.theme;
|
|
6853
6939
|
return theme.colors.text.disabled;
|
|
6854
6940
|
});
|
|
6855
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6856
|
-
var
|
|
6941
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6942
|
+
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6943
|
+
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6944
|
+
});
|
|
6945
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6857
6946
|
|
|
6858
6947
|
var BaseCTA = function (_a) {
|
|
6859
|
-
var
|
|
6948
|
+
var _b, _c, _d;
|
|
6949
|
+
var text = _a.text, _e = _a.wide, wide = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, iconName = _a.iconName, icon = _a.icon, props = __rest(_a, ["text", "wide", "size", "iconName", "icon"]);
|
|
6860
6950
|
var theme = useTheme();
|
|
6861
|
-
|
|
6951
|
+
var currentIconName, iconPos = 'right', iconMargin = '10px', iconSize = '24px';
|
|
6952
|
+
if (icon) {
|
|
6953
|
+
if (!icon.name) {
|
|
6954
|
+
throw new Error('name must be provided when using the icon prop');
|
|
6955
|
+
}
|
|
6956
|
+
currentIconName = icon.name;
|
|
6957
|
+
iconPos = (_b = icon.position) !== null && _b !== void 0 ? _b : iconPos;
|
|
6958
|
+
iconMargin = (_c = icon.margin) !== null && _c !== void 0 ? _c : iconMargin;
|
|
6959
|
+
iconSize = (_d = icon.size) !== null && _d !== void 0 ? _d : iconSize;
|
|
6960
|
+
}
|
|
6961
|
+
else {
|
|
6962
|
+
currentIconName = iconName;
|
|
6963
|
+
}
|
|
6964
|
+
var commonIconProps = {
|
|
6965
|
+
fill: theme.colors.shades.white.color,
|
|
6966
|
+
name: currentIconName,
|
|
6967
|
+
width: iconSize,
|
|
6968
|
+
height: iconSize,
|
|
6969
|
+
};
|
|
6970
|
+
return (jsxRuntime.jsxs(StyledBaseButton, __assign$1({}, props, { wide: wide, size: size }, { children: [currentIconName && iconPos === 'left' && (jsxRuntime.jsx(StyledIcon, __assign$1({}, commonIconProps, { marginRight: iconMargin }), void 0)), text, currentIconName && iconPos === 'right' && (jsxRuntime.jsx(StyledIcon, __assign$1({}, commonIconProps, { marginLeft: iconMargin }), void 0))] }), void 0));
|
|
6862
6971
|
};
|
|
6863
6972
|
|
|
6864
6973
|
var ButtonPrimary = function (_a) {
|
|
@@ -6920,8 +7029,8 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6920
7029
|
} }), void 0));
|
|
6921
7030
|
};
|
|
6922
7031
|
|
|
6923
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
6924
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7032
|
+
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; });
|
|
7033
|
+
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"])));
|
|
6925
7034
|
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; });
|
|
6926
7035
|
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; });
|
|
6927
7036
|
var Note = function (_a) {
|
|
@@ -6929,13 +7038,13 @@ var Note = function (_a) {
|
|
|
6929
7038
|
var theme = useTheme();
|
|
6930
7039
|
return (jsxRuntime.jsxs(Container$P, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6931
7040
|
};
|
|
6932
|
-
var templateObject_1$
|
|
7041
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u;
|
|
6933
7042
|
|
|
6934
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7043
|
+
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) {
|
|
6935
7044
|
var theme = _a.theme;
|
|
6936
7045
|
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 ");
|
|
6937
7046
|
});
|
|
6938
|
-
var Line = newStyled.div(templateObject_2$
|
|
7047
|
+
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; });
|
|
6939
7048
|
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({
|
|
6940
7049
|
flexDirection: ['column', 'row'],
|
|
6941
7050
|
}));
|
|
@@ -6974,16 +7083,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6974
7083
|
var theme = useTheme();
|
|
6975
7084
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6976
7085
|
};
|
|
6977
|
-
var templateObject_1$
|
|
7086
|
+
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;
|
|
6978
7087
|
|
|
6979
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7088
|
+
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) {
|
|
6980
7089
|
var top = _a.top;
|
|
6981
7090
|
return top;
|
|
6982
7091
|
}, function (_a) {
|
|
6983
7092
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6984
7093
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6985
7094
|
});
|
|
6986
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7095
|
+
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) {
|
|
6987
7096
|
var height = _a.height;
|
|
6988
7097
|
return height;
|
|
6989
7098
|
}, function (_a) {
|
|
@@ -7030,20 +7139,20 @@ var Drawer = function (_a) {
|
|
|
7030
7139
|
}, [isOpen, onClose, onOpen]);
|
|
7031
7140
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7032
7141
|
};
|
|
7033
|
-
var templateObject_1$
|
|
7142
|
+
var templateObject_1$19, templateObject_2$P;
|
|
7034
7143
|
|
|
7035
7144
|
var TooltipArrow = function (_a) {
|
|
7036
7145
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7037
7146
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7038
7147
|
};
|
|
7039
7148
|
|
|
7040
|
-
var List = newStyled.ul(templateObject_1$
|
|
7041
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7149
|
+
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"])));
|
|
7150
|
+
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"])));
|
|
7042
7151
|
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"])));
|
|
7043
7152
|
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"])));
|
|
7044
7153
|
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; });
|
|
7045
7154
|
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; });
|
|
7046
|
-
var templateObject_1$
|
|
7155
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7047
7156
|
|
|
7048
7157
|
var DropdownListIcons = function (_a) {
|
|
7049
7158
|
var items = _a.items;
|
|
@@ -7056,13 +7165,13 @@ var Dropdown = function (_a) {
|
|
|
7056
7165
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7057
7166
|
};
|
|
7058
7167
|
|
|
7059
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7060
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7168
|
+
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"])));
|
|
7169
|
+
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"])));
|
|
7061
7170
|
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7062
7171
|
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"])));
|
|
7063
7172
|
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"])));
|
|
7064
7173
|
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"])));
|
|
7065
|
-
var templateObject_1$
|
|
7174
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7066
7175
|
|
|
7067
7176
|
var SizeDropdown = function (_a) {
|
|
7068
7177
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7085,8 +7194,8 @@ var SizeDropdown = function (_a) {
|
|
|
7085
7194
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7086
7195
|
};
|
|
7087
7196
|
|
|
7088
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7089
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7197
|
+
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; });
|
|
7198
|
+
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; });
|
|
7090
7199
|
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"])));
|
|
7091
7200
|
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"])));
|
|
7092
7201
|
var DropdownDialog = function (_a) {
|
|
@@ -7097,7 +7206,7 @@ var DropdownDialog = function (_a) {
|
|
|
7097
7206
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7098
7207
|
}) }), void 0) }), void 0));
|
|
7099
7208
|
};
|
|
7100
|
-
var templateObject_1$
|
|
7209
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7101
7210
|
|
|
7102
7211
|
function FilteringDropdown(_a) {
|
|
7103
7212
|
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;
|
|
@@ -7130,8 +7239,8 @@ function FilteringDropdown(_a) {
|
|
|
7130
7239
|
}) }, void 0)] }), void 0));
|
|
7131
7240
|
}
|
|
7132
7241
|
|
|
7133
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7134
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7242
|
+
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; });
|
|
7243
|
+
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; });
|
|
7135
7244
|
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"])));
|
|
7136
7245
|
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'); });
|
|
7137
7246
|
var Accordion = function (_a) {
|
|
@@ -7140,10 +7249,10 @@ var Accordion = function (_a) {
|
|
|
7140
7249
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7141
7250
|
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7142
7251
|
};
|
|
7143
|
-
var templateObject_1$
|
|
7252
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$A, templateObject_4$p;
|
|
7144
7253
|
|
|
7145
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7146
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7254
|
+
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; });
|
|
7255
|
+
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"])));
|
|
7147
7256
|
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"])));
|
|
7148
7257
|
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"])));
|
|
7149
7258
|
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; });
|
|
@@ -7152,7 +7261,7 @@ var OptionContainer = newStyled.div(templateObject_7$b || (templateObject_7$b =
|
|
|
7152
7261
|
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; });
|
|
7153
7262
|
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"])));
|
|
7154
7263
|
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"])));
|
|
7155
|
-
var templateObject_1$
|
|
7264
|
+
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;
|
|
7156
7265
|
|
|
7157
7266
|
var getStylesBySize$7 = function (size, theme) {
|
|
7158
7267
|
switch (size) {
|
|
@@ -7217,8 +7326,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7217
7326
|
} }), id: id }, void 0));
|
|
7218
7327
|
};
|
|
7219
7328
|
|
|
7220
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7221
|
-
var LI = newStyled.li(templateObject_2$
|
|
7329
|
+
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"])));
|
|
7330
|
+
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; });
|
|
7222
7331
|
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"])));
|
|
7223
7332
|
var Tags = function (_a) {
|
|
7224
7333
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7227,7 +7336,7 @@ var Tags = function (_a) {
|
|
|
7227
7336
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7228
7337
|
}) }), void 0));
|
|
7229
7338
|
};
|
|
7230
|
-
var templateObject_1$
|
|
7339
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$y;
|
|
7231
7340
|
|
|
7232
7341
|
var Filters = function (_a) {
|
|
7233
7342
|
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;
|
|
@@ -7363,8 +7472,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7363
7472
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7364
7473
|
};
|
|
7365
7474
|
|
|
7366
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7367
|
-
var Container$N = newStyled.div(templateObject_2$
|
|
7475
|
+
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"])));
|
|
7476
|
+
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"])));
|
|
7368
7477
|
var FitGuarantee = function (_a) {
|
|
7369
7478
|
var _b;
|
|
7370
7479
|
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;
|
|
@@ -7382,10 +7491,10 @@ var FitGuarantee = function (_a) {
|
|
|
7382
7491
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7383
7492
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7384
7493
|
};
|
|
7385
|
-
var templateObject_1$
|
|
7494
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7386
7495
|
|
|
7387
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
7388
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7496
|
+
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"])));
|
|
7497
|
+
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; });
|
|
7389
7498
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7390
7499
|
border: 'none',
|
|
7391
7500
|
background: 'transparent',
|
|
@@ -7400,7 +7509,7 @@ var FitPredictor = function (_a) {
|
|
|
7400
7509
|
var theme = useTheme();
|
|
7401
7510
|
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));
|
|
7402
7511
|
};
|
|
7403
|
-
var templateObject_1$
|
|
7512
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7404
7513
|
|
|
7405
7514
|
var Button$7 = newStyled.button(function () { return ({
|
|
7406
7515
|
background: 'transparent',
|
|
@@ -11644,14 +11753,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11644
11753
|
return Slider;
|
|
11645
11754
|
}(React__default["default"].Component);
|
|
11646
11755
|
|
|
11647
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11756
|
+
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) {
|
|
11648
11757
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11649
11758
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11650
11759
|
}, function (_a) {
|
|
11651
11760
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11652
11761
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11653
11762
|
});
|
|
11654
|
-
var templateObject_1
|
|
11763
|
+
var templateObject_1$10;
|
|
11655
11764
|
|
|
11656
11765
|
var getStylesBySize$6 = function (size) {
|
|
11657
11766
|
// rem units
|
|
@@ -11710,7 +11819,7 @@ var SliderNavigation = function (_a) {
|
|
|
11710
11819
|
} }, { 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));
|
|
11711
11820
|
};
|
|
11712
11821
|
|
|
11713
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11822
|
+
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) {
|
|
11714
11823
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11715
11824
|
return borderRadiusVariant &&
|
|
11716
11825
|
"\nborder-radius: 20px;\n";
|
|
@@ -11725,10 +11834,10 @@ var ImageSmallPreview = function (_a) {
|
|
|
11725
11834
|
var theme = useTheme();
|
|
11726
11835
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11727
11836
|
};
|
|
11728
|
-
var templateObject_1
|
|
11837
|
+
var templateObject_1$$;
|
|
11729
11838
|
|
|
11730
|
-
var horizontalStyles = css(templateObject_1$
|
|
11731
|
-
var verticalStyles = css(templateObject_2$
|
|
11839
|
+
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"])));
|
|
11840
|
+
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"])));
|
|
11732
11841
|
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) {
|
|
11733
11842
|
var position = _a.position;
|
|
11734
11843
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11758,7 +11867,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11758
11867
|
arrowPadding: 1.625,
|
|
11759
11868
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11760
11869
|
};
|
|
11761
|
-
var templateObject_1$
|
|
11870
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9;
|
|
11762
11871
|
|
|
11763
11872
|
var propTypes = {exports: {}};
|
|
11764
11873
|
|
|
@@ -13351,25 +13460,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13351
13460
|
afterZoomOut: PropTypes.func
|
|
13352
13461
|
} : {};
|
|
13353
13462
|
|
|
13354
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13355
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13356
|
-
var templateObject_1$
|
|
13463
|
+
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); });
|
|
13464
|
+
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; });
|
|
13465
|
+
var templateObject_1$Z, templateObject_2$F;
|
|
13357
13466
|
|
|
13358
13467
|
var ProgressBar$1 = function (_a) {
|
|
13359
13468
|
var progress = _a.progress, hide = _a.hide;
|
|
13360
13469
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13361
13470
|
};
|
|
13362
13471
|
|
|
13363
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
13364
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13472
|
+
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"])));
|
|
13473
|
+
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; });
|
|
13365
13474
|
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"])));
|
|
13366
|
-
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13367
|
-
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13368
|
-
var templateObject_1$
|
|
13475
|
+
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"])));
|
|
13476
|
+
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"])));
|
|
13477
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13369
13478
|
|
|
13370
13479
|
var Video$1 = function (_a) {
|
|
13371
13480
|
var _b, _c, _d, _e;
|
|
13372
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13481
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
|
|
13373
13482
|
var videoRef = React$2.useRef(null);
|
|
13374
13483
|
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13375
13484
|
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13404,15 +13513,15 @@ var Video$1 = function (_a) {
|
|
|
13404
13513
|
setVideoProgress(videoRef.current.currentTime);
|
|
13405
13514
|
}
|
|
13406
13515
|
};
|
|
13407
|
-
return (jsxRuntime.jsxs(Container$K, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13516
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13408
13517
|
};
|
|
13409
13518
|
|
|
13410
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13519
|
+
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) {
|
|
13411
13520
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13412
13521
|
return borderRadiusVariant &&
|
|
13413
13522
|
"\n border-radius: 40px;\n ";
|
|
13414
13523
|
});
|
|
13415
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13524
|
+
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'); });
|
|
13416
13525
|
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"])));
|
|
13417
13526
|
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"])));
|
|
13418
13527
|
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"])));
|
|
@@ -13426,9 +13535,9 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13426
13535
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13427
13536
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13428
13537
|
};
|
|
13429
|
-
var templateObject_1$
|
|
13538
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13430
13539
|
|
|
13431
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
13540
|
+
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"])));
|
|
13432
13541
|
var ProductGallery = function (_a) {
|
|
13433
13542
|
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;
|
|
13434
13543
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13440,7 +13549,7 @@ var ProductGallery = function (_a) {
|
|
|
13440
13549
|
setSelectedImage(value);
|
|
13441
13550
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(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));
|
|
13442
13551
|
};
|
|
13443
|
-
var templateObject_1$
|
|
13552
|
+
var templateObject_1$W;
|
|
13444
13553
|
|
|
13445
13554
|
var getStylesBySize$5 = function (size) {
|
|
13446
13555
|
switch (size) {
|
|
@@ -13461,7 +13570,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13461
13570
|
};
|
|
13462
13571
|
}
|
|
13463
13572
|
};
|
|
13464
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
13573
|
+
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) {
|
|
13465
13574
|
var backgroundColor = _a.backgroundColor;
|
|
13466
13575
|
return backgroundColor;
|
|
13467
13576
|
}, function (_a) {
|
|
@@ -13491,18 +13600,18 @@ var IconButton = function (_a) {
|
|
|
13491
13600
|
var theme = useTheme();
|
|
13492
13601
|
return (jsxRuntime.jsx(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));
|
|
13493
13602
|
};
|
|
13494
|
-
var templateObject_1$
|
|
13603
|
+
var templateObject_1$V;
|
|
13495
13604
|
|
|
13496
|
-
var StyledButton$
|
|
13605
|
+
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; });
|
|
13497
13606
|
var AmazonButton = function (_a) {
|
|
13498
13607
|
var onClick = _a.onClick;
|
|
13499
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
13608
|
+
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
13500
13609
|
};
|
|
13501
13610
|
var PaypalButton = function (_a) {
|
|
13502
13611
|
var onClick = _a.onClick;
|
|
13503
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
13612
|
+
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13504
13613
|
};
|
|
13505
|
-
var templateObject_1$
|
|
13614
|
+
var templateObject_1$U;
|
|
13506
13615
|
|
|
13507
13616
|
var Container$G = newStyled.div(function (props) { return ({
|
|
13508
13617
|
height: 'auto',
|
|
@@ -13557,8 +13666,8 @@ var IconsWithTitle = function (_a) {
|
|
|
13557
13666
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13558
13667
|
};
|
|
13559
13668
|
|
|
13560
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
13561
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13669
|
+
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'); });
|
|
13670
|
+
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'); });
|
|
13562
13671
|
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13563
13672
|
var titlePosition = _a.titlePosition;
|
|
13564
13673
|
return titlePosition == 'center' &&
|
|
@@ -13569,13 +13678,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13569
13678
|
var isMobile = useWindowDimensions().isMobile;
|
|
13570
13679
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13571
13680
|
};
|
|
13572
|
-
var templateObject_1$
|
|
13681
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$u;
|
|
13573
13682
|
|
|
13574
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13683
|
+
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) {
|
|
13575
13684
|
var color = _a.color;
|
|
13576
13685
|
return color;
|
|
13577
13686
|
});
|
|
13578
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13687
|
+
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) {
|
|
13579
13688
|
var color = _a.color;
|
|
13580
13689
|
return color;
|
|
13581
13690
|
});
|
|
@@ -13584,7 +13693,7 @@ var InputLabel = function (_a) {
|
|
|
13584
13693
|
var theme = useTheme();
|
|
13585
13694
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13586
13695
|
};
|
|
13587
|
-
var templateObject_1$
|
|
13696
|
+
var templateObject_1$S, templateObject_2$B;
|
|
13588
13697
|
|
|
13589
13698
|
var containerByStatus = function (theme, status) {
|
|
13590
13699
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13593,11 +13702,11 @@ var containerByStatus = function (theme, status) {
|
|
|
13593
13702
|
return theme.colors.semantic.urgent.color;
|
|
13594
13703
|
return '';
|
|
13595
13704
|
};
|
|
13596
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
13705
|
+
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) {
|
|
13597
13706
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13598
13707
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13599
13708
|
});
|
|
13600
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13709
|
+
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"])));
|
|
13601
13710
|
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) {
|
|
13602
13711
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13603
13712
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13671,7 +13780,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13671
13780
|
return theme.component.input.lineHeight;
|
|
13672
13781
|
});
|
|
13673
13782
|
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"])));
|
|
13674
|
-
var templateObject_1$
|
|
13783
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13675
13784
|
|
|
13676
13785
|
var BaseInput = function (_a) {
|
|
13677
13786
|
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"]);
|
|
@@ -13715,11 +13824,11 @@ var Button$5 = function (_a) {
|
|
|
13715
13824
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13716
13825
|
};
|
|
13717
13826
|
|
|
13718
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
13827
|
+
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) {
|
|
13719
13828
|
var theme = _a.theme;
|
|
13720
13829
|
return theme.component.inputCustom.input.borderRadius;
|
|
13721
13830
|
});
|
|
13722
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13831
|
+
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) {
|
|
13723
13832
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13724
13833
|
return defaultRounded
|
|
13725
13834
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13736,21 +13845,21 @@ var Custom = function (_a) {
|
|
|
13736
13845
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13737
13846
|
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13738
13847
|
};
|
|
13739
|
-
var templateObject_1$
|
|
13848
|
+
var templateObject_1$Q, templateObject_2$z;
|
|
13740
13849
|
|
|
13741
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13850
|
+
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) {
|
|
13742
13851
|
var size = _a.size;
|
|
13743
13852
|
return (size === 'small' ? '36px' : '');
|
|
13744
13853
|
});
|
|
13745
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13854
|
+
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"])));
|
|
13746
13855
|
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"])));
|
|
13747
13856
|
var Success = function (_a) {
|
|
13748
13857
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13749
13858
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13750
13859
|
};
|
|
13751
|
-
var templateObject_1$
|
|
13860
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13752
13861
|
|
|
13753
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13862
|
+
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) {
|
|
13754
13863
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13755
13864
|
return status === exports.InputValidationType.Empty &&
|
|
13756
13865
|
type === 'primary' &&
|
|
@@ -13767,16 +13876,16 @@ var BasePlusButton = function (_a) {
|
|
|
13767
13876
|
}
|
|
13768
13877
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13769
13878
|
};
|
|
13770
|
-
var templateObject_1$
|
|
13879
|
+
var templateObject_1$O;
|
|
13771
13880
|
|
|
13772
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
13773
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13881
|
+
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"])));
|
|
13882
|
+
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"])));
|
|
13774
13883
|
var BasePlusIcon = function (_a) {
|
|
13775
13884
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13776
13885
|
var theme = useTheme();
|
|
13777
13886
|
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13778
13887
|
};
|
|
13779
|
-
var templateObject_1$
|
|
13888
|
+
var templateObject_1$N, templateObject_2$x;
|
|
13780
13889
|
|
|
13781
13890
|
var Input$3 = {
|
|
13782
13891
|
Simple: BaseInput,
|
|
@@ -13821,7 +13930,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13821
13930
|
}, [preventTouch, ref, touchStart]);
|
|
13822
13931
|
}
|
|
13823
13932
|
|
|
13824
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13933
|
+
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) {
|
|
13825
13934
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13826
13935
|
return borderRadiusVariant &&
|
|
13827
13936
|
"\n border-radius: 40px;\n ";
|
|
@@ -13830,7 +13939,7 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
13830
13939
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13831
13940
|
});
|
|
13832
13941
|
// max-height: 31.875rem;
|
|
13833
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13942
|
+
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'); });
|
|
13834
13943
|
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"])));
|
|
13835
13944
|
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"])));
|
|
13836
13945
|
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"])));
|
|
@@ -13892,14 +14001,14 @@ var ImageProductSlide = function (_a) {
|
|
|
13892
14001
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13893
14002
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13894
14003
|
};
|
|
13895
|
-
var templateObject_1$
|
|
14004
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13896
14005
|
|
|
13897
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14006
|
+
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"])));
|
|
13898
14007
|
var ProductGalleryMobile = function (_a) {
|
|
13899
14008
|
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;
|
|
13900
14009
|
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13901
14010
|
};
|
|
13902
|
-
var templateObject_1$
|
|
14011
|
+
var templateObject_1$L;
|
|
13903
14012
|
|
|
13904
14013
|
function _extends() {
|
|
13905
14014
|
_extends = Object.assign || function (target) {
|
|
@@ -14166,14 +14275,14 @@ function useSwipeable(options) {
|
|
|
14166
14275
|
return handlers;
|
|
14167
14276
|
}
|
|
14168
14277
|
|
|
14169
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14278
|
+
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"])));
|
|
14170
14279
|
var ArrowButton = function (_a) {
|
|
14171
14280
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14172
14281
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14173
14282
|
};
|
|
14174
|
-
var templateObject_1$
|
|
14283
|
+
var templateObject_1$K;
|
|
14175
14284
|
|
|
14176
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
14285
|
+
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"])));
|
|
14177
14286
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14178
14287
|
var SlideDots = function (_a) {
|
|
14179
14288
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14182,10 +14291,10 @@ var SlideDots = function (_a) {
|
|
|
14182
14291
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14183
14292
|
: 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));
|
|
14184
14293
|
};
|
|
14185
|
-
var templateObject_1$
|
|
14294
|
+
var templateObject_1$J;
|
|
14186
14295
|
|
|
14187
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14188
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14296
|
+
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"])));
|
|
14297
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14189
14298
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14190
14299
|
var SlideNavigation = function (_a) {
|
|
14191
14300
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -14198,23 +14307,23 @@ var SlideNavigation = function (_a) {
|
|
|
14198
14307
|
onNavigate(selectedIndex + 1);
|
|
14199
14308
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14200
14309
|
};
|
|
14201
|
-
var templateObject_1$
|
|
14310
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14202
14311
|
|
|
14203
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
14312
|
+
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) {
|
|
14204
14313
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14205
14314
|
return borderRadiusVariant &&
|
|
14206
14315
|
"\n border-radius: 40px;\n ";
|
|
14207
14316
|
});
|
|
14208
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14317
|
+
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'); });
|
|
14209
14318
|
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"])));
|
|
14210
14319
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14211
14320
|
var _b, _c;
|
|
14212
14321
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14213
14322
|
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14214
14323
|
});
|
|
14215
|
-
var templateObject_1$
|
|
14324
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$p;
|
|
14216
14325
|
|
|
14217
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14326
|
+
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"])));
|
|
14218
14327
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14219
14328
|
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;
|
|
14220
14329
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14238,9 +14347,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14238
14347
|
}, [index, images]);
|
|
14239
14348
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14240
14349
|
};
|
|
14241
|
-
var templateObject_1$
|
|
14350
|
+
var templateObject_1$G;
|
|
14242
14351
|
|
|
14243
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
14352
|
+
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) {
|
|
14244
14353
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14245
14354
|
return borderRadiusVariant &&
|
|
14246
14355
|
"\n border-radius: 40px;\n ";
|
|
@@ -14249,7 +14358,7 @@ var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __ma
|
|
|
14249
14358
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14250
14359
|
});
|
|
14251
14360
|
// max-height: 31.875rem;
|
|
14252
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14361
|
+
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'); });
|
|
14253
14362
|
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"])));
|
|
14254
14363
|
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"])));
|
|
14255
14364
|
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"])));
|
|
@@ -14314,14 +14423,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14314
14423
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14315
14424
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14316
14425
|
};
|
|
14317
|
-
var templateObject_1$
|
|
14426
|
+
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;
|
|
14318
14427
|
|
|
14319
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
14428
|
+
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"])));
|
|
14320
14429
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14321
14430
|
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;
|
|
14322
14431
|
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14323
14432
|
};
|
|
14324
|
-
var templateObject_1$
|
|
14433
|
+
var templateObject_1$E;
|
|
14325
14434
|
|
|
14326
14435
|
var __defProp$1 = Object.defineProperty;
|
|
14327
14436
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14454,7 +14563,7 @@ var Portal = function (_a) {
|
|
|
14454
14563
|
var visibleStyle = function (_a) {
|
|
14455
14564
|
var opened = _a.opened;
|
|
14456
14565
|
return opened
|
|
14457
|
-
? css(templateObject_1$
|
|
14566
|
+
? 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 "])));
|
|
14458
14567
|
};
|
|
14459
14568
|
var transformStyle = function (_a) {
|
|
14460
14569
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14502,9 +14611,9 @@ var useModal = function (id) {
|
|
|
14502
14611
|
close: close,
|
|
14503
14612
|
}); }, [close, open, opened]);
|
|
14504
14613
|
};
|
|
14505
|
-
var templateObject_1$
|
|
14614
|
+
var templateObject_1$D, templateObject_2$s, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14506
14615
|
|
|
14507
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14616
|
+
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) {
|
|
14508
14617
|
var height = _a.height;
|
|
14509
14618
|
return height || '0.5rem';
|
|
14510
14619
|
}, function (_a) {
|
|
@@ -14576,19 +14685,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14576
14685
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14577
14686
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14578
14687
|
};
|
|
14579
|
-
var templateObject_1$
|
|
14688
|
+
var templateObject_1$C;
|
|
14580
14689
|
|
|
14581
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
14690
|
+
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) {
|
|
14582
14691
|
var theme = _a.theme;
|
|
14583
14692
|
return theme.component.orderBar.backgroundColor;
|
|
14584
14693
|
});
|
|
14585
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14694
|
+
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; });
|
|
14586
14695
|
var OrderBar = function (_a) {
|
|
14587
14696
|
var message = _a.message, color = _a.color;
|
|
14588
14697
|
var theme = useTheme();
|
|
14589
14698
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14590
14699
|
};
|
|
14591
|
-
var templateObject_1$
|
|
14700
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14592
14701
|
|
|
14593
14702
|
var htmlReactParser = {exports: {}};
|
|
14594
14703
|
|
|
@@ -18369,8 +18478,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18369
18478
|
HTMLReactParser$1.attributesToProps;
|
|
18370
18479
|
HTMLReactParser$1.Element;
|
|
18371
18480
|
|
|
18372
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18373
|
-
var Card = newStyled.div(templateObject_2$
|
|
18481
|
+
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"])));
|
|
18482
|
+
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"])));
|
|
18374
18483
|
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"])));
|
|
18375
18484
|
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"])));
|
|
18376
18485
|
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"])));
|
|
@@ -18406,10 +18515,10 @@ var PackCard = function (_a) {
|
|
|
18406
18515
|
currency: currencyCode || 'USD',
|
|
18407
18516
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18408
18517
|
};
|
|
18409
|
-
var templateObject_1$
|
|
18518
|
+
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;
|
|
18410
18519
|
|
|
18411
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
18412
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18520
|
+
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"])));
|
|
18521
|
+
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"])));
|
|
18413
18522
|
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18414
18523
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18415
18524
|
}));
|
|
@@ -18430,7 +18539,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18430
18539
|
var background = _a.background;
|
|
18431
18540
|
return background || 'unset';
|
|
18432
18541
|
});
|
|
18433
|
-
var templateObject_1$
|
|
18542
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
18434
18543
|
|
|
18435
18544
|
var Pagination = function (_a) {
|
|
18436
18545
|
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;
|
|
@@ -18495,7 +18604,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18495
18604
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18496
18605
|
};
|
|
18497
18606
|
|
|
18498
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
18607
|
+
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) {
|
|
18499
18608
|
var width = _a.width;
|
|
18500
18609
|
return width;
|
|
18501
18610
|
}, function (_a) {
|
|
@@ -18513,11 +18622,11 @@ var PaymentMethod = function (_a) {
|
|
|
18513
18622
|
var theme = useTheme();
|
|
18514
18623
|
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
18515
18624
|
};
|
|
18516
|
-
var templateObject_1$
|
|
18625
|
+
var templateObject_1$y;
|
|
18517
18626
|
|
|
18518
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
18627
|
+
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"])));
|
|
18519
18628
|
var IMAGE_WIDTH = '63px';
|
|
18520
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18629
|
+
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);
|
|
18521
18630
|
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({
|
|
18522
18631
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18523
18632
|
}), IMAGE_WIDTH);
|
|
@@ -18557,7 +18666,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18557
18666
|
var theme = useTheme();
|
|
18558
18667
|
return (jsxRuntime.jsxs(Container$o, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { 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));
|
|
18559
18668
|
};
|
|
18560
|
-
var templateObject_1$
|
|
18669
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18561
18670
|
|
|
18562
18671
|
var P$1 = newStyled.p(function (_a) {
|
|
18563
18672
|
var color = _a.color;
|
|
@@ -18571,7 +18680,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18571
18680
|
margin: '0.938rem 4.188rem',
|
|
18572
18681
|
});
|
|
18573
18682
|
});
|
|
18574
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18683
|
+
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) {
|
|
18575
18684
|
var height = _a.height;
|
|
18576
18685
|
return height || '0.5rem';
|
|
18577
18686
|
}, function (_a) {
|
|
@@ -18616,10 +18725,10 @@ var ProgressBar = function (_a) {
|
|
|
18616
18725
|
var theme = useTheme();
|
|
18617
18726
|
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18618
18727
|
};
|
|
18619
|
-
var templateObject_1$
|
|
18728
|
+
var templateObject_1$w;
|
|
18620
18729
|
|
|
18621
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
18622
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18730
|
+
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; });
|
|
18731
|
+
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"])));
|
|
18623
18732
|
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"])));
|
|
18624
18733
|
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)'; });
|
|
18625
18734
|
var QuantityPicker = function (_a) {
|
|
@@ -18646,7 +18755,7 @@ var QuantityPicker = function (_a) {
|
|
|
18646
18755
|
}, [value, clamp]);
|
|
18647
18756
|
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18648
18757
|
};
|
|
18649
|
-
var templateObject_1$
|
|
18758
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$j, templateObject_4$d;
|
|
18650
18759
|
|
|
18651
18760
|
/* base styles & size variants */
|
|
18652
18761
|
var CustomRadioStyles$1 = {
|
|
@@ -18715,9 +18824,9 @@ var ContainerStyles$1 = {
|
|
|
18715
18824
|
},
|
|
18716
18825
|
};
|
|
18717
18826
|
|
|
18718
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18827
|
+
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"])));
|
|
18719
18828
|
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18720
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18829
|
+
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) {
|
|
18721
18830
|
var disabled = _a.disabled;
|
|
18722
18831
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18723
18832
|
});
|
|
@@ -18735,7 +18844,7 @@ var RadioPrimary = function (_a) {
|
|
|
18735
18844
|
};
|
|
18736
18845
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18737
18846
|
};
|
|
18738
|
-
var templateObject_1$
|
|
18847
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$i;
|
|
18739
18848
|
|
|
18740
18849
|
var RadioGroupInput = function (_a) {
|
|
18741
18850
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18814,9 +18923,9 @@ var ContainerStyles = {
|
|
|
18814
18923
|
},
|
|
18815
18924
|
};
|
|
18816
18925
|
|
|
18817
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18926
|
+
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"])));
|
|
18818
18927
|
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18819
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18928
|
+
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) {
|
|
18820
18929
|
var disabled = _a.disabled;
|
|
18821
18930
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18822
18931
|
});
|
|
@@ -18840,7 +18949,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18840
18949
|
};
|
|
18841
18950
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18842
18951
|
};
|
|
18843
|
-
var templateObject_1$
|
|
18952
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$h;
|
|
18844
18953
|
|
|
18845
18954
|
var ClubRadioGroupInput = function (_a) {
|
|
18846
18955
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18868,8 +18977,8 @@ function formatDate(date, format) {
|
|
|
18868
18977
|
}
|
|
18869
18978
|
}
|
|
18870
18979
|
|
|
18871
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
18872
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18980
|
+
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"])));
|
|
18981
|
+
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"])));
|
|
18873
18982
|
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"])));
|
|
18874
18983
|
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"])));
|
|
18875
18984
|
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"])));
|
|
@@ -18909,12 +19018,12 @@ var Review$1 = function (_a) {
|
|
|
18909
19018
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18910
19019
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18911
19020
|
};
|
|
18912
|
-
var templateObject_1$
|
|
19021
|
+
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;
|
|
18913
19022
|
|
|
18914
19023
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18915
19024
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18916
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
18917
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19025
|
+
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"])));
|
|
19026
|
+
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"])));
|
|
18918
19027
|
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"])));
|
|
18919
19028
|
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"])));
|
|
18920
19029
|
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"])));
|
|
@@ -18965,10 +19074,10 @@ var Review = function (_a) {
|
|
|
18965
19074
|
: description,
|
|
18966
19075
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18967
19076
|
};
|
|
18968
|
-
var templateObject_1$
|
|
19077
|
+
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;
|
|
18969
19078
|
|
|
18970
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18971
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19079
|
+
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"])));
|
|
19080
|
+
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"])));
|
|
18972
19081
|
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"])));
|
|
18973
19082
|
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"])));
|
|
18974
19083
|
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"])));
|
|
@@ -18983,17 +19092,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18983
19092
|
var theme = useTheme();
|
|
18984
19093
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18985
19094
|
};
|
|
18986
|
-
var templateObject_1$
|
|
19095
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
18987
19096
|
|
|
18988
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18989
|
-
var Text = newStyled.p(templateObject_2$
|
|
19097
|
+
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"])));
|
|
19098
|
+
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; });
|
|
18990
19099
|
var ScrollToTop = function (_a) {
|
|
18991
19100
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18992
19101
|
var theme = useTheme();
|
|
18993
19102
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18994
19103
|
return (jsxRuntime.jsxs(Container$g, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18995
19104
|
};
|
|
18996
|
-
var templateObject_1$
|
|
19105
|
+
var templateObject_1$p, templateObject_2$h;
|
|
18997
19106
|
|
|
18998
19107
|
var Input = newStyled.input(function (props) { return ({
|
|
18999
19108
|
padding: props.theme.component.input.padding,
|
|
@@ -19024,7 +19133,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19024
19133
|
},
|
|
19025
19134
|
}); });
|
|
19026
19135
|
|
|
19027
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19136
|
+
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({
|
|
19028
19137
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19029
19138
|
}));
|
|
19030
19139
|
var Description = newStyled.div({
|
|
@@ -19043,7 +19152,7 @@ var ProductItem = function (_a) {
|
|
|
19043
19152
|
var theme = useTheme();
|
|
19044
19153
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19045
19154
|
};
|
|
19046
|
-
var templateObject_1$
|
|
19155
|
+
var templateObject_1$o;
|
|
19047
19156
|
|
|
19048
19157
|
var Container$e = newStyled.div({
|
|
19049
19158
|
display: 'flex',
|
|
@@ -19059,7 +19168,7 @@ var Ul = newStyled.ul({
|
|
|
19059
19168
|
margin: '0px',
|
|
19060
19169
|
padding: '0px',
|
|
19061
19170
|
});
|
|
19062
|
-
var Li = newStyled.li(templateObject_1$
|
|
19171
|
+
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({
|
|
19063
19172
|
padding: [0, '0rem 1rem'],
|
|
19064
19173
|
borderRadius: [0, '0.5rem'],
|
|
19065
19174
|
}));
|
|
@@ -19071,7 +19180,7 @@ var Anchor = newStyled.a({
|
|
|
19071
19180
|
padding: 0,
|
|
19072
19181
|
textDecoration: 'none',
|
|
19073
19182
|
});
|
|
19074
|
-
var Container$d = newStyled.div(templateObject_2$
|
|
19183
|
+
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({
|
|
19075
19184
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19076
19185
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19077
19186
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19084,9 +19193,9 @@ var ResultsPanel = function (_a) {
|
|
|
19084
19193
|
var theme = useTheme();
|
|
19085
19194
|
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19086
19195
|
};
|
|
19087
|
-
var templateObject_1$
|
|
19196
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$d;
|
|
19088
19197
|
|
|
19089
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19198
|
+
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({
|
|
19090
19199
|
right: ['1rem', '7.75rem'],
|
|
19091
19200
|
top: ['0.75rem', '0.75rem'],
|
|
19092
19201
|
}));
|
|
@@ -19095,7 +19204,7 @@ var ClearButton = function (_a) {
|
|
|
19095
19204
|
var theme = useTheme();
|
|
19096
19205
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19097
19206
|
};
|
|
19098
|
-
var templateObject_1$
|
|
19207
|
+
var templateObject_1$m;
|
|
19099
19208
|
|
|
19100
19209
|
var SearchIconContainer = newStyled.div({
|
|
19101
19210
|
display: 'flex',
|
|
@@ -19105,7 +19214,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19105
19214
|
background: 'white',
|
|
19106
19215
|
alignSelf: 'center',
|
|
19107
19216
|
});
|
|
19108
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19217
|
+
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"])));
|
|
19109
19218
|
var SearchControl = function (_a) {
|
|
19110
19219
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19111
19220
|
var theme = useTheme();
|
|
@@ -19119,9 +19228,9 @@ var SearchControl = function (_a) {
|
|
|
19119
19228
|
}
|
|
19120
19229
|
return (jsxRuntime.jsx(SearchIconContainer, { children: jsxRuntime.jsx(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
|
|
19121
19230
|
}
|
|
19122
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19231
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19123
19232
|
};
|
|
19124
|
-
var templateObject_1$
|
|
19233
|
+
var templateObject_1$l;
|
|
19125
19234
|
|
|
19126
19235
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19127
19236
|
var reducer = function (state, action) {
|
|
@@ -19188,8 +19297,8 @@ var SearchBar = function (_a) {
|
|
|
19188
19297
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19189
19298
|
};
|
|
19190
19299
|
|
|
19191
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19192
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19300
|
+
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"])));
|
|
19301
|
+
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"])));
|
|
19193
19302
|
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"])));
|
|
19194
19303
|
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"])));
|
|
19195
19304
|
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"])));
|
|
@@ -19199,9 +19308,9 @@ var SearchNavigation = function (_a) {
|
|
|
19199
19308
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19200
19309
|
}) }, void 0)] }, void 0));
|
|
19201
19310
|
};
|
|
19202
|
-
var templateObject_1$
|
|
19311
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19203
19312
|
|
|
19204
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
19313
|
+
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) {
|
|
19205
19314
|
var alignCenter = _a.alignCenter;
|
|
19206
19315
|
return alignCenter &&
|
|
19207
19316
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19211,17 +19320,17 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19211
19320
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19212
19321
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19213
19322
|
});
|
|
19214
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19323
|
+
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"])));
|
|
19215
19324
|
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"])));
|
|
19216
19325
|
var ShortBanner = function (_a) {
|
|
19217
19326
|
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;
|
|
19218
19327
|
var theme = useTheme();
|
|
19219
19328
|
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19220
19329
|
};
|
|
19221
|
-
var templateObject_1$
|
|
19330
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$b;
|
|
19222
19331
|
|
|
19223
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19224
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19332
|
+
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; });
|
|
19333
|
+
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; });
|
|
19225
19334
|
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; });
|
|
19226
19335
|
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"])));
|
|
19227
19336
|
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
@@ -19230,7 +19339,7 @@ var Container$9 = newStyled('div')(templateObject_7$4 || (templateObject_7$4 = _
|
|
|
19230
19339
|
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"])));
|
|
19231
19340
|
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"])));
|
|
19232
19341
|
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; });
|
|
19233
|
-
var templateObject_1$
|
|
19342
|
+
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;
|
|
19234
19343
|
|
|
19235
19344
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19236
19345
|
var getCellColor = function (index, cell) {
|
|
@@ -19271,8 +19380,8 @@ var SizeChartTable = function (_a) {
|
|
|
19271
19380
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$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 (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19272
19381
|
};
|
|
19273
19382
|
|
|
19274
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19275
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19383
|
+
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; });
|
|
19384
|
+
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; });
|
|
19276
19385
|
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; });
|
|
19277
19386
|
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; });
|
|
19278
19387
|
var SizeTable = function (_a) {
|
|
@@ -19280,7 +19389,7 @@ var SizeTable = function (_a) {
|
|
|
19280
19389
|
var theme = useTheme();
|
|
19281
19390
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19282
19391
|
};
|
|
19283
|
-
var templateObject_1$
|
|
19392
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$9, templateObject_4$7;
|
|
19284
19393
|
|
|
19285
19394
|
var getStylesBySize$4 = function (size) {
|
|
19286
19395
|
switch (size) {
|
|
@@ -19307,7 +19416,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19307
19416
|
} });
|
|
19308
19417
|
};
|
|
19309
19418
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19310
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19419
|
+
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));
|
|
19311
19420
|
};
|
|
19312
19421
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19313
19422
|
if (disabled)
|
|
@@ -19323,23 +19432,23 @@ var TextButton = function (_a) {
|
|
|
19323
19432
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19324
19433
|
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));
|
|
19325
19434
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19435
|
+
var templateObject_1$g;
|
|
19327
19436
|
|
|
19328
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
19329
|
-
var P = newStyled.p(templateObject_2$
|
|
19437
|
+
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"])));
|
|
19438
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19330
19439
|
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"])));
|
|
19331
19440
|
var SizeFitGuide = function (_a) {
|
|
19332
19441
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19333
19442
|
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19334
19443
|
};
|
|
19335
|
-
var templateObject_1$
|
|
19444
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$8;
|
|
19336
19445
|
|
|
19337
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19446
|
+
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) {
|
|
19338
19447
|
var inline = _a.inline;
|
|
19339
19448
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19340
19449
|
});
|
|
19341
|
-
var Row = newStyled.div(templateObject_2$
|
|
19342
|
-
var templateObject_1$
|
|
19450
|
+
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"])));
|
|
19451
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19343
19452
|
|
|
19344
19453
|
var SizeSelector = function (_a) {
|
|
19345
19454
|
var _b;
|
|
@@ -19359,7 +19468,7 @@ var SizeSelector = function (_a) {
|
|
|
19359
19468
|
}) }), void 0)] }), void 0));
|
|
19360
19469
|
};
|
|
19361
19470
|
|
|
19362
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19471
|
+
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) {
|
|
19363
19472
|
var titleSize = _a.titleSize;
|
|
19364
19473
|
return titleSize;
|
|
19365
19474
|
}, function (_a) {
|
|
@@ -19376,10 +19485,10 @@ var Tab = function (_a) {
|
|
|
19376
19485
|
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;
|
|
19377
19486
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19378
19487
|
};
|
|
19379
|
-
var templateObject_1$
|
|
19488
|
+
var templateObject_1$d;
|
|
19380
19489
|
|
|
19381
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
19382
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19490
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19491
|
+
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) {
|
|
19383
19492
|
var backgroundColor = _a.backgroundColor;
|
|
19384
19493
|
return backgroundColor;
|
|
19385
19494
|
}, function (_a) {
|
|
@@ -19398,14 +19507,14 @@ var Tabs = function (_a) {
|
|
|
19398
19507
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19399
19508
|
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19400
19509
|
};
|
|
19401
|
-
var templateObject_1$
|
|
19510
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$6;
|
|
19402
19511
|
|
|
19403
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
19512
|
+
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"])));
|
|
19404
19513
|
var Tag = function (_a) {
|
|
19405
19514
|
var text = _a.text, className = _a.className;
|
|
19406
19515
|
return jsxRuntime.jsx(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19407
19516
|
};
|
|
19408
|
-
var templateObject_1$
|
|
19517
|
+
var templateObject_1$b;
|
|
19409
19518
|
|
|
19410
19519
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19411
19520
|
switch (size) {
|
|
@@ -19516,8 +19625,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19516
19625
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19517
19626
|
};
|
|
19518
19627
|
|
|
19519
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19520
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19628
|
+
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"])));
|
|
19629
|
+
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"])));
|
|
19521
19630
|
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"])));
|
|
19522
19631
|
var ImageVideo = function (_a) {
|
|
19523
19632
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19538,10 +19647,10 @@ var ImageVideo = function (_a) {
|
|
|
19538
19647
|
height: '100%',
|
|
19539
19648
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19540
19649
|
};
|
|
19541
|
-
var templateObject_1$
|
|
19650
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6;
|
|
19542
19651
|
|
|
19543
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19544
|
-
var ContainerMobile = css(templateObject_2$
|
|
19652
|
+
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"])));
|
|
19653
|
+
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"])));
|
|
19545
19654
|
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);
|
|
19546
19655
|
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"])));
|
|
19547
19656
|
var TextWithImage = function (_a) {
|
|
@@ -19563,7 +19672,7 @@ var TextWithImage = function (_a) {
|
|
|
19563
19672
|
// @ts-ignore
|
|
19564
19673
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19565
19674
|
};
|
|
19566
|
-
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile
|
|
19675
|
+
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19567
19676
|
backgroundColor: props.btnBGColor,
|
|
19568
19677
|
color: '#ffffff',
|
|
19569
19678
|
border: props.btnBGColor,
|
|
@@ -19573,9 +19682,9 @@ var TextWithImage = function (_a) {
|
|
|
19573
19682
|
},
|
|
19574
19683
|
} }, 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));
|
|
19575
19684
|
};
|
|
19576
|
-
var templateObject_1$
|
|
19685
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$5;
|
|
19577
19686
|
|
|
19578
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19687
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19579
19688
|
var timerColor = _a.timerColor;
|
|
19580
19689
|
return timerColor || '';
|
|
19581
19690
|
});
|
|
@@ -19611,10 +19720,10 @@ var Timer = function (_a) {
|
|
|
19611
19720
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19612
19721
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19613
19722
|
};
|
|
19614
|
-
var templateObject_1$
|
|
19723
|
+
var templateObject_1$8;
|
|
19615
19724
|
|
|
19616
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19617
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19725
|
+
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"])));
|
|
19726
|
+
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; });
|
|
19618
19727
|
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) {
|
|
19619
19728
|
var theme = _a.theme;
|
|
19620
19729
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19642,7 +19751,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$3 || (templateObject_7$3 = __
|
|
|
19642
19751
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19643
19752
|
});
|
|
19644
19753
|
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19645
|
-
var templateObject_1$
|
|
19754
|
+
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;
|
|
19646
19755
|
|
|
19647
19756
|
var Total = function (_a) {
|
|
19648
19757
|
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;
|
|
@@ -19650,11 +19759,11 @@ var Total = function (_a) {
|
|
|
19650
19759
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19651
19760
|
};
|
|
19652
19761
|
|
|
19653
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19762
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19654
19763
|
var color = _a.color;
|
|
19655
19764
|
return color;
|
|
19656
19765
|
});
|
|
19657
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19766
|
+
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"])));
|
|
19658
19767
|
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) {
|
|
19659
19768
|
var theme = _a.theme;
|
|
19660
19769
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19675,15 +19784,15 @@ var Subtotal = function (_a) {
|
|
|
19675
19784
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19676
19785
|
})] }), void 0));
|
|
19677
19786
|
};
|
|
19678
|
-
var templateObject_1$
|
|
19787
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$3;
|
|
19679
19788
|
|
|
19680
19789
|
var Totals = {
|
|
19681
19790
|
Total: Total,
|
|
19682
19791
|
Subtotal: Subtotal,
|
|
19683
19792
|
};
|
|
19684
19793
|
|
|
19685
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
19686
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19794
|
+
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"])));
|
|
19795
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19687
19796
|
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; });
|
|
19688
19797
|
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'); });
|
|
19689
19798
|
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"])));
|
|
@@ -19734,10 +19843,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19734
19843
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19735
19844
|
})] }), void 0));
|
|
19736
19845
|
};
|
|
19737
|
-
var templateObject_1$
|
|
19846
|
+
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;
|
|
19738
19847
|
|
|
19739
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19740
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19848
|
+
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"])));
|
|
19849
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19741
19850
|
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; });
|
|
19742
19851
|
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'); });
|
|
19743
19852
|
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'); });
|
|
@@ -19774,7 +19883,77 @@ var TrackingProgress = function (_a) {
|
|
|
19774
19883
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19775
19884
|
})] }), void 0));
|
|
19776
19885
|
};
|
|
19777
|
-
var templateObject_1$
|
|
19886
|
+
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;
|
|
19887
|
+
|
|
19888
|
+
var StyledButton = newStyled(Ye.Button)(function (props) { return ({
|
|
19889
|
+
background: props.bgColor,
|
|
19890
|
+
height: '100%',
|
|
19891
|
+
maxHeight: '48px',
|
|
19892
|
+
border: 'none',
|
|
19893
|
+
display: 'flex',
|
|
19894
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
19895
|
+
justifyContent: 'space-between',
|
|
19896
|
+
alignItems: 'center',
|
|
19897
|
+
padding: '10px 24px',
|
|
19898
|
+
}); });
|
|
19899
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
19900
|
+
width: '100%',
|
|
19901
|
+
background: 'transparent',
|
|
19902
|
+
border: 'none',
|
|
19903
|
+
display: 'flex',
|
|
19904
|
+
flexDirection: 'column',
|
|
19905
|
+
alignItems: 'center',
|
|
19906
|
+
justifyContent: 'center',
|
|
19907
|
+
gap: '10px',
|
|
19908
|
+
});
|
|
19909
|
+
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) {
|
|
19910
|
+
var bgColor = _a.bgColor;
|
|
19911
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
19912
|
+
}, function (_a) {
|
|
19913
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
19914
|
+
return width;
|
|
19915
|
+
});
|
|
19916
|
+
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"])));
|
|
19917
|
+
var templateObject_1$3, templateObject_2$2;
|
|
19918
|
+
|
|
19919
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
19920
|
+
var background = _a.background;
|
|
19921
|
+
return ({
|
|
19922
|
+
display: 'flex',
|
|
19923
|
+
flexDirection: 'column',
|
|
19924
|
+
justifyContent: 'center',
|
|
19925
|
+
gap: '10px',
|
|
19926
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
19927
|
+
width: 'auto',
|
|
19928
|
+
borderRadius: '8px',
|
|
19929
|
+
border: '0.063rem solid',
|
|
19930
|
+
borderColor: '#e5e5e5',
|
|
19931
|
+
padding: 'unset',
|
|
19932
|
+
overflow: 'hidden',
|
|
19933
|
+
});
|
|
19934
|
+
});
|
|
19935
|
+
var ControlIconComponent = React$2.memo(function (_a) {
|
|
19936
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
19937
|
+
var Icon = open ? closeIcon : openIcon;
|
|
19938
|
+
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
19939
|
+
});
|
|
19940
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
19941
|
+
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
19942
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
19943
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
19944
|
+
});
|
|
19945
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
19946
|
+
var AccordionContent = function (_a) {
|
|
19947
|
+
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;
|
|
19948
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
19949
|
+
};
|
|
19950
|
+
var BasicAccordion = function (_a) {
|
|
19951
|
+
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;
|
|
19952
|
+
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick }, { children: function (_a) {
|
|
19953
|
+
var open = _a.open;
|
|
19954
|
+
return (jsxRuntime.jsx(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));
|
|
19955
|
+
} }), void 0));
|
|
19956
|
+
};
|
|
19778
19957
|
|
|
19779
19958
|
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) {
|
|
19780
19959
|
var textPosition = _a.textPosition;
|
|
@@ -19942,12 +20121,14 @@ exports.AmazonButton = AmazonButton;
|
|
|
19942
20121
|
exports.AssetsProvider = AssetsProvider;
|
|
19943
20122
|
exports.Autoship = Autoship;
|
|
19944
20123
|
exports.AutoshipV2 = AutoshipV2;
|
|
20124
|
+
exports.BasicAccordion = BasicAccordion;
|
|
19945
20125
|
exports.BeforeAfterCard = BeforeAfterCard;
|
|
19946
20126
|
exports.Bundle = Bundle;
|
|
19947
20127
|
exports.ButtonPrimary = ButtonPrimary;
|
|
19948
20128
|
exports.ButtonSecondary = ButtonSecondary;
|
|
19949
20129
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
19950
20130
|
exports.BuyNowPayLater = BuyNowPayLater;
|
|
20131
|
+
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
19951
20132
|
exports.Card = Card$2;
|
|
19952
20133
|
exports.CartProductItem = CartProductItem;
|
|
19953
20134
|
exports.CategorySquareTag = CategorySquareTag;
|
|
@@ -19956,6 +20137,7 @@ exports.Checkbox = Checkbox;
|
|
|
19956
20137
|
exports.ClubOfferTag = ClubOfferTag;
|
|
19957
20138
|
exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
19958
20139
|
exports.Collection = Collection;
|
|
20140
|
+
exports.Coupon = Coupon;
|
|
19959
20141
|
exports.CrossSell = index$1;
|
|
19960
20142
|
exports.DeliveryDetails = DeliveryDetails;
|
|
19961
20143
|
exports.DiscountTag = DiscountTag$1;
|
|
@@ -20055,6 +20237,7 @@ exports.seasonOfferRoundedTag = SeasonOfferRoundedTag;
|
|
|
20055
20237
|
exports.simulateMouseClick = simulateMouseClick;
|
|
20056
20238
|
exports.sliceString = sliceString;
|
|
20057
20239
|
exports.styled = newStyled;
|
|
20240
|
+
exports.useDeviceType = useDeviceType;
|
|
20058
20241
|
exports.useModal = useModal;
|
|
20059
20242
|
exports.useModalEvent = useModalEvent;
|
|
20060
20243
|
exports.useOnClickOutside = useOnClickOutside;
|