@trafilea/afrodita-components 6.17.3 → 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 +13 -5
- package/build/index.esm.js +744 -692
- package/build/index.esm.js.map +1 -1
- package/build/index.js +744 -691
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3153,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3153
|
desktop: 1280,
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Container$
|
|
3156
|
+
var Container$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,17 +4199,17 @@ 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
4214
|
heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
|
|
4215
4215
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -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,9 @@ 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
5220
|
|
|
5221
5221
|
var useOnClickOutside = function (ref, handler) {
|
|
5222
5222
|
React$2.useEffect(function () {
|
|
@@ -5362,7 +5362,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5362
5362
|
}
|
|
5363
5363
|
};
|
|
5364
5364
|
|
|
5365
|
-
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) {
|
|
5366
5366
|
var position = _a.position;
|
|
5367
5367
|
return getWrapperFlexDirection(position);
|
|
5368
5368
|
}, function (_a) {
|
|
@@ -5372,7 +5372,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5372
5372
|
var disableHover = _a.disableHover;
|
|
5373
5373
|
return (disableHover ? 0 : 1);
|
|
5374
5374
|
});
|
|
5375
|
-
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) {
|
|
5376
5376
|
var position = _a.position;
|
|
5377
5377
|
return getContainerFlexDirection(position);
|
|
5378
5378
|
}, function (_a) {
|
|
@@ -5400,14 +5400,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5400
5400
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5401
5401
|
return actual === expected ? margin : '0';
|
|
5402
5402
|
};
|
|
5403
|
-
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) {
|
|
5404
5404
|
var borderColor = _a.borderColor;
|
|
5405
5405
|
return borderColor;
|
|
5406
5406
|
}, function (_a) {
|
|
5407
5407
|
var backgroundColor = _a.backgroundColor;
|
|
5408
5408
|
return backgroundColor;
|
|
5409
5409
|
});
|
|
5410
|
-
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
5411
|
var theme = _a.theme;
|
|
5412
5412
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5413
5413
|
}, function (_a) {
|
|
@@ -5417,17 +5417,17 @@ var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __ma
|
|
|
5417
5417
|
var color = _a.color;
|
|
5418
5418
|
return color;
|
|
5419
5419
|
});
|
|
5420
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5421
|
-
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) {
|
|
5422
5422
|
var color = _a.color;
|
|
5423
5423
|
return color;
|
|
5424
5424
|
});
|
|
5425
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5426
|
-
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) {
|
|
5427
5427
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5428
5428
|
return right;
|
|
5429
5429
|
});
|
|
5430
|
-
var templateObject_1$
|
|
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;
|
|
5431
5431
|
|
|
5432
5432
|
var Tooltip = function (_a) {
|
|
5433
5433
|
var _b;
|
|
@@ -5498,7 +5498,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5498
5498
|
};
|
|
5499
5499
|
}
|
|
5500
5500
|
};
|
|
5501
|
-
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) {
|
|
5502
5502
|
var backgroundColor = _a.backgroundColor;
|
|
5503
5503
|
return backgroundColor;
|
|
5504
5504
|
}, function (_a) {
|
|
@@ -5520,7 +5520,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
5520
5520
|
var size = _a.size;
|
|
5521
5521
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5522
5522
|
});
|
|
5523
|
-
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) {
|
|
5524
5524
|
var textColor = _a.textColor;
|
|
5525
5525
|
return textColor;
|
|
5526
5526
|
}, function (_a) {
|
|
@@ -5535,9 +5535,9 @@ var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __makeTemp
|
|
|
5535
5535
|
var ClubOfferTag = function (_a) {
|
|
5536
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;
|
|
5537
5537
|
var theme = useTheme();
|
|
5538
|
-
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));
|
|
5539
5539
|
};
|
|
5540
|
-
var templateObject_1$
|
|
5540
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
5541
5541
|
|
|
5542
5542
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5543
5543
|
var _a, _b, _c;
|
|
@@ -5568,7 +5568,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5568
5568
|
};
|
|
5569
5569
|
}
|
|
5570
5570
|
};
|
|
5571
|
-
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) {
|
|
5572
5572
|
var backgroundColor = _a.backgroundColor;
|
|
5573
5573
|
return backgroundColor;
|
|
5574
5574
|
}, function (_a) {
|
|
@@ -5590,7 +5590,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5590
5590
|
var size = _a.size;
|
|
5591
5591
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5592
5592
|
});
|
|
5593
|
-
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) {
|
|
5594
5594
|
var textColor = _a.textColor;
|
|
5595
5595
|
return textColor;
|
|
5596
5596
|
}, function (_a) {
|
|
@@ -5605,9 +5605,9 @@ var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemp
|
|
|
5605
5605
|
var DiscountTag$1 = function (_a) {
|
|
5606
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;
|
|
5607
5607
|
var theme = useTheme();
|
|
5608
|
-
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));
|
|
5609
5609
|
};
|
|
5610
|
-
var templateObject_1$
|
|
5610
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5611
5611
|
|
|
5612
5612
|
var getStylesBySize$b = function (size, theme) {
|
|
5613
5613
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5649,8 +5649,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5649
5649
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5650
5650
|
}
|
|
5651
5651
|
};
|
|
5652
|
-
var Container$
|
|
5653
|
-
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) {
|
|
5654
5654
|
var weight = _a.weight;
|
|
5655
5655
|
return (weight ? weight : '400');
|
|
5656
5656
|
}, function (_a) {
|
|
@@ -5674,7 +5674,7 @@ var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5674
5674
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5675
5675
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5676
5676
|
});
|
|
5677
|
-
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) {
|
|
5678
5678
|
var _b;
|
|
5679
5679
|
var size = _a.size;
|
|
5680
5680
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5705,11 +5705,11 @@ var PriceLabel = function (_a) {
|
|
|
5705
5705
|
: exports.ComponentSize.XSmall;
|
|
5706
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));
|
|
5707
5707
|
};
|
|
5708
|
-
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));
|
|
5709
5709
|
};
|
|
5710
|
-
var templateObject_1$
|
|
5710
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$W;
|
|
5711
5711
|
|
|
5712
|
-
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"])));
|
|
5713
5713
|
var PriceLabelV2 = function (_a) {
|
|
5714
5714
|
var _b;
|
|
5715
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"]);
|
|
@@ -5762,7 +5762,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5762
5762
|
var savetoString = saveto.toFixed(2);
|
|
5763
5763
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5764
5764
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5765
|
-
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: {
|
|
5766
5766
|
marginTop: '-5px',
|
|
5767
5767
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5768
5768
|
? finalPriceArray[0]
|
|
@@ -5780,11 +5780,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5780
5780
|
lineHeight: '22px',
|
|
5781
5781
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5782
5782
|
};
|
|
5783
|
-
var templateObject_1$
|
|
5783
|
+
var templateObject_1$1H;
|
|
5784
5784
|
|
|
5785
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5786
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5787
|
-
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"])));
|
|
5788
5788
|
var PriceLabelV3 = function (_a) {
|
|
5789
5789
|
var _b;
|
|
5790
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"]);
|
|
@@ -5839,7 +5839,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5839
5839
|
return null;
|
|
5840
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));
|
|
5841
5841
|
};
|
|
5842
|
-
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: {
|
|
5843
5843
|
marginTop: '-5px',
|
|
5844
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: {
|
|
5845
5845
|
marginTop: '-6px',
|
|
@@ -5855,10 +5855,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5855
5855
|
lineHeight: '22px',
|
|
5856
5856
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5857
5857
|
};
|
|
5858
|
-
var templateObject_1$
|
|
5858
|
+
var templateObject_1$1G, templateObject_2$17, templateObject_3$V;
|
|
5859
5859
|
|
|
5860
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5861
|
-
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) {
|
|
5862
5862
|
var selected = _a.selected, theme = _a.theme;
|
|
5863
5863
|
return selected
|
|
5864
5864
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5872,30 +5872,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5872
5872
|
var theme = _a.theme;
|
|
5873
5873
|
return theme.colors.pallete.primary.color;
|
|
5874
5874
|
});
|
|
5875
|
-
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) {
|
|
5876
5876
|
var onClick = _a.onClick;
|
|
5877
5877
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5878
5878
|
});
|
|
5879
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5880
|
-
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) {
|
|
5881
5881
|
var theme = _a.theme;
|
|
5882
5882
|
return theme.colors.shades[200].color;
|
|
5883
5883
|
}, function (_a) {
|
|
5884
5884
|
var theme = _a.theme;
|
|
5885
5885
|
return theme.colors.pallete.primary.color;
|
|
5886
5886
|
});
|
|
5887
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5888
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5889
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5890
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5891
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5892
|
-
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"])));
|
|
5893
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) {
|
|
5894
5894
|
var selected = _a.selected, theme = _a.theme;
|
|
5895
5895
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5896
5896
|
});
|
|
5897
|
-
var Container$
|
|
5898
|
-
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;
|
|
5899
5899
|
|
|
5900
5900
|
var radioIds$1 = {
|
|
5901
5901
|
oneTime: {
|
|
@@ -5945,17 +5945,17 @@ var Autoship = function (_a) {
|
|
|
5945
5945
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5946
5946
|
};
|
|
5947
5947
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5948
|
-
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
|
|
5949
5949
|
? benefitsColor.selected
|
|
5950
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));
|
|
5951
5951
|
};
|
|
5952
5952
|
|
|
5953
|
-
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) {
|
|
5954
5954
|
var theme = _a.theme;
|
|
5955
5955
|
return theme.name === 'TheSpaDr' &&
|
|
5956
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 ";
|
|
5957
5957
|
});
|
|
5958
|
-
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) {
|
|
5959
5959
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5960
5960
|
return isSelected
|
|
5961
5961
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5971,7 +5971,7 @@ var getSelectedBorder = function (_a) {
|
|
|
5971
5971
|
}
|
|
5972
5972
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
5973
5973
|
};
|
|
5974
|
-
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) {
|
|
5975
5975
|
var selected = _a.selected, theme = _a.theme;
|
|
5976
5976
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
5977
5977
|
}, function (_a) {
|
|
@@ -5983,32 +5983,32 @@ var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __
|
|
|
5983
5983
|
var theme = _a.theme;
|
|
5984
5984
|
return theme.colors.pallete.primary.color;
|
|
5985
5985
|
});
|
|
5986
|
-
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) {
|
|
5987
5987
|
var onClick = _a.onClick;
|
|
5988
5988
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5989
5989
|
});
|
|
5990
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5991
|
-
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) {
|
|
5992
5992
|
var theme = _a.theme;
|
|
5993
5993
|
return theme.colors.shades[200].color;
|
|
5994
5994
|
}, function (_a) {
|
|
5995
5995
|
var theme = _a.theme;
|
|
5996
5996
|
return theme.colors.pallete.primary.color;
|
|
5997
5997
|
});
|
|
5998
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5999
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
6000
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
6001
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
6002
|
-
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) {
|
|
6003
6003
|
var selected = _a.selected, theme = _a.theme;
|
|
6004
6004
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6005
6005
|
});
|
|
6006
|
-
var Container$
|
|
6006
|
+
var Container$12 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6007
6007
|
var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6008
6008
|
var theme = _a.theme;
|
|
6009
6009
|
return theme.component.autoship.tooltip.margin;
|
|
6010
6010
|
});
|
|
6011
|
-
var templateObject_1$
|
|
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;
|
|
6012
6012
|
|
|
6013
6013
|
var radioIds = {
|
|
6014
6014
|
oneTime: {
|
|
@@ -6068,7 +6068,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6068
6068
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6069
6069
|
};
|
|
6070
6070
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6071
|
-
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
|
|
6072
6072
|
? benefitsColor.selected
|
|
6073
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));
|
|
6074
6074
|
};
|
|
@@ -6086,13 +6086,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6086
6086
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6087
6087
|
_a$2);
|
|
6088
6088
|
|
|
6089
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6090
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6091
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6092
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6093
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6094
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6095
|
-
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;
|
|
6096
6096
|
|
|
6097
6097
|
var NameWithStars = function (_a) {
|
|
6098
6098
|
var name = _a.name, size = _a.size;
|
|
@@ -6110,10 +6110,10 @@ var ResultFeedback = function (_a) {
|
|
|
6110
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));
|
|
6111
6111
|
};
|
|
6112
6112
|
|
|
6113
|
-
var Container$
|
|
6114
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6115
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6116
|
-
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) {
|
|
6117
6117
|
var theme = _a.theme;
|
|
6118
6118
|
return theme.colors.pallete.secondary.color;
|
|
6119
6119
|
}, function (_a) {
|
|
@@ -6123,7 +6123,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
6123
6123
|
var theme = _a.theme, size = _a.size;
|
|
6124
6124
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6125
6125
|
});
|
|
6126
|
-
var templateObject_1$
|
|
6126
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F;
|
|
6127
6127
|
|
|
6128
6128
|
/* base styles & size variants */
|
|
6129
6129
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6198,10 +6198,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6198
6198
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6199
6199
|
var infoText = buildInfoText(name, age, months);
|
|
6200
6200
|
var Component = componentByVariant[variant];
|
|
6201
|
-
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));
|
|
6202
6202
|
};
|
|
6203
6203
|
|
|
6204
|
-
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) {
|
|
6205
6205
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6206
6206
|
});
|
|
6207
6207
|
var CardHeader = function (_a) {
|
|
@@ -6212,16 +6212,16 @@ var CardFooter = function (_a) {
|
|
|
6212
6212
|
var children = _a.children;
|
|
6213
6213
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6214
6214
|
};
|
|
6215
|
-
var templateObject_1$
|
|
6215
|
+
var templateObject_1$1B;
|
|
6216
6216
|
|
|
6217
|
-
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"])));
|
|
6218
6218
|
var CardBody = function (_a) {
|
|
6219
6219
|
var children = _a.children;
|
|
6220
6220
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6221
6221
|
};
|
|
6222
|
-
var templateObject_1$
|
|
6222
|
+
var templateObject_1$1A;
|
|
6223
6223
|
|
|
6224
|
-
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) {
|
|
6225
6225
|
var flex = _a.flex;
|
|
6226
6226
|
return flex &&
|
|
6227
6227
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6236,23 +6236,23 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
6236
6236
|
var Card$1 = function (_a) {
|
|
6237
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;
|
|
6238
6238
|
var theme = useTheme();
|
|
6239
|
-
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));
|
|
6240
6240
|
};
|
|
6241
6241
|
var Card$2 = Object.assign(Card$1, {
|
|
6242
6242
|
Header: CardHeader,
|
|
6243
6243
|
Footer: CardFooter,
|
|
6244
6244
|
Body: CardBody,
|
|
6245
6245
|
});
|
|
6246
|
-
var templateObject_1$
|
|
6246
|
+
var templateObject_1$1z;
|
|
6247
6247
|
|
|
6248
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6249
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6250
|
-
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) {
|
|
6251
6251
|
var color = _a.color;
|
|
6252
6252
|
return color;
|
|
6253
6253
|
});
|
|
6254
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6255
|
-
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;
|
|
6256
6256
|
|
|
6257
6257
|
var Minimalistic = function (_a) {
|
|
6258
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;
|
|
@@ -6260,28 +6260,28 @@ var Minimalistic = function (_a) {
|
|
|
6260
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));
|
|
6261
6261
|
};
|
|
6262
6262
|
|
|
6263
|
-
var Container
|
|
6264
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
6265
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6266
|
-
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"])));
|
|
6267
6267
|
var Simple = function (_a) {
|
|
6268
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;
|
|
6269
6269
|
var theme = useTheme();
|
|
6270
|
-
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));
|
|
6271
6271
|
};
|
|
6272
|
-
var templateObject_1$
|
|
6272
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6273
6273
|
|
|
6274
6274
|
var Bundle = {
|
|
6275
6275
|
Minimalistic: Minimalistic,
|
|
6276
6276
|
Simple: Simple,
|
|
6277
6277
|
};
|
|
6278
6278
|
|
|
6279
|
-
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) {
|
|
6280
6280
|
var displayBNPL = _a.displayBNPL;
|
|
6281
6281
|
return (displayBNPL ? 'flex' : 'none');
|
|
6282
6282
|
});
|
|
6283
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6284
|
-
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"])));
|
|
6285
6285
|
var BuyNowPayLater = function (_a) {
|
|
6286
6286
|
var _b;
|
|
6287
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;
|
|
@@ -6291,43 +6291,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6291
6291
|
console.error('Icon', iconName, 'not found');
|
|
6292
6292
|
return null;
|
|
6293
6293
|
}
|
|
6294
|
-
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));
|
|
6295
6295
|
};
|
|
6296
|
-
var templateObject_1$
|
|
6296
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O;
|
|
6297
6297
|
|
|
6298
|
-
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; });
|
|
6299
6299
|
var Title$5 = function (_a) {
|
|
6300
6300
|
var title = _a.title;
|
|
6301
6301
|
var theme = useTheme();
|
|
6302
6302
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6303
6303
|
};
|
|
6304
|
-
var templateObject_1$
|
|
6304
|
+
var templateObject_1$1v;
|
|
6305
6305
|
|
|
6306
|
-
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; });
|
|
6307
6307
|
var Promo = function (_a) {
|
|
6308
6308
|
var text = _a.text;
|
|
6309
6309
|
var theme = useTheme();
|
|
6310
6310
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6311
6311
|
};
|
|
6312
|
-
var templateObject_1$
|
|
6312
|
+
var templateObject_1$1u;
|
|
6313
6313
|
|
|
6314
|
-
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; });
|
|
6315
6315
|
var Description$1 = function (_a) {
|
|
6316
6316
|
var text = _a.text;
|
|
6317
6317
|
var theme = useTheme();
|
|
6318
6318
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6319
6319
|
};
|
|
6320
|
-
var templateObject_1$
|
|
6320
|
+
var templateObject_1$1t;
|
|
6321
6321
|
|
|
6322
|
-
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"); });
|
|
6323
6323
|
var CloseButton$1 = function (_a) {
|
|
6324
6324
|
var onClick = _a.onClick, size = _a.size;
|
|
6325
6325
|
var theme = useTheme();
|
|
6326
|
-
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));
|
|
6327
6327
|
};
|
|
6328
|
-
var templateObject_1$
|
|
6328
|
+
var templateObject_1$1s;
|
|
6329
6329
|
|
|
6330
|
-
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) {
|
|
6331
6331
|
var backgroundColor = _a.backgroundColor;
|
|
6332
6332
|
return backgroundColor;
|
|
6333
6333
|
}, function (_a) {
|
|
@@ -6342,7 +6342,7 @@ var OfferBanner = function (_a) {
|
|
|
6342
6342
|
var theme = useTheme();
|
|
6343
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));
|
|
6344
6344
|
};
|
|
6345
|
-
var templateObject_1$
|
|
6345
|
+
var templateObject_1$1r;
|
|
6346
6346
|
|
|
6347
6347
|
var CartProductItem = {
|
|
6348
6348
|
Title: Title$5,
|
|
@@ -6352,20 +6352,20 @@ var CartProductItem = {
|
|
|
6352
6352
|
CloseButton: CloseButton$1,
|
|
6353
6353
|
};
|
|
6354
6354
|
|
|
6355
|
-
var Container$
|
|
6356
|
-
var MobileContainer = newStyled(Container$
|
|
6357
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6358
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6359
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6360
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6361
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6362
|
-
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"])));
|
|
6363
6363
|
var ClubPriceLabel = function (_a) {
|
|
6364
6364
|
var clubPrice = _a.clubPrice;
|
|
6365
6365
|
var isMobile = useWindowDimensions().isMobile;
|
|
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$
|
|
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));
|
|
6367
6367
|
};
|
|
6368
|
-
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;
|
|
6369
6369
|
|
|
6370
6370
|
var Spacing = function (_a) {
|
|
6371
6371
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6373,10 +6373,10 @@ var Spacing = function (_a) {
|
|
|
6373
6373
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6374
6374
|
};
|
|
6375
6375
|
|
|
6376
|
-
var Container$
|
|
6377
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6378
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6379
|
-
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) {
|
|
6380
6380
|
var index = _a.index;
|
|
6381
6381
|
return "".concat(6 + 3 * index, "px");
|
|
6382
6382
|
}, function (_a) {
|
|
@@ -6385,15 +6385,15 @@ var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeT
|
|
|
6385
6385
|
});
|
|
6386
6386
|
var StrengthBars = function (_a) {
|
|
6387
6387
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6388
|
-
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));
|
|
6389
6389
|
};
|
|
6390
|
-
var templateObject_1$
|
|
6390
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B;
|
|
6391
6391
|
|
|
6392
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6393
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6394
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6395
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6396
|
-
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"])));
|
|
6397
6397
|
var RegularPriceTag = function () {
|
|
6398
6398
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6399
6399
|
};
|
|
@@ -6442,16 +6442,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6442
6442
|
: exports.ComponentSize.XSmall;
|
|
6443
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));
|
|
6444
6444
|
};
|
|
6445
|
-
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]
|
|
6446
6446
|
? finalPriceArray[0]
|
|
6447
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));
|
|
6448
6448
|
};
|
|
6449
|
-
var templateObject_1$
|
|
6449
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$r;
|
|
6450
6450
|
|
|
6451
|
-
var Container$
|
|
6452
|
-
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;
|
|
6453
6453
|
|
|
6454
|
-
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) {
|
|
6455
6455
|
var marginRight = _a.marginRight;
|
|
6456
6456
|
return marginRight;
|
|
6457
6457
|
});
|
|
@@ -6463,11 +6463,11 @@ var StarList = function (_a) {
|
|
|
6463
6463
|
width: theme.component.stars.element[size].width,
|
|
6464
6464
|
height: theme.component.stars.element[size].height,
|
|
6465
6465
|
};
|
|
6466
|
-
return (jsxRuntime.jsx(Container$
|
|
6466
|
+
return (jsxRuntime.jsx(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6467
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)));
|
|
6468
6468
|
}) }, void 0));
|
|
6469
6469
|
};
|
|
6470
|
-
var templateObject_1$
|
|
6470
|
+
var templateObject_1$1m;
|
|
6471
6471
|
|
|
6472
6472
|
/* base styles & size variants */
|
|
6473
6473
|
var LabelStyles = {
|
|
@@ -6508,8 +6508,8 @@ var LabelStyles = {
|
|
|
6508
6508
|
});
|
|
6509
6509
|
},
|
|
6510
6510
|
};
|
|
6511
|
-
var Container$
|
|
6512
|
-
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;
|
|
6513
6513
|
|
|
6514
6514
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6515
6515
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6529,7 +6529,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6529
6529
|
}),
|
|
6530
6530
|
];
|
|
6531
6531
|
});
|
|
6532
|
-
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; });
|
|
6533
6533
|
var starsNumber = 5;
|
|
6534
6534
|
var Rating = function (_a) {
|
|
6535
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;
|
|
@@ -6550,9 +6550,9 @@ var Rating = function (_a) {
|
|
|
6550
6550
|
href: reviewsContainerId,
|
|
6551
6551
|
}
|
|
6552
6552
|
: {};
|
|
6553
|
-
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));
|
|
6554
6554
|
};
|
|
6555
|
-
var templateObject_1$
|
|
6555
|
+
var templateObject_1$1k;
|
|
6556
6556
|
|
|
6557
6557
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6558
6558
|
var width = _a.width, height = _a.height;
|
|
@@ -6562,10 +6562,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6562
6562
|
height: height,
|
|
6563
6563
|
});
|
|
6564
6564
|
});
|
|
6565
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6566
|
-
var Container$
|
|
6567
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6568
|
-
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; });
|
|
6569
6569
|
var getStylesBySize$9 = function (size) {
|
|
6570
6570
|
switch (size) {
|
|
6571
6571
|
case exports.ComponentSize.Medium:
|
|
@@ -6591,15 +6591,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6591
6591
|
};
|
|
6592
6592
|
}
|
|
6593
6593
|
};
|
|
6594
|
-
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) {
|
|
6595
6595
|
var style = _a.style;
|
|
6596
6596
|
return style.width;
|
|
6597
6597
|
});
|
|
6598
|
-
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) {
|
|
6599
6599
|
var style = _a.style;
|
|
6600
6600
|
return style.width;
|
|
6601
6601
|
});
|
|
6602
|
-
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"])));
|
|
6603
6603
|
var ProductItemMobile = function (_a) {
|
|
6604
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 ? {
|
|
6605
6605
|
display: false,
|
|
@@ -6656,9 +6656,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6656
6656
|
return jsx(Fragment, {}, void 0);
|
|
6657
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));
|
|
6658
6658
|
};
|
|
6659
|
-
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));
|
|
6660
6660
|
};
|
|
6661
|
-
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;
|
|
6662
6662
|
|
|
6663
6663
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6664
6664
|
var width = _a.width, height = _a.height;
|
|
@@ -6668,10 +6668,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6668
6668
|
height: height,
|
|
6669
6669
|
});
|
|
6670
6670
|
});
|
|
6671
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6672
|
-
var Container$
|
|
6673
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6674
|
-
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; });
|
|
6675
6675
|
var getStylesBySize$8 = function (size) {
|
|
6676
6676
|
switch (size) {
|
|
6677
6677
|
case exports.ComponentSize.Medium:
|
|
@@ -6697,16 +6697,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6697
6697
|
};
|
|
6698
6698
|
}
|
|
6699
6699
|
};
|
|
6700
|
-
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) {
|
|
6701
6701
|
var style = _a.style;
|
|
6702
6702
|
return style.width;
|
|
6703
6703
|
});
|
|
6704
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6705
|
-
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) {
|
|
6706
6706
|
var style = _a.style;
|
|
6707
6707
|
return style.width;
|
|
6708
6708
|
});
|
|
6709
|
-
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"])));
|
|
6710
6710
|
var ProductItemTK = function (_a) {
|
|
6711
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 ? {
|
|
6712
6712
|
display: false,
|
|
@@ -6750,26 +6750,26 @@ var ProductItemTK = function (_a) {
|
|
|
6750
6750
|
: undefined }, void 0));
|
|
6751
6751
|
};
|
|
6752
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)); };
|
|
6753
|
-
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 ? (
|
|
6754
6754
|
// @ts-ignore
|
|
6755
6755
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6756
6756
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6757
6757
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6758
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));
|
|
6759
6759
|
};
|
|
6760
|
-
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;
|
|
6761
6761
|
|
|
6762
|
-
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"])));
|
|
6763
6763
|
function withProductGrid(ProductItemComponent, data) {
|
|
6764
6764
|
function WithProductGrid(props) {
|
|
6765
|
-
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));
|
|
6766
6766
|
}
|
|
6767
6767
|
/* istanbul ignore next */
|
|
6768
6768
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6769
6769
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6770
6770
|
return WithProductGrid;
|
|
6771
6771
|
}
|
|
6772
|
-
var templateObject_1$
|
|
6772
|
+
var templateObject_1$1h;
|
|
6773
6773
|
|
|
6774
6774
|
var Collection = {
|
|
6775
6775
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6816,12 +6816,12 @@ var OutOfStock = function (_a) {
|
|
|
6816
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));
|
|
6817
6817
|
};
|
|
6818
6818
|
|
|
6819
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6820
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6821
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6822
|
-
var Span = newStyled.span(templateObject_4$
|
|
6823
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6824
|
-
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) {
|
|
6825
6825
|
var label = _a.label, values = _a.values;
|
|
6826
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));
|
|
6827
6827
|
};
|
|
@@ -6834,27 +6834,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6834
6834
|
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6835
6835
|
};
|
|
6836
6836
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6837
|
-
Label: Label$
|
|
6837
|
+
Label: Label$4,
|
|
6838
6838
|
Option: Option,
|
|
6839
6839
|
OptionsContainer: OptionsContainer,
|
|
6840
6840
|
});
|
|
6841
|
-
var templateObject_1$
|
|
6841
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o;
|
|
6842
6842
|
|
|
6843
|
-
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) {
|
|
6844
6844
|
var borderColor = _a.borderColor;
|
|
6845
6845
|
return borderColor;
|
|
6846
6846
|
}, function (_a) {
|
|
6847
6847
|
var noStock = _a.noStock;
|
|
6848
6848
|
return (noStock ? '0.4' : '1');
|
|
6849
6849
|
});
|
|
6850
|
-
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"])));
|
|
6851
6851
|
var PatternSelector = function (_a) {
|
|
6852
6852
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6853
6853
|
var theme = useTheme();
|
|
6854
6854
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6855
|
-
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));
|
|
6856
6856
|
};
|
|
6857
|
-
var templateObject_1$
|
|
6857
|
+
var templateObject_1$1f, templateObject_2$V;
|
|
6858
6858
|
|
|
6859
6859
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6860
6860
|
if (options == null || options.length === 0) {
|
|
@@ -6913,21 +6913,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6913
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));
|
|
6914
6914
|
};
|
|
6915
6915
|
|
|
6916
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6917
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6918
|
-
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) {
|
|
6919
6919
|
return props.rightToLeft &&
|
|
6920
6920
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6921
6921
|
});
|
|
6922
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6923
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6924
|
-
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; });
|
|
6925
6925
|
var CrossSellCheckbox = function (_a) {
|
|
6926
6926
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6927
6927
|
var theme = useTheme();
|
|
6928
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));
|
|
6929
6929
|
};
|
|
6930
|
-
var templateObject_1$
|
|
6930
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
6931
6931
|
|
|
6932
6932
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6933
6933
|
__proto__: null,
|
|
@@ -6955,7 +6955,7 @@ var sizeMapper = (_a = {},
|
|
|
6955
6955
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6956
6956
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6957
6957
|
_a);
|
|
6958
|
-
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) {
|
|
6959
6959
|
var wide = _a.wide;
|
|
6960
6960
|
return (wide ? '100%' : 'fit-content');
|
|
6961
6961
|
}, function (_a) {
|
|
@@ -6977,11 +6977,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObj
|
|
|
6977
6977
|
var theme = _a.theme;
|
|
6978
6978
|
return theme.colors.text.disabled;
|
|
6979
6979
|
});
|
|
6980
|
-
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) {
|
|
6981
6981
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6982
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 ");
|
|
6983
6983
|
});
|
|
6984
|
-
var templateObject_1$
|
|
6984
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6985
6985
|
|
|
6986
6986
|
var BaseCTA = function (_a) {
|
|
6987
6987
|
var _b, _c, _d;
|
|
@@ -7068,44 +7068,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7068
7068
|
} }), void 0));
|
|
7069
7069
|
};
|
|
7070
7070
|
|
|
7071
|
-
var Container$
|
|
7072
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7073
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7074
|
-
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; });
|
|
7075
7075
|
var Note = function (_a) {
|
|
7076
7076
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7077
7077
|
var theme = useTheme();
|
|
7078
|
-
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));
|
|
7079
7079
|
};
|
|
7080
|
-
var templateObject_1$
|
|
7080
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7081
7081
|
|
|
7082
|
-
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) {
|
|
7083
7083
|
var theme = _a.theme;
|
|
7084
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 ");
|
|
7085
7085
|
});
|
|
7086
|
-
var Line = newStyled.div(templateObject_2$
|
|
7087
|
-
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({
|
|
7088
7088
|
flexDirection: ['column', 'row'],
|
|
7089
7089
|
}));
|
|
7090
|
-
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({
|
|
7091
7091
|
margin: ['0', '0 1.25rem'],
|
|
7092
7092
|
marginBottom: ['1.875rem', '0'],
|
|
7093
7093
|
alignItems: ['center', 'flex-start'],
|
|
7094
7094
|
textAlign: ['center', 'inherit'],
|
|
7095
7095
|
width: ['100%', 'inherit'],
|
|
7096
7096
|
}));
|
|
7097
|
-
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({
|
|
7098
7098
|
marginRight: ['0', '0.438rem'],
|
|
7099
7099
|
marginBottom: ['10px', '0'],
|
|
7100
7100
|
width: ['auto', '1.5rem'],
|
|
7101
7101
|
}));
|
|
7102
|
-
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({
|
|
7103
7103
|
display: ['block', 'flex'],
|
|
7104
7104
|
}), function (_a) {
|
|
7105
7105
|
var theme = _a.theme;
|
|
7106
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 ");
|
|
7107
7107
|
});
|
|
7108
|
-
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) {
|
|
7109
7109
|
var theme = _a.theme;
|
|
7110
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 ");
|
|
7111
7111
|
}, function (_a) {
|
|
@@ -7116,22 +7116,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
7116
7116
|
})
|
|
7117
7117
|
: '';
|
|
7118
7118
|
});
|
|
7119
|
-
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; });
|
|
7120
7120
|
var DeliveryDetails = function (_a) {
|
|
7121
7121
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7122
7122
|
var theme = useTheme();
|
|
7123
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));
|
|
7124
7124
|
};
|
|
7125
|
-
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;
|
|
7126
7126
|
|
|
7127
|
-
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) {
|
|
7128
7128
|
var top = _a.top;
|
|
7129
7129
|
return top;
|
|
7130
7130
|
}, function (_a) {
|
|
7131
7131
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7132
7132
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7133
7133
|
});
|
|
7134
|
-
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) {
|
|
7135
7135
|
var height = _a.height;
|
|
7136
7136
|
return height;
|
|
7137
7137
|
}, function (_a) {
|
|
@@ -7178,20 +7178,20 @@ var Drawer = function (_a) {
|
|
|
7178
7178
|
}, [isOpen, onClose, onOpen]);
|
|
7179
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;
|
|
7180
7180
|
};
|
|
7181
|
-
var templateObject_1$
|
|
7181
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7182
7182
|
|
|
7183
7183
|
var TooltipArrow = function (_a) {
|
|
7184
7184
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7185
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));
|
|
7186
7186
|
};
|
|
7187
7187
|
|
|
7188
|
-
var List = newStyled.ul(templateObject_1$
|
|
7189
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7190
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7191
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7192
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7193
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7194
|
-
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;
|
|
7195
7195
|
|
|
7196
7196
|
var DropdownListIcons = function (_a) {
|
|
7197
7197
|
var items = _a.items;
|
|
@@ -7204,13 +7204,13 @@ var Dropdown = function (_a) {
|
|
|
7204
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));
|
|
7205
7205
|
};
|
|
7206
7206
|
|
|
7207
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7208
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7209
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7210
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7211
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7212
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7213
|
-
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;
|
|
7214
7214
|
|
|
7215
7215
|
var SizeDropdown = function (_a) {
|
|
7216
7216
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7233,10 +7233,10 @@ var SizeDropdown = function (_a) {
|
|
|
7233
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));
|
|
7234
7234
|
};
|
|
7235
7235
|
|
|
7236
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7237
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7238
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7239
|
-
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"])));
|
|
7240
7240
|
var DropdownDialog = function (_a) {
|
|
7241
7241
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7242
7242
|
var theme = useTheme$1();
|
|
@@ -7245,7 +7245,7 @@ var DropdownDialog = function (_a) {
|
|
|
7245
7245
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7246
7246
|
}) }), void 0) }), void 0));
|
|
7247
7247
|
};
|
|
7248
|
-
var templateObject_1$
|
|
7248
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r;
|
|
7249
7249
|
|
|
7250
7250
|
function FilteringDropdown(_a) {
|
|
7251
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;
|
|
@@ -7278,29 +7278,29 @@ function FilteringDropdown(_a) {
|
|
|
7278
7278
|
}) }, void 0)] }), void 0));
|
|
7279
7279
|
}
|
|
7280
7280
|
|
|
7281
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7282
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7283
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7284
|
-
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'); });
|
|
7285
7285
|
var Accordion = function (_a) {
|
|
7286
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;
|
|
7287
7287
|
var theme = useTheme();
|
|
7288
7288
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7289
|
-
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));
|
|
7290
7290
|
};
|
|
7291
|
-
var templateObject_1$
|
|
7292
|
-
|
|
7293
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7294
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7295
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7296
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7297
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7298
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7299
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7300
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7301
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7302
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7303
|
-
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;
|
|
7304
7304
|
|
|
7305
7305
|
var getStylesBySize$7 = function (size, theme) {
|
|
7306
7306
|
switch (size) {
|
|
@@ -7365,9 +7365,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7365
7365
|
} }), id: id }, void 0));
|
|
7366
7366
|
};
|
|
7367
7367
|
|
|
7368
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7369
|
-
var LI = newStyled.li(templateObject_2$
|
|
7370
|
-
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"])));
|
|
7371
7371
|
var Tags = function (_a) {
|
|
7372
7372
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7373
7373
|
var theme = useTheme();
|
|
@@ -7375,7 +7375,7 @@ var Tags = function (_a) {
|
|
|
7375
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));
|
|
7376
7376
|
}) }), void 0));
|
|
7377
7377
|
};
|
|
7378
|
-
var templateObject_1$
|
|
7378
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z;
|
|
7379
7379
|
|
|
7380
7380
|
var Filters = function (_a) {
|
|
7381
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;
|
|
@@ -7511,8 +7511,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7511
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));
|
|
7512
7512
|
};
|
|
7513
7513
|
|
|
7514
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7515
|
-
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"])));
|
|
7516
7516
|
var FitGuarantee = function (_a) {
|
|
7517
7517
|
var _b;
|
|
7518
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;
|
|
@@ -7523,17 +7523,17 @@ var FitGuarantee = function (_a) {
|
|
|
7523
7523
|
console.error('Icon', iconName, 'not found');
|
|
7524
7524
|
return null;
|
|
7525
7525
|
}
|
|
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$
|
|
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: {
|
|
7527
7527
|
margin: '0.1rem 0',
|
|
7528
7528
|
width: '100%',
|
|
7529
7529
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7530
7530
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7531
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));
|
|
7532
7532
|
};
|
|
7533
|
-
var templateObject_1$
|
|
7533
|
+
var templateObject_1$13, templateObject_2$J;
|
|
7534
7534
|
|
|
7535
|
-
var Container$
|
|
7536
|
-
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; });
|
|
7537
7537
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7538
7538
|
border: 'none',
|
|
7539
7539
|
background: 'transparent',
|
|
@@ -7546,9 +7546,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7546
7546
|
var FitPredictor = function (_a) {
|
|
7547
7547
|
var onClick = _a.onClick;
|
|
7548
7548
|
var theme = useTheme();
|
|
7549
|
-
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));
|
|
7550
7550
|
};
|
|
7551
|
-
var templateObject_1$
|
|
7551
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7552
7552
|
|
|
7553
7553
|
var Button$7 = newStyled.button(function () { return ({
|
|
7554
7554
|
background: 'transparent',
|
|
@@ -11792,14 +11792,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11792
11792
|
return Slider;
|
|
11793
11793
|
}(React__default["default"].Component);
|
|
11794
11794
|
|
|
11795
|
-
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) {
|
|
11796
11796
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11797
11797
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11798
11798
|
}, function (_a) {
|
|
11799
11799
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11800
11800
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11801
11801
|
});
|
|
11802
|
-
var templateObject_1$
|
|
11802
|
+
var templateObject_1$11;
|
|
11803
11803
|
|
|
11804
11804
|
var getStylesBySize$6 = function (size) {
|
|
11805
11805
|
// rem units
|
|
@@ -11858,7 +11858,7 @@ var SliderNavigation = function (_a) {
|
|
|
11858
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));
|
|
11859
11859
|
};
|
|
11860
11860
|
|
|
11861
|
-
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) {
|
|
11862
11862
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11863
11863
|
return borderRadiusVariant &&
|
|
11864
11864
|
"\n border-radius: 20px;\n ";
|
|
@@ -11868,7 +11868,7 @@ var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTe
|
|
|
11868
11868
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11869
11869
|
: 'inherit';
|
|
11870
11870
|
});
|
|
11871
|
-
var templateObject_1
|
|
11871
|
+
var templateObject_1$10;
|
|
11872
11872
|
|
|
11873
11873
|
var ImageSmallPreview = function (_a) {
|
|
11874
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;
|
|
@@ -11876,9 +11876,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11876
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));
|
|
11877
11877
|
};
|
|
11878
11878
|
|
|
11879
|
-
var horizontalStyles = css(templateObject_1
|
|
11880
|
-
var verticalStyles = css(templateObject_2$
|
|
11881
|
-
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) {
|
|
11882
11882
|
var position = _a.position;
|
|
11883
11883
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11884
11884
|
}, function (_a) {
|
|
@@ -11886,12 +11886,12 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11886
11886
|
return hasOverflowArrows &&
|
|
11887
11887
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11888
11888
|
});
|
|
11889
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11890
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11891
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11892
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11893
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11894
|
-
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;
|
|
11895
11895
|
|
|
11896
11896
|
var ImagePreviewList = function (_a) {
|
|
11897
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;
|
|
@@ -11903,7 +11903,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11903
11903
|
var element = document.querySelector(".imageListContainer");
|
|
11904
11904
|
element.scrollBy(0, 200);
|
|
11905
11905
|
};
|
|
11906
|
-
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: {
|
|
11907
11907
|
arrowWidth: 0.75,
|
|
11908
11908
|
arrowHeight: 1.25,
|
|
11909
11909
|
arrowPadding: 1.625,
|
|
@@ -13501,21 +13501,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13501
13501
|
afterZoomOut: PropTypes.func
|
|
13502
13502
|
} : {};
|
|
13503
13503
|
|
|
13504
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13505
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13506
|
-
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;
|
|
13507
13507
|
|
|
13508
13508
|
var ProgressBar$1 = function (_a) {
|
|
13509
13509
|
var progress = _a.progress, hide = _a.hide;
|
|
13510
13510
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13511
13511
|
};
|
|
13512
13512
|
|
|
13513
|
-
var Container$
|
|
13514
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13515
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13516
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13517
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13518
|
-
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;
|
|
13519
13519
|
|
|
13520
13520
|
var Video$1 = function (_a) {
|
|
13521
13521
|
var _b, _c, _d, _e;
|
|
@@ -13554,41 +13554,41 @@ var Video$1 = function (_a) {
|
|
|
13554
13554
|
setVideoProgress(videoRef.current.currentTime);
|
|
13555
13555
|
}
|
|
13556
13556
|
};
|
|
13557
|
-
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));
|
|
13558
13558
|
};
|
|
13559
13559
|
|
|
13560
|
-
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) {
|
|
13561
13561
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13562
13562
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13563
13563
|
});
|
|
13564
|
-
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) {
|
|
13565
13565
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13566
13566
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13567
13567
|
}, function (_a) {
|
|
13568
13568
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13569
13569
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13570
13570
|
});
|
|
13571
|
-
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) {
|
|
13572
13572
|
var isCTAHidden = _a.isCTAHidden;
|
|
13573
13573
|
return (isCTAHidden ? '60px' : '120px');
|
|
13574
13574
|
});
|
|
13575
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13576
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13577
|
-
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;
|
|
13578
13578
|
|
|
13579
13579
|
var ImageProductSlide$1 = function (_a) {
|
|
13580
13580
|
var _b;
|
|
13581
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;
|
|
13582
13582
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13583
13583
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13584
|
-
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: {
|
|
13585
13585
|
alt: content.alt,
|
|
13586
13586
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13587
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));
|
|
13588
13588
|
};
|
|
13589
13589
|
|
|
13590
|
-
var Container$
|
|
13591
|
-
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;
|
|
13592
13592
|
|
|
13593
13593
|
var getInitialIndex = function (images, selectedValue) {
|
|
13594
13594
|
if (selectedValue) {
|
|
@@ -13614,7 +13614,7 @@ var ProductGallery = function (_a) {
|
|
|
13614
13614
|
setActiveIndex(index);
|
|
13615
13615
|
};
|
|
13616
13616
|
var selectedImage = images[activeIndex];
|
|
13617
|
-
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));
|
|
13618
13618
|
};
|
|
13619
13619
|
|
|
13620
13620
|
var getStylesBySize$5 = function (size) {
|
|
@@ -13636,7 +13636,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13636
13636
|
};
|
|
13637
13637
|
}
|
|
13638
13638
|
};
|
|
13639
|
-
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) {
|
|
13640
13640
|
var backgroundColor = _a.backgroundColor;
|
|
13641
13641
|
return backgroundColor;
|
|
13642
13642
|
}, function (_a) {
|
|
@@ -13664,11 +13664,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13664
13664
|
var IconButton = function (_a) {
|
|
13665
13665
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13666
13666
|
var theme = useTheme();
|
|
13667
|
-
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));
|
|
13668
13668
|
};
|
|
13669
|
-
var templateObject_1$
|
|
13669
|
+
var templateObject_1$W;
|
|
13670
13670
|
|
|
13671
|
-
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; });
|
|
13672
13672
|
var AmazonButton = function (_a) {
|
|
13673
13673
|
var onClick = _a.onClick;
|
|
13674
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));
|
|
@@ -13677,9 +13677,9 @@ var PaypalButton = function (_a) {
|
|
|
13677
13677
|
var onClick = _a.onClick;
|
|
13678
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));
|
|
13679
13679
|
};
|
|
13680
|
-
var templateObject_1$
|
|
13680
|
+
var templateObject_1$V;
|
|
13681
13681
|
|
|
13682
|
-
var Container$
|
|
13682
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13683
13683
|
height: 'auto',
|
|
13684
13684
|
textAlign: 'center',
|
|
13685
13685
|
justifyContent: 'center',
|
|
@@ -13729,12 +13729,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13729
13729
|
textAlign: 'center',
|
|
13730
13730
|
lineHeight: '18px',
|
|
13731
13731
|
};
|
|
13732
|
-
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));
|
|
13733
13733
|
};
|
|
13734
13734
|
|
|
13735
|
-
var Container$
|
|
13736
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13737
|
-
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) {
|
|
13738
13738
|
var titlePosition = _a.titlePosition;
|
|
13739
13739
|
return titlePosition == 'center' &&
|
|
13740
13740
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13742,24 +13742,24 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13742
13742
|
var ImageCardWithDescription = function (_a) {
|
|
13743
13743
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13744
13744
|
var isMobile = useWindowDimensions().isMobile;
|
|
13745
|
-
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));
|
|
13746
13746
|
};
|
|
13747
|
-
var templateObject_1$
|
|
13747
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$v;
|
|
13748
13748
|
|
|
13749
|
-
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) {
|
|
13750
13750
|
var color = _a.color;
|
|
13751
13751
|
return color;
|
|
13752
13752
|
});
|
|
13753
|
-
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) {
|
|
13754
13754
|
var color = _a.color;
|
|
13755
13755
|
return color;
|
|
13756
13756
|
});
|
|
13757
13757
|
var InputLabel = function (_a) {
|
|
13758
13758
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13759
13759
|
var theme = useTheme();
|
|
13760
|
-
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));
|
|
13761
13761
|
};
|
|
13762
|
-
var templateObject_1$
|
|
13762
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13763
13763
|
|
|
13764
13764
|
var containerByStatus = function (theme, status) {
|
|
13765
13765
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13768,12 +13768,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13768
13768
|
return theme.colors.semantic.urgent.color;
|
|
13769
13769
|
return '';
|
|
13770
13770
|
};
|
|
13771
|
-
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) {
|
|
13772
13772
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13773
13773
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13774
13774
|
});
|
|
13775
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13776
|
-
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) {
|
|
13777
13777
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13778
13778
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13779
13779
|
}, function (_a) {
|
|
@@ -13828,11 +13828,11 @@ var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __
|
|
|
13828
13828
|
return hasValue &&
|
|
13829
13829
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13830
13830
|
});
|
|
13831
|
-
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) {
|
|
13832
13832
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13833
13833
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13834
13834
|
});
|
|
13835
|
-
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) {
|
|
13836
13836
|
var theme = _a.theme;
|
|
13837
13837
|
return theme.component.input.placeholderColor;
|
|
13838
13838
|
}, function (_a) {
|
|
@@ -13845,8 +13845,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13845
13845
|
var theme = _a.theme;
|
|
13846
13846
|
return theme.component.input.lineHeight;
|
|
13847
13847
|
});
|
|
13848
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13849
|
-
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;
|
|
13850
13850
|
|
|
13851
13851
|
var BaseInput = function (_a) {
|
|
13852
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"]);
|
|
@@ -13869,7 +13869,7 @@ var BaseInput = function (_a) {
|
|
|
13869
13869
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13870
13870
|
}, [status]);
|
|
13871
13871
|
var hasValue = Boolean(value);
|
|
13872
|
-
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) {
|
|
13873
13873
|
onChange(event.target.value, event);
|
|
13874
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 () {
|
|
13875
13875
|
onChange('', { target: { value: '' } });
|
|
@@ -13890,11 +13890,11 @@ var Button$5 = function (_a) {
|
|
|
13890
13890
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13891
13891
|
};
|
|
13892
13892
|
|
|
13893
|
-
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) {
|
|
13894
13894
|
var theme = _a.theme;
|
|
13895
13895
|
return theme.component.inputCustom.input.borderRadius;
|
|
13896
13896
|
});
|
|
13897
|
-
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) {
|
|
13898
13898
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13899
13899
|
return defaultRounded
|
|
13900
13900
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13909,23 +13909,23 @@ var Custom = function (_a) {
|
|
|
13909
13909
|
text: text,
|
|
13910
13910
|
disabled: rest.disabled,
|
|
13911
13911
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13912
|
-
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));
|
|
13913
13913
|
};
|
|
13914
|
-
var templateObject_1$
|
|
13914
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13915
13915
|
|
|
13916
|
-
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) {
|
|
13917
13917
|
var size = _a.size;
|
|
13918
13918
|
return (size === 'small' ? '36px' : '');
|
|
13919
13919
|
});
|
|
13920
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13921
|
-
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"])));
|
|
13922
13922
|
var Success = function (_a) {
|
|
13923
13923
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13924
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));
|
|
13925
13925
|
};
|
|
13926
|
-
var templateObject_1$
|
|
13926
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t;
|
|
13927
13927
|
|
|
13928
|
-
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) {
|
|
13929
13929
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13930
13930
|
return status === exports.InputValidationType.Empty &&
|
|
13931
13931
|
type === 'primary' &&
|
|
@@ -13942,16 +13942,16 @@ var BasePlusButton = function (_a) {
|
|
|
13942
13942
|
}
|
|
13943
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));
|
|
13944
13944
|
};
|
|
13945
|
-
var templateObject_1$
|
|
13945
|
+
var templateObject_1$P;
|
|
13946
13946
|
|
|
13947
|
-
var Container$
|
|
13948
|
-
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"])));
|
|
13949
13949
|
var BasePlusIcon = function (_a) {
|
|
13950
13950
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13951
13951
|
var theme = useTheme();
|
|
13952
|
-
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));
|
|
13953
13953
|
};
|
|
13954
|
-
var templateObject_1$
|
|
13954
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13955
13955
|
|
|
13956
13956
|
var Input$3 = {
|
|
13957
13957
|
Simple: BaseInput,
|
|
@@ -13996,7 +13996,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13996
13996
|
}, [preventTouch, ref, touchStart]);
|
|
13997
13997
|
}
|
|
13998
13998
|
|
|
13999
|
-
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) {
|
|
14000
14000
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14001
14001
|
return borderRadiusVariant &&
|
|
14002
14002
|
"\n border-radius: 40px;\n ";
|
|
@@ -14005,11 +14005,11 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
14005
14005
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14006
14006
|
});
|
|
14007
14007
|
// max-height: 31.875rem;
|
|
14008
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14009
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14010
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_4$
|
|
14011
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14012
|
-
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"])));
|
|
14013
14013
|
var settings$1 = {
|
|
14014
14014
|
dots: true,
|
|
14015
14015
|
infinite: false,
|
|
@@ -14054,7 +14054,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14054
14054
|
}
|
|
14055
14055
|
}
|
|
14056
14056
|
}, [contents, selectedValue]);
|
|
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$
|
|
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) {
|
|
14058
14058
|
var _a;
|
|
14059
14059
|
var activeSlide = contents[e];
|
|
14060
14060
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14068,16 +14068,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14068
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));
|
|
14069
14069
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14070
14070
|
};
|
|
14071
|
-
var templateObject_1$
|
|
14071
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
14072
14072
|
|
|
14073
|
-
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"])));
|
|
14074
14074
|
var ProductGalleryMobile = function (_a) {
|
|
14075
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;
|
|
14076
14076
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14077
14077
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14078
|
-
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));
|
|
14079
14079
|
};
|
|
14080
|
-
var templateObject_1$
|
|
14080
|
+
var templateObject_1$M;
|
|
14081
14081
|
|
|
14082
14082
|
function _extends() {
|
|
14083
14083
|
_extends = Object.assign || function (target) {
|
|
@@ -14344,27 +14344,27 @@ function useSwipeable(options) {
|
|
|
14344
14344
|
return handlers;
|
|
14345
14345
|
}
|
|
14346
14346
|
|
|
14347
|
-
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"])));
|
|
14348
14348
|
var ArrowButton = function (_a) {
|
|
14349
14349
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14350
14350
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14351
14351
|
};
|
|
14352
|
-
var templateObject_1$
|
|
14352
|
+
var templateObject_1$L;
|
|
14353
14353
|
|
|
14354
|
-
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"])));
|
|
14355
14355
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14356
14356
|
var SlideDots = function (_a) {
|
|
14357
14357
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14358
14358
|
var theme = useTheme();
|
|
14359
|
-
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
|
|
14360
14360
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14361
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));
|
|
14362
14362
|
};
|
|
14363
|
-
var templateObject_1$
|
|
14363
|
+
var templateObject_1$K;
|
|
14364
14364
|
|
|
14365
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14366
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14367
|
-
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"])));
|
|
14368
14368
|
var SlideNavigation = function (_a) {
|
|
14369
14369
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14370
14370
|
var theme = useTheme();
|
|
@@ -14376,23 +14376,23 @@ var SlideNavigation = function (_a) {
|
|
|
14376
14376
|
onNavigate(selectedIndex + 1);
|
|
14377
14377
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14378
14378
|
};
|
|
14379
|
-
var templateObject_1$
|
|
14379
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$r;
|
|
14380
14380
|
|
|
14381
|
-
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) {
|
|
14382
14382
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14383
14383
|
return borderRadiusVariant &&
|
|
14384
14384
|
"\n border-radius: 40px;\n ";
|
|
14385
14385
|
});
|
|
14386
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14387
|
-
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"])));
|
|
14388
14388
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14389
14389
|
var _b, _c;
|
|
14390
14390
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14391
|
-
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));
|
|
14392
14392
|
});
|
|
14393
|
-
var templateObject_1$
|
|
14393
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14394
14394
|
|
|
14395
|
-
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"])));
|
|
14396
14396
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14397
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;
|
|
14398
14398
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14414,11 +14414,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14414
14414
|
React$2.useEffect(function () {
|
|
14415
14415
|
setSelectedImage(images[index]);
|
|
14416
14416
|
}, [index, images]);
|
|
14417
|
-
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));
|
|
14418
14418
|
};
|
|
14419
|
-
var templateObject_1$
|
|
14419
|
+
var templateObject_1$H;
|
|
14420
14420
|
|
|
14421
|
-
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) {
|
|
14422
14422
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14423
14423
|
return borderRadiusVariant &&
|
|
14424
14424
|
"\n border-radius: 40px;\n ";
|
|
@@ -14427,14 +14427,14 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14427
14427
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14428
14428
|
});
|
|
14429
14429
|
// max-height: 31.875rem;
|
|
14430
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14431
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
14432
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14433
|
-
var Video = newStyled.div(templateObject_5$
|
|
14434
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14435
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14436
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14437
|
-
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"])));
|
|
14438
14438
|
var settings = {
|
|
14439
14439
|
dots: true,
|
|
14440
14440
|
infinite: false,
|
|
@@ -14479,7 +14479,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14479
14479
|
}
|
|
14480
14480
|
}
|
|
14481
14481
|
}, [images, selectedValue]);
|
|
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$
|
|
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) {
|
|
14483
14483
|
var _a;
|
|
14484
14484
|
var activeSlide = images[e];
|
|
14485
14485
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14492,14 +14492,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14492
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));
|
|
14493
14493
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14494
14494
|
};
|
|
14495
|
-
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;
|
|
14496
14496
|
|
|
14497
|
-
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"])));
|
|
14498
14498
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14499
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;
|
|
14500
|
-
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));
|
|
14501
14501
|
};
|
|
14502
|
-
var templateObject_1$
|
|
14502
|
+
var templateObject_1$F;
|
|
14503
14503
|
|
|
14504
14504
|
var __defProp$1 = Object.defineProperty;
|
|
14505
14505
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14632,17 +14632,17 @@ var Portal = function (_a) {
|
|
|
14632
14632
|
var visibleStyle = function (_a) {
|
|
14633
14633
|
var opened = _a.opened;
|
|
14634
14634
|
return opened
|
|
14635
|
-
? 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 "])));
|
|
14636
14636
|
};
|
|
14637
14637
|
var transformStyle = function (_a) {
|
|
14638
14638
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14639
14639
|
return opened
|
|
14640
|
-
? 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%)');
|
|
14641
14641
|
};
|
|
14642
|
-
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({
|
|
14643
14643
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14644
14644
|
}), visibleStyle, transformStyle);
|
|
14645
|
-
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);
|
|
14646
14646
|
var Modal = function (_a) {
|
|
14647
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;
|
|
14648
14648
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14652,7 +14652,7 @@ var Modal = function (_a) {
|
|
|
14652
14652
|
}
|
|
14653
14653
|
close();
|
|
14654
14654
|
};
|
|
14655
|
-
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));
|
|
14656
14656
|
};
|
|
14657
14657
|
var modalEvent = function (id, detail) {
|
|
14658
14658
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14680,9 +14680,9 @@ var useModal = function (id) {
|
|
|
14680
14680
|
close: close,
|
|
14681
14681
|
}); }, [close, open, opened]);
|
|
14682
14682
|
};
|
|
14683
|
-
var templateObject_1$
|
|
14683
|
+
var templateObject_1$E, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
14684
14684
|
|
|
14685
|
-
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) {
|
|
14686
14686
|
var height = _a.height;
|
|
14687
14687
|
return height || '0.5rem';
|
|
14688
14688
|
}, function (_a) {
|
|
@@ -14721,7 +14721,7 @@ var BarContainer = newStyled.div({
|
|
|
14721
14721
|
padding: '0 16px',
|
|
14722
14722
|
position: 'relative',
|
|
14723
14723
|
});
|
|
14724
|
-
var Container$
|
|
14724
|
+
var Container$u = newStyled.div(function (_a) {
|
|
14725
14725
|
var backgroundColor = _a.backgroundColor;
|
|
14726
14726
|
return ({
|
|
14727
14727
|
width: '475px',
|
|
@@ -14752,21 +14752,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14752
14752
|
var theme = useTheme();
|
|
14753
14753
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14754
14754
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14755
|
-
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));
|
|
14756
14756
|
};
|
|
14757
|
-
var templateObject_1$
|
|
14757
|
+
var templateObject_1$D;
|
|
14758
14758
|
|
|
14759
|
-
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) {
|
|
14760
14760
|
var theme = _a.theme;
|
|
14761
14761
|
return theme.component.orderBar.backgroundColor;
|
|
14762
14762
|
});
|
|
14763
|
-
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; });
|
|
14764
14764
|
var OrderBar = function (_a) {
|
|
14765
14765
|
var message = _a.message, color = _a.color;
|
|
14766
14766
|
var theme = useTheme();
|
|
14767
|
-
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));
|
|
14768
14768
|
};
|
|
14769
|
-
var templateObject_1$
|
|
14769
|
+
var templateObject_1$C, templateObject_2$s;
|
|
14770
14770
|
|
|
14771
14771
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14772
14772
|
background: props.bgColor,
|
|
@@ -14790,15 +14790,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14790
14790
|
justifyContent: 'center',
|
|
14791
14791
|
gap: '10px',
|
|
14792
14792
|
});
|
|
14793
|
-
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) {
|
|
14794
14794
|
var bgColor = _a.bgColor;
|
|
14795
14795
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14796
14796
|
}, function (_a) {
|
|
14797
14797
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14798
14798
|
return width;
|
|
14799
14799
|
});
|
|
14800
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14801
|
-
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;
|
|
14802
14802
|
|
|
14803
14803
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14804
14804
|
var background = _a.background, width = _a.width;
|
|
@@ -18618,17 +18618,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18618
18618
|
HTMLReactParser$1.attributesToProps;
|
|
18619
18619
|
HTMLReactParser$1.Element;
|
|
18620
18620
|
|
|
18621
|
-
var Container$
|
|
18622
|
-
var Card = newStyled.div(templateObject_2$
|
|
18623
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18624
|
-
var Label$
|
|
18625
|
-
var Check = newStyled.div(templateObject_5$
|
|
18626
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18627
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18628
|
-
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"])));
|
|
18629
18629
|
var PackSelector = function (_a) {
|
|
18630
18630
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18631
|
-
return (jsxRuntime.jsx(Container$
|
|
18631
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18632
18632
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18633
18633
|
}) }), void 0));
|
|
18634
18634
|
};
|
|
@@ -18642,7 +18642,7 @@ var PackCard = function (_a) {
|
|
|
18642
18642
|
.then(function (icon) { return setIcon(icon); })
|
|
18643
18643
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18644
18644
|
}, [pack.meta.icon]);
|
|
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$
|
|
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: {
|
|
18646
18646
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18647
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, {
|
|
18648
18648
|
locale: 'en-US',
|
|
@@ -18655,14 +18655,14 @@ var PackCard = function (_a) {
|
|
|
18655
18655
|
currency: currencyCode || 'USD',
|
|
18656
18656
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18657
18657
|
};
|
|
18658
|
-
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;
|
|
18659
18659
|
|
|
18660
|
-
var Container$
|
|
18661
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18662
|
-
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({
|
|
18663
18663
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18664
18664
|
}));
|
|
18665
|
-
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) {
|
|
18666
18666
|
var bold = _a.bold;
|
|
18667
18667
|
return (bold ? '700' : '500');
|
|
18668
18668
|
}, function (_a) {
|
|
@@ -18679,7 +18679,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18679
18679
|
var background = _a.background;
|
|
18680
18680
|
return background || 'unset';
|
|
18681
18681
|
});
|
|
18682
|
-
var templateObject_1$
|
|
18682
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g;
|
|
18683
18683
|
|
|
18684
18684
|
var Pagination = function (_a) {
|
|
18685
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;
|
|
@@ -18725,7 +18725,7 @@ var Pagination = function (_a) {
|
|
|
18725
18725
|
}
|
|
18726
18726
|
return pages;
|
|
18727
18727
|
}, [from, page, showReducedPages, to]);
|
|
18728
|
-
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));
|
|
18729
18729
|
};
|
|
18730
18730
|
|
|
18731
18731
|
var PaginatorBlog = function (_a) {
|
|
@@ -18739,12 +18739,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18739
18739
|
setPage(page);
|
|
18740
18740
|
onChange(page);
|
|
18741
18741
|
};
|
|
18742
|
-
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
|
|
18743
18743
|
? theme.colors.shades['white'].color
|
|
18744
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));
|
|
18745
18745
|
};
|
|
18746
18746
|
|
|
18747
|
-
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) {
|
|
18748
18748
|
var width = _a.width;
|
|
18749
18749
|
return width;
|
|
18750
18750
|
}, function (_a) {
|
|
@@ -18760,14 +18760,14 @@ var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
18760
18760
|
var PaymentMethod = function (_a) {
|
|
18761
18761
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18762
18762
|
var theme = useTheme();
|
|
18763
|
-
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));
|
|
18764
18764
|
};
|
|
18765
|
-
var templateObject_1$
|
|
18765
|
+
var templateObject_1$y;
|
|
18766
18766
|
|
|
18767
|
-
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"])));
|
|
18768
18768
|
var IMAGE_WIDTH = '63px';
|
|
18769
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18770
|
-
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({
|
|
18771
18771
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18772
18772
|
}), IMAGE_WIDTH);
|
|
18773
18773
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18790,7 +18790,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18790
18790
|
margin: '0.063rem 0',
|
|
18791
18791
|
});
|
|
18792
18792
|
});
|
|
18793
|
-
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) {
|
|
18794
18794
|
var withTag = _a.withTag; _a.theme;
|
|
18795
18795
|
return withTag
|
|
18796
18796
|
? mediaQueries({
|
|
@@ -18799,14 +18799,14 @@ var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
18799
18799
|
})
|
|
18800
18800
|
: 'justify-content: end';
|
|
18801
18801
|
});
|
|
18802
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18803
|
-
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"])));
|
|
18804
18804
|
var SimpleOrderItem = function (_a) {
|
|
18805
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;
|
|
18806
18806
|
var theme = useTheme();
|
|
18807
|
-
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));
|
|
18808
18808
|
};
|
|
18809
|
-
var templateObject_1$
|
|
18809
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
18810
18810
|
|
|
18811
18811
|
var P$1 = newStyled.p(function (_a) {
|
|
18812
18812
|
var color = _a.color;
|
|
@@ -18820,7 +18820,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18820
18820
|
margin: '0.938rem 4.188rem',
|
|
18821
18821
|
});
|
|
18822
18822
|
});
|
|
18823
|
-
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) {
|
|
18824
18824
|
var height = _a.height;
|
|
18825
18825
|
return height || '0.5rem';
|
|
18826
18826
|
}, function (_a) {
|
|
@@ -18849,7 +18849,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18849
18849
|
position: 'absolute',
|
|
18850
18850
|
});
|
|
18851
18851
|
});
|
|
18852
|
-
var Container$
|
|
18852
|
+
var Container$o = newStyled.div(function (_a) {
|
|
18853
18853
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18854
18854
|
return ({
|
|
18855
18855
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18863,14 +18863,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18863
18863
|
var ProgressBar = function (_a) {
|
|
18864
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;
|
|
18865
18865
|
var theme = useTheme();
|
|
18866
|
-
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));
|
|
18867
18867
|
};
|
|
18868
|
-
var templateObject_1$
|
|
18868
|
+
var templateObject_1$w;
|
|
18869
18869
|
|
|
18870
|
-
var Container$
|
|
18871
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18872
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18873
|
-
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)'; });
|
|
18874
18874
|
var QuantityPicker = function (_a) {
|
|
18875
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;
|
|
18876
18876
|
var theme = useTheme();
|
|
@@ -18893,9 +18893,9 @@ var QuantityPicker = function (_a) {
|
|
|
18893
18893
|
return clamp(value);
|
|
18894
18894
|
});
|
|
18895
18895
|
}, [value, clamp]);
|
|
18896
|
-
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));
|
|
18897
18897
|
};
|
|
18898
|
-
var templateObject_1$
|
|
18898
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18899
18899
|
|
|
18900
18900
|
/* base styles & size variants */
|
|
18901
18901
|
var CustomRadioStyles$1 = {
|
|
@@ -18964,9 +18964,9 @@ var ContainerStyles$1 = {
|
|
|
18964
18964
|
},
|
|
18965
18965
|
};
|
|
18966
18966
|
|
|
18967
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18968
|
-
var Container$
|
|
18969
|
-
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) {
|
|
18970
18970
|
var disabled = _a.disabled;
|
|
18971
18971
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18972
18972
|
});
|
|
@@ -18974,7 +18974,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18974
18974
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18975
18975
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18976
18976
|
]; });
|
|
18977
|
-
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"])));
|
|
18978
18978
|
var RadioPrimary = function (_a) {
|
|
18979
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;
|
|
18980
18980
|
var theme = useTheme();
|
|
@@ -18982,9 +18982,9 @@ var RadioPrimary = function (_a) {
|
|
|
18982
18982
|
var value = event.currentTarget.value;
|
|
18983
18983
|
onChange({ value: value, label: label });
|
|
18984
18984
|
};
|
|
18985
|
-
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));
|
|
18986
18986
|
};
|
|
18987
|
-
var templateObject_1$
|
|
18987
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j;
|
|
18988
18988
|
|
|
18989
18989
|
var RadioGroupInput = function (_a) {
|
|
18990
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;
|
|
@@ -19063,9 +19063,9 @@ var ContainerStyles = {
|
|
|
19063
19063
|
},
|
|
19064
19064
|
};
|
|
19065
19065
|
|
|
19066
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19067
|
-
var Container$
|
|
19068
|
-
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) {
|
|
19069
19069
|
var disabled = _a.disabled;
|
|
19070
19070
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19071
19071
|
});
|
|
@@ -19073,7 +19073,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19073
19073
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19074
19074
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19075
19075
|
]; });
|
|
19076
|
-
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) {
|
|
19077
19077
|
var theme = _a.theme;
|
|
19078
19078
|
return theme.component.radio.textSize;
|
|
19079
19079
|
}, function (_a) {
|
|
@@ -19087,9 +19087,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19087
19087
|
var value = event.currentTarget.value;
|
|
19088
19088
|
onChange({ value: value, label: label });
|
|
19089
19089
|
};
|
|
19090
|
-
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));
|
|
19091
19091
|
};
|
|
19092
|
-
var templateObject_1$
|
|
19092
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
19093
19093
|
|
|
19094
19094
|
var ClubRadioGroupInput = function (_a) {
|
|
19095
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;
|
|
@@ -19117,17 +19117,17 @@ function formatDate(date, format) {
|
|
|
19117
19117
|
}
|
|
19118
19118
|
}
|
|
19119
19119
|
|
|
19120
|
-
var Container$
|
|
19121
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19122
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19123
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19124
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19125
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19126
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19127
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19128
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19129
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
19130
|
-
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"])));
|
|
19131
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"])));
|
|
19132
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"])));
|
|
19133
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"])));
|
|
@@ -19155,24 +19155,24 @@ var Review$1 = function (_a) {
|
|
|
19155
19155
|
}
|
|
19156
19156
|
}
|
|
19157
19157
|
}, [opened]);
|
|
19158
|
-
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 &&
|
|
19159
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));
|
|
19160
19160
|
};
|
|
19161
|
-
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;
|
|
19162
19162
|
|
|
19163
19163
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19164
19164
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19165
|
-
var Container$
|
|
19166
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19167
|
-
var Content = newStyled.div(templateObject_3$
|
|
19168
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19169
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19170
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19171
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19172
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19173
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19174
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
19175
|
-
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"])));
|
|
19176
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"])));
|
|
19177
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"])));
|
|
19178
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"])));
|
|
@@ -19204,7 +19204,7 @@ var Review = function (_a) {
|
|
|
19204
19204
|
});
|
|
19205
19205
|
};
|
|
19206
19206
|
}, [randomId]);
|
|
19207
|
-
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: {
|
|
19208
19208
|
__html: showMoreMobile
|
|
19209
19209
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19210
19210
|
: description,
|
|
@@ -19214,15 +19214,15 @@ var Review = function (_a) {
|
|
|
19214
19214
|
: description,
|
|
19215
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));
|
|
19216
19216
|
};
|
|
19217
|
-
var templateObject_1$
|
|
19218
|
-
|
|
19219
|
-
var Container$
|
|
19220
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19221
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19222
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19223
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19224
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19225
|
-
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) {
|
|
19226
19226
|
var backgroundUrl = _a.backgroundUrl;
|
|
19227
19227
|
return "url(".concat(backgroundUrl, ")");
|
|
19228
19228
|
});
|
|
@@ -19230,19 +19230,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19230
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;
|
|
19231
19231
|
var starsNumber = 5;
|
|
19232
19232
|
var theme = useTheme();
|
|
19233
|
-
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));
|
|
19234
19234
|
};
|
|
19235
|
-
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;
|
|
19236
19236
|
|
|
19237
|
-
var Container$
|
|
19238
|
-
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; });
|
|
19239
19239
|
var ScrollToTop = function (_a) {
|
|
19240
19240
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19241
19241
|
var theme = useTheme();
|
|
19242
19242
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19243
|
-
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));
|
|
19244
19244
|
};
|
|
19245
|
-
var templateObject_1$
|
|
19245
|
+
var templateObject_1$p, templateObject_2$h;
|
|
19246
19246
|
|
|
19247
19247
|
var Input = newStyled.input(function (props) { return ({
|
|
19248
19248
|
padding: props.theme.component.input.padding,
|
|
@@ -19273,7 +19273,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19273
19273
|
},
|
|
19274
19274
|
}); });
|
|
19275
19275
|
|
|
19276
|
-
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({
|
|
19277
19277
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19278
19278
|
}));
|
|
19279
19279
|
var Description = newStyled.div({
|
|
@@ -19290,25 +19290,25 @@ var Description = newStyled.div({
|
|
|
19290
19290
|
var ProductItem = function (_a) {
|
|
19291
19291
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19292
19292
|
var theme = useTheme();
|
|
19293
|
-
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));
|
|
19294
19294
|
};
|
|
19295
|
-
var templateObject_1$
|
|
19295
|
+
var templateObject_1$o;
|
|
19296
19296
|
|
|
19297
|
-
var Container$
|
|
19297
|
+
var Container$f = newStyled.div({
|
|
19298
19298
|
display: 'flex',
|
|
19299
19299
|
justifyContent: 'center',
|
|
19300
19300
|
padding: '1rem',
|
|
19301
19301
|
});
|
|
19302
19302
|
var Footer = function (_a) {
|
|
19303
19303
|
var text = _a.text, onClick = _a.onClick;
|
|
19304
|
-
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));
|
|
19305
19305
|
};
|
|
19306
19306
|
|
|
19307
19307
|
var Ul = newStyled.ul({
|
|
19308
19308
|
margin: '0px',
|
|
19309
19309
|
padding: '0px',
|
|
19310
19310
|
});
|
|
19311
|
-
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({
|
|
19312
19312
|
padding: [0, '0rem 1rem'],
|
|
19313
19313
|
borderRadius: [0, '0.5rem'],
|
|
19314
19314
|
}));
|
|
@@ -19320,22 +19320,22 @@ var Anchor = newStyled.a({
|
|
|
19320
19320
|
padding: 0,
|
|
19321
19321
|
textDecoration: 'none',
|
|
19322
19322
|
});
|
|
19323
|
-
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({
|
|
19324
19324
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19325
19325
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19326
19326
|
borderRadius: ['0', '0.5rem'],
|
|
19327
19327
|
}));
|
|
19328
|
-
var Header = newStyled.div(templateObject_3$
|
|
19328
|
+
var Header = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19329
19329
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19330
19330
|
}));
|
|
19331
19331
|
var ResultsPanel = function (_a) {
|
|
19332
19332
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19333
19333
|
var theme = useTheme();
|
|
19334
|
-
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));
|
|
19335
19335
|
};
|
|
19336
|
-
var templateObject_1$
|
|
19336
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e;
|
|
19337
19337
|
|
|
19338
|
-
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({
|
|
19339
19339
|
right: ['1rem', '7.75rem'],
|
|
19340
19340
|
top: ['0.75rem', '0.75rem'],
|
|
19341
19341
|
}));
|
|
@@ -19344,7 +19344,7 @@ var ClearButton = function (_a) {
|
|
|
19344
19344
|
var theme = useTheme();
|
|
19345
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));
|
|
19346
19346
|
};
|
|
19347
|
-
var templateObject_1$
|
|
19347
|
+
var templateObject_1$m;
|
|
19348
19348
|
|
|
19349
19349
|
var SearchIconContainer = newStyled.div({
|
|
19350
19350
|
display: 'flex',
|
|
@@ -19354,7 +19354,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19354
19354
|
background: 'white',
|
|
19355
19355
|
alignSelf: 'center',
|
|
19356
19356
|
});
|
|
19357
|
-
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"])));
|
|
19358
19358
|
var SearchControl = function (_a) {
|
|
19359
19359
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19360
19360
|
var theme = useTheme();
|
|
@@ -19370,7 +19370,7 @@ var SearchControl = function (_a) {
|
|
|
19370
19370
|
}
|
|
19371
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));
|
|
19372
19372
|
};
|
|
19373
|
-
var templateObject_1$
|
|
19373
|
+
var templateObject_1$l;
|
|
19374
19374
|
|
|
19375
19375
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19376
19376
|
var reducer = function (state, action) {
|
|
@@ -19386,7 +19386,7 @@ var reducer = function (state, action) {
|
|
|
19386
19386
|
}
|
|
19387
19387
|
}
|
|
19388
19388
|
};
|
|
19389
|
-
var Container$
|
|
19389
|
+
var Container$d = newStyled.div({
|
|
19390
19390
|
position: 'relative',
|
|
19391
19391
|
display: 'flex',
|
|
19392
19392
|
});
|
|
@@ -19426,7 +19426,7 @@ var SearchBar = function (_a) {
|
|
|
19426
19426
|
if (e.cancelable) {
|
|
19427
19427
|
e.preventDefault();
|
|
19428
19428
|
}
|
|
19429
|
-
}, 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) {
|
|
19430
19430
|
if (e.key === 'Enter') {
|
|
19431
19431
|
if (e.cancelable) {
|
|
19432
19432
|
e.preventDefault();
|
|
@@ -19437,20 +19437,20 @@ var SearchBar = function (_a) {
|
|
|
19437
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));
|
|
19438
19438
|
};
|
|
19439
19439
|
|
|
19440
|
-
var Container$
|
|
19441
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19442
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19443
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19444
|
-
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"])));
|
|
19445
19445
|
var SearchNavigation = function (_a) {
|
|
19446
19446
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19447
|
-
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) {
|
|
19448
19448
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19449
19449
|
}) }, void 0)] }, void 0));
|
|
19450
19450
|
};
|
|
19451
|
-
var templateObject_1$
|
|
19451
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$6;
|
|
19452
19452
|
|
|
19453
|
-
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) {
|
|
19454
19454
|
var alignCenter = _a.alignCenter;
|
|
19455
19455
|
return alignCenter &&
|
|
19456
19456
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19460,29 +19460,29 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19460
19460
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19461
19461
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19462
19462
|
});
|
|
19463
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19464
|
-
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"])));
|
|
19465
19465
|
var ShortBanner = function (_a) {
|
|
19466
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;
|
|
19467
19467
|
var theme = useTheme();
|
|
19468
|
-
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));
|
|
19469
19469
|
};
|
|
19470
|
-
var templateObject_1$
|
|
19471
|
-
|
|
19472
|
-
var TableElement$
|
|
19473
|
-
var TableCell$
|
|
19474
|
-
var TableHead$
|
|
19475
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19476
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19477
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19478
|
-
var Container$
|
|
19479
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19480
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19481
|
-
var TableRow$
|
|
19482
|
-
var templateObject_1$
|
|
19483
|
-
|
|
19484
|
-
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19485
|
-
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) {
|
|
19486
19486
|
if (index == 0) {
|
|
19487
19487
|
return '#f6f0e7';
|
|
19488
19488
|
}
|
|
@@ -19515,21 +19515,21 @@ var SizeChartTable = function (_a) {
|
|
|
19515
19515
|
var theme = useTheme();
|
|
19516
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];
|
|
19517
19517
|
var isMultilabel = xLabel && yLabel;
|
|
19518
|
-
return (jsxRuntime.jsxs(Container$
|
|
19519
|
-
backgroundColor: getCellColor(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$
|
|
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));
|
|
19521
19521
|
};
|
|
19522
19522
|
|
|
19523
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19524
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19525
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19526
|
-
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; });
|
|
19527
19527
|
var SizeTable = function (_a) {
|
|
19528
19528
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19529
19529
|
var theme = useTheme();
|
|
19530
|
-
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));
|
|
19531
19531
|
};
|
|
19532
|
-
var templateObject_1$
|
|
19532
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8;
|
|
19533
19533
|
|
|
19534
19534
|
var getStylesBySize$4 = function (size) {
|
|
19535
19535
|
switch (size) {
|
|
@@ -19556,7 +19556,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19556
19556
|
} });
|
|
19557
19557
|
};
|
|
19558
19558
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19559
|
-
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));
|
|
19560
19560
|
};
|
|
19561
19561
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19562
19562
|
if (disabled)
|
|
@@ -19572,23 +19572,23 @@ var TextButton = function (_a) {
|
|
|
19572
19572
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19573
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));
|
|
19574
19574
|
};
|
|
19575
|
-
var templateObject_1$
|
|
19575
|
+
var templateObject_1$g;
|
|
19576
19576
|
|
|
19577
|
-
var Container$
|
|
19578
|
-
var P = newStyled.p(templateObject_2$
|
|
19579
|
-
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"])));
|
|
19580
19580
|
var SizeFitGuide = function (_a) {
|
|
19581
19581
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19582
|
-
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));
|
|
19583
19583
|
};
|
|
19584
|
-
var templateObject_1$
|
|
19584
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9;
|
|
19585
19585
|
|
|
19586
|
-
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) {
|
|
19587
19587
|
var inline = _a.inline;
|
|
19588
19588
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19589
19589
|
});
|
|
19590
|
-
var Row = newStyled.div(templateObject_2$
|
|
19591
|
-
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;
|
|
19592
19592
|
|
|
19593
19593
|
var SizeSelector = function (_a) {
|
|
19594
19594
|
var _b;
|
|
@@ -19610,7 +19610,7 @@ var SizeSelector = function (_a) {
|
|
|
19610
19610
|
}) }), void 0)] }), void 0));
|
|
19611
19611
|
};
|
|
19612
19612
|
|
|
19613
|
-
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) {
|
|
19614
19614
|
var titleSize = _a.titleSize;
|
|
19615
19615
|
return titleSize;
|
|
19616
19616
|
}, function (_a) {
|
|
@@ -19627,18 +19627,18 @@ var Tab = function (_a) {
|
|
|
19627
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;
|
|
19628
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));
|
|
19629
19629
|
};
|
|
19630
|
-
var templateObject_1$
|
|
19630
|
+
var templateObject_1$d;
|
|
19631
19631
|
|
|
19632
|
-
var Container$
|
|
19633
|
-
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) {
|
|
19634
19634
|
var backgroundColor = _a.backgroundColor;
|
|
19635
19635
|
return backgroundColor;
|
|
19636
19636
|
}, function (_a) {
|
|
19637
19637
|
var borderColor = _a.borderColor;
|
|
19638
19638
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19639
19639
|
});
|
|
19640
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19641
|
-
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"])));
|
|
19642
19642
|
var Tabs = function (_a) {
|
|
19643
19643
|
var _b;
|
|
19644
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;
|
|
@@ -19647,16 +19647,16 @@ var Tabs = function (_a) {
|
|
|
19647
19647
|
return null;
|
|
19648
19648
|
}
|
|
19649
19649
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19650
|
-
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));
|
|
19651
19651
|
};
|
|
19652
|
-
var templateObject_1$
|
|
19652
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$7;
|
|
19653
19653
|
|
|
19654
|
-
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"])));
|
|
19655
19655
|
var Tag = function (_a) {
|
|
19656
19656
|
var text = _a.text, className = _a.className;
|
|
19657
|
-
return jsxRuntime.jsx(Container$
|
|
19657
|
+
return jsxRuntime.jsx(Container$7, __assign$1({ className: className }, { children: text }), void 0);
|
|
19658
19658
|
};
|
|
19659
|
-
var templateObject_1$
|
|
19659
|
+
var templateObject_1$b;
|
|
19660
19660
|
|
|
19661
19661
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19662
19662
|
switch (size) {
|
|
@@ -19767,9 +19767,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19767
19767
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19768
19768
|
};
|
|
19769
19769
|
|
|
19770
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19771
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19772
|
-
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"])));
|
|
19773
19773
|
var ImageVideo = function (_a) {
|
|
19774
19774
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19775
19775
|
var video = React$2.useRef(null);
|
|
@@ -19789,12 +19789,12 @@ var ImageVideo = function (_a) {
|
|
|
19789
19789
|
height: '100%',
|
|
19790
19790
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19791
19791
|
};
|
|
19792
|
-
var templateObject_1$
|
|
19792
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19793
19793
|
|
|
19794
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19795
|
-
var ContainerMobile = css(templateObject_2$
|
|
19796
|
-
var Container$
|
|
19797
|
-
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"])));
|
|
19798
19798
|
var TextWithImage = function (_a) {
|
|
19799
19799
|
var _b, _c, _d, _e;
|
|
19800
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"]);
|
|
@@ -19814,7 +19814,7 @@ var TextWithImage = function (_a) {
|
|
|
19814
19814
|
// @ts-ignore
|
|
19815
19815
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19816
19816
|
};
|
|
19817
|
-
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: {
|
|
19818
19818
|
backgroundColor: props.btnBGColor,
|
|
19819
19819
|
color: '#ffffff',
|
|
19820
19820
|
border: props.btnBGColor,
|
|
@@ -19824,9 +19824,9 @@ var TextWithImage = function (_a) {
|
|
|
19824
19824
|
},
|
|
19825
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));
|
|
19826
19826
|
};
|
|
19827
|
-
var templateObject_1$
|
|
19827
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6, templateObject_4$6;
|
|
19828
19828
|
|
|
19829
|
-
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) {
|
|
19830
19830
|
var timerColor = _a.timerColor;
|
|
19831
19831
|
return timerColor || '';
|
|
19832
19832
|
});
|
|
@@ -19862,11 +19862,11 @@ var Timer = function (_a) {
|
|
|
19862
19862
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19863
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));
|
|
19864
19864
|
};
|
|
19865
|
-
var templateObject_1$
|
|
19865
|
+
var templateObject_1$8;
|
|
19866
19866
|
|
|
19867
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19868
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19869
|
-
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) {
|
|
19870
19870
|
var theme = _a.theme;
|
|
19871
19871
|
return theme.component.total.basicTotal.currency.color;
|
|
19872
19872
|
}, function (_a) {
|
|
@@ -19879,41 +19879,41 @@ var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __make
|
|
|
19879
19879
|
var theme = _a.theme;
|
|
19880
19880
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19881
19881
|
});
|
|
19882
|
-
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) {
|
|
19883
19883
|
var highlightColor = _a.highlightColor;
|
|
19884
19884
|
return highlightColor;
|
|
19885
19885
|
});
|
|
19886
|
-
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) {
|
|
19887
19887
|
var showTotalLabel = _a.showTotalLabel;
|
|
19888
19888
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19889
19889
|
});
|
|
19890
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19891
|
-
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) {
|
|
19892
19892
|
var theme = _a.theme;
|
|
19893
19893
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19894
19894
|
});
|
|
19895
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19896
|
-
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;
|
|
19897
19897
|
|
|
19898
19898
|
var Total = function (_a) {
|
|
19899
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;
|
|
19900
19900
|
var theme = useTheme();
|
|
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$
|
|
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));
|
|
19902
19902
|
};
|
|
19903
19903
|
|
|
19904
|
-
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) {
|
|
19905
19905
|
var color = _a.color;
|
|
19906
19906
|
return color;
|
|
19907
19907
|
});
|
|
19908
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19909
|
-
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) {
|
|
19910
19910
|
var theme = _a.theme;
|
|
19911
19911
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19912
19912
|
}, function (_a) {
|
|
19913
19913
|
var theme = _a.theme;
|
|
19914
19914
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19915
19915
|
});
|
|
19916
|
-
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) {
|
|
19917
19917
|
var color = _a.color;
|
|
19918
19918
|
return color;
|
|
19919
19919
|
});
|
|
@@ -19926,32 +19926,32 @@ var Subtotal = function (_a) {
|
|
|
19926
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));
|
|
19927
19927
|
})] }), void 0));
|
|
19928
19928
|
};
|
|
19929
|
-
var templateObject_1$
|
|
19929
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19930
19930
|
|
|
19931
19931
|
var Totals = {
|
|
19932
19932
|
Total: Total,
|
|
19933
19933
|
Subtotal: Subtotal,
|
|
19934
19934
|
};
|
|
19935
19935
|
|
|
19936
|
-
var Container$
|
|
19937
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19938
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19939
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19940
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19941
|
-
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) {
|
|
19942
19942
|
return props.finishedTrack
|
|
19943
19943
|
? props.finishedTrackColor
|
|
19944
19944
|
: props.activeTrack
|
|
19945
19945
|
? props.activeTrackColor
|
|
19946
19946
|
: '';
|
|
19947
19947
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19948
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19949
|
-
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) {
|
|
19950
19950
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19951
19951
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19952
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
19953
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_10$
|
|
19954
|
-
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"])));
|
|
19955
19955
|
var TrackingProgressV2 = function (_a) {
|
|
19956
19956
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, _b = _a.resumedStyle, resumedStyle = _b === void 0 ? false : _b, activeCheckpointColor = _a.activeCheckpointColor, warning = _a.warning;
|
|
19957
19957
|
var theme = useTheme();
|
|
@@ -19974,7 +19974,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19974
19974
|
}
|
|
19975
19975
|
return '30px';
|
|
19976
19976
|
};
|
|
19977
|
-
return (jsxRuntime.jsxs(Container$
|
|
19977
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19978
19978
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19979
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
|
|
19980
19980
|
? activeCheckpointColor
|
|
@@ -19985,18 +19985,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19985
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));
|
|
19986
19986
|
})] }), void 0));
|
|
19987
19987
|
};
|
|
19988
|
-
var templateObject_1$
|
|
19989
|
-
|
|
19990
|
-
var Container$
|
|
19991
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19992
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19993
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19994
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19995
|
-
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) {
|
|
19996
19996
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19997
19997
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19998
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19999
|
-
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; });
|
|
20000
20000
|
var TrackingProgress = function (_a) {
|
|
20001
20001
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20002
20002
|
var theme = useTheme();
|
|
@@ -20016,7 +20016,7 @@ var TrackingProgress = function (_a) {
|
|
|
20016
20016
|
}
|
|
20017
20017
|
return '30px';
|
|
20018
20018
|
};
|
|
20019
|
-
return (jsxRuntime.jsxs(Container$
|
|
20019
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20020
20020
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20021
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
|
|
20022
20022
|
? theme.colors.semantic.informative.color
|
|
@@ -20025,9 +20025,9 @@ var TrackingProgress = function (_a) {
|
|
|
20025
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));
|
|
20026
20026
|
})] }), void 0));
|
|
20027
20027
|
};
|
|
20028
|
-
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;
|
|
20029
20029
|
|
|
20030
|
-
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) {
|
|
20031
20031
|
var textPosition = _a.textPosition;
|
|
20032
20032
|
return textPosition;
|
|
20033
20033
|
}, function (_a) {
|
|
@@ -20040,7 +20040,7 @@ var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = _
|
|
|
20040
20040
|
var borderRadius = _a.borderRadius;
|
|
20041
20041
|
return borderRadius || '8px';
|
|
20042
20042
|
});
|
|
20043
|
-
var templateObject_1$
|
|
20043
|
+
var templateObject_1$3;
|
|
20044
20044
|
|
|
20045
20045
|
var getDefaultCountdown = function () {
|
|
20046
20046
|
var tomorrowDate = new Date();
|
|
@@ -20056,7 +20056,7 @@ var HurryUp = function (_a) {
|
|
|
20056
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));
|
|
20057
20057
|
};
|
|
20058
20058
|
|
|
20059
|
-
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) {
|
|
20060
20060
|
var size = _a.size;
|
|
20061
20061
|
return (size ? size : '100%');
|
|
20062
20062
|
}, function (_a) {
|
|
@@ -20070,7 +20070,7 @@ var borderSize = {
|
|
|
20070
20070
|
large: '3px',
|
|
20071
20071
|
};
|
|
20072
20072
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20073
|
-
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) {
|
|
20074
20074
|
var size = _a.size;
|
|
20075
20075
|
return borderSize[size];
|
|
20076
20076
|
}, function (_a) {
|
|
@@ -20083,15 +20083,15 @@ var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __
|
|
|
20083
20083
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20084
20084
|
return duration;
|
|
20085
20085
|
});
|
|
20086
|
-
var templateObject_1$
|
|
20086
|
+
var templateObject_1$2, templateObject_2$2;
|
|
20087
20087
|
|
|
20088
20088
|
var Spinner = function (_a) {
|
|
20089
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;
|
|
20090
|
-
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));
|
|
20091
20091
|
};
|
|
20092
20092
|
|
|
20093
|
-
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"])));
|
|
20094
|
-
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) {
|
|
20095
20095
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20096
20096
|
return borderRadiusVariant &&
|
|
20097
20097
|
"\n border-radius: 40px;\n ";
|
|
@@ -20102,30 +20102,30 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
|
|
|
20102
20102
|
var theme = _a.theme;
|
|
20103
20103
|
return theme.component.gallery.aspectRatio;
|
|
20104
20104
|
});
|
|
20105
|
-
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"])));
|
|
20106
|
-
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"])));
|
|
20107
|
-
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) {
|
|
20108
20108
|
var theme = _a.theme;
|
|
20109
20109
|
return theme.colors.shades.white.color;
|
|
20110
20110
|
});
|
|
20111
|
-
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"])));
|
|
20112
|
-
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) {
|
|
20113
20113
|
var theme = _a.theme;
|
|
20114
20114
|
return theme.colors.pallete.primary.color;
|
|
20115
20115
|
});
|
|
20116
|
-
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) {
|
|
20117
20117
|
var theme = _a.theme;
|
|
20118
20118
|
return theme.component.gallery.aspectRatio;
|
|
20119
20119
|
});
|
|
20120
|
-
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) {
|
|
20121
20121
|
var theme = _a.theme;
|
|
20122
20122
|
return theme.component.gallery.aspectRatio;
|
|
20123
20123
|
});
|
|
20124
|
-
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) {
|
|
20125
20125
|
var theme = _a.theme;
|
|
20126
20126
|
return theme.component.gallery.aspectRatio;
|
|
20127
20127
|
});
|
|
20128
|
-
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;
|
|
20129
20129
|
|
|
20130
20130
|
var SETTINGS = {
|
|
20131
20131
|
infinite: false,
|
|
@@ -20187,7 +20187,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20187
20187
|
if (thumbnailRef.current)
|
|
20188
20188
|
setNav2(thumbnailRef.current);
|
|
20189
20189
|
}, []);
|
|
20190
|
-
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) {
|
|
20191
20191
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20192
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));
|
|
20193
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) {
|
|
@@ -20196,6 +20196,58 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20196
20196
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20197
20197
|
};
|
|
20198
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
|
+
|
|
20199
20251
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
20200
20252
|
exports.Accordion = Accordion$1;
|
|
20201
20253
|
exports.AccordionOptions = AccordionOptions;
|
|
@@ -20280,6 +20332,7 @@ exports.SimpleDropdown = SimpleDropdown;
|
|
|
20280
20332
|
exports.SimpleOrderItem = SimpleOrderItem;
|
|
20281
20333
|
exports.SingleColorPicker = SingleColorPicker;
|
|
20282
20334
|
exports.SizeChartTable = SizeChartTable;
|
|
20335
|
+
exports.SizeChartTableV2 = SizeChartTableV2;
|
|
20283
20336
|
exports.SizeDropdown = SizeDropdown;
|
|
20284
20337
|
exports.SizeFitGuide = SizeFitGuide;
|
|
20285
20338
|
exports.SizeSelector = SizeSelector;
|