@trafilea/afrodita-components 6.17.2 → 6.18.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 +20 -5
- package/build/index.esm.js +851 -789
- package/build/index.esm.js.map +1 -1
- package/build/index.js +851 -788
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +7 -0
- package/build/theme/revel.theme.js +7 -0
- package/build/theme/shapermint.theme.d.ts +7 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/thebodcon.theme.d.ts +7 -0
- package/build/theme/thebodcon.theme.js +7 -0
- package/build/theme/thespadr.theme.d.ts +7 -0
- package/build/theme/thespadr.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +7 -0
- package/build/theme/truekind.theme.js +7 -0
- 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$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = _
|
|
|
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$1f, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3182
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$20;
|
|
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$1_ || (templateObject_1$1_
|
|
|
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$1m || (templateObject_2$1m = __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$1l || (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$1m;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3387,7 +3387,7 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3387
|
}
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3390
|
+
var Img = newStyled.img(templateObject_1$1_ || (templateObject_1$1_ = __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
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;
|
|
@@ -3396,7 +3396,7 @@ var Image$3 = function (_a) {
|
|
|
3396
3396
|
: src;
|
|
3397
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$1_;
|
|
3400
3400
|
|
|
3401
3401
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3402
3402
|
|
|
@@ -4199,19 +4199,19 @@ function jsxs(type, props, key) {
|
|
|
4199
4199
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4200
4200
|
// `variants` styles that are consistent through all themes.
|
|
4201
4201
|
var TAGS = {
|
|
4202
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4203
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4204
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4205
|
-
display1: newStyled.h1(templateObject_4$
|
|
4206
|
-
display2: newStyled.h2(templateObject_5$
|
|
4207
|
-
display3: newStyled.h3(templateObject_6$
|
|
4208
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4209
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4210
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4211
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4212
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4202
|
+
hero1: newStyled.h1(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""]))),
|
|
4203
|
+
hero2: newStyled.h2(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject([""], [""]))),
|
|
4204
|
+
hero3: newStyled.h3(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject([""], [""]))),
|
|
4205
|
+
display1: newStyled.h1(templateObject_4$N || (templateObject_4$N = __makeTemplateObject([""], [""]))),
|
|
4206
|
+
display2: newStyled.h2(templateObject_5$z || (templateObject_5$z = __makeTemplateObject([""], [""]))),
|
|
4207
|
+
display3: newStyled.h3(templateObject_6$t || (templateObject_6$t = __makeTemplateObject([""], [""]))),
|
|
4208
|
+
heading1: newStyled.h1(templateObject_7$k || (templateObject_7$k = __makeTemplateObject([""], [""]))),
|
|
4209
|
+
heading2: newStyled.h2(templateObject_8$i || (templateObject_8$i = __makeTemplateObject([""], [""]))),
|
|
4210
|
+
heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
|
|
4211
|
+
heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
|
|
4212
|
+
heading5: newStyled.h5(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject([""], [""]))),
|
|
4213
4213
|
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4214
|
-
heading7: newStyled.h1(templateObject_13$
|
|
4214
|
+
heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
|
|
4215
4215
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4216
4216
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
4217
4217
|
link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
@@ -4335,17 +4335,17 @@ var DEFAULTS = {
|
|
|
4335
4335
|
size: 'regular',
|
|
4336
4336
|
},
|
|
4337
4337
|
};
|
|
4338
|
-
var templateObject_1$
|
|
4339
|
-
|
|
4340
|
-
var Container$
|
|
4341
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4342
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4343
|
-
var Label$
|
|
4344
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4345
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4338
|
+
var templateObject_1$1Z, templateObject_2$1l, templateObject_3$11, templateObject_4$N, templateObject_5$z, templateObject_6$t, templateObject_7$k, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4339
|
+
|
|
4340
|
+
var Container$1e = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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"])));
|
|
4341
|
+
var Card$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
4342
|
+
var Tag$2 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
4343
|
+
var Label$6 = newStyled.div(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
4344
|
+
var Check$1 = newStyled.div(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
4345
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
4346
4346
|
var PackSelectorV2 = function (_a) {
|
|
4347
4347
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4348
|
-
return (jsxRuntime.jsx(Container$
|
|
4348
|
+
return (jsxRuntime.jsx(Container$1e, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4349
4349
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4350
4350
|
}) }), void 0));
|
|
4351
4351
|
};
|
|
@@ -4359,7 +4359,7 @@ var PackCard$1 = function (_a) {
|
|
|
4359
4359
|
.then(function (icon) { return setIcon(icon); })
|
|
4360
4360
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4361
4361
|
}, [pack.meta.icon]);
|
|
4362
|
-
return (jsxRuntime.jsxs(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$
|
|
4362
|
+
return (jsxRuntime.jsxs(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$6, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4363
4363
|
locale: 'en-US',
|
|
4364
4364
|
currency: currencyCode || 'USD',
|
|
4365
4365
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4367,27 +4367,27 @@ var PackCard$1 = function (_a) {
|
|
|
4367
4367
|
currency: currencyCode || 'USD',
|
|
4368
4368
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4369
4369
|
};
|
|
4370
|
-
var templateObject_1$
|
|
4370
|
+
var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s;
|
|
4371
4371
|
|
|
4372
|
-
var Container$
|
|
4373
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4372
|
+
var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4373
|
+
var DropContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4374
4374
|
var DropList = function (_a) {
|
|
4375
4375
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4376
|
-
return (jsxRuntime.jsx(Container$
|
|
4376
|
+
return (jsxRuntime.jsx(Container$1d, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4377
4377
|
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));
|
|
4378
4378
|
}) }, void 0));
|
|
4379
4379
|
};
|
|
4380
|
-
var templateObject_1$
|
|
4380
|
+
var templateObject_1$1X, templateObject_2$1j;
|
|
4381
4381
|
|
|
4382
4382
|
var DROPS_TOTAL = 5;
|
|
4383
|
-
var Container$
|
|
4384
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4385
|
-
var Description$3 = newStyled.p(templateObject_3
|
|
4383
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4384
|
+
var Title$8 = newStyled.p(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
4385
|
+
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"])));
|
|
4386
4386
|
var AbsorbencyLevel = function (_a) {
|
|
4387
4387
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4388
|
-
return (jsxRuntime.jsxs(Container$
|
|
4388
|
+
return (jsxRuntime.jsxs(Container$1c, { 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));
|
|
4389
4389
|
};
|
|
4390
|
-
var templateObject_1$
|
|
4390
|
+
var templateObject_1$1W, templateObject_2$1i, templateObject_3$$;
|
|
4391
4391
|
|
|
4392
4392
|
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(`
|
|
4393
4393
|
`),"","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(`
|
|
@@ -4463,7 +4463,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4463
4463
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4464
4464
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4465
4465
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4466
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
4466
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
4467
4467
|
var Accordion$1 = function (_a) {
|
|
4468
4468
|
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;
|
|
4469
4469
|
var theme = useTheme();
|
|
@@ -4487,9 +4487,9 @@ var Accordion$1 = function (_a) {
|
|
|
4487
4487
|
} }, { 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));
|
|
4488
4488
|
} }), void 0));
|
|
4489
4489
|
};
|
|
4490
|
-
var templateObject_1$
|
|
4490
|
+
var templateObject_1$1V;
|
|
4491
4491
|
|
|
4492
|
-
var Container$
|
|
4492
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4493
4493
|
var AccordionOptions = function (_a) {
|
|
4494
4494
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4495
4495
|
var _b = React$2.useState({
|
|
@@ -4502,7 +4502,7 @@ var AccordionOptions = function (_a) {
|
|
|
4502
4502
|
}
|
|
4503
4503
|
return false;
|
|
4504
4504
|
};
|
|
4505
|
-
return (jsxRuntime.jsx(Container$
|
|
4505
|
+
return (jsxRuntime.jsx(Container$1b, { children: accordions.map(function (accordion, index) {
|
|
4506
4506
|
var forceOpenValue = getForceOpen(index);
|
|
4507
4507
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4508
4508
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4513,7 +4513,7 @@ var AccordionOptions = function (_a) {
|
|
|
4513
4513
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4514
4514
|
}) }, void 0));
|
|
4515
4515
|
};
|
|
4516
|
-
var templateObject_1$
|
|
4516
|
+
var templateObject_1$1U;
|
|
4517
4517
|
|
|
4518
4518
|
exports.CardSectionType = void 0;
|
|
4519
4519
|
(function (CardSectionType) {
|
|
@@ -4675,29 +4675,29 @@ var isValidDate = function (value) {
|
|
|
4675
4675
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4676
4676
|
};
|
|
4677
4677
|
|
|
4678
|
-
var Bold = newStyled.span(templateObject_1$
|
|
4679
|
-
var FlexContainer$2 = newStyled.div(templateObject_2$
|
|
4680
|
-
var templateObject_1$
|
|
4678
|
+
var Bold = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4679
|
+
var FlexContainer$2 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
4680
|
+
var templateObject_1$1T, templateObject_2$1h;
|
|
4681
4681
|
|
|
4682
|
-
var Container$
|
|
4682
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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) {
|
|
4683
4683
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4684
4684
|
return width;
|
|
4685
4685
|
}, function (_a) {
|
|
4686
4686
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4687
4687
|
return height;
|
|
4688
4688
|
});
|
|
4689
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
4690
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
4691
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
4692
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
4693
|
-
var templateObject_1$
|
|
4689
|
+
var FlexCentered = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
4690
|
+
var LeftSide = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
4691
|
+
var RightSide = newStyled.div(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
4692
|
+
var FlexStart = newStyled.div(templateObject_5$x || (templateObject_5$x = __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"])));
|
|
4693
|
+
var templateObject_1$1S, templateObject_2$1g, templateObject_3$_, templateObject_4$L, templateObject_5$x;
|
|
4694
4694
|
|
|
4695
4695
|
var _this$1 = undefined;
|
|
4696
4696
|
var CouponCard = function (_a) {
|
|
4697
4697
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
|
|
4698
4698
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4699
4699
|
var handleCopy = React$2.useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4700
|
-
return (jsxRuntime.jsxs(Container$
|
|
4700
|
+
return (jsxRuntime.jsxs(Container$1a, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, 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.Large, 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: {
|
|
4701
4701
|
name: 'actions/copy_outlined',
|
|
4702
4702
|
position: 'right',
|
|
4703
4703
|
margin: '10px',
|
|
@@ -4745,14 +4745,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
4745
4745
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4746
4746
|
};
|
|
4747
4747
|
|
|
4748
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4749
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4748
|
+
var ErrorText = newStyled.h3(templateObject_1$1R || (templateObject_1$1R = __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; });
|
|
4749
|
+
var ErrorContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4750
4750
|
var Error$1 = function (_a) {
|
|
4751
4751
|
var error = _a.error;
|
|
4752
4752
|
var theme = useTheme();
|
|
4753
4753
|
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));
|
|
4754
4754
|
};
|
|
4755
|
-
var templateObject_1$
|
|
4755
|
+
var templateObject_1$1R, templateObject_2$1f;
|
|
4756
4756
|
|
|
4757
4757
|
var BaseSelectButton = function (_a) {
|
|
4758
4758
|
var children = _a.children, as = _a.as;
|
|
@@ -4769,7 +4769,7 @@ function BaseSelectOption(_a) {
|
|
|
4769
4769
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4770
4770
|
}
|
|
4771
4771
|
|
|
4772
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4772
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4773
4773
|
function BaseSelect(_a) {
|
|
4774
4774
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4775
4775
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4779,7 +4779,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4779
4779
|
Options: BaseSelectOptions,
|
|
4780
4780
|
Option: BaseSelectOption,
|
|
4781
4781
|
});
|
|
4782
|
-
var templateObject_1$
|
|
4782
|
+
var templateObject_1$1Q;
|
|
4783
4783
|
|
|
4784
4784
|
var CustomButton = newStyled.button(function (_a) {
|
|
4785
4785
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4818,7 +4818,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4818
4818
|
});
|
|
4819
4819
|
});
|
|
4820
4820
|
// TODO Remove this when we find the real solution
|
|
4821
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4821
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4822
4822
|
var open = _a.open;
|
|
4823
4823
|
return open &&
|
|
4824
4824
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4838,7 +4838,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4838
4838
|
} }), void 0));
|
|
4839
4839
|
};
|
|
4840
4840
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4841
|
-
var templateObject_1$
|
|
4841
|
+
var templateObject_1$1P;
|
|
4842
4842
|
|
|
4843
4843
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4844
4844
|
var theme = _a.theme;
|
|
@@ -4916,7 +4916,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4916
4916
|
Styles[props.variant](props.theme),
|
|
4917
4917
|
Styles[props.size](props.theme),
|
|
4918
4918
|
]; });
|
|
4919
|
-
var Label$
|
|
4919
|
+
var Label$5 = function (_a) {
|
|
4920
4920
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4921
4921
|
var theme = useTheme();
|
|
4922
4922
|
return (jsxRuntime.jsx(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -5005,7 +5005,7 @@ var CustomCheckboxStyles = {
|
|
|
5005
5005
|
},
|
|
5006
5006
|
};
|
|
5007
5007
|
|
|
5008
|
-
var Container$
|
|
5008
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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"])));
|
|
5009
5009
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5010
5010
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5011
5011
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5016,7 +5016,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5016
5016
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5017
5017
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5018
5018
|
]; });
|
|
5019
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5019
|
+
var Input$5 = newStyled.input(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
5020
5020
|
var disabled = _a.disabled;
|
|
5021
5021
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5022
5022
|
});
|
|
@@ -5030,9 +5030,9 @@ var Checkbox = function (_a) {
|
|
|
5030
5030
|
}
|
|
5031
5031
|
onChange(e.target.checked);
|
|
5032
5032
|
};
|
|
5033
|
-
return (jsxRuntime.jsxs(Container$
|
|
5033
|
+
return (jsxRuntime.jsxs(Container$19, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5034
5034
|
};
|
|
5035
|
-
var templateObject_1$
|
|
5035
|
+
var templateObject_1$1O, templateObject_2$1e;
|
|
5036
5036
|
|
|
5037
5037
|
var CustomOption = newStyled.li(function (_a) {
|
|
5038
5038
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5081,9 +5081,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5081
5081
|
Option: BaseDropdownOption,
|
|
5082
5082
|
});
|
|
5083
5083
|
|
|
5084
|
-
var Container$
|
|
5085
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5086
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5084
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
5085
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
5086
|
+
var SelectedOption = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5087
5087
|
var fontWeight = _a.fontWeight;
|
|
5088
5088
|
return fontWeight || '';
|
|
5089
5089
|
});
|
|
@@ -5115,10 +5115,10 @@ function SimpleDropdown(_a) {
|
|
|
5115
5115
|
}
|
|
5116
5116
|
setSelectedValue(value);
|
|
5117
5117
|
}, [value, options, initialValue]);
|
|
5118
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5118
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$18 : React$2.Fragment;
|
|
5119
5119
|
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));
|
|
5120
5120
|
}
|
|
5121
|
-
var templateObject_1$
|
|
5121
|
+
var templateObject_1$1N, templateObject_2$1d, templateObject_3$Z;
|
|
5122
5122
|
|
|
5123
5123
|
/* base styles & size variants */
|
|
5124
5124
|
var CustomRadioStyles$2 = {
|
|
@@ -5183,9 +5183,9 @@ var ContainerStyles$2 = {
|
|
|
5183
5183
|
},
|
|
5184
5184
|
};
|
|
5185
5185
|
|
|
5186
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5187
|
-
var Container$
|
|
5188
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5186
|
+
var Wrapper$7 = 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"])));
|
|
5187
|
+
var Container$17 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5188
|
+
var Input$4 = newStyled.input(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
5189
5189
|
var disabled = _a.disabled;
|
|
5190
5190
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5191
5191
|
});
|
|
@@ -5193,14 +5193,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5193
5193
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5194
5194
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5195
5195
|
]; });
|
|
5196
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5196
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5197
5197
|
var theme = _a.theme;
|
|
5198
5198
|
return theme.component.radio.textSize;
|
|
5199
5199
|
}, function (_a) {
|
|
5200
5200
|
var theme = _a.theme;
|
|
5201
5201
|
return theme.component.radio.lineHeight;
|
|
5202
5202
|
});
|
|
5203
|
-
var StyledLabelV2 = newStyled(Label$
|
|
5203
|
+
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5204
5204
|
var theme = _a.theme;
|
|
5205
5205
|
return theme.component.radio.textSize;
|
|
5206
5206
|
}, function (_a) {
|
|
@@ -5214,9 +5214,104 @@ var RadioInput = function (_a) {
|
|
|
5214
5214
|
var value = event.currentTarget.value;
|
|
5215
5215
|
onChange({ value: value, label: label });
|
|
5216
5216
|
};
|
|
5217
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5217
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$17, __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));
|
|
5218
5218
|
};
|
|
5219
|
-
var templateObject_1$
|
|
5219
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y, templateObject_4$K;
|
|
5220
|
+
|
|
5221
|
+
var useOnClickOutside = function (ref, handler) {
|
|
5222
|
+
React$2.useEffect(function () {
|
|
5223
|
+
var listener = function (event) {
|
|
5224
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
5225
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5226
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5227
|
+
return;
|
|
5228
|
+
}
|
|
5229
|
+
handler(event);
|
|
5230
|
+
};
|
|
5231
|
+
document.addEventListener('mousedown', listener);
|
|
5232
|
+
document.addEventListener('touchstart', listener);
|
|
5233
|
+
return function () {
|
|
5234
|
+
document.removeEventListener('mousedown', listener);
|
|
5235
|
+
document.removeEventListener('touchstart', listener);
|
|
5236
|
+
};
|
|
5237
|
+
}, [ref, handler]);
|
|
5238
|
+
};
|
|
5239
|
+
|
|
5240
|
+
function getWindowDimensions() {
|
|
5241
|
+
if (typeof window === 'undefined')
|
|
5242
|
+
return { width: 0, height: 0 };
|
|
5243
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
5244
|
+
return {
|
|
5245
|
+
width: width,
|
|
5246
|
+
height: height,
|
|
5247
|
+
};
|
|
5248
|
+
}
|
|
5249
|
+
var getViewport = function (breakpoints, width) {
|
|
5250
|
+
if (width <= breakpoints.mobile)
|
|
5251
|
+
return Viewports.mobile;
|
|
5252
|
+
if (width <= breakpoints.tablet)
|
|
5253
|
+
return Viewports.tablet;
|
|
5254
|
+
if (width <= breakpoints.desktop)
|
|
5255
|
+
return Viewports.desktop;
|
|
5256
|
+
return Viewports.desktopLarge;
|
|
5257
|
+
};
|
|
5258
|
+
var useWindowDimensions = function (breakpoints, _a) {
|
|
5259
|
+
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5260
|
+
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5261
|
+
var _c = React$2.useState(function () {
|
|
5262
|
+
var dimension = getWindowDimensions();
|
|
5263
|
+
return {
|
|
5264
|
+
windowDimensions: dimension,
|
|
5265
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5266
|
+
};
|
|
5267
|
+
}), state = _c[0], setState = _c[1];
|
|
5268
|
+
React$2.useEffect(function () {
|
|
5269
|
+
function handleResize() {
|
|
5270
|
+
var newDimension = getWindowDimensions();
|
|
5271
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5272
|
+
setState(function (oldState) {
|
|
5273
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5274
|
+
return {
|
|
5275
|
+
windowDimensions: newDimension,
|
|
5276
|
+
viewport: newViewport,
|
|
5277
|
+
};
|
|
5278
|
+
}
|
|
5279
|
+
return oldState;
|
|
5280
|
+
});
|
|
5281
|
+
}
|
|
5282
|
+
handleResize();
|
|
5283
|
+
window.addEventListener('resize', handleResize);
|
|
5284
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5285
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5286
|
+
}, [shouldListenChanges]);
|
|
5287
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5288
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5289
|
+
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5290
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5291
|
+
};
|
|
5292
|
+
|
|
5293
|
+
var useDeviceType = function () {
|
|
5294
|
+
var mobileBreakpoint = 768;
|
|
5295
|
+
var tabletBreakpoint = 1024;
|
|
5296
|
+
var _a = React$2.useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5297
|
+
var handleResize = function () {
|
|
5298
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
5299
|
+
setDeviceType('mobile');
|
|
5300
|
+
}
|
|
5301
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
5302
|
+
setDeviceType('tablet');
|
|
5303
|
+
}
|
|
5304
|
+
else {
|
|
5305
|
+
setDeviceType('desktop');
|
|
5306
|
+
}
|
|
5307
|
+
};
|
|
5308
|
+
React$2.useLayoutEffect(function () {
|
|
5309
|
+
window.addEventListener('resize', handleResize);
|
|
5310
|
+
handleResize();
|
|
5311
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5312
|
+
}, []);
|
|
5313
|
+
return deviceType;
|
|
5314
|
+
};
|
|
5220
5315
|
|
|
5221
5316
|
var getWrapperFlexDirection = function (position) {
|
|
5222
5317
|
switch (position) {
|
|
@@ -5267,7 +5362,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5267
5362
|
}
|
|
5268
5363
|
};
|
|
5269
5364
|
|
|
5270
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5365
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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) {
|
|
5271
5366
|
var position = _a.position;
|
|
5272
5367
|
return getWrapperFlexDirection(position);
|
|
5273
5368
|
}, function (_a) {
|
|
@@ -5277,7 +5372,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5277
5372
|
var disableHover = _a.disableHover;
|
|
5278
5373
|
return (disableHover ? 0 : 1);
|
|
5279
5374
|
});
|
|
5280
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5375
|
+
var TooltipContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
5281
5376
|
var position = _a.position;
|
|
5282
5377
|
return getContainerFlexDirection(position);
|
|
5283
5378
|
}, function (_a) {
|
|
@@ -5305,123 +5400,34 @@ var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5305
5400
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5306
5401
|
return actual === expected ? margin : '0';
|
|
5307
5402
|
};
|
|
5308
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5403
|
+
var ContentWrapper = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5309
5404
|
var borderColor = _a.borderColor;
|
|
5310
5405
|
return borderColor;
|
|
5311
5406
|
}, function (_a) {
|
|
5312
5407
|
var backgroundColor = _a.backgroundColor;
|
|
5313
5408
|
return backgroundColor;
|
|
5314
5409
|
});
|
|
5315
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5410
|
+
var TooltipText = newStyled.div(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5411
|
+
var theme = _a.theme;
|
|
5412
|
+
return theme.component.autoship.tooltip.text.alignment;
|
|
5413
|
+
}, function (_a) {
|
|
5414
|
+
var theme = _a.theme;
|
|
5415
|
+
return theme.component.autoship.tooltip.text.maxWidth;
|
|
5416
|
+
}, function (_a) {
|
|
5316
5417
|
var color = _a.color;
|
|
5317
5418
|
return color;
|
|
5318
5419
|
});
|
|
5319
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5320
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5420
|
+
var TopSection = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5421
|
+
var Title$7 = newStyled.h1(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5321
5422
|
var color = _a.color;
|
|
5322
5423
|
return color;
|
|
5323
5424
|
});
|
|
5324
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5325
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5425
|
+
var IconContainer$5 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5426
|
+
var CloseToolTip = newStyled.button(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5326
5427
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5327
5428
|
return right;
|
|
5328
5429
|
});
|
|
5329
|
-
var templateObject_1$
|
|
5330
|
-
|
|
5331
|
-
var useOnClickOutside = function (ref, handler) {
|
|
5332
|
-
React$2.useEffect(function () {
|
|
5333
|
-
var listener = function (event) {
|
|
5334
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
5335
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5336
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5337
|
-
return;
|
|
5338
|
-
}
|
|
5339
|
-
handler(event);
|
|
5340
|
-
};
|
|
5341
|
-
document.addEventListener('mousedown', listener);
|
|
5342
|
-
document.addEventListener('touchstart', listener);
|
|
5343
|
-
return function () {
|
|
5344
|
-
document.removeEventListener('mousedown', listener);
|
|
5345
|
-
document.removeEventListener('touchstart', listener);
|
|
5346
|
-
};
|
|
5347
|
-
}, [ref, handler]);
|
|
5348
|
-
};
|
|
5349
|
-
|
|
5350
|
-
function getWindowDimensions() {
|
|
5351
|
-
if (typeof window === 'undefined')
|
|
5352
|
-
return { width: 0, height: 0 };
|
|
5353
|
-
var width = window.innerWidth, height = window.innerHeight;
|
|
5354
|
-
return {
|
|
5355
|
-
width: width,
|
|
5356
|
-
height: height,
|
|
5357
|
-
};
|
|
5358
|
-
}
|
|
5359
|
-
var getViewport = function (breakpoints, width) {
|
|
5360
|
-
if (width <= breakpoints.mobile)
|
|
5361
|
-
return Viewports.mobile;
|
|
5362
|
-
if (width <= breakpoints.tablet)
|
|
5363
|
-
return Viewports.tablet;
|
|
5364
|
-
if (width <= breakpoints.desktop)
|
|
5365
|
-
return Viewports.desktop;
|
|
5366
|
-
return Viewports.desktopLarge;
|
|
5367
|
-
};
|
|
5368
|
-
var useWindowDimensions = function (breakpoints, _a) {
|
|
5369
|
-
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5370
|
-
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5371
|
-
var _c = React$2.useState(function () {
|
|
5372
|
-
var dimension = getWindowDimensions();
|
|
5373
|
-
return {
|
|
5374
|
-
windowDimensions: dimension,
|
|
5375
|
-
viewport: getViewport(breakpoints, dimension.width),
|
|
5376
|
-
};
|
|
5377
|
-
}), state = _c[0], setState = _c[1];
|
|
5378
|
-
React$2.useEffect(function () {
|
|
5379
|
-
function handleResize() {
|
|
5380
|
-
var newDimension = getWindowDimensions();
|
|
5381
|
-
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5382
|
-
setState(function (oldState) {
|
|
5383
|
-
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5384
|
-
return {
|
|
5385
|
-
windowDimensions: newDimension,
|
|
5386
|
-
viewport: newViewport,
|
|
5387
|
-
};
|
|
5388
|
-
}
|
|
5389
|
-
return oldState;
|
|
5390
|
-
});
|
|
5391
|
-
}
|
|
5392
|
-
handleResize();
|
|
5393
|
-
window.addEventListener('resize', handleResize);
|
|
5394
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5395
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5396
|
-
}, [shouldListenChanges]);
|
|
5397
|
-
var isMobile = state.viewport === Viewports.mobile;
|
|
5398
|
-
var isTablet = state.viewport === Viewports.tablet;
|
|
5399
|
-
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5400
|
-
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5401
|
-
};
|
|
5402
|
-
|
|
5403
|
-
var useDeviceType = function () {
|
|
5404
|
-
var mobileBreakpoint = 768;
|
|
5405
|
-
var tabletBreakpoint = 1024;
|
|
5406
|
-
var _a = React$2.useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5407
|
-
var handleResize = function () {
|
|
5408
|
-
if (window.innerWidth < mobileBreakpoint) {
|
|
5409
|
-
setDeviceType('mobile');
|
|
5410
|
-
}
|
|
5411
|
-
else if (window.innerWidth < tabletBreakpoint) {
|
|
5412
|
-
setDeviceType('tablet');
|
|
5413
|
-
}
|
|
5414
|
-
else {
|
|
5415
|
-
setDeviceType('desktop');
|
|
5416
|
-
}
|
|
5417
|
-
};
|
|
5418
|
-
React$2.useLayoutEffect(function () {
|
|
5419
|
-
window.addEventListener('resize', handleResize);
|
|
5420
|
-
handleResize();
|
|
5421
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5422
|
-
}, []);
|
|
5423
|
-
return deviceType;
|
|
5424
|
-
};
|
|
5430
|
+
var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J, templateObject_5$w, templateObject_6$r, templateObject_7$j, templateObject_8$h;
|
|
5425
5431
|
|
|
5426
5432
|
var Tooltip = function (_a) {
|
|
5427
5433
|
var _b;
|
|
@@ -5446,7 +5452,7 @@ var Tooltip = function (_a) {
|
|
|
5446
5452
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5447
5453
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5448
5454
|
: theme.colors.pallete.secondary.color,
|
|
5449
|
-
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color,
|
|
5455
|
+
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
5450
5456
|
};
|
|
5451
5457
|
|
|
5452
5458
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5492,7 +5498,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5492
5498
|
};
|
|
5493
5499
|
}
|
|
5494
5500
|
};
|
|
5495
|
-
var Container$
|
|
5501
|
+
var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5496
5502
|
var backgroundColor = _a.backgroundColor;
|
|
5497
5503
|
return backgroundColor;
|
|
5498
5504
|
}, function (_a) {
|
|
@@ -5514,7 +5520,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
5514
5520
|
var size = _a.size;
|
|
5515
5521
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5516
5522
|
});
|
|
5517
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5523
|
+
var H3$3 = newStyled.h3(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
5518
5524
|
var textColor = _a.textColor;
|
|
5519
5525
|
return textColor;
|
|
5520
5526
|
}, function (_a) {
|
|
@@ -5529,9 +5535,9 @@ var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __makeTemp
|
|
|
5529
5535
|
var ClubOfferTag = function (_a) {
|
|
5530
5536
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5531
5537
|
var theme = useTheme();
|
|
5532
|
-
return (jsxRuntime.jsx(Container$
|
|
5538
|
+
return (jsxRuntime.jsx(Container$16, __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));
|
|
5533
5539
|
};
|
|
5534
|
-
var templateObject_1$
|
|
5540
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
5535
5541
|
|
|
5536
5542
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5537
5543
|
var _a, _b, _c;
|
|
@@ -5562,7 +5568,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5562
5568
|
};
|
|
5563
5569
|
}
|
|
5564
5570
|
};
|
|
5565
|
-
var Container$
|
|
5571
|
+
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) {
|
|
5566
5572
|
var backgroundColor = _a.backgroundColor;
|
|
5567
5573
|
return backgroundColor;
|
|
5568
5574
|
}, function (_a) {
|
|
@@ -5584,7 +5590,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5584
5590
|
var size = _a.size;
|
|
5585
5591
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5586
5592
|
});
|
|
5587
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5593
|
+
var H3$2 = 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) {
|
|
5588
5594
|
var textColor = _a.textColor;
|
|
5589
5595
|
return textColor;
|
|
5590
5596
|
}, function (_a) {
|
|
@@ -5599,9 +5605,9 @@ var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemp
|
|
|
5599
5605
|
var DiscountTag$1 = function (_a) {
|
|
5600
5606
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5601
5607
|
var theme = useTheme();
|
|
5602
|
-
return (jsxRuntime.jsx(Container$
|
|
5608
|
+
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": "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));
|
|
5603
5609
|
};
|
|
5604
|
-
var templateObject_1$
|
|
5610
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5605
5611
|
|
|
5606
5612
|
var getStylesBySize$b = function (size, theme) {
|
|
5607
5613
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5643,8 +5649,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5643
5649
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5644
5650
|
}
|
|
5645
5651
|
};
|
|
5646
|
-
var Container$
|
|
5647
|
-
var Price = newStyled.p(templateObject_2$
|
|
5652
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5653
|
+
var Price = newStyled.p(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5648
5654
|
var weight = _a.weight;
|
|
5649
5655
|
return (weight ? weight : '400');
|
|
5650
5656
|
}, function (_a) {
|
|
@@ -5668,7 +5674,7 @@ var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5668
5674
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5669
5675
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5670
5676
|
});
|
|
5671
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5677
|
+
var TagContainer = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5672
5678
|
var _b;
|
|
5673
5679
|
var size = _a.size;
|
|
5674
5680
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5699,11 +5705,11 @@ var PriceLabel = function (_a) {
|
|
|
5699
5705
|
: exports.ComponentSize.XSmall;
|
|
5700
5706
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5701
5707
|
};
|
|
5702
|
-
return (jsxRuntime.jsxs(Container$
|
|
5708
|
+
return (jsxRuntime.jsxs(Container$14, __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));
|
|
5703
5709
|
};
|
|
5704
|
-
var templateObject_1$
|
|
5710
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$W;
|
|
5705
5711
|
|
|
5706
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5712
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5707
5713
|
var PriceLabelV2 = function (_a) {
|
|
5708
5714
|
var _b;
|
|
5709
5715
|
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"]);
|
|
@@ -5756,7 +5762,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5756
5762
|
var savetoString = saveto.toFixed(2);
|
|
5757
5763
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5758
5764
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5759
|
-
return (jsxRuntime.jsxs(Container$
|
|
5765
|
+
return (jsxRuntime.jsxs(Container$14, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5760
5766
|
marginTop: '-5px',
|
|
5761
5767
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5762
5768
|
? finalPriceArray[0]
|
|
@@ -5774,11 +5780,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5774
5780
|
lineHeight: '22px',
|
|
5775
5781
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5776
5782
|
};
|
|
5777
|
-
var templateObject_1$
|
|
5783
|
+
var templateObject_1$1H;
|
|
5778
5784
|
|
|
5779
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5780
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5781
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5785
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5786
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5787
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5782
5788
|
var PriceLabelV3 = function (_a) {
|
|
5783
5789
|
var _b;
|
|
5784
5790
|
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, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5833,7 +5839,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5833
5839
|
return null;
|
|
5834
5840
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5835
5841
|
};
|
|
5836
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5842
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$14, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5837
5843
|
marginTop: '-5px',
|
|
5838
5844
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5839
5845
|
marginTop: '-6px',
|
|
@@ -5849,10 +5855,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5849
5855
|
lineHeight: '22px',
|
|
5850
5856
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5851
5857
|
};
|
|
5852
|
-
var templateObject_1$
|
|
5858
|
+
var templateObject_1$1G, templateObject_2$17, templateObject_3$V;
|
|
5853
5859
|
|
|
5854
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5855
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5860
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5861
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
5856
5862
|
var selected = _a.selected, theme = _a.theme;
|
|
5857
5863
|
return selected
|
|
5858
5864
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5866,30 +5872,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5866
5872
|
var theme = _a.theme;
|
|
5867
5873
|
return theme.colors.pallete.primary.color;
|
|
5868
5874
|
});
|
|
5869
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5875
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5870
5876
|
var onClick = _a.onClick;
|
|
5871
5877
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5872
5878
|
});
|
|
5873
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5874
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5879
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5880
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5875
5881
|
var theme = _a.theme;
|
|
5876
5882
|
return theme.colors.shades[200].color;
|
|
5877
5883
|
}, function (_a) {
|
|
5878
5884
|
var theme = _a.theme;
|
|
5879
5885
|
return theme.colors.pallete.primary.color;
|
|
5880
5886
|
});
|
|
5881
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5882
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5883
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5884
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5885
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5886
|
-
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$
|
|
5887
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5888
|
+
var Benefit$1 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5889
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5890
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5891
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5892
|
+
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5887
5893
|
var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5888
5894
|
var selected = _a.selected, theme = _a.theme;
|
|
5889
5895
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5890
5896
|
});
|
|
5891
|
-
var Container$
|
|
5892
|
-
var templateObject_1$
|
|
5897
|
+
var Container$13 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5898
|
+
var templateObject_1$1F, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
|
|
5893
5899
|
|
|
5894
5900
|
var radioIds$1 = {
|
|
5895
5901
|
oneTime: {
|
|
@@ -5939,17 +5945,17 @@ var Autoship = function (_a) {
|
|
|
5939
5945
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5940
5946
|
};
|
|
5941
5947
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5942
|
-
return (jsxRuntime.jsxs(Container$
|
|
5948
|
+
return (jsxRuntime.jsxs(Container$13, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5943
5949
|
? benefitsColor.selected
|
|
5944
5950
|
: 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));
|
|
5945
5951
|
};
|
|
5946
5952
|
|
|
5947
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5953
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
5948
5954
|
var theme = _a.theme;
|
|
5949
5955
|
return theme.name === 'TheSpaDr' &&
|
|
5950
5956
|
"\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 ";
|
|
5951
5957
|
});
|
|
5952
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5958
|
+
var DiscountTag = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5953
5959
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5954
5960
|
return isSelected
|
|
5955
5961
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5965,7 +5971,7 @@ var getSelectedBorder = function (_a) {
|
|
|
5965
5971
|
}
|
|
5966
5972
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
5967
5973
|
};
|
|
5968
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
5974
|
+
var ContainerBase = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5969
5975
|
var selected = _a.selected, theme = _a.theme;
|
|
5970
5976
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
5971
5977
|
}, function (_a) {
|
|
@@ -5977,28 +5983,32 @@ var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __
|
|
|
5977
5983
|
var theme = _a.theme;
|
|
5978
5984
|
return theme.colors.pallete.primary.color;
|
|
5979
5985
|
});
|
|
5980
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5986
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
5981
5987
|
var onClick = _a.onClick;
|
|
5982
5988
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5983
5989
|
});
|
|
5984
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5985
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5990
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
5991
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5986
5992
|
var theme = _a.theme;
|
|
5987
5993
|
return theme.colors.shades[200].color;
|
|
5988
5994
|
}, function (_a) {
|
|
5989
5995
|
var theme = _a.theme;
|
|
5990
5996
|
return theme.colors.pallete.primary.color;
|
|
5991
5997
|
});
|
|
5992
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5993
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5994
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5995
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
5996
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$
|
|
5998
|
+
var BenefitsContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5999
|
+
var Benefit = newStyled.div(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6000
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6001
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6002
|
+
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5997
6003
|
var selected = _a.selected, theme = _a.theme;
|
|
5998
6004
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5999
6005
|
});
|
|
6000
|
-
var Container$
|
|
6001
|
-
var
|
|
6006
|
+
var Container$12 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6007
|
+
var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6008
|
+
var theme = _a.theme;
|
|
6009
|
+
return theme.component.autoship.tooltip.margin;
|
|
6010
|
+
});
|
|
6011
|
+
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$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
|
|
6002
6012
|
|
|
6003
6013
|
var radioIds = {
|
|
6004
6014
|
oneTime: {
|
|
@@ -6058,7 +6068,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6058
6068
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6059
6069
|
};
|
|
6060
6070
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6061
|
-
return (jsxRuntime.jsxs(Container$
|
|
6071
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
6062
6072
|
? benefitsColor.selected
|
|
6063
6073
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6064
6074
|
};
|
|
@@ -6076,13 +6086,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6076
6086
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6077
6087
|
_a$2);
|
|
6078
6088
|
|
|
6079
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6080
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6081
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6082
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6083
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6084
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6085
|
-
var templateObject_1$
|
|
6089
|
+
var CustomerDetails = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
6090
|
+
var CustomerInfo = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
6091
|
+
var Name = newStyled.h4(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
6092
|
+
var StarIconContainer = newStyled.div(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
6093
|
+
var Description$2 = newStyled.p(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
6094
|
+
var ReviewDays = newStyled.span(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
6095
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o;
|
|
6086
6096
|
|
|
6087
6097
|
var NameWithStars = function (_a) {
|
|
6088
6098
|
var name = _a.name, size = _a.size;
|
|
@@ -6100,10 +6110,10 @@ var ResultFeedback = function (_a) {
|
|
|
6100
6110
|
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));
|
|
6101
6111
|
};
|
|
6102
6112
|
|
|
6103
|
-
var Container$
|
|
6104
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6105
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6106
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6113
|
+
var Container$11 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6114
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
6115
|
+
var ImageCard = newStyled.div(templateObject_3$R || (templateObject_3$R = __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; });
|
|
6116
|
+
var UserInfoText = newStyled.div(templateObject_4$F || (templateObject_4$F = __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) {
|
|
6107
6117
|
var theme = _a.theme;
|
|
6108
6118
|
return theme.colors.pallete.secondary.color;
|
|
6109
6119
|
}, function (_a) {
|
|
@@ -6113,7 +6123,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
6113
6123
|
var theme = _a.theme, size = _a.size;
|
|
6114
6124
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6115
6125
|
});
|
|
6116
|
-
var templateObject_1$
|
|
6126
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F;
|
|
6117
6127
|
|
|
6118
6128
|
/* base styles & size variants */
|
|
6119
6129
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6188,10 +6198,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6188
6198
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6189
6199
|
var infoText = buildInfoText(name, age, months);
|
|
6190
6200
|
var Component = componentByVariant[variant];
|
|
6191
|
-
return (jsxRuntime.jsxs(Container$
|
|
6201
|
+
return (jsxRuntime.jsxs(Container$11, __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));
|
|
6192
6202
|
};
|
|
6193
6203
|
|
|
6194
|
-
var Section = newStyled.div(templateObject_1$
|
|
6204
|
+
var Section = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
6195
6205
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6196
6206
|
});
|
|
6197
6207
|
var CardHeader = function (_a) {
|
|
@@ -6202,16 +6212,16 @@ var CardFooter = function (_a) {
|
|
|
6202
6212
|
var children = _a.children;
|
|
6203
6213
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6204
6214
|
};
|
|
6205
|
-
var templateObject_1$
|
|
6215
|
+
var templateObject_1$1B;
|
|
6206
6216
|
|
|
6207
|
-
var Body = newStyled.div(templateObject_1$
|
|
6217
|
+
var Body = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
6208
6218
|
var CardBody = function (_a) {
|
|
6209
6219
|
var children = _a.children;
|
|
6210
6220
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6211
6221
|
};
|
|
6212
|
-
var templateObject_1$
|
|
6222
|
+
var templateObject_1$1A;
|
|
6213
6223
|
|
|
6214
|
-
var Container
|
|
6224
|
+
var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
6215
6225
|
var flex = _a.flex;
|
|
6216
6226
|
return flex &&
|
|
6217
6227
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6226,23 +6236,23 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
6226
6236
|
var Card$1 = function (_a) {
|
|
6227
6237
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6228
6238
|
var theme = useTheme();
|
|
6229
|
-
return (jsxRuntime.jsx(Container
|
|
6239
|
+
return (jsxRuntime.jsx(Container$10, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6230
6240
|
};
|
|
6231
6241
|
var Card$2 = Object.assign(Card$1, {
|
|
6232
6242
|
Header: CardHeader,
|
|
6233
6243
|
Footer: CardFooter,
|
|
6234
6244
|
Body: CardBody,
|
|
6235
6245
|
});
|
|
6236
|
-
var templateObject_1$
|
|
6246
|
+
var templateObject_1$1z;
|
|
6237
6247
|
|
|
6238
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6239
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6240
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6248
|
+
var StyledWrapper = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6249
|
+
var StyledContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
6250
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Q || (templateObject_3$Q = __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) {
|
|
6241
6251
|
var color = _a.color;
|
|
6242
6252
|
return color;
|
|
6243
6253
|
});
|
|
6244
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6245
|
-
var templateObject_1$
|
|
6254
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
6255
|
+
var templateObject_1$1y, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
6246
6256
|
|
|
6247
6257
|
var Minimalistic = function (_a) {
|
|
6248
6258
|
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;
|
|
@@ -6250,28 +6260,28 @@ var Minimalistic = function (_a) {
|
|
|
6250
6260
|
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));
|
|
6251
6261
|
};
|
|
6252
6262
|
|
|
6253
|
-
var Container
|
|
6254
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
6255
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6256
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6263
|
+
var Container$$ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6264
|
+
var Title$6 = newStyled.h1(templateObject_2$11 || (templateObject_2$11 = __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; });
|
|
6265
|
+
var Details$1 = newStyled.span(templateObject_3$P || (templateObject_3$P = __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; });
|
|
6266
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
6257
6267
|
var Simple = function (_a) {
|
|
6258
6268
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6259
6269
|
var theme = useTheme();
|
|
6260
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container
|
|
6270
|
+
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));
|
|
6261
6271
|
};
|
|
6262
|
-
var templateObject_1$
|
|
6272
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6263
6273
|
|
|
6264
6274
|
var Bundle = {
|
|
6265
6275
|
Minimalistic: Minimalistic,
|
|
6266
6276
|
Simple: Simple,
|
|
6267
6277
|
};
|
|
6268
6278
|
|
|
6269
|
-
var Container$
|
|
6279
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
6270
6280
|
var displayBNPL = _a.displayBNPL;
|
|
6271
6281
|
return (displayBNPL ? 'flex' : 'none');
|
|
6272
6282
|
});
|
|
6273
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6274
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6283
|
+
var TextContainer$1 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
6284
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
6275
6285
|
var BuyNowPayLater = function (_a) {
|
|
6276
6286
|
var _b;
|
|
6277
6287
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6281,43 +6291,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6281
6291
|
console.error('Icon', iconName, 'not found');
|
|
6282
6292
|
return null;
|
|
6283
6293
|
}
|
|
6284
|
-
return (jsxRuntime.jsx(Container$
|
|
6294
|
+
return (jsxRuntime.jsx(Container$_, __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));
|
|
6285
6295
|
};
|
|
6286
|
-
var templateObject_1$
|
|
6296
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O;
|
|
6287
6297
|
|
|
6288
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6298
|
+
var Text$6 = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __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; });
|
|
6289
6299
|
var Title$5 = function (_a) {
|
|
6290
6300
|
var title = _a.title;
|
|
6291
6301
|
var theme = useTheme();
|
|
6292
6302
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6293
6303
|
};
|
|
6294
|
-
var templateObject_1$
|
|
6304
|
+
var templateObject_1$1v;
|
|
6295
6305
|
|
|
6296
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6306
|
+
var P$3 = newStyled.p(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6297
6307
|
var Promo = function (_a) {
|
|
6298
6308
|
var text = _a.text;
|
|
6299
6309
|
var theme = useTheme();
|
|
6300
6310
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6301
6311
|
};
|
|
6302
|
-
var templateObject_1$
|
|
6312
|
+
var templateObject_1$1u;
|
|
6303
6313
|
|
|
6304
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6314
|
+
var Text$5 = newStyled.span(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6305
6315
|
var Description$1 = function (_a) {
|
|
6306
6316
|
var text = _a.text;
|
|
6307
6317
|
var theme = useTheme();
|
|
6308
6318
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6309
6319
|
};
|
|
6310
|
-
var templateObject_1$
|
|
6320
|
+
var templateObject_1$1t;
|
|
6311
6321
|
|
|
6312
|
-
var Container$
|
|
6322
|
+
var Container$Z = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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"); });
|
|
6313
6323
|
var CloseButton$1 = function (_a) {
|
|
6314
6324
|
var onClick = _a.onClick, size = _a.size;
|
|
6315
6325
|
var theme = useTheme();
|
|
6316
|
-
return (jsxRuntime.jsx(Container$
|
|
6326
|
+
return (jsxRuntime.jsx(Container$Z, __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));
|
|
6317
6327
|
};
|
|
6318
|
-
var templateObject_1$
|
|
6328
|
+
var templateObject_1$1s;
|
|
6319
6329
|
|
|
6320
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6330
|
+
var Text$4 = newStyled.h3(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
6321
6331
|
var backgroundColor = _a.backgroundColor;
|
|
6322
6332
|
return backgroundColor;
|
|
6323
6333
|
}, function (_a) {
|
|
@@ -6332,7 +6342,7 @@ var OfferBanner = function (_a) {
|
|
|
6332
6342
|
var theme = useTheme();
|
|
6333
6343
|
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));
|
|
6334
6344
|
};
|
|
6335
|
-
var templateObject_1$
|
|
6345
|
+
var templateObject_1$1r;
|
|
6336
6346
|
|
|
6337
6347
|
var CartProductItem = {
|
|
6338
6348
|
Title: Title$5,
|
|
@@ -6342,20 +6352,20 @@ var CartProductItem = {
|
|
|
6342
6352
|
CloseButton: CloseButton$1,
|
|
6343
6353
|
};
|
|
6344
6354
|
|
|
6345
|
-
var Container$
|
|
6346
|
-
var MobileContainer = newStyled(Container$
|
|
6347
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6348
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6349
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6350
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6351
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6352
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6355
|
+
var Container$Y = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
6356
|
+
var MobileContainer = newStyled(Container$Y)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6357
|
+
var DollarPart = newStyled.span(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
6358
|
+
var ClubMembersText = newStyled.span(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
6359
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6360
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6361
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6362
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6353
6363
|
var ClubPriceLabel = function (_a) {
|
|
6354
6364
|
var clubPrice = _a.clubPrice;
|
|
6355
6365
|
var isMobile = useWindowDimensions().isMobile;
|
|
6356
|
-
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$
|
|
6366
|
+
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$Y, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6357
6367
|
};
|
|
6358
|
-
var templateObject_1$
|
|
6368
|
+
var templateObject_1$1q, templateObject_2$$, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$e;
|
|
6359
6369
|
|
|
6360
6370
|
var Spacing = function (_a) {
|
|
6361
6371
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6363,10 +6373,10 @@ var Spacing = function (_a) {
|
|
|
6363
6373
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6364
6374
|
};
|
|
6365
6375
|
|
|
6366
|
-
var Container$
|
|
6367
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6368
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6369
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6376
|
+
var Container$X = newStyled('div')(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6377
|
+
var Content$2 = newStyled('div')(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
6378
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6379
|
+
var Bar$2 = newStyled('div')(templateObject_4$B || (templateObject_4$B = __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) {
|
|
6370
6380
|
var index = _a.index;
|
|
6371
6381
|
return "".concat(6 + 3 * index, "px");
|
|
6372
6382
|
}, function (_a) {
|
|
@@ -6375,15 +6385,15 @@ var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeT
|
|
|
6375
6385
|
});
|
|
6376
6386
|
var StrengthBars = function (_a) {
|
|
6377
6387
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6378
|
-
return (jsxRuntime.jsxs(Container$
|
|
6388
|
+
return (jsxRuntime.jsxs(Container$X, __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));
|
|
6379
6389
|
};
|
|
6380
|
-
var templateObject_1$
|
|
6390
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B;
|
|
6381
6391
|
|
|
6382
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6383
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6384
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6385
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6386
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6392
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6393
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
6394
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6395
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6396
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6387
6397
|
var RegularPriceTag = function () {
|
|
6388
6398
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6389
6399
|
};
|
|
@@ -6432,16 +6442,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6432
6442
|
: exports.ComponentSize.XSmall;
|
|
6433
6443
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6434
6444
|
};
|
|
6435
|
-
return (jsxRuntime.jsxs(Container$
|
|
6445
|
+
return (jsxRuntime.jsxs(Container$14, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6436
6446
|
? finalPriceArray[0]
|
|
6437
6447
|
: (_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));
|
|
6438
6448
|
};
|
|
6439
|
-
var templateObject_1$
|
|
6449
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$r;
|
|
6440
6450
|
|
|
6441
|
-
var Container$
|
|
6442
|
-
var templateObject_1$
|
|
6451
|
+
var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6452
|
+
var templateObject_1$1n;
|
|
6443
6453
|
|
|
6444
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6454
|
+
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6445
6455
|
var marginRight = _a.marginRight;
|
|
6446
6456
|
return marginRight;
|
|
6447
6457
|
});
|
|
@@ -6453,11 +6463,11 @@ var StarList = function (_a) {
|
|
|
6453
6463
|
width: theme.component.stars.element[size].width,
|
|
6454
6464
|
height: theme.component.stars.element[size].height,
|
|
6455
6465
|
};
|
|
6456
|
-
return (jsxRuntime.jsx(Container$
|
|
6466
|
+
return (jsxRuntime.jsx(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6457
6467
|
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)));
|
|
6458
6468
|
}) }, void 0));
|
|
6459
6469
|
};
|
|
6460
|
-
var templateObject_1$
|
|
6470
|
+
var templateObject_1$1m;
|
|
6461
6471
|
|
|
6462
6472
|
/* base styles & size variants */
|
|
6463
6473
|
var LabelStyles = {
|
|
@@ -6498,8 +6508,8 @@ var LabelStyles = {
|
|
|
6498
6508
|
});
|
|
6499
6509
|
},
|
|
6500
6510
|
};
|
|
6501
|
-
var Container$
|
|
6502
|
-
var templateObject_1$
|
|
6511
|
+
var Container$V = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6512
|
+
var templateObject_1$1l;
|
|
6503
6513
|
|
|
6504
6514
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6505
6515
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6519,7 +6529,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6519
6529
|
}),
|
|
6520
6530
|
];
|
|
6521
6531
|
});
|
|
6522
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6532
|
+
var RatingLabel = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
6523
6533
|
var starsNumber = 5;
|
|
6524
6534
|
var Rating = function (_a) {
|
|
6525
6535
|
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;
|
|
@@ -6540,9 +6550,9 @@ var Rating = function (_a) {
|
|
|
6540
6550
|
href: reviewsContainerId,
|
|
6541
6551
|
}
|
|
6542
6552
|
: {};
|
|
6543
|
-
return (jsxRuntime.jsxs(Container$
|
|
6553
|
+
return (jsxRuntime.jsxs(Container$V, __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));
|
|
6544
6554
|
};
|
|
6545
|
-
var templateObject_1$
|
|
6555
|
+
var templateObject_1$1k;
|
|
6546
6556
|
|
|
6547
6557
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6548
6558
|
var width = _a.width, height = _a.height;
|
|
@@ -6552,10 +6562,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6552
6562
|
height: height,
|
|
6553
6563
|
});
|
|
6554
6564
|
});
|
|
6555
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6556
|
-
var Container$
|
|
6557
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6558
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6565
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
6566
|
+
var Container$U = newStyled.a(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6567
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6568
|
+
var Title$4 = newStyled.p(templateObject_4$z || (templateObject_4$z = __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; });
|
|
6559
6569
|
var getStylesBySize$9 = function (size) {
|
|
6560
6570
|
switch (size) {
|
|
6561
6571
|
case exports.ComponentSize.Medium:
|
|
@@ -6581,15 +6591,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6581
6591
|
};
|
|
6582
6592
|
}
|
|
6583
6593
|
};
|
|
6584
|
-
var TopTagContainer$6 = newStyled.div(templateObject_5$
|
|
6594
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6585
6595
|
var style = _a.style;
|
|
6586
6596
|
return style.width;
|
|
6587
6597
|
});
|
|
6588
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
6598
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6589
6599
|
var style = _a.style;
|
|
6590
6600
|
return style.width;
|
|
6591
6601
|
});
|
|
6592
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6602
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6593
6603
|
var ProductItemMobile = function (_a) {
|
|
6594
6604
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6595
6605
|
display: false,
|
|
@@ -6646,9 +6656,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6646
6656
|
return jsx(Fragment, {}, void 0);
|
|
6647
6657
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6648
6658
|
};
|
|
6649
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6659
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$U, __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$U, __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));
|
|
6650
6660
|
};
|
|
6651
|
-
var templateObject_1$
|
|
6661
|
+
var templateObject_1$1j, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$m, templateObject_7$f;
|
|
6652
6662
|
|
|
6653
6663
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6654
6664
|
var width = _a.width, height = _a.height;
|
|
@@ -6658,10 +6668,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6658
6668
|
height: height,
|
|
6659
6669
|
});
|
|
6660
6670
|
});
|
|
6661
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6662
|
-
var Container$
|
|
6663
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6664
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6671
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
6672
|
+
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"])));
|
|
6673
|
+
var ProdCardContainer = 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"])));
|
|
6674
|
+
var Title$3 = 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; });
|
|
6665
6675
|
var getStylesBySize$8 = function (size) {
|
|
6666
6676
|
switch (size) {
|
|
6667
6677
|
case exports.ComponentSize.Medium:
|
|
@@ -6687,16 +6697,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6687
6697
|
};
|
|
6688
6698
|
}
|
|
6689
6699
|
};
|
|
6690
|
-
var TopTagContainer$5 = newStyled.div(templateObject_5$
|
|
6700
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6691
6701
|
var style = _a.style;
|
|
6692
6702
|
return style.width;
|
|
6693
6703
|
});
|
|
6694
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6695
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_7$
|
|
6704
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6705
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6696
6706
|
var style = _a.style;
|
|
6697
6707
|
return style.width;
|
|
6698
6708
|
});
|
|
6699
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6709
|
+
var MarginTopContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6700
6710
|
var ProductItemTK = function (_a) {
|
|
6701
6711
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6702
6712
|
display: false,
|
|
@@ -6740,26 +6750,26 @@ var ProductItemTK = function (_a) {
|
|
|
6740
6750
|
: undefined }, void 0));
|
|
6741
6751
|
};
|
|
6742
6752
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6743
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6753
|
+
return (jsxs(ProdCardContainer, __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 || !!topRightTag ? (jsxs(ImageContainer$3, __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, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, 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, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, 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: [hasSpacing && 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', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6744
6754
|
// @ts-ignore
|
|
6745
6755
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6746
6756
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6747
6757
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6748
6758
|
} }, { 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));
|
|
6749
6759
|
};
|
|
6750
|
-
var templateObject_1$
|
|
6760
|
+
var templateObject_1$1i, templateObject_2$X, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$d;
|
|
6751
6761
|
|
|
6752
|
-
var Container$
|
|
6762
|
+
var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6753
6763
|
function withProductGrid(ProductItemComponent, data) {
|
|
6754
6764
|
function WithProductGrid(props) {
|
|
6755
|
-
return (jsxRuntime.jsx(Container$
|
|
6765
|
+
return (jsxRuntime.jsx(Container$S, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6756
6766
|
}
|
|
6757
6767
|
/* istanbul ignore next */
|
|
6758
6768
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6759
6769
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6760
6770
|
return WithProductGrid;
|
|
6761
6771
|
}
|
|
6762
|
-
var templateObject_1$
|
|
6772
|
+
var templateObject_1$1h;
|
|
6763
6773
|
|
|
6764
6774
|
var Collection = {
|
|
6765
6775
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6806,12 +6816,12 @@ var OutOfStock = function (_a) {
|
|
|
6806
6816
|
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));
|
|
6807
6817
|
};
|
|
6808
6818
|
|
|
6809
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6810
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6811
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6812
|
-
var Span = newStyled.span(templateObject_4$
|
|
6813
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6814
|
-
var Label$
|
|
6819
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6820
|
+
newStyled(lt.Label)(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6821
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
6822
|
+
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6823
|
+
var OptionsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
6824
|
+
var Label$4 = function (_a) {
|
|
6815
6825
|
var label = _a.label, values = _a.values;
|
|
6816
6826
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6817
6827
|
};
|
|
@@ -6824,27 +6834,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6824
6834
|
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6825
6835
|
};
|
|
6826
6836
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6827
|
-
Label: Label$
|
|
6837
|
+
Label: Label$4,
|
|
6828
6838
|
Option: Option,
|
|
6829
6839
|
OptionsContainer: OptionsContainer,
|
|
6830
6840
|
});
|
|
6831
|
-
var templateObject_1$
|
|
6841
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o;
|
|
6832
6842
|
|
|
6833
|
-
var Container$
|
|
6843
|
+
var Container$R = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
6834
6844
|
var borderColor = _a.borderColor;
|
|
6835
6845
|
return borderColor;
|
|
6836
6846
|
}, function (_a) {
|
|
6837
6847
|
var noStock = _a.noStock;
|
|
6838
6848
|
return (noStock ? '0.4' : '1');
|
|
6839
6849
|
});
|
|
6840
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6850
|
+
var Image$2 = newStyled.img(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6841
6851
|
var PatternSelector = function (_a) {
|
|
6842
6852
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6843
6853
|
var theme = useTheme();
|
|
6844
6854
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6845
|
-
return (jsxRuntime.jsx(Container$
|
|
6855
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6846
6856
|
};
|
|
6847
|
-
var templateObject_1$
|
|
6857
|
+
var templateObject_1$1f, templateObject_2$V;
|
|
6848
6858
|
|
|
6849
6859
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6850
6860
|
if (options == null || options.length === 0) {
|
|
@@ -6903,21 +6913,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6903
6913
|
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));
|
|
6904
6914
|
};
|
|
6905
6915
|
|
|
6906
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6907
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6908
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6916
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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'); });
|
|
6917
|
+
var Col$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6918
|
+
var Row$2 = newStyled.div(templateObject_3$H || (templateObject_3$H = __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) {
|
|
6909
6919
|
return props.rightToLeft &&
|
|
6910
6920
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6911
6921
|
});
|
|
6912
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6913
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6914
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6922
|
+
var H5 = newStyled.h5(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6923
|
+
var H3$1 = newStyled.h3(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6924
|
+
var FreeShipping = newStyled.span(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6915
6925
|
var CrossSellCheckbox = function (_a) {
|
|
6916
6926
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6917
6927
|
var theme = useTheme();
|
|
6918
6928
|
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));
|
|
6919
6929
|
};
|
|
6920
|
-
var templateObject_1$
|
|
6930
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
6921
6931
|
|
|
6922
6932
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6923
6933
|
__proto__: null,
|
|
@@ -6945,7 +6955,7 @@ var sizeMapper = (_a = {},
|
|
|
6945
6955
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6946
6956
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6947
6957
|
_a);
|
|
6948
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6958
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
6949
6959
|
var wide = _a.wide;
|
|
6950
6960
|
return (wide ? '100%' : 'fit-content');
|
|
6951
6961
|
}, function (_a) {
|
|
@@ -6967,11 +6977,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObj
|
|
|
6967
6977
|
var theme = _a.theme;
|
|
6968
6978
|
return theme.colors.text.disabled;
|
|
6969
6979
|
});
|
|
6970
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6980
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6971
6981
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6972
6982
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6973
6983
|
});
|
|
6974
|
-
var templateObject_1$
|
|
6984
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6975
6985
|
|
|
6976
6986
|
var BaseCTA = function (_a) {
|
|
6977
6987
|
var _b, _c, _d;
|
|
@@ -7058,44 +7068,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7058
7068
|
} }), void 0));
|
|
7059
7069
|
};
|
|
7060
7070
|
|
|
7061
|
-
var Container$
|
|
7062
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7063
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7064
|
-
var Details = newStyled.span(templateObject_4$
|
|
7071
|
+
var Container$Q = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
7072
|
+
var IconContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
7073
|
+
var Text$3 = newStyled.p(templateObject_3$G || (templateObject_3$G = __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; });
|
|
7074
|
+
var Details = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7065
7075
|
var Note = function (_a) {
|
|
7066
7076
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7067
7077
|
var theme = useTheme();
|
|
7068
|
-
return (jsxRuntime.jsxs(Container$
|
|
7078
|
+
return (jsxRuntime.jsxs(Container$Q, __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));
|
|
7069
7079
|
};
|
|
7070
|
-
var templateObject_1$
|
|
7080
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7071
7081
|
|
|
7072
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7082
|
+
var Title$2 = newStyled.h1(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
7073
7083
|
var theme = _a.theme;
|
|
7074
7084
|
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 ");
|
|
7075
7085
|
});
|
|
7076
|
-
var Line = newStyled.div(templateObject_2$
|
|
7077
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7086
|
+
var Line = newStyled.div(templateObject_2$R || (templateObject_2$R = __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; });
|
|
7087
|
+
var Row$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __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({
|
|
7078
7088
|
flexDirection: ['column', 'row'],
|
|
7079
7089
|
}));
|
|
7080
|
-
var Col = newStyled.div(templateObject_4$
|
|
7090
|
+
var Col = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7081
7091
|
margin: ['0', '0 1.25rem'],
|
|
7082
7092
|
marginBottom: ['1.875rem', '0'],
|
|
7083
7093
|
alignItems: ['center', 'flex-start'],
|
|
7084
7094
|
textAlign: ['center', 'inherit'],
|
|
7085
7095
|
width: ['100%', 'inherit'],
|
|
7086
7096
|
}));
|
|
7087
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7097
|
+
var IconContainer$3 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7088
7098
|
marginRight: ['0', '0.438rem'],
|
|
7089
7099
|
marginBottom: ['10px', '0'],
|
|
7090
7100
|
width: ['auto', '1.5rem'],
|
|
7091
7101
|
}));
|
|
7092
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7102
|
+
var SectionTitle = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7093
7103
|
display: ['block', 'flex'],
|
|
7094
7104
|
}), function (_a) {
|
|
7095
7105
|
var theme = _a.theme;
|
|
7096
7106
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7097
7107
|
});
|
|
7098
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7108
|
+
var SectionDetails = newStyled.p(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7099
7109
|
var theme = _a.theme;
|
|
7100
7110
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7101
7111
|
}, function (_a) {
|
|
@@ -7106,22 +7116,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
7106
7116
|
})
|
|
7107
7117
|
: '';
|
|
7108
7118
|
});
|
|
7109
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7119
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7110
7120
|
var DeliveryDetails = function (_a) {
|
|
7111
7121
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7112
7122
|
var theme = useTheme();
|
|
7113
7123
|
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));
|
|
7114
7124
|
};
|
|
7115
|
-
var templateObject_1$
|
|
7125
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$m, templateObject_6$j, templateObject_7$d, templateObject_8$c;
|
|
7116
7126
|
|
|
7117
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7127
|
+
var Backdrop = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
7118
7128
|
var top = _a.top;
|
|
7119
7129
|
return top;
|
|
7120
7130
|
}, function (_a) {
|
|
7121
7131
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7122
7132
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7123
7133
|
});
|
|
7124
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7134
|
+
var Sidebar = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
7125
7135
|
var height = _a.height;
|
|
7126
7136
|
return height;
|
|
7127
7137
|
}, function (_a) {
|
|
@@ -7168,20 +7178,20 @@ var Drawer = function (_a) {
|
|
|
7168
7178
|
}, [isOpen, onClose, onOpen]);
|
|
7169
7179
|
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;
|
|
7170
7180
|
};
|
|
7171
|
-
var templateObject_1$
|
|
7181
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7172
7182
|
|
|
7173
7183
|
var TooltipArrow = function (_a) {
|
|
7174
7184
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7175
7185
|
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));
|
|
7176
7186
|
};
|
|
7177
7187
|
|
|
7178
|
-
var List = newStyled.ul(templateObject_1$
|
|
7179
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7180
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7181
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7182
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7183
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7184
|
-
var templateObject_1$
|
|
7188
|
+
var List = newStyled.ul(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7189
|
+
var Item$2 = newStyled.li(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
7190
|
+
var DropdownWrapper = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
7191
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
7192
|
+
var StyledDropdown = newStyled.ul(templateObject_5$l || (templateObject_5$l = __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; });
|
|
7193
|
+
var DropdownItem = newStyled.li(templateObject_6$i || (templateObject_6$i = __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; });
|
|
7194
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i;
|
|
7185
7195
|
|
|
7186
7196
|
var DropdownListIcons = function (_a) {
|
|
7187
7197
|
var items = _a.items;
|
|
@@ -7194,13 +7204,13 @@ var Dropdown = function (_a) {
|
|
|
7194
7204
|
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));
|
|
7195
7205
|
};
|
|
7196
7206
|
|
|
7197
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7198
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7199
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7200
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7201
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7202
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7203
|
-
var templateObject_1$
|
|
7207
|
+
var DropdownContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
7208
|
+
var DropdownLabel = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
7209
|
+
var SizeLabel = newStyled.span(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7210
|
+
var DetailLabel = newStyled.span(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
7211
|
+
var DropdownOptions = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
7212
|
+
var DropdownOption = newStyled.div(templateObject_6$h || (templateObject_6$h = __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"])));
|
|
7213
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7204
7214
|
|
|
7205
7215
|
var SizeDropdown = function (_a) {
|
|
7206
7216
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7223,10 +7233,10 @@ var SizeDropdown = function (_a) {
|
|
|
7223
7233
|
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));
|
|
7224
7234
|
};
|
|
7225
7235
|
|
|
7226
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7227
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7228
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7229
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7236
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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; });
|
|
7237
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$N || (templateObject_2$N = __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; });
|
|
7238
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
7239
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
7230
7240
|
var DropdownDialog = function (_a) {
|
|
7231
7241
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7232
7242
|
var theme = useTheme$1();
|
|
@@ -7235,7 +7245,7 @@ var DropdownDialog = function (_a) {
|
|
|
7235
7245
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7236
7246
|
}) }), void 0) }), void 0));
|
|
7237
7247
|
};
|
|
7238
|
-
var templateObject_1$
|
|
7248
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r;
|
|
7239
7249
|
|
|
7240
7250
|
function FilteringDropdown(_a) {
|
|
7241
7251
|
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;
|
|
@@ -7268,29 +7278,29 @@ function FilteringDropdown(_a) {
|
|
|
7268
7278
|
}) }, void 0)] }), void 0));
|
|
7269
7279
|
}
|
|
7270
7280
|
|
|
7271
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7272
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7273
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7274
|
-
var Container$
|
|
7281
|
+
var Title$1 = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
7282
|
+
var H3 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __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; });
|
|
7283
|
+
var ArrowContainer = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7284
|
+
var Container$P = newStyled.div(templateObject_4$q || (templateObject_4$q = __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'); });
|
|
7275
7285
|
var Accordion = function (_a) {
|
|
7276
7286
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7277
7287
|
var theme = useTheme();
|
|
7278
7288
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7279
|
-
return (jsxRuntime.jsxs(Container$
|
|
7289
|
+
return (jsxRuntime.jsxs(Container$P, __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));
|
|
7280
7290
|
};
|
|
7281
|
-
var templateObject_1$
|
|
7282
|
-
|
|
7283
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7284
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7285
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7286
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7287
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7288
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7289
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7290
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7291
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7292
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7293
|
-
var templateObject_1$
|
|
7291
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7292
|
+
|
|
7293
|
+
var SectionContent = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
7294
|
+
var Header$1 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
7295
|
+
var MobileHeader = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
7296
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
7297
|
+
var H4 = newStyled.h4(templateObject_5$j || (templateObject_5$j = __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; });
|
|
7298
|
+
var FilterLink = newStyled.a(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7299
|
+
var OptionContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7300
|
+
var ClearAll = newStyled.span(templateObject_8$b || (templateObject_8$b = __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; });
|
|
7301
|
+
var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
7302
|
+
var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
7303
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$A, templateObject_4$p, templateObject_5$j, templateObject_6$g, templateObject_7$c, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
7294
7304
|
|
|
7295
7305
|
var getStylesBySize$7 = function (size, theme) {
|
|
7296
7306
|
switch (size) {
|
|
@@ -7355,9 +7365,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7355
7365
|
} }), id: id }, void 0));
|
|
7356
7366
|
};
|
|
7357
7367
|
|
|
7358
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7359
|
-
var LI = newStyled.li(templateObject_2$
|
|
7360
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7368
|
+
var UL = newStyled.ul(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
7369
|
+
var LI = newStyled.li(templateObject_2$K || (templateObject_2$K = __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; });
|
|
7370
|
+
var CloseIconContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
7361
7371
|
var Tags = function (_a) {
|
|
7362
7372
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7363
7373
|
var theme = useTheme();
|
|
@@ -7365,7 +7375,7 @@ var Tags = function (_a) {
|
|
|
7365
7375
|
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));
|
|
7366
7376
|
}) }), void 0));
|
|
7367
7377
|
};
|
|
7368
|
-
var templateObject_1$
|
|
7378
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z;
|
|
7369
7379
|
|
|
7370
7380
|
var Filters = function (_a) {
|
|
7371
7381
|
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;
|
|
@@ -7501,8 +7511,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7501
7511
|
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));
|
|
7502
7512
|
};
|
|
7503
7513
|
|
|
7504
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7505
|
-
var Container$
|
|
7514
|
+
var Wrapper$4 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7515
|
+
var Container$O = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
7506
7516
|
var FitGuarantee = function (_a) {
|
|
7507
7517
|
var _b;
|
|
7508
7518
|
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;
|
|
@@ -7513,17 +7523,17 @@ var FitGuarantee = function (_a) {
|
|
|
7513
7523
|
console.error('Icon', iconName, 'not found');
|
|
7514
7524
|
return null;
|
|
7515
7525
|
}
|
|
7516
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7526
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7517
7527
|
margin: '0.1rem 0',
|
|
7518
7528
|
width: '100%',
|
|
7519
7529
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7520
7530
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7521
7531
|
} }, { 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));
|
|
7522
7532
|
};
|
|
7523
|
-
var templateObject_1$
|
|
7533
|
+
var templateObject_1$13, templateObject_2$J;
|
|
7524
7534
|
|
|
7525
|
-
var Container$
|
|
7526
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7535
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7536
|
+
var P$2 = newStyled.p(templateObject_2$I || (templateObject_2$I = __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; });
|
|
7527
7537
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7528
7538
|
border: 'none',
|
|
7529
7539
|
background: 'transparent',
|
|
@@ -7536,9 +7546,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7536
7546
|
var FitPredictor = function (_a) {
|
|
7537
7547
|
var onClick = _a.onClick;
|
|
7538
7548
|
var theme = useTheme();
|
|
7539
|
-
return (jsxs(Container$
|
|
7549
|
+
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { 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));
|
|
7540
7550
|
};
|
|
7541
|
-
var templateObject_1$
|
|
7551
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7542
7552
|
|
|
7543
7553
|
var Button$7 = newStyled.button(function () { return ({
|
|
7544
7554
|
background: 'transparent',
|
|
@@ -11782,14 +11792,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11782
11792
|
return Slider;
|
|
11783
11793
|
}(React__default["default"].Component);
|
|
11784
11794
|
|
|
11785
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11795
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
11786
11796
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11787
11797
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11788
11798
|
}, function (_a) {
|
|
11789
11799
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11790
11800
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11791
11801
|
});
|
|
11792
|
-
var templateObject_1$
|
|
11802
|
+
var templateObject_1$11;
|
|
11793
11803
|
|
|
11794
11804
|
var getStylesBySize$6 = function (size) {
|
|
11795
11805
|
// rem units
|
|
@@ -11848,7 +11858,7 @@ var SliderNavigation = function (_a) {
|
|
|
11848
11858
|
} }, { 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));
|
|
11849
11859
|
};
|
|
11850
11860
|
|
|
11851
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11861
|
+
var Image$1 = newStyled.img(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n\n width: 65px;\n height: 86px;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 65px;\n height: 86px;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11852
11862
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11853
11863
|
return borderRadiusVariant &&
|
|
11854
11864
|
"\n border-radius: 20px;\n ";
|
|
@@ -11858,7 +11868,7 @@ var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTe
|
|
|
11858
11868
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11859
11869
|
: 'inherit';
|
|
11860
11870
|
});
|
|
11861
|
-
var templateObject_1
|
|
11871
|
+
var templateObject_1$10;
|
|
11862
11872
|
|
|
11863
11873
|
var ImageSmallPreview = function (_a) {
|
|
11864
11874
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
@@ -11866,9 +11876,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11866
11876
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height }, void 0));
|
|
11867
11877
|
};
|
|
11868
11878
|
|
|
11869
|
-
var horizontalStyles = css(templateObject_1
|
|
11870
|
-
var verticalStyles = css(templateObject_2$
|
|
11871
|
-
var Container$
|
|
11879
|
+
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"])));
|
|
11880
|
+
var verticalStyles = css(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
11881
|
+
var Container$M = newStyled.div(templateObject_3$y || (templateObject_3$y = __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) {
|
|
11872
11882
|
var position = _a.position;
|
|
11873
11883
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11874
11884
|
}, function (_a) {
|
|
@@ -11876,12 +11886,12 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11876
11886
|
return hasOverflowArrows &&
|
|
11877
11887
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11878
11888
|
});
|
|
11879
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11880
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11881
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11882
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11883
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11884
|
-
var templateObject_1
|
|
11889
|
+
var Button$6 = newStyled.button(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11890
|
+
var ArrowsContainer = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11891
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11892
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11893
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11894
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$y, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a;
|
|
11885
11895
|
|
|
11886
11896
|
var ImagePreviewList = function (_a) {
|
|
11887
11897
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
@@ -11893,7 +11903,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11893
11903
|
var element = document.querySelector(".imageListContainer");
|
|
11894
11904
|
element.scrollBy(0, 200);
|
|
11895
11905
|
};
|
|
11896
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11906
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$M, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11897
11907
|
arrowWidth: 0.75,
|
|
11898
11908
|
arrowHeight: 1.25,
|
|
11899
11909
|
arrowPadding: 1.625,
|
|
@@ -13491,21 +13501,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13491
13501
|
afterZoomOut: PropTypes.func
|
|
13492
13502
|
} : {};
|
|
13493
13503
|
|
|
13494
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13495
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13496
|
-
var templateObject_1$
|
|
13504
|
+
var ProgressContainer = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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); });
|
|
13505
|
+
var ProgressFiller = newStyled.div(templateObject_2$G || (templateObject_2$G = __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; });
|
|
13506
|
+
var templateObject_1$_, templateObject_2$G;
|
|
13497
13507
|
|
|
13498
13508
|
var ProgressBar$1 = function (_a) {
|
|
13499
13509
|
var progress = _a.progress, hide = _a.hide;
|
|
13500
13510
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13501
13511
|
};
|
|
13502
13512
|
|
|
13503
|
-
var Container$
|
|
13504
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13505
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13506
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13507
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13508
|
-
var templateObject_1$
|
|
13513
|
+
var Container$L = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13514
|
+
var HTMLVideo = newStyled.video(templateObject_2$F || (templateObject_2$F = __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; });
|
|
13515
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
13516
|
+
var PlayContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
13517
|
+
var PauseContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
13518
|
+
var templateObject_1$Z, templateObject_2$F, templateObject_3$x, templateObject_4$n, templateObject_5$h;
|
|
13509
13519
|
|
|
13510
13520
|
var Video$1 = function (_a) {
|
|
13511
13521
|
var _b, _c, _d, _e;
|
|
@@ -13544,41 +13554,41 @@ var Video$1 = function (_a) {
|
|
|
13544
13554
|
setVideoProgress(videoRef.current.currentTime);
|
|
13545
13555
|
}
|
|
13546
13556
|
};
|
|
13547
|
-
return (jsxRuntime.jsxs(Container$
|
|
13557
|
+
return (jsxRuntime.jsxs(Container$L, __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));
|
|
13548
13558
|
};
|
|
13549
13559
|
|
|
13550
|
-
var Container$
|
|
13560
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13551
13561
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13552
13562
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13553
13563
|
});
|
|
13554
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13564
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13555
13565
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13556
13566
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13557
13567
|
}, function (_a) {
|
|
13558
13568
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13559
13569
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13560
13570
|
});
|
|
13561
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
13571
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13562
13572
|
var isCTAHidden = _a.isCTAHidden;
|
|
13563
13573
|
return (isCTAHidden ? '60px' : '120px');
|
|
13564
13574
|
});
|
|
13565
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13566
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13567
|
-
var templateObject_1$
|
|
13575
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
13576
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
13577
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13568
13578
|
|
|
13569
13579
|
var ImageProductSlide$1 = function (_a) {
|
|
13570
13580
|
var _b;
|
|
13571
13581
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13572
13582
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13573
13583
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13574
|
-
return (jsxRuntime.jsxs(Container$
|
|
13584
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13575
13585
|
alt: content.alt,
|
|
13576
13586
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13577
13587
|
}, 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, objectFit: "cover", loading: "eager" }, void 0)), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13578
13588
|
};
|
|
13579
13589
|
|
|
13580
|
-
var Container$
|
|
13581
|
-
var templateObject_1$
|
|
13590
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13591
|
+
var templateObject_1$X;
|
|
13582
13592
|
|
|
13583
13593
|
var getInitialIndex = function (images, selectedValue) {
|
|
13584
13594
|
if (selectedValue) {
|
|
@@ -13604,7 +13614,7 @@ var ProductGallery = function (_a) {
|
|
|
13604
13614
|
setActiveIndex(index);
|
|
13605
13615
|
};
|
|
13606
13616
|
var selectedImage = images[activeIndex];
|
|
13607
|
-
return (jsxRuntime.jsxs(Container$
|
|
13617
|
+
return (jsxRuntime.jsxs(Container$J, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, 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));
|
|
13608
13618
|
};
|
|
13609
13619
|
|
|
13610
13620
|
var getStylesBySize$5 = function (size) {
|
|
@@ -13626,7 +13636,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13626
13636
|
};
|
|
13627
13637
|
}
|
|
13628
13638
|
};
|
|
13629
|
-
var Container$
|
|
13639
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
13630
13640
|
var backgroundColor = _a.backgroundColor;
|
|
13631
13641
|
return backgroundColor;
|
|
13632
13642
|
}, function (_a) {
|
|
@@ -13654,11 +13664,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13654
13664
|
var IconButton = function (_a) {
|
|
13655
13665
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13656
13666
|
var theme = useTheme();
|
|
13657
|
-
return (jsxRuntime.jsx(Container$
|
|
13667
|
+
return (jsxRuntime.jsx(Container$I, __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));
|
|
13658
13668
|
};
|
|
13659
|
-
var templateObject_1$
|
|
13669
|
+
var templateObject_1$W;
|
|
13660
13670
|
|
|
13661
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13671
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$V || (templateObject_1$V = __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; });
|
|
13662
13672
|
var AmazonButton = function (_a) {
|
|
13663
13673
|
var onClick = _a.onClick;
|
|
13664
13674
|
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));
|
|
@@ -13667,9 +13677,9 @@ var PaypalButton = function (_a) {
|
|
|
13667
13677
|
var onClick = _a.onClick;
|
|
13668
13678
|
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));
|
|
13669
13679
|
};
|
|
13670
|
-
var templateObject_1$
|
|
13680
|
+
var templateObject_1$V;
|
|
13671
13681
|
|
|
13672
|
-
var Container$
|
|
13682
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13673
13683
|
height: 'auto',
|
|
13674
13684
|
textAlign: 'center',
|
|
13675
13685
|
justifyContent: 'center',
|
|
@@ -13719,12 +13729,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13719
13729
|
textAlign: 'center',
|
|
13720
13730
|
lineHeight: '18px',
|
|
13721
13731
|
};
|
|
13722
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13732
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$H, __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));
|
|
13723
13733
|
};
|
|
13724
13734
|
|
|
13725
|
-
var Container$
|
|
13726
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13727
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13735
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __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'); });
|
|
13736
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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'); });
|
|
13737
|
+
var StyledTitle = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13728
13738
|
var titlePosition = _a.titlePosition;
|
|
13729
13739
|
return titlePosition == 'center' &&
|
|
13730
13740
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13732,24 +13742,24 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13732
13742
|
var ImageCardWithDescription = function (_a) {
|
|
13733
13743
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13734
13744
|
var isMobile = useWindowDimensions().isMobile;
|
|
13735
|
-
return (jsxRuntime.jsxs(Container$
|
|
13745
|
+
return (jsxRuntime.jsxs(Container$G, __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));
|
|
13736
13746
|
};
|
|
13737
|
-
var templateObject_1$
|
|
13747
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$v;
|
|
13738
13748
|
|
|
13739
|
-
var Label$
|
|
13749
|
+
var Label$3 = newStyled.span(templateObject_1$T || (templateObject_1$T = __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) {
|
|
13740
13750
|
var color = _a.color;
|
|
13741
13751
|
return color;
|
|
13742
13752
|
});
|
|
13743
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13753
|
+
var MandatoryIcon = newStyled.span(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13744
13754
|
var color = _a.color;
|
|
13745
13755
|
return color;
|
|
13746
13756
|
});
|
|
13747
13757
|
var InputLabel = function (_a) {
|
|
13748
13758
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13749
13759
|
var theme = useTheme();
|
|
13750
|
-
return (jsxRuntime.jsxs(Label$
|
|
13760
|
+
return (jsxRuntime.jsxs(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13751
13761
|
};
|
|
13752
|
-
var templateObject_1$
|
|
13762
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13753
13763
|
|
|
13754
13764
|
var containerByStatus = function (theme, status) {
|
|
13755
13765
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13758,12 +13768,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13758
13768
|
return theme.colors.semantic.urgent.color;
|
|
13759
13769
|
return '';
|
|
13760
13770
|
};
|
|
13761
|
-
var Container$
|
|
13771
|
+
var Container$F = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13762
13772
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13763
13773
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13764
13774
|
});
|
|
13765
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13766
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13775
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
13776
|
+
var StyledInput = newStyled.input(templateObject_3$u || (templateObject_3$u = __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) {
|
|
13767
13777
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13768
13778
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13769
13779
|
}, function (_a) {
|
|
@@ -13818,11 +13828,11 @@ var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __
|
|
|
13818
13828
|
return hasValue &&
|
|
13819
13829
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13820
13830
|
});
|
|
13821
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13831
|
+
var InputWrapper = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13822
13832
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13823
13833
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13824
13834
|
});
|
|
13825
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13835
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13826
13836
|
var theme = _a.theme;
|
|
13827
13837
|
return theme.component.input.placeholderColor;
|
|
13828
13838
|
}, function (_a) {
|
|
@@ -13835,8 +13845,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13835
13845
|
var theme = _a.theme;
|
|
13836
13846
|
return theme.component.input.lineHeight;
|
|
13837
13847
|
});
|
|
13838
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13839
|
-
var templateObject_1$
|
|
13848
|
+
var ClearInput = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
13849
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u, templateObject_4$l, templateObject_5$f, templateObject_6$e;
|
|
13840
13850
|
|
|
13841
13851
|
var BaseInput = function (_a) {
|
|
13842
13852
|
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"]);
|
|
@@ -13859,7 +13869,7 @@ var BaseInput = function (_a) {
|
|
|
13859
13869
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13860
13870
|
}, [status]);
|
|
13861
13871
|
var hasValue = Boolean(value);
|
|
13862
|
-
return (jsxRuntime.jsxs(Container$
|
|
13872
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13863
13873
|
onChange(event.target.value, event);
|
|
13864
13874
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13865
13875
|
onChange('', { target: { value: '' } });
|
|
@@ -13880,11 +13890,11 @@ var Button$5 = function (_a) {
|
|
|
13880
13890
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13881
13891
|
};
|
|
13882
13892
|
|
|
13883
|
-
var Container$
|
|
13893
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
13884
13894
|
var theme = _a.theme;
|
|
13885
13895
|
return theme.component.inputCustom.input.borderRadius;
|
|
13886
13896
|
});
|
|
13887
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13897
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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) {
|
|
13888
13898
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13889
13899
|
return defaultRounded
|
|
13890
13900
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13899,23 +13909,23 @@ var Custom = function (_a) {
|
|
|
13899
13909
|
text: text,
|
|
13900
13910
|
disabled: rest.disabled,
|
|
13901
13911
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13902
|
-
return (jsxRuntime.jsx(Container$
|
|
13912
|
+
return (jsxRuntime.jsx(Container$E, __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));
|
|
13903
13913
|
};
|
|
13904
|
-
var templateObject_1$
|
|
13914
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13905
13915
|
|
|
13906
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13916
|
+
var SuccessContainer = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13907
13917
|
var size = _a.size;
|
|
13908
13918
|
return (size === 'small' ? '36px' : '');
|
|
13909
13919
|
});
|
|
13910
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13911
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13920
|
+
var SuccessMessage = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
13921
|
+
var SuccessText = newStyled.span(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
13912
13922
|
var Success = function (_a) {
|
|
13913
13923
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13914
13924
|
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));
|
|
13915
13925
|
};
|
|
13916
|
-
var templateObject_1$
|
|
13926
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t;
|
|
13917
13927
|
|
|
13918
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13928
|
+
var ButtonContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
13919
13929
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13920
13930
|
return status === exports.InputValidationType.Empty &&
|
|
13921
13931
|
type === 'primary' &&
|
|
@@ -13932,16 +13942,16 @@ var BasePlusButton = function (_a) {
|
|
|
13932
13942
|
}
|
|
13933
13943
|
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));
|
|
13934
13944
|
};
|
|
13935
|
-
var templateObject_1$
|
|
13945
|
+
var templateObject_1$P;
|
|
13936
13946
|
|
|
13937
|
-
var Container$
|
|
13938
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13947
|
+
var Container$D = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13948
|
+
var IconContainer$2 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13939
13949
|
var BasePlusIcon = function (_a) {
|
|
13940
13950
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13941
13951
|
var theme = useTheme();
|
|
13942
|
-
return (jsxRuntime.jsx(Container$
|
|
13952
|
+
return (jsxRuntime.jsx(Container$D, { 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));
|
|
13943
13953
|
};
|
|
13944
|
-
var templateObject_1$
|
|
13954
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13945
13955
|
|
|
13946
13956
|
var Input$3 = {
|
|
13947
13957
|
Simple: BaseInput,
|
|
@@ -13986,7 +13996,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13986
13996
|
}, [preventTouch, ref, touchStart]);
|
|
13987
13997
|
}
|
|
13988
13998
|
|
|
13989
|
-
var Container$
|
|
13999
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13990
14000
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13991
14001
|
return borderRadiusVariant &&
|
|
13992
14002
|
"\n border-radius: 40px;\n ";
|
|
@@ -13995,11 +14005,11 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13995
14005
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13996
14006
|
});
|
|
13997
14007
|
// max-height: 31.875rem;
|
|
13998
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13999
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14000
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_4$
|
|
14001
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14002
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14008
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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'); });
|
|
14009
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14010
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14011
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14012
|
+
var Button$4 = newStyled.button(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14003
14013
|
var settings$1 = {
|
|
14004
14014
|
dots: true,
|
|
14005
14015
|
infinite: false,
|
|
@@ -14044,7 +14054,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14044
14054
|
}
|
|
14045
14055
|
}
|
|
14046
14056
|
}, [contents, selectedValue]);
|
|
14047
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14057
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14048
14058
|
var _a;
|
|
14049
14059
|
var activeSlide = contents[e];
|
|
14050
14060
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14058,16 +14068,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14058
14068
|
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));
|
|
14059
14069
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14060
14070
|
};
|
|
14061
|
-
var templateObject_1$
|
|
14071
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
14062
14072
|
|
|
14063
|
-
var Container$
|
|
14073
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14064
14074
|
var ProductGalleryMobile = function (_a) {
|
|
14065
14075
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14066
14076
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14067
14077
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14068
|
-
return (jsxRuntime.jsx(Container$
|
|
14078
|
+
return (jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14069
14079
|
};
|
|
14070
|
-
var templateObject_1$
|
|
14080
|
+
var templateObject_1$M;
|
|
14071
14081
|
|
|
14072
14082
|
function _extends() {
|
|
14073
14083
|
_extends = Object.assign || function (target) {
|
|
@@ -14334,27 +14344,27 @@ function useSwipeable(options) {
|
|
|
14334
14344
|
return handlers;
|
|
14335
14345
|
}
|
|
14336
14346
|
|
|
14337
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14347
|
+
var Button$3 = newStyled.button(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
14338
14348
|
var ArrowButton = function (_a) {
|
|
14339
14349
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14340
14350
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14341
14351
|
};
|
|
14342
|
-
var templateObject_1$
|
|
14352
|
+
var templateObject_1$L;
|
|
14343
14353
|
|
|
14344
|
-
var Container$
|
|
14354
|
+
var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
14345
14355
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14346
14356
|
var SlideDots = function (_a) {
|
|
14347
14357
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14348
14358
|
var theme = useTheme();
|
|
14349
|
-
return (jsxRuntime.jsx(Container$
|
|
14359
|
+
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14350
14360
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14351
14361
|
: 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));
|
|
14352
14362
|
};
|
|
14353
|
-
var templateObject_1$
|
|
14363
|
+
var templateObject_1$K;
|
|
14354
14364
|
|
|
14355
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14356
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14357
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14365
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
14366
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14367
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14358
14368
|
var SlideNavigation = function (_a) {
|
|
14359
14369
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14360
14370
|
var theme = useTheme();
|
|
@@ -14366,23 +14376,23 @@ var SlideNavigation = function (_a) {
|
|
|
14366
14376
|
onNavigate(selectedIndex + 1);
|
|
14367
14377
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14368
14378
|
};
|
|
14369
|
-
var templateObject_1$
|
|
14379
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$r;
|
|
14370
14380
|
|
|
14371
|
-
var Container$
|
|
14381
|
+
var Container$z = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
14372
14382
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14373
14383
|
return borderRadiusVariant &&
|
|
14374
14384
|
"\n border-radius: 40px;\n ";
|
|
14375
14385
|
});
|
|
14376
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14377
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
14386
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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'); });
|
|
14387
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14378
14388
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14379
14389
|
var _b, _c;
|
|
14380
14390
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14381
|
-
return (jsxRuntime.jsxs(Container$
|
|
14391
|
+
return (jsxRuntime.jsxs(Container$z, __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));
|
|
14382
14392
|
});
|
|
14383
|
-
var templateObject_1$
|
|
14393
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14384
14394
|
|
|
14385
|
-
var Container$
|
|
14395
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
14386
14396
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14387
14397
|
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;
|
|
14388
14398
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14404,11 +14414,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14404
14414
|
React$2.useEffect(function () {
|
|
14405
14415
|
setSelectedImage(images[index]);
|
|
14406
14416
|
}, [index, images]);
|
|
14407
|
-
return (jsxRuntime.jsxs(Container$
|
|
14417
|
+
return (jsxRuntime.jsxs(Container$y, __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));
|
|
14408
14418
|
};
|
|
14409
|
-
var templateObject_1$
|
|
14419
|
+
var templateObject_1$H;
|
|
14410
14420
|
|
|
14411
|
-
var Container$
|
|
14421
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
14412
14422
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14413
14423
|
return borderRadiusVariant &&
|
|
14414
14424
|
"\n border-radius: 40px;\n ";
|
|
@@ -14417,14 +14427,14 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14417
14427
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14418
14428
|
});
|
|
14419
14429
|
// max-height: 31.875rem;
|
|
14420
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14421
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
14422
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14423
|
-
var Video = newStyled.div(templateObject_5$
|
|
14424
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14425
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14426
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14427
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
14430
|
+
var TopTagContainer$1 = 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'); });
|
|
14431
|
+
var BottomTagContainer$1 = 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"])));
|
|
14432
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
14433
|
+
var Video = newStyled.div(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
14434
|
+
var VideoTag = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14435
|
+
var Text$2 = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14436
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14437
|
+
var Button$2 = newStyled.button(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14428
14438
|
var settings = {
|
|
14429
14439
|
dots: true,
|
|
14430
14440
|
infinite: false,
|
|
@@ -14469,7 +14479,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14469
14479
|
}
|
|
14470
14480
|
}
|
|
14471
14481
|
}, [images, selectedValue]);
|
|
14472
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14482
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$x, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14473
14483
|
var _a;
|
|
14474
14484
|
var activeSlide = images[e];
|
|
14475
14485
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14482,14 +14492,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14482
14492
|
} }, 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));
|
|
14483
14493
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14484
14494
|
};
|
|
14485
|
-
var templateObject_1$
|
|
14495
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$p, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$a, templateObject_8$9, templateObject_9$6;
|
|
14486
14496
|
|
|
14487
|
-
var Container$
|
|
14497
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
14488
14498
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14489
14499
|
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;
|
|
14490
|
-
return (jsxRuntime.jsx(Container$
|
|
14500
|
+
return (jsxRuntime.jsx(Container$w, __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));
|
|
14491
14501
|
};
|
|
14492
|
-
var templateObject_1$
|
|
14502
|
+
var templateObject_1$F;
|
|
14493
14503
|
|
|
14494
14504
|
var __defProp$1 = Object.defineProperty;
|
|
14495
14505
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14622,17 +14632,17 @@ var Portal = function (_a) {
|
|
|
14622
14632
|
var visibleStyle = function (_a) {
|
|
14623
14633
|
var opened = _a.opened;
|
|
14624
14634
|
return opened
|
|
14625
|
-
? css(templateObject_1$
|
|
14635
|
+
? css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14626
14636
|
};
|
|
14627
14637
|
var transformStyle = function (_a) {
|
|
14628
14638
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14629
14639
|
return opened
|
|
14630
|
-
? css(templateObject_3$
|
|
14640
|
+
? css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14631
14641
|
};
|
|
14632
|
-
var Container$
|
|
14642
|
+
var Container$v = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14633
14643
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14634
14644
|
}), visibleStyle, transformStyle);
|
|
14635
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14645
|
+
var Overlay = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14636
14646
|
var Modal = function (_a) {
|
|
14637
14647
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14638
14648
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14642,7 +14652,7 @@ var Modal = function (_a) {
|
|
|
14642
14652
|
}
|
|
14643
14653
|
close();
|
|
14644
14654
|
};
|
|
14645
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14655
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$v, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14646
14656
|
};
|
|
14647
14657
|
var modalEvent = function (id, detail) {
|
|
14648
14658
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14670,9 +14680,9 @@ var useModal = function (id) {
|
|
|
14670
14680
|
close: close,
|
|
14671
14681
|
}); }, [close, open, opened]);
|
|
14672
14682
|
};
|
|
14673
|
-
var templateObject_1$
|
|
14683
|
+
var templateObject_1$E, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
14674
14684
|
|
|
14675
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14685
|
+
var Bar$1 = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n 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) {
|
|
14676
14686
|
var height = _a.height;
|
|
14677
14687
|
return height || '0.5rem';
|
|
14678
14688
|
}, function (_a) {
|
|
@@ -14711,7 +14721,7 @@ var BarContainer = newStyled.div({
|
|
|
14711
14721
|
padding: '0 16px',
|
|
14712
14722
|
position: 'relative',
|
|
14713
14723
|
});
|
|
14714
|
-
var Container$
|
|
14724
|
+
var Container$u = newStyled.div(function (_a) {
|
|
14715
14725
|
var backgroundColor = _a.backgroundColor;
|
|
14716
14726
|
return ({
|
|
14717
14727
|
width: '475px',
|
|
@@ -14742,21 +14752,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14742
14752
|
var theme = useTheme();
|
|
14743
14753
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14744
14754
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14745
|
-
return (jsxRuntime.jsxs(Container$
|
|
14755
|
+
return (jsxRuntime.jsxs(Container$u, __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));
|
|
14746
14756
|
};
|
|
14747
|
-
var templateObject_1$
|
|
14757
|
+
var templateObject_1$D;
|
|
14748
14758
|
|
|
14749
|
-
var Container$
|
|
14759
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
14750
14760
|
var theme = _a.theme;
|
|
14751
14761
|
return theme.component.orderBar.backgroundColor;
|
|
14752
14762
|
});
|
|
14753
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14763
|
+
var H1 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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; });
|
|
14754
14764
|
var OrderBar = function (_a) {
|
|
14755
14765
|
var message = _a.message, color = _a.color;
|
|
14756
14766
|
var theme = useTheme();
|
|
14757
|
-
return (jsxRuntime.jsxs(Container$
|
|
14767
|
+
return (jsxRuntime.jsxs(Container$t, __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));
|
|
14758
14768
|
};
|
|
14759
|
-
var templateObject_1$
|
|
14769
|
+
var templateObject_1$C, templateObject_2$s;
|
|
14760
14770
|
|
|
14761
14771
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14762
14772
|
background: props.bgColor,
|
|
@@ -14780,15 +14790,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14780
14790
|
justifyContent: 'center',
|
|
14781
14791
|
gap: '10px',
|
|
14782
14792
|
});
|
|
14783
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14793
|
+
var StyledContent = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
14784
14794
|
var bgColor = _a.bgColor;
|
|
14785
14795
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14786
14796
|
}, function (_a) {
|
|
14787
14797
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14788
14798
|
return width;
|
|
14789
14799
|
});
|
|
14790
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14791
|
-
var templateObject_1$
|
|
14800
|
+
var StyledController = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
14801
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14792
14802
|
|
|
14793
14803
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14794
14804
|
var background = _a.background, width = _a.width;
|
|
@@ -18608,17 +18618,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18608
18618
|
HTMLReactParser$1.attributesToProps;
|
|
18609
18619
|
HTMLReactParser$1.Element;
|
|
18610
18620
|
|
|
18611
|
-
var Container$
|
|
18612
|
-
var Card = newStyled.div(templateObject_2$
|
|
18613
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18614
|
-
var Label$
|
|
18615
|
-
var Check = newStyled.div(templateObject_5$
|
|
18616
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18617
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18618
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18621
|
+
var Container$s = 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"])));
|
|
18622
|
+
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"])));
|
|
18623
|
+
var Tag$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
18624
|
+
var Label$2 = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
18625
|
+
var Check = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
18626
|
+
var IconContainer$1 = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18627
|
+
var IconPlaceholder = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18628
|
+
var DiscountContainer = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18619
18629
|
var PackSelector = function (_a) {
|
|
18620
18630
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18621
|
-
return (jsxRuntime.jsx(Container$
|
|
18631
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18622
18632
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18623
18633
|
}) }), void 0));
|
|
18624
18634
|
};
|
|
@@ -18632,7 +18642,7 @@ var PackCard = function (_a) {
|
|
|
18632
18642
|
.then(function (icon) { return setIcon(icon); })
|
|
18633
18643
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18634
18644
|
}, [pack.meta.icon]);
|
|
18635
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$
|
|
18645
|
+
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18636
18646
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18637
18647
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18638
18648
|
locale: 'en-US',
|
|
@@ -18645,14 +18655,14 @@ var PackCard = function (_a) {
|
|
|
18645
18655
|
currency: currencyCode || 'USD',
|
|
18646
18656
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18647
18657
|
};
|
|
18648
|
-
var templateObject_1$
|
|
18658
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$8;
|
|
18649
18659
|
|
|
18650
|
-
var Container$
|
|
18651
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18652
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18660
|
+
var Container$r = 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"])));
|
|
18661
|
+
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"])));
|
|
18662
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18653
18663
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18654
18664
|
}));
|
|
18655
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18665
|
+
var PageNumber = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18656
18666
|
var bold = _a.bold;
|
|
18657
18667
|
return (bold ? '700' : '500');
|
|
18658
18668
|
}, function (_a) {
|
|
@@ -18669,7 +18679,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18669
18679
|
var background = _a.background;
|
|
18670
18680
|
return background || 'unset';
|
|
18671
18681
|
});
|
|
18672
|
-
var templateObject_1$
|
|
18682
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g;
|
|
18673
18683
|
|
|
18674
18684
|
var Pagination = function (_a) {
|
|
18675
18685
|
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;
|
|
@@ -18715,7 +18725,7 @@ var Pagination = function (_a) {
|
|
|
18715
18725
|
}
|
|
18716
18726
|
return pages;
|
|
18717
18727
|
}, [from, page, showReducedPages, to]);
|
|
18718
|
-
return (jsxRuntime.jsxs(Container$
|
|
18728
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18719
18729
|
};
|
|
18720
18730
|
|
|
18721
18731
|
var PaginatorBlog = function (_a) {
|
|
@@ -18729,12 +18739,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18729
18739
|
setPage(page);
|
|
18730
18740
|
onChange(page);
|
|
18731
18741
|
};
|
|
18732
|
-
return (jsxRuntime.jsxs(Container$
|
|
18742
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18733
18743
|
? theme.colors.shades['white'].color
|
|
18734
18744
|
: 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));
|
|
18735
18745
|
};
|
|
18736
18746
|
|
|
18737
|
-
var Container$
|
|
18747
|
+
var Container$q = 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) {
|
|
18738
18748
|
var width = _a.width;
|
|
18739
18749
|
return width;
|
|
18740
18750
|
}, function (_a) {
|
|
@@ -18750,14 +18760,14 @@ var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
18750
18760
|
var PaymentMethod = function (_a) {
|
|
18751
18761
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18752
18762
|
var theme = useTheme();
|
|
18753
|
-
return (jsxRuntime.jsx(Container$
|
|
18763
|
+
return (jsxRuntime.jsx(Container$q, __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));
|
|
18754
18764
|
};
|
|
18755
|
-
var templateObject_1$
|
|
18765
|
+
var templateObject_1$y;
|
|
18756
18766
|
|
|
18757
|
-
var Container$
|
|
18767
|
+
var Container$p = 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"])));
|
|
18758
18768
|
var IMAGE_WIDTH = '63px';
|
|
18759
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18760
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18769
|
+
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);
|
|
18770
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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({
|
|
18761
18771
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18762
18772
|
}), IMAGE_WIDTH);
|
|
18763
18773
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18780,7 +18790,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18780
18790
|
margin: '0.063rem 0',
|
|
18781
18791
|
});
|
|
18782
18792
|
});
|
|
18783
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18793
|
+
var PriceContainer = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18784
18794
|
var withTag = _a.withTag; _a.theme;
|
|
18785
18795
|
return withTag
|
|
18786
18796
|
? mediaQueries({
|
|
@@ -18789,14 +18799,14 @@ var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
18789
18799
|
})
|
|
18790
18800
|
: 'justify-content: end';
|
|
18791
18801
|
});
|
|
18792
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18793
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18802
|
+
var Quantity = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18803
|
+
var StyledSpan = newStyled.span(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18794
18804
|
var SimpleOrderItem = function (_a) {
|
|
18795
18805
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18796
18806
|
var theme = useTheme();
|
|
18797
|
-
return (jsxRuntime.jsxs(Container$
|
|
18807
|
+
return (jsxRuntime.jsxs(Container$p, __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));
|
|
18798
18808
|
};
|
|
18799
|
-
var templateObject_1$
|
|
18809
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
18800
18810
|
|
|
18801
18811
|
var P$1 = newStyled.p(function (_a) {
|
|
18802
18812
|
var color = _a.color;
|
|
@@ -18810,7 +18820,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18810
18820
|
margin: '0.938rem 4.188rem',
|
|
18811
18821
|
});
|
|
18812
18822
|
});
|
|
18813
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18823
|
+
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) {
|
|
18814
18824
|
var height = _a.height;
|
|
18815
18825
|
return height || '0.5rem';
|
|
18816
18826
|
}, function (_a) {
|
|
@@ -18839,7 +18849,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18839
18849
|
position: 'absolute',
|
|
18840
18850
|
});
|
|
18841
18851
|
});
|
|
18842
|
-
var Container$
|
|
18852
|
+
var Container$o = newStyled.div(function (_a) {
|
|
18843
18853
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18844
18854
|
return ({
|
|
18845
18855
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18853,14 +18863,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18853
18863
|
var ProgressBar = function (_a) {
|
|
18854
18864
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18855
18865
|
var theme = useTheme();
|
|
18856
|
-
return (jsxRuntime.jsxs(Container$
|
|
18866
|
+
return (jsxRuntime.jsxs(Container$o, __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));
|
|
18857
18867
|
};
|
|
18858
|
-
var templateObject_1$
|
|
18868
|
+
var templateObject_1$w;
|
|
18859
18869
|
|
|
18860
|
-
var Container$
|
|
18861
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18862
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18863
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18870
|
+
var Container$n = 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; });
|
|
18871
|
+
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"])));
|
|
18872
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
18873
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$e || (templateObject_4$e = __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)'; });
|
|
18864
18874
|
var QuantityPicker = function (_a) {
|
|
18865
18875
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18866
18876
|
var theme = useTheme();
|
|
@@ -18883,9 +18893,9 @@ var QuantityPicker = function (_a) {
|
|
|
18883
18893
|
return clamp(value);
|
|
18884
18894
|
});
|
|
18885
18895
|
}, [value, clamp]);
|
|
18886
|
-
return (jsxRuntime.jsxs(Container$
|
|
18896
|
+
return (jsxRuntime.jsxs(Container$n, __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));
|
|
18887
18897
|
};
|
|
18888
|
-
var templateObject_1$
|
|
18898
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18889
18899
|
|
|
18890
18900
|
/* base styles & size variants */
|
|
18891
18901
|
var CustomRadioStyles$1 = {
|
|
@@ -18954,9 +18964,9 @@ var ContainerStyles$1 = {
|
|
|
18954
18964
|
},
|
|
18955
18965
|
};
|
|
18956
18966
|
|
|
18957
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18958
|
-
var Container$
|
|
18959
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18967
|
+
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"])));
|
|
18968
|
+
var Container$m = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18969
|
+
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) {
|
|
18960
18970
|
var disabled = _a.disabled;
|
|
18961
18971
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18962
18972
|
});
|
|
@@ -18964,7 +18974,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18964
18974
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18965
18975
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18966
18976
|
]; });
|
|
18967
|
-
var StyledLabel$1 = newStyled(Label$
|
|
18977
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18968
18978
|
var RadioPrimary = function (_a) {
|
|
18969
18979
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
18970
18980
|
var theme = useTheme();
|
|
@@ -18972,9 +18982,9 @@ var RadioPrimary = function (_a) {
|
|
|
18972
18982
|
var value = event.currentTarget.value;
|
|
18973
18983
|
onChange({ value: value, label: label });
|
|
18974
18984
|
};
|
|
18975
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18985
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$m, __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));
|
|
18976
18986
|
};
|
|
18977
|
-
var templateObject_1$
|
|
18987
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j;
|
|
18978
18988
|
|
|
18979
18989
|
var RadioGroupInput = function (_a) {
|
|
18980
18990
|
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;
|
|
@@ -19053,9 +19063,9 @@ var ContainerStyles = {
|
|
|
19053
19063
|
},
|
|
19054
19064
|
};
|
|
19055
19065
|
|
|
19056
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19057
|
-
var Container$
|
|
19058
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19066
|
+
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"])));
|
|
19067
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19068
|
+
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) {
|
|
19059
19069
|
var disabled = _a.disabled;
|
|
19060
19070
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19061
19071
|
});
|
|
@@ -19063,7 +19073,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19063
19073
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19064
19074
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19065
19075
|
]; });
|
|
19066
|
-
var StyledLabel = newStyled(Label$
|
|
19076
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19067
19077
|
var theme = _a.theme;
|
|
19068
19078
|
return theme.component.radio.textSize;
|
|
19069
19079
|
}, function (_a) {
|
|
@@ -19077,9 +19087,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19077
19087
|
var value = event.currentTarget.value;
|
|
19078
19088
|
onChange({ value: value, label: label });
|
|
19079
19089
|
};
|
|
19080
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
19090
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$l, __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));
|
|
19081
19091
|
};
|
|
19082
|
-
var templateObject_1$
|
|
19092
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
19083
19093
|
|
|
19084
19094
|
var ClubRadioGroupInput = function (_a) {
|
|
19085
19095
|
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;
|
|
@@ -19107,17 +19117,17 @@ function formatDate(date, format) {
|
|
|
19107
19117
|
}
|
|
19108
19118
|
}
|
|
19109
19119
|
|
|
19110
|
-
var Container$
|
|
19111
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19112
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19113
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19114
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19115
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19116
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19117
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19118
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19119
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
19120
|
-
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$
|
|
19120
|
+
var Container$k = 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"])));
|
|
19121
|
+
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"])));
|
|
19122
|
+
var StarsContent = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19123
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19124
|
+
var DateText$1 = newStyled.span(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
19125
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19126
|
+
var VerifiedText = newStyled.h1(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19127
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19128
|
+
var ReviewDescription = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19129
|
+
var ImageContainer = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19130
|
+
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19121
19131
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19122
19132
|
var ProductContainer = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
19123
19133
|
var ProductTitle = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -19145,24 +19155,24 @@ var Review$1 = function (_a) {
|
|
|
19145
19155
|
}
|
|
19146
19156
|
}
|
|
19147
19157
|
}, [opened]);
|
|
19148
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
19158
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$k, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
19149
19159
|
(!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));
|
|
19150
19160
|
};
|
|
19151
|
-
var templateObject_1$
|
|
19161
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$8, templateObject_8$7, templateObject_9$5, templateObject_10$5, templateObject_11$3, 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;
|
|
19152
19162
|
|
|
19153
19163
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19154
19164
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19155
|
-
var Container$
|
|
19156
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19157
|
-
var Content = newStyled.div(templateObject_3$
|
|
19158
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19159
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19160
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19161
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19162
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19163
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19164
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
19165
|
-
var ImagesContainer = newStyled.div(templateObject_11$
|
|
19165
|
+
var Container$j = 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"])));
|
|
19166
|
+
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"])));
|
|
19167
|
+
var Content = 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"])));
|
|
19168
|
+
var ReviewContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19169
|
+
var DateText = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
19170
|
+
var VariantText = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19171
|
+
var ReviewerName = newStyled.h2(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19172
|
+
var ReviewTitle = newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19173
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19174
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19175
|
+
var ImagesContainer = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19166
19176
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
19167
19177
|
var ImageSpace = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
19168
19178
|
var ImageWrapper$1 = newStyled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
@@ -19194,7 +19204,7 @@ var Review = function (_a) {
|
|
|
19194
19204
|
});
|
|
19195
19205
|
};
|
|
19196
19206
|
}, [randomId]);
|
|
19197
|
-
return (jsxRuntime.jsxs(Container$
|
|
19207
|
+
return (jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19198
19208
|
__html: showMoreMobile
|
|
19199
19209
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19200
19210
|
: description,
|
|
@@ -19204,15 +19214,15 @@ var Review = function (_a) {
|
|
|
19204
19214
|
: description,
|
|
19205
19215
|
} }, 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));
|
|
19206
19216
|
};
|
|
19207
|
-
var templateObject_1$
|
|
19208
|
-
|
|
19209
|
-
var Container$
|
|
19210
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19211
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19212
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19213
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19214
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19215
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19217
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19218
|
+
|
|
19219
|
+
var Container$i = 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"])));
|
|
19220
|
+
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"])));
|
|
19221
|
+
var ReviewsCount = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
19222
|
+
var ReviewsStars = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
19223
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
19224
|
+
var ReviewsImages = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19225
|
+
var SummaryItem = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19216
19226
|
var backgroundUrl = _a.backgroundUrl;
|
|
19217
19227
|
return "url(".concat(backgroundUrl, ")");
|
|
19218
19228
|
});
|
|
@@ -19220,19 +19230,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19220
19230
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19221
19231
|
var starsNumber = 5;
|
|
19222
19232
|
var theme = useTheme();
|
|
19223
|
-
return (jsxRuntime.jsxs(Container$
|
|
19233
|
+
return (jsxRuntime.jsxs(Container$i, { 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));
|
|
19224
19234
|
};
|
|
19225
|
-
var templateObject_1$
|
|
19235
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
19226
19236
|
|
|
19227
|
-
var Container$
|
|
19228
|
-
var Text = newStyled.p(templateObject_2$
|
|
19237
|
+
var Container$h = 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"])));
|
|
19238
|
+
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; });
|
|
19229
19239
|
var ScrollToTop = function (_a) {
|
|
19230
19240
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19231
19241
|
var theme = useTheme();
|
|
19232
19242
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19233
|
-
return (jsxRuntime.jsxs(Container$
|
|
19243
|
+
return (jsxRuntime.jsxs(Container$h, __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));
|
|
19234
19244
|
};
|
|
19235
|
-
var templateObject_1$
|
|
19245
|
+
var templateObject_1$p, templateObject_2$h;
|
|
19236
19246
|
|
|
19237
19247
|
var Input = newStyled.input(function (props) { return ({
|
|
19238
19248
|
padding: props.theme.component.input.padding,
|
|
@@ -19263,7 +19273,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19263
19273
|
},
|
|
19264
19274
|
}); });
|
|
19265
19275
|
|
|
19266
|
-
var Container$
|
|
19276
|
+
var Container$g = 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({
|
|
19267
19277
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19268
19278
|
}));
|
|
19269
19279
|
var Description = newStyled.div({
|
|
@@ -19280,25 +19290,25 @@ var Description = newStyled.div({
|
|
|
19280
19290
|
var ProductItem = function (_a) {
|
|
19281
19291
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19282
19292
|
var theme = useTheme();
|
|
19283
|
-
return (jsxRuntime.jsxs(Container$
|
|
19293
|
+
return (jsxRuntime.jsxs(Container$g, __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));
|
|
19284
19294
|
};
|
|
19285
|
-
var templateObject_1$
|
|
19295
|
+
var templateObject_1$o;
|
|
19286
19296
|
|
|
19287
|
-
var Container$
|
|
19297
|
+
var Container$f = newStyled.div({
|
|
19288
19298
|
display: 'flex',
|
|
19289
19299
|
justifyContent: 'center',
|
|
19290
19300
|
padding: '1rem',
|
|
19291
19301
|
});
|
|
19292
19302
|
var Footer = function (_a) {
|
|
19293
19303
|
var text = _a.text, onClick = _a.onClick;
|
|
19294
|
-
return (jsxRuntime.jsx(Container$
|
|
19304
|
+
return (jsxRuntime.jsx(Container$f, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19295
19305
|
};
|
|
19296
19306
|
|
|
19297
19307
|
var Ul = newStyled.ul({
|
|
19298
19308
|
margin: '0px',
|
|
19299
19309
|
padding: '0px',
|
|
19300
19310
|
});
|
|
19301
|
-
var Li = newStyled.li(templateObject_1$
|
|
19311
|
+
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({
|
|
19302
19312
|
padding: [0, '0rem 1rem'],
|
|
19303
19313
|
borderRadius: [0, '0.5rem'],
|
|
19304
19314
|
}));
|
|
@@ -19310,22 +19320,22 @@ var Anchor = newStyled.a({
|
|
|
19310
19320
|
padding: 0,
|
|
19311
19321
|
textDecoration: 'none',
|
|
19312
19322
|
});
|
|
19313
|
-
var Container$
|
|
19323
|
+
var Container$e = 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({
|
|
19314
19324
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19315
19325
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19316
19326
|
borderRadius: ['0', '0.5rem'],
|
|
19317
19327
|
}));
|
|
19318
|
-
var Header = newStyled.div(templateObject_3$
|
|
19328
|
+
var Header = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19319
19329
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19320
19330
|
}));
|
|
19321
19331
|
var ResultsPanel = function (_a) {
|
|
19322
19332
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19323
19333
|
var theme = useTheme();
|
|
19324
|
-
return (jsxRuntime.jsxs(Container$
|
|
19334
|
+
return (jsxRuntime.jsxs(Container$e, __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));
|
|
19325
19335
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19336
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e;
|
|
19327
19337
|
|
|
19328
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19338
|
+
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({
|
|
19329
19339
|
right: ['1rem', '7.75rem'],
|
|
19330
19340
|
top: ['0.75rem', '0.75rem'],
|
|
19331
19341
|
}));
|
|
@@ -19334,7 +19344,7 @@ var ClearButton = function (_a) {
|
|
|
19334
19344
|
var theme = useTheme();
|
|
19335
19345
|
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));
|
|
19336
19346
|
};
|
|
19337
|
-
var templateObject_1$
|
|
19347
|
+
var templateObject_1$m;
|
|
19338
19348
|
|
|
19339
19349
|
var SearchIconContainer = newStyled.div({
|
|
19340
19350
|
display: 'flex',
|
|
@@ -19344,7 +19354,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19344
19354
|
background: 'white',
|
|
19345
19355
|
alignSelf: 'center',
|
|
19346
19356
|
});
|
|
19347
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19357
|
+
var StyledButton = 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"])));
|
|
19348
19358
|
var SearchControl = function (_a) {
|
|
19349
19359
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19350
19360
|
var theme = useTheme();
|
|
@@ -19360,7 +19370,7 @@ var SearchControl = function (_a) {
|
|
|
19360
19370
|
}
|
|
19361
19371
|
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));
|
|
19362
19372
|
};
|
|
19363
|
-
var templateObject_1$
|
|
19373
|
+
var templateObject_1$l;
|
|
19364
19374
|
|
|
19365
19375
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19366
19376
|
var reducer = function (state, action) {
|
|
@@ -19376,7 +19386,7 @@ var reducer = function (state, action) {
|
|
|
19376
19386
|
}
|
|
19377
19387
|
}
|
|
19378
19388
|
};
|
|
19379
|
-
var Container$
|
|
19389
|
+
var Container$d = newStyled.div({
|
|
19380
19390
|
position: 'relative',
|
|
19381
19391
|
display: 'flex',
|
|
19382
19392
|
});
|
|
@@ -19416,7 +19426,7 @@ var SearchBar = function (_a) {
|
|
|
19416
19426
|
if (e.cancelable) {
|
|
19417
19427
|
e.preventDefault();
|
|
19418
19428
|
}
|
|
19419
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19429
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19420
19430
|
if (e.key === 'Enter') {
|
|
19421
19431
|
if (e.cancelable) {
|
|
19422
19432
|
e.preventDefault();
|
|
@@ -19427,20 +19437,20 @@ var SearchBar = function (_a) {
|
|
|
19427
19437
|
} }, 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));
|
|
19428
19438
|
};
|
|
19429
19439
|
|
|
19430
|
-
var Container$
|
|
19431
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19432
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19433
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19434
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19440
|
+
var Container$c = 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"])));
|
|
19441
|
+
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"])));
|
|
19442
|
+
var BoldSpan = newStyled.span(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
19443
|
+
var NormalSpan = newStyled.span(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
19444
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
19435
19445
|
var SearchNavigation = function (_a) {
|
|
19436
19446
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19437
|
-
return (jsxRuntime.jsxs(Container$
|
|
19447
|
+
return (jsxRuntime.jsxs(Container$c, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19438
19448
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19439
19449
|
}) }, void 0)] }, void 0));
|
|
19440
19450
|
};
|
|
19441
|
-
var templateObject_1$
|
|
19451
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$6;
|
|
19442
19452
|
|
|
19443
|
-
var Container$
|
|
19453
|
+
var Container$b = 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) {
|
|
19444
19454
|
var alignCenter = _a.alignCenter;
|
|
19445
19455
|
return alignCenter &&
|
|
19446
19456
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19450,29 +19460,29 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19450
19460
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19451
19461
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19452
19462
|
});
|
|
19453
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19454
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19463
|
+
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"])));
|
|
19464
|
+
var BannerText = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
19455
19465
|
var ShortBanner = function (_a) {
|
|
19456
19466
|
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;
|
|
19457
19467
|
var theme = useTheme();
|
|
19458
|
-
return (jsxRuntime.jsxs(Container$
|
|
19468
|
+
return (jsxRuntime.jsxs(Container$b, __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));
|
|
19459
19469
|
};
|
|
19460
|
-
var templateObject_1$
|
|
19461
|
-
|
|
19462
|
-
var TableElement$
|
|
19463
|
-
var TableCell$
|
|
19464
|
-
var TableHead$
|
|
19465
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19466
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19467
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19468
|
-
var Container$
|
|
19469
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19470
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19471
|
-
var TableRow$
|
|
19472
|
-
var templateObject_1$
|
|
19473
|
-
|
|
19474
|
-
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19475
|
-
var getCellColor = function (index, cell) {
|
|
19470
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c;
|
|
19471
|
+
|
|
19472
|
+
var TableElement$2 = 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; });
|
|
19473
|
+
var TableCell$2 = newStyled.td(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19474
|
+
var TableHead$2 = newStyled.th(templateObject_3$b || (templateObject_3$b = __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; });
|
|
19475
|
+
var Label$1 = newStyled('div')(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
19476
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19477
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19478
|
+
var Container$a = newStyled('div')(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19479
|
+
var LabelText$1 = newStyled('span')(templateObject_8$5 || (templateObject_8$5 = __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"])));
|
|
19480
|
+
var Column$1 = newStyled('div')(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
19481
|
+
var TableRow$2 = newStyled.tr(templateObject_10$3 || (templateObject_10$3 = __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; });
|
|
19482
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$9, templateObject_5$5, templateObject_6$5, templateObject_7$5, templateObject_8$5, templateObject_9$3, templateObject_10$3;
|
|
19483
|
+
|
|
19484
|
+
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19485
|
+
var getCellColor$1 = function (index, cell) {
|
|
19476
19486
|
if (index == 0) {
|
|
19477
19487
|
return '#f6f0e7';
|
|
19478
19488
|
}
|
|
@@ -19505,21 +19515,21 @@ var SizeChartTable = function (_a) {
|
|
|
19505
19515
|
var theme = useTheme();
|
|
19506
19516
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19507
19517
|
var isMultilabel = xLabel && yLabel;
|
|
19508
|
-
return (jsxRuntime.jsxs(Container$
|
|
19509
|
-
backgroundColor: getCellColor(index, cell),
|
|
19510
|
-
}, 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$
|
|
19518
|
+
return (jsxRuntime.jsxs(Container$a, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column$1, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ style: {
|
|
19519
|
+
backgroundColor: getCellColor$1(index, cell),
|
|
19520
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19511
19521
|
};
|
|
19512
19522
|
|
|
19513
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19514
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19515
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19516
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19523
|
+
var TableElement$1 = 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; });
|
|
19524
|
+
var TableCell$1 = 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; });
|
|
19525
|
+
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\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; });
|
|
19526
|
+
var TableRow$1 = newStyled.tr(templateObject_4$8 || (templateObject_4$8 = __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; });
|
|
19517
19527
|
var SizeTable = function (_a) {
|
|
19518
19528
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19519
19529
|
var theme = useTheme();
|
|
19520
|
-
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));
|
|
19530
|
+
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19521
19531
|
};
|
|
19522
|
-
var templateObject_1$
|
|
19532
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8;
|
|
19523
19533
|
|
|
19524
19534
|
var getStylesBySize$4 = function (size) {
|
|
19525
19535
|
switch (size) {
|
|
@@ -19546,7 +19556,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19546
19556
|
} });
|
|
19547
19557
|
};
|
|
19548
19558
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19549
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19559
|
+
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));
|
|
19550
19560
|
};
|
|
19551
19561
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19552
19562
|
if (disabled)
|
|
@@ -19562,23 +19572,23 @@ var TextButton = function (_a) {
|
|
|
19562
19572
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19563
19573
|
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));
|
|
19564
19574
|
};
|
|
19565
|
-
var templateObject_1$
|
|
19575
|
+
var templateObject_1$g;
|
|
19566
19576
|
|
|
19567
|
-
var Container$
|
|
19568
|
-
var P = newStyled.p(templateObject_2$
|
|
19569
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19577
|
+
var Container$9 = 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"])));
|
|
19578
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19579
|
+
var PercentageSpan = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
19570
19580
|
var SizeFitGuide = function (_a) {
|
|
19571
19581
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19572
|
-
return (jsxRuntime.jsxs(Container$
|
|
19582
|
+
return (jsxRuntime.jsxs(Container$9, { 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));
|
|
19573
19583
|
};
|
|
19574
|
-
var templateObject_1$
|
|
19584
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9;
|
|
19575
19585
|
|
|
19576
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19586
|
+
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) {
|
|
19577
19587
|
var inline = _a.inline;
|
|
19578
19588
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19579
19589
|
});
|
|
19580
|
-
var Row = newStyled.div(templateObject_2$
|
|
19581
|
-
var templateObject_1$
|
|
19590
|
+
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"])));
|
|
19591
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19582
19592
|
|
|
19583
19593
|
var SizeSelector = function (_a) {
|
|
19584
19594
|
var _b;
|
|
@@ -19600,7 +19610,7 @@ var SizeSelector = function (_a) {
|
|
|
19600
19610
|
}) }), void 0)] }), void 0));
|
|
19601
19611
|
};
|
|
19602
19612
|
|
|
19603
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19613
|
+
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) {
|
|
19604
19614
|
var titleSize = _a.titleSize;
|
|
19605
19615
|
return titleSize;
|
|
19606
19616
|
}, function (_a) {
|
|
@@ -19617,18 +19627,18 @@ var Tab = function (_a) {
|
|
|
19617
19627
|
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;
|
|
19618
19628
|
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));
|
|
19619
19629
|
};
|
|
19620
|
-
var templateObject_1$
|
|
19630
|
+
var templateObject_1$d;
|
|
19621
19631
|
|
|
19622
|
-
var Container$
|
|
19623
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19632
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19633
|
+
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) {
|
|
19624
19634
|
var backgroundColor = _a.backgroundColor;
|
|
19625
19635
|
return backgroundColor;
|
|
19626
19636
|
}, function (_a) {
|
|
19627
19637
|
var borderColor = _a.borderColor;
|
|
19628
19638
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19629
19639
|
});
|
|
19630
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19631
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19640
|
+
var TabContent = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19641
|
+
var TabSeparator = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19632
19642
|
var Tabs = function (_a) {
|
|
19633
19643
|
var _b;
|
|
19634
19644
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19637,16 +19647,16 @@ var Tabs = function (_a) {
|
|
|
19637
19647
|
return null;
|
|
19638
19648
|
}
|
|
19639
19649
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19640
|
-
return (jsxRuntime.jsxs(Container$
|
|
19650
|
+
return (jsxRuntime.jsxs(Container$8, __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));
|
|
19641
19651
|
};
|
|
19642
|
-
var templateObject_1$
|
|
19652
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$7;
|
|
19643
19653
|
|
|
19644
|
-
var Container$
|
|
19654
|
+
var Container$7 = 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"])));
|
|
19645
19655
|
var Tag = function (_a) {
|
|
19646
19656
|
var text = _a.text, className = _a.className;
|
|
19647
|
-
return jsxRuntime.jsx(Container$
|
|
19657
|
+
return jsxRuntime.jsx(Container$7, __assign$1({ className: className }, { children: text }), void 0);
|
|
19648
19658
|
};
|
|
19649
|
-
var templateObject_1$
|
|
19659
|
+
var templateObject_1$b;
|
|
19650
19660
|
|
|
19651
19661
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19652
19662
|
switch (size) {
|
|
@@ -19757,9 +19767,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19757
19767
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19758
19768
|
};
|
|
19759
19769
|
|
|
19760
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19761
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19762
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19770
|
+
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"])));
|
|
19771
|
+
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"])));
|
|
19772
|
+
var FullscreenVideo = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
19763
19773
|
var ImageVideo = function (_a) {
|
|
19764
19774
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19765
19775
|
var video = React$2.useRef(null);
|
|
@@ -19779,12 +19789,12 @@ var ImageVideo = function (_a) {
|
|
|
19779
19789
|
height: '100%',
|
|
19780
19790
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19781
19791
|
};
|
|
19782
|
-
var templateObject_1$
|
|
19792
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19783
19793
|
|
|
19784
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19785
|
-
var ContainerMobile = css(templateObject_2$
|
|
19786
|
-
var Container$
|
|
19787
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19794
|
+
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"])));
|
|
19795
|
+
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"])));
|
|
19796
|
+
var Container$6 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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);
|
|
19797
|
+
var TextContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
19788
19798
|
var TextWithImage = function (_a) {
|
|
19789
19799
|
var _b, _c, _d, _e;
|
|
19790
19800
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19804,7 +19814,7 @@ var TextWithImage = function (_a) {
|
|
|
19804
19814
|
// @ts-ignore
|
|
19805
19815
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19806
19816
|
};
|
|
19807
|
-
return (jsxs(Container$
|
|
19817
|
+
return (jsxs(Container$6, __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: {
|
|
19808
19818
|
backgroundColor: props.btnBGColor,
|
|
19809
19819
|
color: '#ffffff',
|
|
19810
19820
|
border: props.btnBGColor,
|
|
@@ -19814,9 +19824,9 @@ var TextWithImage = function (_a) {
|
|
|
19814
19824
|
},
|
|
19815
19825
|
} }, 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));
|
|
19816
19826
|
};
|
|
19817
|
-
var templateObject_1$
|
|
19827
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6, templateObject_4$6;
|
|
19818
19828
|
|
|
19819
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19829
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19820
19830
|
var timerColor = _a.timerColor;
|
|
19821
19831
|
return timerColor || '';
|
|
19822
19832
|
});
|
|
@@ -19852,11 +19862,11 @@ var Timer = function (_a) {
|
|
|
19852
19862
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19853
19863
|
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));
|
|
19854
19864
|
};
|
|
19855
|
-
var templateObject_1$
|
|
19865
|
+
var templateObject_1$8;
|
|
19856
19866
|
|
|
19857
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19858
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19859
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19867
|
+
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"])));
|
|
19868
|
+
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; });
|
|
19869
|
+
var Currency = newStyled.span(templateObject_3$5 || (templateObject_3$5 = __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) {
|
|
19860
19870
|
var theme = _a.theme;
|
|
19861
19871
|
return theme.component.total.basicTotal.currency.color;
|
|
19862
19872
|
}, function (_a) {
|
|
@@ -19869,41 +19879,41 @@ var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __make
|
|
|
19869
19879
|
var theme = _a.theme;
|
|
19870
19880
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19871
19881
|
});
|
|
19872
|
-
var Container$
|
|
19882
|
+
var Container$5 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19873
19883
|
var highlightColor = _a.highlightColor;
|
|
19874
19884
|
return highlightColor;
|
|
19875
19885
|
});
|
|
19876
|
-
var TotalContainer = newStyled(Container$
|
|
19886
|
+
var TotalContainer = newStyled(Container$5)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19877
19887
|
var showTotalLabel = _a.showTotalLabel;
|
|
19878
19888
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19879
19889
|
});
|
|
19880
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19881
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19890
|
+
var DiscountText = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19891
|
+
var DiscountAmount = newStyled.h3(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19882
19892
|
var theme = _a.theme;
|
|
19883
19893
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19884
19894
|
});
|
|
19885
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19886
|
-
var templateObject_1$
|
|
19895
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19896
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
|
|
19887
19897
|
|
|
19888
19898
|
var Total = function (_a) {
|
|
19889
19899
|
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;
|
|
19890
19900
|
var theme = useTheme();
|
|
19891
|
-
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$
|
|
19901
|
+
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$5, __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));
|
|
19892
19902
|
};
|
|
19893
19903
|
|
|
19894
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19904
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19895
19905
|
var color = _a.color;
|
|
19896
19906
|
return color;
|
|
19897
19907
|
});
|
|
19898
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19899
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19908
|
+
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"])));
|
|
19909
|
+
var Item = newStyled.h4(templateObject_3$4 || (templateObject_3$4 = __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) {
|
|
19900
19910
|
var theme = _a.theme;
|
|
19901
19911
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19902
19912
|
}, function (_a) {
|
|
19903
19913
|
var theme = _a.theme;
|
|
19904
19914
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19905
19915
|
});
|
|
19906
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19916
|
+
var CouponItem = newStyled(Item)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19907
19917
|
var color = _a.color;
|
|
19908
19918
|
return color;
|
|
19909
19919
|
});
|
|
@@ -19916,32 +19926,32 @@ var Subtotal = function (_a) {
|
|
|
19916
19926
|
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));
|
|
19917
19927
|
})] }), void 0));
|
|
19918
19928
|
};
|
|
19919
|
-
var templateObject_1$
|
|
19929
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19920
19930
|
|
|
19921
19931
|
var Totals = {
|
|
19922
19932
|
Total: Total,
|
|
19923
19933
|
Subtotal: Subtotal,
|
|
19924
19934
|
};
|
|
19925
19935
|
|
|
19926
|
-
var Container$
|
|
19927
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19928
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19929
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19930
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19931
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19936
|
+
var Container$4 = 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"])));
|
|
19937
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19938
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __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; });
|
|
19939
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$3 || (templateObject_4$3 = __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'); });
|
|
19940
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
19941
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19932
19942
|
return props.finishedTrack
|
|
19933
19943
|
? props.finishedTrackColor
|
|
19934
19944
|
: props.activeTrack
|
|
19935
19945
|
? props.activeTrackColor
|
|
19936
19946
|
: '';
|
|
19937
19947
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19938
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19939
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19948
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
19949
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19940
19950
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19941
19951
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19942
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
19943
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_10$
|
|
19944
|
-
var WarningIconWrapper = newStyled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19952
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19953
|
+
var LastActiveCheckpointDot = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
19954
|
+
var WarningIconWrapper = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19945
19955
|
var TrackingProgressV2 = function (_a) {
|
|
19946
19956
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, _b = _a.resumedStyle, resumedStyle = _b === void 0 ? false : _b, activeCheckpointColor = _a.activeCheckpointColor, warning = _a.warning;
|
|
19947
19957
|
var theme = useTheme();
|
|
@@ -19964,7 +19974,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19964
19974
|
}
|
|
19965
19975
|
return '30px';
|
|
19966
19976
|
};
|
|
19967
|
-
return (jsxRuntime.jsxs(Container$
|
|
19977
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19968
19978
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19969
19979
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19970
19980
|
? activeCheckpointColor
|
|
@@ -19975,18 +19985,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19975
19985
|
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));
|
|
19976
19986
|
})] }), void 0));
|
|
19977
19987
|
};
|
|
19978
|
-
var templateObject_1$
|
|
19979
|
-
|
|
19980
|
-
var Container$
|
|
19981
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19982
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19983
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19984
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19985
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
19988
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
19989
|
+
|
|
19990
|
+
var Container$3 = 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"])));
|
|
19991
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19992
|
+
var CheckpointDate = 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; });
|
|
19993
|
+
var CheckpointDateLabel = 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'); });
|
|
19994
|
+
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __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'); });
|
|
19995
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19986
19996
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19987
19997
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19988
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19989
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
19998
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19999
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19990
20000
|
var TrackingProgress = function (_a) {
|
|
19991
20001
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19992
20002
|
var theme = useTheme();
|
|
@@ -20006,7 +20016,7 @@ var TrackingProgress = function (_a) {
|
|
|
20006
20016
|
}
|
|
20007
20017
|
return '30px';
|
|
20008
20018
|
};
|
|
20009
|
-
return (jsxRuntime.jsxs(Container$
|
|
20019
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20010
20020
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20011
20021
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20012
20022
|
? theme.colors.semantic.informative.color
|
|
@@ -20015,9 +20025,9 @@ var TrackingProgress = function (_a) {
|
|
|
20015
20025
|
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));
|
|
20016
20026
|
})] }), void 0));
|
|
20017
20027
|
};
|
|
20018
|
-
var templateObject_1$
|
|
20028
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
20019
20029
|
|
|
20020
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20030
|
+
var TimerContainer = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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) {
|
|
20021
20031
|
var textPosition = _a.textPosition;
|
|
20022
20032
|
return textPosition;
|
|
20023
20033
|
}, function (_a) {
|
|
@@ -20030,7 +20040,7 @@ var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = _
|
|
|
20030
20040
|
var borderRadius = _a.borderRadius;
|
|
20031
20041
|
return borderRadius || '8px';
|
|
20032
20042
|
});
|
|
20033
|
-
var templateObject_1$
|
|
20043
|
+
var templateObject_1$3;
|
|
20034
20044
|
|
|
20035
20045
|
var getDefaultCountdown = function () {
|
|
20036
20046
|
var tomorrowDate = new Date();
|
|
@@ -20046,7 +20056,7 @@ var HurryUp = function (_a) {
|
|
|
20046
20056
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
20047
20057
|
};
|
|
20048
20058
|
|
|
20049
|
-
var Container$
|
|
20059
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20050
20060
|
var size = _a.size;
|
|
20051
20061
|
return (size ? size : '100%');
|
|
20052
20062
|
}, function (_a) {
|
|
@@ -20060,7 +20070,7 @@ var borderSize = {
|
|
|
20060
20070
|
large: '3px',
|
|
20061
20071
|
};
|
|
20062
20072
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20063
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20073
|
+
var StyledSpinner = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20064
20074
|
var size = _a.size;
|
|
20065
20075
|
return borderSize[size];
|
|
20066
20076
|
}, function (_a) {
|
|
@@ -20073,15 +20083,15 @@ var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __
|
|
|
20073
20083
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20074
20084
|
return duration;
|
|
20075
20085
|
});
|
|
20076
|
-
var templateObject_1$
|
|
20086
|
+
var templateObject_1$2, templateObject_2$2;
|
|
20077
20087
|
|
|
20078
20088
|
var Spinner = function (_a) {
|
|
20079
20089
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
20080
|
-
return (jsxRuntime.jsx(Container$
|
|
20090
|
+
return (jsxRuntime.jsx(Container$2, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
20081
20091
|
};
|
|
20082
20092
|
|
|
20083
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
20084
|
-
var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
20093
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
20094
|
+
var SliderContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
20085
20095
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20086
20096
|
return borderRadiusVariant &&
|
|
20087
20097
|
"\n border-radius: 40px;\n ";
|
|
@@ -20092,30 +20102,30 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
|
|
|
20092
20102
|
var theme = _a.theme;
|
|
20093
20103
|
return theme.component.gallery.aspectRatio;
|
|
20094
20104
|
});
|
|
20095
|
-
var TopTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
20096
|
-
var BottomTagContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20097
|
-
var NavButtonContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
20105
|
+
var TopTagContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
20106
|
+
var BottomTagContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20107
|
+
var NavButtonContainer = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
20098
20108
|
var theme = _a.theme;
|
|
20099
20109
|
return theme.colors.shades.white.color;
|
|
20100
20110
|
});
|
|
20101
|
-
var Button = newStyled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
20102
|
-
var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"])), function (_a) {
|
|
20111
|
+
var Button = newStyled.button(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
20112
|
+
var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"])), function (_a) {
|
|
20103
20113
|
var theme = _a.theme;
|
|
20104
20114
|
return theme.colors.pallete.primary.color;
|
|
20105
20115
|
});
|
|
20106
|
-
var StyledImage = newStyled(Image$3)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20116
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20107
20117
|
var theme = _a.theme;
|
|
20108
20118
|
return theme.component.gallery.aspectRatio;
|
|
20109
20119
|
});
|
|
20110
|
-
var SlideItem = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-right: 12px;\n aspect-ratio: ", ";\n"], ["\n padding-right: 12px;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20120
|
+
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: 12px;\n aspect-ratio: ", ";\n"], ["\n padding-right: 12px;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20111
20121
|
var theme = _a.theme;
|
|
20112
20122
|
return theme.component.gallery.aspectRatio;
|
|
20113
20123
|
});
|
|
20114
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20124
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20115
20125
|
var theme = _a.theme;
|
|
20116
20126
|
return theme.component.gallery.aspectRatio;
|
|
20117
20127
|
});
|
|
20118
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
20128
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20119
20129
|
|
|
20120
20130
|
var SETTINGS = {
|
|
20121
20131
|
infinite: false,
|
|
@@ -20177,7 +20187,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20177
20187
|
if (thumbnailRef.current)
|
|
20178
20188
|
setNav2(thumbnailRef.current);
|
|
20179
20189
|
}, []);
|
|
20180
|
-
return (jsxRuntime.jsx(Container, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20190
|
+
return (jsxRuntime.jsx(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20181
20191
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20182
20192
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20183
20193
|
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
@@ -20186,6 +20196,58 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20186
20196
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20187
20197
|
};
|
|
20188
20198
|
|
|
20199
|
+
var ScrollContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 287px;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 287px;\n overflow-x: auto;\n }\n"])));
|
|
20200
|
+
var TableElement = newStyled.table(templateObject_2 || (templateObject_2 = __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; });
|
|
20201
|
+
var TableCell = newStyled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
20202
|
+
var TableHead = newStyled.th(templateObject_4 || (templateObject_4 = __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; });
|
|
20203
|
+
var Label = newStyled('div')(templateObject_5 || (templateObject_5 = __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"])));
|
|
20204
|
+
var TopLabel = newStyled(Label)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20205
|
+
var LeftLabel = newStyled(Label)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
20206
|
+
var Container = newStyled('div')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
20207
|
+
var LabelText = newStyled('span')(templateObject_9 || (templateObject_9 = __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"])));
|
|
20208
|
+
var Column = newStyled('div')(templateObject_10 || (templateObject_10 = __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"])));
|
|
20209
|
+
var TableRow = newStyled.tr(templateObject_11 || (templateObject_11 = __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; });
|
|
20210
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
20211
|
+
|
|
20212
|
+
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
20213
|
+
var getCellColor = function (index, cell) {
|
|
20214
|
+
if (index == 0) {
|
|
20215
|
+
return '#f6f0e7';
|
|
20216
|
+
}
|
|
20217
|
+
switch (cell) {
|
|
20218
|
+
case 'XS':
|
|
20219
|
+
return '#f5bab0';
|
|
20220
|
+
case 'S':
|
|
20221
|
+
return '#f7a08b';
|
|
20222
|
+
case 'M':
|
|
20223
|
+
return '#ffe1b8';
|
|
20224
|
+
case 'L':
|
|
20225
|
+
return '#f5bab0';
|
|
20226
|
+
case 'XL':
|
|
20227
|
+
return '#8bbeea';
|
|
20228
|
+
case '2XL':
|
|
20229
|
+
return '#b1d7c3';
|
|
20230
|
+
case '3XL':
|
|
20231
|
+
return '#e7a4f7';
|
|
20232
|
+
case '4XL':
|
|
20233
|
+
return '#e7c9b2';
|
|
20234
|
+
default:
|
|
20235
|
+
return '';
|
|
20236
|
+
}
|
|
20237
|
+
};
|
|
20238
|
+
|
|
20239
|
+
// TODO: Refactor the table properties
|
|
20240
|
+
var SizeChartTableV2 = function (_a) {
|
|
20241
|
+
var _b, _c;
|
|
20242
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
20243
|
+
var theme = useTheme();
|
|
20244
|
+
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
20245
|
+
var isMultilabel = xLabel && yLabel;
|
|
20246
|
+
return (jsxRuntime.jsxs(Container, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsx(ScrollContainer, { children: jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ style: {
|
|
20247
|
+
backgroundColor: getCellColor(index, cell),
|
|
20248
|
+
}, 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, __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, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
20249
|
+
};
|
|
20250
|
+
|
|
20189
20251
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
20190
20252
|
exports.Accordion = Accordion$1;
|
|
20191
20253
|
exports.AccordionOptions = AccordionOptions;
|
|
@@ -20270,6 +20332,7 @@ exports.SimpleDropdown = SimpleDropdown;
|
|
|
20270
20332
|
exports.SimpleOrderItem = SimpleOrderItem;
|
|
20271
20333
|
exports.SingleColorPicker = SingleColorPicker;
|
|
20272
20334
|
exports.SizeChartTable = SizeChartTable;
|
|
20335
|
+
exports.SizeChartTableV2 = SizeChartTableV2;
|
|
20273
20336
|
exports.SizeDropdown = SizeDropdown;
|
|
20274
20337
|
exports.SizeFitGuide = SizeFitGuide;
|
|
20275
20338
|
exports.SizeSelector = SizeSelector;
|