@trafilea/afrodita-components 6.17.2 → 6.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +20 -5
- package/build/index.esm.js +851 -789
- package/build/index.esm.js.map +1 -1
- package/build/index.js +851 -788
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +7 -0
- package/build/theme/revel.theme.js +7 -0
- package/build/theme/shapermint.theme.d.ts +7 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/thebodcon.theme.d.ts +7 -0
- package/build/theme/thebodcon.theme.js +7 -0
- package/build/theme/thespadr.theme.d.ts +7 -0
- package/build/theme/thespadr.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +7 -0
- package/build/theme/truekind.theme.js +7 -0
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3127,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3127
|
desktop: 1280,
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Container$
|
|
3130
|
+
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) {
|
|
3131
3131
|
var height = _a.height;
|
|
3132
3132
|
return (height ? height : '1.5em');
|
|
3133
3133
|
}, function (_a) {
|
|
@@ -3152,11 +3152,11 @@ var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = _
|
|
|
3152
3152
|
var SkeletonBox = function (_a) {
|
|
3153
3153
|
var width = _a.width, height = _a.height;
|
|
3154
3154
|
var theme = useTheme();
|
|
3155
|
-
return jsx$1(Container$
|
|
3155
|
+
return jsx$1(Container$1f, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3156
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$20;
|
|
3158
3158
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3160
3160
|
var width = _a.width;
|
|
3161
3161
|
return width;
|
|
3162
3162
|
}, function (_a) {
|
|
@@ -3172,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1_ || (templateObject_1$1_
|
|
|
3172
3172
|
var opacity = _a.opacity;
|
|
3173
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3174
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$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) {
|
|
3176
3176
|
var width = _a.width;
|
|
3177
3177
|
return width;
|
|
3178
3178
|
}, function (_a) {
|
|
@@ -3185,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1l || (templateObject_2$
|
|
|
3185
3185
|
var opacity = _a.opacity;
|
|
3186
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3187
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$1$, templateObject_2$1m;
|
|
3189
3189
|
|
|
3190
3190
|
/* eslint-disable no-undef */
|
|
3191
3191
|
var cache = new Map();
|
|
@@ -3361,7 +3361,7 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
3363
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3364
|
+
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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
3366
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3367
3367
|
var config = useTheme().config;
|
|
@@ -3370,7 +3370,7 @@ var Image$3 = function (_a) {
|
|
|
3370
3370
|
: src;
|
|
3371
3371
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3372
3372
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3373
|
+
var templateObject_1$1_;
|
|
3374
3374
|
|
|
3375
3375
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3376
3376
|
|
|
@@ -4173,19 +4173,19 @@ function jsxs(type, props, key) {
|
|
|
4173
4173
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4174
4174
|
// `variants` styles that are consistent through all themes.
|
|
4175
4175
|
var TAGS = {
|
|
4176
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4177
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4178
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4179
|
-
display1: newStyled.h1(templateObject_4$
|
|
4180
|
-
display2: newStyled.h2(templateObject_5$
|
|
4181
|
-
display3: newStyled.h3(templateObject_6$
|
|
4182
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4183
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4184
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4185
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4186
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4176
|
+
hero1: newStyled.h1(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""]))),
|
|
4177
|
+
hero2: newStyled.h2(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject([""], [""]))),
|
|
4178
|
+
hero3: newStyled.h3(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject([""], [""]))),
|
|
4179
|
+
display1: newStyled.h1(templateObject_4$N || (templateObject_4$N = __makeTemplateObject([""], [""]))),
|
|
4180
|
+
display2: newStyled.h2(templateObject_5$z || (templateObject_5$z = __makeTemplateObject([""], [""]))),
|
|
4181
|
+
display3: newStyled.h3(templateObject_6$t || (templateObject_6$t = __makeTemplateObject([""], [""]))),
|
|
4182
|
+
heading1: newStyled.h1(templateObject_7$k || (templateObject_7$k = __makeTemplateObject([""], [""]))),
|
|
4183
|
+
heading2: newStyled.h2(templateObject_8$i || (templateObject_8$i = __makeTemplateObject([""], [""]))),
|
|
4184
|
+
heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
|
|
4185
|
+
heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
|
|
4186
|
+
heading5: newStyled.h5(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject([""], [""]))),
|
|
4187
4187
|
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4188
|
-
heading7: newStyled.h1(templateObject_13$
|
|
4188
|
+
heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
|
|
4189
4189
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4190
4190
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
4191
4191
|
link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
@@ -4309,17 +4309,17 @@ var DEFAULTS = {
|
|
|
4309
4309
|
size: 'regular',
|
|
4310
4310
|
},
|
|
4311
4311
|
};
|
|
4312
|
-
var templateObject_1$
|
|
4313
|
-
|
|
4314
|
-
var Container$
|
|
4315
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4316
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4317
|
-
var Label$
|
|
4318
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4319
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4312
|
+
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;
|
|
4313
|
+
|
|
4314
|
+
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"])));
|
|
4315
|
+
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"])));
|
|
4316
|
+
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"])));
|
|
4317
|
+
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"])));
|
|
4318
|
+
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"])));
|
|
4319
|
+
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"])));
|
|
4320
4320
|
var PackSelectorV2 = function (_a) {
|
|
4321
4321
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4322
|
-
return (jsx$1(Container$
|
|
4322
|
+
return (jsx$1(Container$1e, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4323
4323
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4324
4324
|
}) }), void 0));
|
|
4325
4325
|
};
|
|
@@ -4333,7 +4333,7 @@ var PackCard$1 = function (_a) {
|
|
|
4333
4333
|
.then(function (icon) { return setIcon(icon); })
|
|
4334
4334
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4335
4335
|
}, [pack.meta.icon]);
|
|
4336
|
-
return (jsxs$1(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 ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
4336
|
+
return (jsxs$1(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 ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$6, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4337
4337
|
locale: 'en-US',
|
|
4338
4338
|
currency: currencyCode || 'USD',
|
|
4339
4339
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4341,27 +4341,27 @@ var PackCard$1 = function (_a) {
|
|
|
4341
4341
|
currency: currencyCode || 'USD',
|
|
4342
4342
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4343
4343
|
};
|
|
4344
|
-
var templateObject_1$
|
|
4344
|
+
var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s;
|
|
4345
4345
|
|
|
4346
|
-
var Container$
|
|
4347
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4346
|
+
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"])));
|
|
4347
|
+
var DropContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4348
4348
|
var DropList = function (_a) {
|
|
4349
4349
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4350
|
-
return (jsx$1(Container$
|
|
4350
|
+
return (jsx$1(Container$1d, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4351
4351
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4352
4352
|
}) }, void 0));
|
|
4353
4353
|
};
|
|
4354
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$1X, templateObject_2$1j;
|
|
4355
4355
|
|
|
4356
4356
|
var DROPS_TOTAL = 5;
|
|
4357
|
-
var Container$
|
|
4358
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4359
|
-
var Description$3 = newStyled.p(templateObject_3
|
|
4357
|
+
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"])));
|
|
4358
|
+
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"])));
|
|
4359
|
+
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"])));
|
|
4360
4360
|
var AbsorbencyLevel = function (_a) {
|
|
4361
4361
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4362
|
-
return (jsxs$1(Container$
|
|
4362
|
+
return (jsxs$1(Container$1c, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4363
4363
|
};
|
|
4364
|
-
var templateObject_1$
|
|
4364
|
+
var templateObject_1$1W, templateObject_2$1i, templateObject_3$$;
|
|
4365
4365
|
|
|
4366
4366
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4367
4367
|
`),"","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(`
|
|
@@ -4437,7 +4437,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4437
4437
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4438
4438
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4439
4439
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4440
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
4440
|
+
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"])));
|
|
4441
4441
|
var Accordion$1 = function (_a) {
|
|
4442
4442
|
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;
|
|
4443
4443
|
var theme = useTheme();
|
|
@@ -4461,9 +4461,9 @@ var Accordion$1 = function (_a) {
|
|
|
4461
4461
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4462
4462
|
} }), void 0));
|
|
4463
4463
|
};
|
|
4464
|
-
var templateObject_1$
|
|
4464
|
+
var templateObject_1$1V;
|
|
4465
4465
|
|
|
4466
|
-
var Container$
|
|
4466
|
+
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"])));
|
|
4467
4467
|
var AccordionOptions = function (_a) {
|
|
4468
4468
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4469
4469
|
var _b = useState({
|
|
@@ -4476,7 +4476,7 @@ var AccordionOptions = function (_a) {
|
|
|
4476
4476
|
}
|
|
4477
4477
|
return false;
|
|
4478
4478
|
};
|
|
4479
|
-
return (jsx$1(Container$
|
|
4479
|
+
return (jsx$1(Container$1b, { children: accordions.map(function (accordion, index) {
|
|
4480
4480
|
var forceOpenValue = getForceOpen(index);
|
|
4481
4481
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4482
4482
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4487,7 +4487,7 @@ var AccordionOptions = function (_a) {
|
|
|
4487
4487
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4488
4488
|
}) }, void 0));
|
|
4489
4489
|
};
|
|
4490
|
-
var templateObject_1$
|
|
4490
|
+
var templateObject_1$1U;
|
|
4491
4491
|
|
|
4492
4492
|
var CardSectionType;
|
|
4493
4493
|
(function (CardSectionType) {
|
|
@@ -4649,29 +4649,29 @@ var isValidDate = function (value) {
|
|
|
4649
4649
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4650
4650
|
};
|
|
4651
4651
|
|
|
4652
|
-
var Bold = newStyled.span(templateObject_1$
|
|
4653
|
-
var FlexContainer$2 = newStyled.div(templateObject_2$
|
|
4654
|
-
var templateObject_1$
|
|
4652
|
+
var Bold = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4653
|
+
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"])));
|
|
4654
|
+
var templateObject_1$1T, templateObject_2$1h;
|
|
4655
4655
|
|
|
4656
|
-
var Container$
|
|
4656
|
+
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) {
|
|
4657
4657
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4658
4658
|
return width;
|
|
4659
4659
|
}, function (_a) {
|
|
4660
4660
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4661
4661
|
return height;
|
|
4662
4662
|
});
|
|
4663
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
4664
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
4665
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
4666
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
4667
|
-
var templateObject_1$
|
|
4663
|
+
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"])));
|
|
4664
|
+
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"])));
|
|
4665
|
+
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"])));
|
|
4666
|
+
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"])));
|
|
4667
|
+
var templateObject_1$1S, templateObject_2$1g, templateObject_3$_, templateObject_4$L, templateObject_5$x;
|
|
4668
4668
|
|
|
4669
4669
|
var _this$1 = undefined;
|
|
4670
4670
|
var CouponCard = function (_a) {
|
|
4671
4671
|
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;
|
|
4672
4672
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4673
4673
|
var handleCopy = useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4674
|
-
return (jsxs$1(Container$
|
|
4674
|
+
return (jsxs$1(Container$1a, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
4675
4675
|
name: 'actions/copy_outlined',
|
|
4676
4676
|
position: 'right',
|
|
4677
4677
|
margin: '10px',
|
|
@@ -4719,14 +4719,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
4719
4719
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4720
4720
|
};
|
|
4721
4721
|
|
|
4722
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4723
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4722
|
+
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; });
|
|
4723
|
+
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"])));
|
|
4724
4724
|
var Error$1 = function (_a) {
|
|
4725
4725
|
var error = _a.error;
|
|
4726
4726
|
var theme = useTheme();
|
|
4727
4727
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4728
4728
|
};
|
|
4729
|
-
var templateObject_1$
|
|
4729
|
+
var templateObject_1$1R, templateObject_2$1f;
|
|
4730
4730
|
|
|
4731
4731
|
var BaseSelectButton = function (_a) {
|
|
4732
4732
|
var children = _a.children, as = _a.as;
|
|
@@ -4743,7 +4743,7 @@ function BaseSelectOption(_a) {
|
|
|
4743
4743
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4744
4744
|
}
|
|
4745
4745
|
|
|
4746
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4746
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4747
4747
|
function BaseSelect(_a) {
|
|
4748
4748
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4749
4749
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4753,7 +4753,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4753
4753
|
Options: BaseSelectOptions,
|
|
4754
4754
|
Option: BaseSelectOption,
|
|
4755
4755
|
});
|
|
4756
|
-
var templateObject_1$
|
|
4756
|
+
var templateObject_1$1Q;
|
|
4757
4757
|
|
|
4758
4758
|
var CustomButton = newStyled.button(function (_a) {
|
|
4759
4759
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4792,7 +4792,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4792
4792
|
});
|
|
4793
4793
|
});
|
|
4794
4794
|
// TODO Remove this when we find the real solution
|
|
4795
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4795
|
+
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) {
|
|
4796
4796
|
var open = _a.open;
|
|
4797
4797
|
return open &&
|
|
4798
4798
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4812,7 +4812,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4812
4812
|
} }), void 0));
|
|
4813
4813
|
};
|
|
4814
4814
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4815
|
-
var templateObject_1$
|
|
4815
|
+
var templateObject_1$1P;
|
|
4816
4816
|
|
|
4817
4817
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4818
4818
|
var theme = _a.theme;
|
|
@@ -4890,7 +4890,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4890
4890
|
Styles[props.variant](props.theme),
|
|
4891
4891
|
Styles[props.size](props.theme),
|
|
4892
4892
|
]; });
|
|
4893
|
-
var Label$
|
|
4893
|
+
var Label$5 = function (_a) {
|
|
4894
4894
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4895
4895
|
var theme = useTheme();
|
|
4896
4896
|
return (jsx$1(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -4979,7 +4979,7 @@ var CustomCheckboxStyles = {
|
|
|
4979
4979
|
},
|
|
4980
4980
|
};
|
|
4981
4981
|
|
|
4982
|
-
var Container$
|
|
4982
|
+
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"])));
|
|
4983
4983
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4984
4984
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4985
4985
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4990,7 +4990,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4990
4990
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4991
4991
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4992
4992
|
]; });
|
|
4993
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4993
|
+
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) {
|
|
4994
4994
|
var disabled = _a.disabled;
|
|
4995
4995
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4996
4996
|
});
|
|
@@ -5004,9 +5004,9 @@ var Checkbox = function (_a) {
|
|
|
5004
5004
|
}
|
|
5005
5005
|
onChange(e.target.checked);
|
|
5006
5006
|
};
|
|
5007
|
-
return (jsxs$1(Container$
|
|
5007
|
+
return (jsxs$1(Container$19, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5008
5008
|
};
|
|
5009
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$1O, templateObject_2$1e;
|
|
5010
5010
|
|
|
5011
5011
|
var CustomOption = newStyled.li(function (_a) {
|
|
5012
5012
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5055,9 +5055,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5055
5055
|
Option: BaseDropdownOption,
|
|
5056
5056
|
});
|
|
5057
5057
|
|
|
5058
|
-
var Container$
|
|
5059
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5060
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5058
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
5059
|
+
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"])));
|
|
5060
|
+
var SelectedOption = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5061
5061
|
var fontWeight = _a.fontWeight;
|
|
5062
5062
|
return fontWeight || '';
|
|
5063
5063
|
});
|
|
@@ -5089,10 +5089,10 @@ function SimpleDropdown(_a) {
|
|
|
5089
5089
|
}
|
|
5090
5090
|
setSelectedValue(value);
|
|
5091
5091
|
}, [value, options, initialValue]);
|
|
5092
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5092
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$18 : Fragment$1;
|
|
5093
5093
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5094
5094
|
}
|
|
5095
|
-
var templateObject_1$
|
|
5095
|
+
var templateObject_1$1N, templateObject_2$1d, templateObject_3$Z;
|
|
5096
5096
|
|
|
5097
5097
|
/* base styles & size variants */
|
|
5098
5098
|
var CustomRadioStyles$2 = {
|
|
@@ -5157,9 +5157,9 @@ var ContainerStyles$2 = {
|
|
|
5157
5157
|
},
|
|
5158
5158
|
};
|
|
5159
5159
|
|
|
5160
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5161
|
-
var Container$
|
|
5162
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5160
|
+
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"])));
|
|
5161
|
+
var Container$17 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5162
|
+
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) {
|
|
5163
5163
|
var disabled = _a.disabled;
|
|
5164
5164
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5165
5165
|
});
|
|
@@ -5167,14 +5167,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5167
5167
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5168
5168
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5169
5169
|
]; });
|
|
5170
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5170
|
+
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) {
|
|
5171
5171
|
var theme = _a.theme;
|
|
5172
5172
|
return theme.component.radio.textSize;
|
|
5173
5173
|
}, function (_a) {
|
|
5174
5174
|
var theme = _a.theme;
|
|
5175
5175
|
return theme.component.radio.lineHeight;
|
|
5176
5176
|
});
|
|
5177
|
-
var StyledLabelV2 = newStyled(Label$
|
|
5177
|
+
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) {
|
|
5178
5178
|
var theme = _a.theme;
|
|
5179
5179
|
return theme.component.radio.textSize;
|
|
5180
5180
|
}, function (_a) {
|
|
@@ -5188,9 +5188,104 @@ var RadioInput = function (_a) {
|
|
|
5188
5188
|
var value = event.currentTarget.value;
|
|
5189
5189
|
onChange({ value: value, label: label });
|
|
5190
5190
|
};
|
|
5191
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5191
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$17, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5192
5192
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y, templateObject_4$K;
|
|
5194
|
+
|
|
5195
|
+
var useOnClickOutside = function (ref, handler) {
|
|
5196
|
+
useEffect(function () {
|
|
5197
|
+
var listener = function (event) {
|
|
5198
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
5199
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5200
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5201
|
+
return;
|
|
5202
|
+
}
|
|
5203
|
+
handler(event);
|
|
5204
|
+
};
|
|
5205
|
+
document.addEventListener('mousedown', listener);
|
|
5206
|
+
document.addEventListener('touchstart', listener);
|
|
5207
|
+
return function () {
|
|
5208
|
+
document.removeEventListener('mousedown', listener);
|
|
5209
|
+
document.removeEventListener('touchstart', listener);
|
|
5210
|
+
};
|
|
5211
|
+
}, [ref, handler]);
|
|
5212
|
+
};
|
|
5213
|
+
|
|
5214
|
+
function getWindowDimensions() {
|
|
5215
|
+
if (typeof window === 'undefined')
|
|
5216
|
+
return { width: 0, height: 0 };
|
|
5217
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
5218
|
+
return {
|
|
5219
|
+
width: width,
|
|
5220
|
+
height: height,
|
|
5221
|
+
};
|
|
5222
|
+
}
|
|
5223
|
+
var getViewport = function (breakpoints, width) {
|
|
5224
|
+
if (width <= breakpoints.mobile)
|
|
5225
|
+
return Viewports.mobile;
|
|
5226
|
+
if (width <= breakpoints.tablet)
|
|
5227
|
+
return Viewports.tablet;
|
|
5228
|
+
if (width <= breakpoints.desktop)
|
|
5229
|
+
return Viewports.desktop;
|
|
5230
|
+
return Viewports.desktopLarge;
|
|
5231
|
+
};
|
|
5232
|
+
var useWindowDimensions = function (breakpoints, _a) {
|
|
5233
|
+
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5234
|
+
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5235
|
+
var _c = useState(function () {
|
|
5236
|
+
var dimension = getWindowDimensions();
|
|
5237
|
+
return {
|
|
5238
|
+
windowDimensions: dimension,
|
|
5239
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5240
|
+
};
|
|
5241
|
+
}), state = _c[0], setState = _c[1];
|
|
5242
|
+
useEffect(function () {
|
|
5243
|
+
function handleResize() {
|
|
5244
|
+
var newDimension = getWindowDimensions();
|
|
5245
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5246
|
+
setState(function (oldState) {
|
|
5247
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5248
|
+
return {
|
|
5249
|
+
windowDimensions: newDimension,
|
|
5250
|
+
viewport: newViewport,
|
|
5251
|
+
};
|
|
5252
|
+
}
|
|
5253
|
+
return oldState;
|
|
5254
|
+
});
|
|
5255
|
+
}
|
|
5256
|
+
handleResize();
|
|
5257
|
+
window.addEventListener('resize', handleResize);
|
|
5258
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5259
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5260
|
+
}, [shouldListenChanges]);
|
|
5261
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5262
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5263
|
+
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5264
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5265
|
+
};
|
|
5266
|
+
|
|
5267
|
+
var useDeviceType = function () {
|
|
5268
|
+
var mobileBreakpoint = 768;
|
|
5269
|
+
var tabletBreakpoint = 1024;
|
|
5270
|
+
var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5271
|
+
var handleResize = function () {
|
|
5272
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
5273
|
+
setDeviceType('mobile');
|
|
5274
|
+
}
|
|
5275
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
5276
|
+
setDeviceType('tablet');
|
|
5277
|
+
}
|
|
5278
|
+
else {
|
|
5279
|
+
setDeviceType('desktop');
|
|
5280
|
+
}
|
|
5281
|
+
};
|
|
5282
|
+
useLayoutEffect(function () {
|
|
5283
|
+
window.addEventListener('resize', handleResize);
|
|
5284
|
+
handleResize();
|
|
5285
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5286
|
+
}, []);
|
|
5287
|
+
return deviceType;
|
|
5288
|
+
};
|
|
5194
5289
|
|
|
5195
5290
|
var getWrapperFlexDirection = function (position) {
|
|
5196
5291
|
switch (position) {
|
|
@@ -5241,7 +5336,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5241
5336
|
}
|
|
5242
5337
|
};
|
|
5243
5338
|
|
|
5244
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5339
|
+
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) {
|
|
5245
5340
|
var position = _a.position;
|
|
5246
5341
|
return getWrapperFlexDirection(position);
|
|
5247
5342
|
}, function (_a) {
|
|
@@ -5251,7 +5346,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5251
5346
|
var disableHover = _a.disableHover;
|
|
5252
5347
|
return (disableHover ? 0 : 1);
|
|
5253
5348
|
});
|
|
5254
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5349
|
+
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) {
|
|
5255
5350
|
var position = _a.position;
|
|
5256
5351
|
return getContainerFlexDirection(position);
|
|
5257
5352
|
}, function (_a) {
|
|
@@ -5279,123 +5374,34 @@ var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5279
5374
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5280
5375
|
return actual === expected ? margin : '0';
|
|
5281
5376
|
};
|
|
5282
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5377
|
+
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) {
|
|
5283
5378
|
var borderColor = _a.borderColor;
|
|
5284
5379
|
return borderColor;
|
|
5285
5380
|
}, function (_a) {
|
|
5286
5381
|
var backgroundColor = _a.backgroundColor;
|
|
5287
5382
|
return backgroundColor;
|
|
5288
5383
|
});
|
|
5289
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5384
|
+
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) {
|
|
5385
|
+
var theme = _a.theme;
|
|
5386
|
+
return theme.component.autoship.tooltip.text.alignment;
|
|
5387
|
+
}, function (_a) {
|
|
5388
|
+
var theme = _a.theme;
|
|
5389
|
+
return theme.component.autoship.tooltip.text.maxWidth;
|
|
5390
|
+
}, function (_a) {
|
|
5290
5391
|
var color = _a.color;
|
|
5291
5392
|
return color;
|
|
5292
5393
|
});
|
|
5293
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5294
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5394
|
+
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"])));
|
|
5395
|
+
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) {
|
|
5295
5396
|
var color = _a.color;
|
|
5296
5397
|
return color;
|
|
5297
5398
|
});
|
|
5298
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5299
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5399
|
+
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"])));
|
|
5400
|
+
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) {
|
|
5300
5401
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5301
5402
|
return right;
|
|
5302
5403
|
});
|
|
5303
|
-
var templateObject_1$
|
|
5304
|
-
|
|
5305
|
-
var useOnClickOutside = function (ref, handler) {
|
|
5306
|
-
useEffect(function () {
|
|
5307
|
-
var listener = function (event) {
|
|
5308
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
5309
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5310
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5311
|
-
return;
|
|
5312
|
-
}
|
|
5313
|
-
handler(event);
|
|
5314
|
-
};
|
|
5315
|
-
document.addEventListener('mousedown', listener);
|
|
5316
|
-
document.addEventListener('touchstart', listener);
|
|
5317
|
-
return function () {
|
|
5318
|
-
document.removeEventListener('mousedown', listener);
|
|
5319
|
-
document.removeEventListener('touchstart', listener);
|
|
5320
|
-
};
|
|
5321
|
-
}, [ref, handler]);
|
|
5322
|
-
};
|
|
5323
|
-
|
|
5324
|
-
function getWindowDimensions() {
|
|
5325
|
-
if (typeof window === 'undefined')
|
|
5326
|
-
return { width: 0, height: 0 };
|
|
5327
|
-
var width = window.innerWidth, height = window.innerHeight;
|
|
5328
|
-
return {
|
|
5329
|
-
width: width,
|
|
5330
|
-
height: height,
|
|
5331
|
-
};
|
|
5332
|
-
}
|
|
5333
|
-
var getViewport = function (breakpoints, width) {
|
|
5334
|
-
if (width <= breakpoints.mobile)
|
|
5335
|
-
return Viewports.mobile;
|
|
5336
|
-
if (width <= breakpoints.tablet)
|
|
5337
|
-
return Viewports.tablet;
|
|
5338
|
-
if (width <= breakpoints.desktop)
|
|
5339
|
-
return Viewports.desktop;
|
|
5340
|
-
return Viewports.desktopLarge;
|
|
5341
|
-
};
|
|
5342
|
-
var useWindowDimensions = function (breakpoints, _a) {
|
|
5343
|
-
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5344
|
-
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5345
|
-
var _c = useState(function () {
|
|
5346
|
-
var dimension = getWindowDimensions();
|
|
5347
|
-
return {
|
|
5348
|
-
windowDimensions: dimension,
|
|
5349
|
-
viewport: getViewport(breakpoints, dimension.width),
|
|
5350
|
-
};
|
|
5351
|
-
}), state = _c[0], setState = _c[1];
|
|
5352
|
-
useEffect(function () {
|
|
5353
|
-
function handleResize() {
|
|
5354
|
-
var newDimension = getWindowDimensions();
|
|
5355
|
-
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5356
|
-
setState(function (oldState) {
|
|
5357
|
-
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5358
|
-
return {
|
|
5359
|
-
windowDimensions: newDimension,
|
|
5360
|
-
viewport: newViewport,
|
|
5361
|
-
};
|
|
5362
|
-
}
|
|
5363
|
-
return oldState;
|
|
5364
|
-
});
|
|
5365
|
-
}
|
|
5366
|
-
handleResize();
|
|
5367
|
-
window.addEventListener('resize', handleResize);
|
|
5368
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5369
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5370
|
-
}, [shouldListenChanges]);
|
|
5371
|
-
var isMobile = state.viewport === Viewports.mobile;
|
|
5372
|
-
var isTablet = state.viewport === Viewports.tablet;
|
|
5373
|
-
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5374
|
-
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5375
|
-
};
|
|
5376
|
-
|
|
5377
|
-
var useDeviceType = function () {
|
|
5378
|
-
var mobileBreakpoint = 768;
|
|
5379
|
-
var tabletBreakpoint = 1024;
|
|
5380
|
-
var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5381
|
-
var handleResize = function () {
|
|
5382
|
-
if (window.innerWidth < mobileBreakpoint) {
|
|
5383
|
-
setDeviceType('mobile');
|
|
5384
|
-
}
|
|
5385
|
-
else if (window.innerWidth < tabletBreakpoint) {
|
|
5386
|
-
setDeviceType('tablet');
|
|
5387
|
-
}
|
|
5388
|
-
else {
|
|
5389
|
-
setDeviceType('desktop');
|
|
5390
|
-
}
|
|
5391
|
-
};
|
|
5392
|
-
useLayoutEffect(function () {
|
|
5393
|
-
window.addEventListener('resize', handleResize);
|
|
5394
|
-
handleResize();
|
|
5395
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5396
|
-
}, []);
|
|
5397
|
-
return deviceType;
|
|
5398
|
-
};
|
|
5404
|
+
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;
|
|
5399
5405
|
|
|
5400
5406
|
var Tooltip = function (_a) {
|
|
5401
5407
|
var _b;
|
|
@@ -5420,7 +5426,7 @@ var Tooltip = function (_a) {
|
|
|
5420
5426
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5421
5427
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5422
5428
|
: theme.colors.pallete.secondary.color,
|
|
5423
|
-
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color,
|
|
5429
|
+
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
5424
5430
|
};
|
|
5425
5431
|
|
|
5426
5432
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5466,7 +5472,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5466
5472
|
};
|
|
5467
5473
|
}
|
|
5468
5474
|
};
|
|
5469
|
-
var Container$
|
|
5475
|
+
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) {
|
|
5470
5476
|
var backgroundColor = _a.backgroundColor;
|
|
5471
5477
|
return backgroundColor;
|
|
5472
5478
|
}, function (_a) {
|
|
@@ -5488,7 +5494,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
5488
5494
|
var size = _a.size;
|
|
5489
5495
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5490
5496
|
});
|
|
5491
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5497
|
+
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) {
|
|
5492
5498
|
var textColor = _a.textColor;
|
|
5493
5499
|
return textColor;
|
|
5494
5500
|
}, function (_a) {
|
|
@@ -5503,9 +5509,9 @@ var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __makeTemp
|
|
|
5503
5509
|
var ClubOfferTag = function (_a) {
|
|
5504
5510
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5505
5511
|
var theme = useTheme();
|
|
5506
|
-
return (jsx$1(Container$
|
|
5512
|
+
return (jsx$1(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: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5507
5513
|
};
|
|
5508
|
-
var templateObject_1$
|
|
5514
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
5509
5515
|
|
|
5510
5516
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5511
5517
|
var _a, _b, _c;
|
|
@@ -5536,7 +5542,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5536
5542
|
};
|
|
5537
5543
|
}
|
|
5538
5544
|
};
|
|
5539
|
-
var Container$
|
|
5545
|
+
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) {
|
|
5540
5546
|
var backgroundColor = _a.backgroundColor;
|
|
5541
5547
|
return backgroundColor;
|
|
5542
5548
|
}, function (_a) {
|
|
@@ -5558,7 +5564,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5558
5564
|
var size = _a.size;
|
|
5559
5565
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5560
5566
|
});
|
|
5561
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5567
|
+
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) {
|
|
5562
5568
|
var textColor = _a.textColor;
|
|
5563
5569
|
return textColor;
|
|
5564
5570
|
}, function (_a) {
|
|
@@ -5573,9 +5579,9 @@ var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemp
|
|
|
5573
5579
|
var DiscountTag$1 = function (_a) {
|
|
5574
5580
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5575
5581
|
var theme = useTheme();
|
|
5576
|
-
return (jsx$1(Container$
|
|
5582
|
+
return (jsx$1(Container$15, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5577
5583
|
};
|
|
5578
|
-
var templateObject_1$
|
|
5584
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5579
5585
|
|
|
5580
5586
|
var getStylesBySize$b = function (size, theme) {
|
|
5581
5587
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5617,8 +5623,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5617
5623
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5618
5624
|
}
|
|
5619
5625
|
};
|
|
5620
|
-
var Container$
|
|
5621
|
-
var Price = newStyled.p(templateObject_2$
|
|
5626
|
+
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"])));
|
|
5627
|
+
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) {
|
|
5622
5628
|
var weight = _a.weight;
|
|
5623
5629
|
return (weight ? weight : '400');
|
|
5624
5630
|
}, function (_a) {
|
|
@@ -5642,7 +5648,7 @@ var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5642
5648
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5643
5649
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5644
5650
|
});
|
|
5645
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5651
|
+
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) {
|
|
5646
5652
|
var _b;
|
|
5647
5653
|
var size = _a.size;
|
|
5648
5654
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5673,11 +5679,11 @@ var PriceLabel = function (_a) {
|
|
|
5673
5679
|
: ComponentSize.XSmall;
|
|
5674
5680
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5675
5681
|
};
|
|
5676
|
-
return (jsxs$1(Container$
|
|
5682
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5677
5683
|
};
|
|
5678
|
-
var templateObject_1$
|
|
5684
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$W;
|
|
5679
5685
|
|
|
5680
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5686
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5681
5687
|
var PriceLabelV2 = function (_a) {
|
|
5682
5688
|
var _b;
|
|
5683
5689
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5730,7 +5736,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5730
5736
|
var savetoString = saveto.toFixed(2);
|
|
5731
5737
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5732
5738
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5733
|
-
return (jsxs$1(Container$
|
|
5739
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5734
5740
|
marginTop: '-5px',
|
|
5735
5741
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5736
5742
|
? finalPriceArray[0]
|
|
@@ -5748,11 +5754,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5748
5754
|
lineHeight: '22px',
|
|
5749
5755
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5750
5756
|
};
|
|
5751
|
-
var templateObject_1$
|
|
5757
|
+
var templateObject_1$1H;
|
|
5752
5758
|
|
|
5753
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5754
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5755
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5759
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5760
|
+
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"])));
|
|
5761
|
+
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"])));
|
|
5756
5762
|
var PriceLabelV3 = function (_a) {
|
|
5757
5763
|
var _b;
|
|
5758
5764
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5807,7 +5813,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5807
5813
|
return null;
|
|
5808
5814
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5809
5815
|
};
|
|
5810
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5816
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$14, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$14, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5811
5817
|
marginTop: '-5px',
|
|
5812
5818
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5813
5819
|
marginTop: '-6px',
|
|
@@ -5823,10 +5829,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5823
5829
|
lineHeight: '22px',
|
|
5824
5830
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5825
5831
|
};
|
|
5826
|
-
var templateObject_1$
|
|
5832
|
+
var templateObject_1$1G, templateObject_2$17, templateObject_3$V;
|
|
5827
5833
|
|
|
5828
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5829
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5834
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5835
|
+
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) {
|
|
5830
5836
|
var selected = _a.selected, theme = _a.theme;
|
|
5831
5837
|
return selected
|
|
5832
5838
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5840,30 +5846,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5840
5846
|
var theme = _a.theme;
|
|
5841
5847
|
return theme.colors.pallete.primary.color;
|
|
5842
5848
|
});
|
|
5843
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5849
|
+
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) {
|
|
5844
5850
|
var onClick = _a.onClick;
|
|
5845
5851
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5846
5852
|
});
|
|
5847
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5848
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5853
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5854
|
+
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) {
|
|
5849
5855
|
var theme = _a.theme;
|
|
5850
5856
|
return theme.colors.shades[200].color;
|
|
5851
5857
|
}, function (_a) {
|
|
5852
5858
|
var theme = _a.theme;
|
|
5853
5859
|
return theme.colors.pallete.primary.color;
|
|
5854
5860
|
});
|
|
5855
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5856
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5857
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5858
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5859
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5860
|
-
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$
|
|
5861
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5862
|
+
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"])));
|
|
5863
|
+
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"])));
|
|
5864
|
+
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"])));
|
|
5865
|
+
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"])));
|
|
5866
|
+
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"])));
|
|
5861
5867
|
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) {
|
|
5862
5868
|
var selected = _a.selected, theme = _a.theme;
|
|
5863
5869
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5864
5870
|
});
|
|
5865
|
-
var Container$
|
|
5866
|
-
var templateObject_1$
|
|
5871
|
+
var Container$13 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5872
|
+
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;
|
|
5867
5873
|
|
|
5868
5874
|
var radioIds$1 = {
|
|
5869
5875
|
oneTime: {
|
|
@@ -5913,17 +5919,17 @@ var Autoship = function (_a) {
|
|
|
5913
5919
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5914
5920
|
};
|
|
5915
5921
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5916
|
-
return (jsxs$1(Container$
|
|
5922
|
+
return (jsxs$1(Container$13, __assign$1({ className: className }, { children: [jsxs$1(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: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5917
5923
|
? benefitsColor.selected
|
|
5918
5924
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5919
5925
|
};
|
|
5920
5926
|
|
|
5921
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5927
|
+
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) {
|
|
5922
5928
|
var theme = _a.theme;
|
|
5923
5929
|
return theme.name === 'TheSpaDr' &&
|
|
5924
5930
|
"\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 ";
|
|
5925
5931
|
});
|
|
5926
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5932
|
+
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) {
|
|
5927
5933
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5928
5934
|
return isSelected
|
|
5929
5935
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5939,7 +5945,7 @@ var getSelectedBorder = function (_a) {
|
|
|
5939
5945
|
}
|
|
5940
5946
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
5941
5947
|
};
|
|
5942
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
5948
|
+
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) {
|
|
5943
5949
|
var selected = _a.selected, theme = _a.theme;
|
|
5944
5950
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
5945
5951
|
}, function (_a) {
|
|
@@ -5951,28 +5957,32 @@ var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __
|
|
|
5951
5957
|
var theme = _a.theme;
|
|
5952
5958
|
return theme.colors.pallete.primary.color;
|
|
5953
5959
|
});
|
|
5954
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5960
|
+
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) {
|
|
5955
5961
|
var onClick = _a.onClick;
|
|
5956
5962
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5957
5963
|
});
|
|
5958
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5959
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5964
|
+
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"])));
|
|
5965
|
+
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) {
|
|
5960
5966
|
var theme = _a.theme;
|
|
5961
5967
|
return theme.colors.shades[200].color;
|
|
5962
5968
|
}, function (_a) {
|
|
5963
5969
|
var theme = _a.theme;
|
|
5964
5970
|
return theme.colors.pallete.primary.color;
|
|
5965
5971
|
});
|
|
5966
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5967
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5968
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5969
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
5970
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$
|
|
5972
|
+
var BenefitsContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5973
|
+
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"])));
|
|
5974
|
+
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"])));
|
|
5975
|
+
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"])));
|
|
5976
|
+
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) {
|
|
5971
5977
|
var selected = _a.selected, theme = _a.theme;
|
|
5972
5978
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5973
5979
|
});
|
|
5974
|
-
var Container$
|
|
5975
|
-
var
|
|
5980
|
+
var Container$12 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5981
|
+
var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
5982
|
+
var theme = _a.theme;
|
|
5983
|
+
return theme.component.autoship.tooltip.margin;
|
|
5984
|
+
});
|
|
5985
|
+
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;
|
|
5976
5986
|
|
|
5977
5987
|
var radioIds = {
|
|
5978
5988
|
oneTime: {
|
|
@@ -6032,7 +6042,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6032
6042
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6033
6043
|
};
|
|
6034
6044
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6035
|
-
return (jsxs$1(Container$
|
|
6045
|
+
return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(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), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
6036
6046
|
? benefitsColor.selected
|
|
6037
6047
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6038
6048
|
};
|
|
@@ -6050,13 +6060,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6050
6060
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6051
6061
|
_a$2);
|
|
6052
6062
|
|
|
6053
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6054
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6055
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6056
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6057
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6058
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6059
|
-
var templateObject_1$
|
|
6063
|
+
var CustomerDetails = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
6064
|
+
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"])));
|
|
6065
|
+
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"])));
|
|
6066
|
+
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"])));
|
|
6067
|
+
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"])));
|
|
6068
|
+
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"])));
|
|
6069
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o;
|
|
6060
6070
|
|
|
6061
6071
|
var NameWithStars = function (_a) {
|
|
6062
6072
|
var name = _a.name, size = _a.size;
|
|
@@ -6074,10 +6084,10 @@ var ResultFeedback = function (_a) {
|
|
|
6074
6084
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6075
6085
|
};
|
|
6076
6086
|
|
|
6077
|
-
var Container$
|
|
6078
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6079
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6080
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6087
|
+
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; });
|
|
6088
|
+
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"])));
|
|
6089
|
+
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; });
|
|
6090
|
+
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) {
|
|
6081
6091
|
var theme = _a.theme;
|
|
6082
6092
|
return theme.colors.pallete.secondary.color;
|
|
6083
6093
|
}, function (_a) {
|
|
@@ -6087,7 +6097,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
6087
6097
|
var theme = _a.theme, size = _a.size;
|
|
6088
6098
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6089
6099
|
});
|
|
6090
|
-
var templateObject_1$
|
|
6100
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F;
|
|
6091
6101
|
|
|
6092
6102
|
/* base styles & size variants */
|
|
6093
6103
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6162,10 +6172,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6162
6172
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6163
6173
|
var infoText = buildInfoText(name, age, months);
|
|
6164
6174
|
var Component = componentByVariant[variant];
|
|
6165
|
-
return (jsxs$1(Container$
|
|
6175
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6166
6176
|
};
|
|
6167
6177
|
|
|
6168
|
-
var Section = newStyled.div(templateObject_1$
|
|
6178
|
+
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) {
|
|
6169
6179
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6170
6180
|
});
|
|
6171
6181
|
var CardHeader = function (_a) {
|
|
@@ -6176,16 +6186,16 @@ var CardFooter = function (_a) {
|
|
|
6176
6186
|
var children = _a.children;
|
|
6177
6187
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6178
6188
|
};
|
|
6179
|
-
var templateObject_1$
|
|
6189
|
+
var templateObject_1$1B;
|
|
6180
6190
|
|
|
6181
|
-
var Body = newStyled.div(templateObject_1$
|
|
6191
|
+
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"])));
|
|
6182
6192
|
var CardBody = function (_a) {
|
|
6183
6193
|
var children = _a.children;
|
|
6184
6194
|
return jsx$1(Body, { children: children }, void 0);
|
|
6185
6195
|
};
|
|
6186
|
-
var templateObject_1$
|
|
6196
|
+
var templateObject_1$1A;
|
|
6187
6197
|
|
|
6188
|
-
var Container
|
|
6198
|
+
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) {
|
|
6189
6199
|
var flex = _a.flex;
|
|
6190
6200
|
return flex &&
|
|
6191
6201
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6200,23 +6210,23 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
6200
6210
|
var Card$1 = function (_a) {
|
|
6201
6211
|
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;
|
|
6202
6212
|
var theme = useTheme();
|
|
6203
|
-
return (jsx$1(Container
|
|
6213
|
+
return (jsx$1(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));
|
|
6204
6214
|
};
|
|
6205
6215
|
var Card$2 = Object.assign(Card$1, {
|
|
6206
6216
|
Header: CardHeader,
|
|
6207
6217
|
Footer: CardFooter,
|
|
6208
6218
|
Body: CardBody,
|
|
6209
6219
|
});
|
|
6210
|
-
var templateObject_1$
|
|
6220
|
+
var templateObject_1$1z;
|
|
6211
6221
|
|
|
6212
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6213
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6214
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6222
|
+
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"])));
|
|
6223
|
+
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"])));
|
|
6224
|
+
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) {
|
|
6215
6225
|
var color = _a.color;
|
|
6216
6226
|
return color;
|
|
6217
6227
|
});
|
|
6218
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6219
|
-
var templateObject_1$
|
|
6228
|
+
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"])));
|
|
6229
|
+
var templateObject_1$1y, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
6220
6230
|
|
|
6221
6231
|
var Minimalistic = function (_a) {
|
|
6222
6232
|
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;
|
|
@@ -6224,28 +6234,28 @@ var Minimalistic = function (_a) {
|
|
|
6224
6234
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6225
6235
|
};
|
|
6226
6236
|
|
|
6227
|
-
var Container
|
|
6228
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
6229
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6230
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6237
|
+
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"])));
|
|
6238
|
+
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; });
|
|
6239
|
+
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; });
|
|
6240
|
+
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"])));
|
|
6231
6241
|
var Simple = function (_a) {
|
|
6232
6242
|
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;
|
|
6233
6243
|
var theme = useTheme();
|
|
6234
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container
|
|
6244
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$$, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6235
6245
|
};
|
|
6236
|
-
var templateObject_1$
|
|
6246
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6237
6247
|
|
|
6238
6248
|
var Bundle = {
|
|
6239
6249
|
Minimalistic: Minimalistic,
|
|
6240
6250
|
Simple: Simple,
|
|
6241
6251
|
};
|
|
6242
6252
|
|
|
6243
|
-
var Container$
|
|
6253
|
+
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) {
|
|
6244
6254
|
var displayBNPL = _a.displayBNPL;
|
|
6245
6255
|
return (displayBNPL ? 'flex' : 'none');
|
|
6246
6256
|
});
|
|
6247
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6248
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6257
|
+
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"])));
|
|
6258
|
+
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"])));
|
|
6249
6259
|
var BuyNowPayLater = function (_a) {
|
|
6250
6260
|
var _b;
|
|
6251
6261
|
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;
|
|
@@ -6255,43 +6265,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6255
6265
|
console.error('Icon', iconName, 'not found');
|
|
6256
6266
|
return null;
|
|
6257
6267
|
}
|
|
6258
|
-
return (jsx$1(Container$
|
|
6268
|
+
return (jsx$1(Container$_, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6259
6269
|
};
|
|
6260
|
-
var templateObject_1$
|
|
6270
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O;
|
|
6261
6271
|
|
|
6262
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6272
|
+
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; });
|
|
6263
6273
|
var Title$5 = function (_a) {
|
|
6264
6274
|
var title = _a.title;
|
|
6265
6275
|
var theme = useTheme();
|
|
6266
6276
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6267
6277
|
};
|
|
6268
|
-
var templateObject_1$
|
|
6278
|
+
var templateObject_1$1v;
|
|
6269
6279
|
|
|
6270
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6280
|
+
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; });
|
|
6271
6281
|
var Promo = function (_a) {
|
|
6272
6282
|
var text = _a.text;
|
|
6273
6283
|
var theme = useTheme();
|
|
6274
6284
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6275
6285
|
};
|
|
6276
|
-
var templateObject_1$
|
|
6286
|
+
var templateObject_1$1u;
|
|
6277
6287
|
|
|
6278
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6288
|
+
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; });
|
|
6279
6289
|
var Description$1 = function (_a) {
|
|
6280
6290
|
var text = _a.text;
|
|
6281
6291
|
var theme = useTheme();
|
|
6282
6292
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6283
6293
|
};
|
|
6284
|
-
var templateObject_1$
|
|
6294
|
+
var templateObject_1$1t;
|
|
6285
6295
|
|
|
6286
|
-
var Container$
|
|
6296
|
+
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"); });
|
|
6287
6297
|
var CloseButton$1 = function (_a) {
|
|
6288
6298
|
var onClick = _a.onClick, size = _a.size;
|
|
6289
6299
|
var theme = useTheme();
|
|
6290
|
-
return (jsx$1(Container$
|
|
6300
|
+
return (jsx$1(Container$Z, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6291
6301
|
};
|
|
6292
|
-
var templateObject_1$
|
|
6302
|
+
var templateObject_1$1s;
|
|
6293
6303
|
|
|
6294
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6304
|
+
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) {
|
|
6295
6305
|
var backgroundColor = _a.backgroundColor;
|
|
6296
6306
|
return backgroundColor;
|
|
6297
6307
|
}, function (_a) {
|
|
@@ -6306,7 +6316,7 @@ var OfferBanner = function (_a) {
|
|
|
6306
6316
|
var theme = useTheme();
|
|
6307
6317
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6308
6318
|
};
|
|
6309
|
-
var templateObject_1$
|
|
6319
|
+
var templateObject_1$1r;
|
|
6310
6320
|
|
|
6311
6321
|
var CartProductItem = {
|
|
6312
6322
|
Title: Title$5,
|
|
@@ -6316,20 +6326,20 @@ var CartProductItem = {
|
|
|
6316
6326
|
CloseButton: CloseButton$1,
|
|
6317
6327
|
};
|
|
6318
6328
|
|
|
6319
|
-
var Container$
|
|
6320
|
-
var MobileContainer = newStyled(Container$
|
|
6321
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6322
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6323
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6324
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6325
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6326
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6329
|
+
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"])));
|
|
6330
|
+
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"])));
|
|
6331
|
+
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"])));
|
|
6332
|
+
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"])));
|
|
6333
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6334
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6335
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6336
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6327
6337
|
var ClubPriceLabel = function (_a) {
|
|
6328
6338
|
var clubPrice = _a.clubPrice;
|
|
6329
6339
|
var isMobile = useWindowDimensions().isMobile;
|
|
6330
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6340
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$Y, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6331
6341
|
};
|
|
6332
|
-
var templateObject_1$
|
|
6342
|
+
var templateObject_1$1q, templateObject_2$$, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$e;
|
|
6333
6343
|
|
|
6334
6344
|
var Spacing = function (_a) {
|
|
6335
6345
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6337,10 +6347,10 @@ var Spacing = function (_a) {
|
|
|
6337
6347
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6338
6348
|
};
|
|
6339
6349
|
|
|
6340
|
-
var Container$
|
|
6341
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6342
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6343
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6350
|
+
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"])));
|
|
6351
|
+
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"])));
|
|
6352
|
+
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"])));
|
|
6353
|
+
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) {
|
|
6344
6354
|
var index = _a.index;
|
|
6345
6355
|
return "".concat(6 + 3 * index, "px");
|
|
6346
6356
|
}, function (_a) {
|
|
@@ -6349,15 +6359,15 @@ var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeT
|
|
|
6349
6359
|
});
|
|
6350
6360
|
var StrengthBars = function (_a) {
|
|
6351
6361
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6352
|
-
return (jsxs$1(Container$
|
|
6362
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6353
6363
|
};
|
|
6354
|
-
var templateObject_1$
|
|
6364
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B;
|
|
6355
6365
|
|
|
6356
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6357
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6358
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6359
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6360
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6366
|
+
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"])));
|
|
6367
|
+
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"])));
|
|
6368
|
+
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"])));
|
|
6369
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6370
|
+
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"])));
|
|
6361
6371
|
var RegularPriceTag = function () {
|
|
6362
6372
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6363
6373
|
};
|
|
@@ -6406,16 +6416,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6406
6416
|
: ComponentSize.XSmall;
|
|
6407
6417
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6408
6418
|
};
|
|
6409
|
-
return (jsxs$1(Container$
|
|
6419
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6410
6420
|
? finalPriceArray[0]
|
|
6411
6421
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6412
6422
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6423
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$r;
|
|
6414
6424
|
|
|
6415
|
-
var Container$
|
|
6416
|
-
var templateObject_1$
|
|
6425
|
+
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"])));
|
|
6426
|
+
var templateObject_1$1n;
|
|
6417
6427
|
|
|
6418
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6428
|
+
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) {
|
|
6419
6429
|
var marginRight = _a.marginRight;
|
|
6420
6430
|
return marginRight;
|
|
6421
6431
|
});
|
|
@@ -6427,11 +6437,11 @@ var StarList = function (_a) {
|
|
|
6427
6437
|
width: theme.component.stars.element[size].width,
|
|
6428
6438
|
height: theme.component.stars.element[size].height,
|
|
6429
6439
|
};
|
|
6430
|
-
return (jsx$1(Container$
|
|
6440
|
+
return (jsx$1(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6431
6441
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6432
6442
|
}) }, void 0));
|
|
6433
6443
|
};
|
|
6434
|
-
var templateObject_1$
|
|
6444
|
+
var templateObject_1$1m;
|
|
6435
6445
|
|
|
6436
6446
|
/* base styles & size variants */
|
|
6437
6447
|
var LabelStyles = {
|
|
@@ -6472,8 +6482,8 @@ var LabelStyles = {
|
|
|
6472
6482
|
});
|
|
6473
6483
|
},
|
|
6474
6484
|
};
|
|
6475
|
-
var Container$
|
|
6476
|
-
var templateObject_1$
|
|
6485
|
+
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"])));
|
|
6486
|
+
var templateObject_1$1l;
|
|
6477
6487
|
|
|
6478
6488
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6479
6489
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6493,7 +6503,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6493
6503
|
}),
|
|
6494
6504
|
];
|
|
6495
6505
|
});
|
|
6496
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6506
|
+
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; });
|
|
6497
6507
|
var starsNumber = 5;
|
|
6498
6508
|
var Rating = function (_a) {
|
|
6499
6509
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6514,9 +6524,9 @@ var Rating = function (_a) {
|
|
|
6514
6524
|
href: reviewsContainerId,
|
|
6515
6525
|
}
|
|
6516
6526
|
: {};
|
|
6517
|
-
return (jsxs$1(Container$
|
|
6527
|
+
return (jsxs$1(Container$V, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6518
6528
|
};
|
|
6519
|
-
var templateObject_1$
|
|
6529
|
+
var templateObject_1$1k;
|
|
6520
6530
|
|
|
6521
6531
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6522
6532
|
var width = _a.width, height = _a.height;
|
|
@@ -6526,10 +6536,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6526
6536
|
height: height,
|
|
6527
6537
|
});
|
|
6528
6538
|
});
|
|
6529
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6530
|
-
var Container$
|
|
6531
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6532
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6539
|
+
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"])));
|
|
6540
|
+
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"])));
|
|
6541
|
+
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"])));
|
|
6542
|
+
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; });
|
|
6533
6543
|
var getStylesBySize$9 = function (size) {
|
|
6534
6544
|
switch (size) {
|
|
6535
6545
|
case ComponentSize.Medium:
|
|
@@ -6555,15 +6565,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6555
6565
|
};
|
|
6556
6566
|
}
|
|
6557
6567
|
};
|
|
6558
|
-
var TopTagContainer$6 = newStyled.div(templateObject_5$
|
|
6568
|
+
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) {
|
|
6559
6569
|
var style = _a.style;
|
|
6560
6570
|
return style.width;
|
|
6561
6571
|
});
|
|
6562
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
6572
|
+
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) {
|
|
6563
6573
|
var style = _a.style;
|
|
6564
6574
|
return style.width;
|
|
6565
6575
|
});
|
|
6566
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6576
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6567
6577
|
var ProductItemMobile = function (_a) {
|
|
6568
6578
|
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 ? {
|
|
6569
6579
|
display: false,
|
|
@@ -6620,9 +6630,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6620
6630
|
return jsx(Fragment, {}, void 0);
|
|
6621
6631
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6622
6632
|
};
|
|
6623
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6633
|
+
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));
|
|
6624
6634
|
};
|
|
6625
|
-
var templateObject_1$
|
|
6635
|
+
var templateObject_1$1j, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$m, templateObject_7$f;
|
|
6626
6636
|
|
|
6627
6637
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6628
6638
|
var width = _a.width, height = _a.height;
|
|
@@ -6632,10 +6642,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6632
6642
|
height: height,
|
|
6633
6643
|
});
|
|
6634
6644
|
});
|
|
6635
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6636
|
-
var Container$
|
|
6637
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6638
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6645
|
+
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; });
|
|
6646
|
+
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"])));
|
|
6647
|
+
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"])));
|
|
6648
|
+
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; });
|
|
6639
6649
|
var getStylesBySize$8 = function (size) {
|
|
6640
6650
|
switch (size) {
|
|
6641
6651
|
case ComponentSize.Medium:
|
|
@@ -6661,16 +6671,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6661
6671
|
};
|
|
6662
6672
|
}
|
|
6663
6673
|
};
|
|
6664
|
-
var TopTagContainer$5 = newStyled.div(templateObject_5$
|
|
6674
|
+
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) {
|
|
6665
6675
|
var style = _a.style;
|
|
6666
6676
|
return style.width;
|
|
6667
6677
|
});
|
|
6668
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6669
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_7$
|
|
6678
|
+
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"])));
|
|
6679
|
+
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) {
|
|
6670
6680
|
var style = _a.style;
|
|
6671
6681
|
return style.width;
|
|
6672
6682
|
});
|
|
6673
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6683
|
+
var MarginTopContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6674
6684
|
var ProductItemTK = function (_a) {
|
|
6675
6685
|
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 ? {
|
|
6676
6686
|
display: false,
|
|
@@ -6714,26 +6724,26 @@ var ProductItemTK = function (_a) {
|
|
|
6714
6724
|
: undefined }, void 0));
|
|
6715
6725
|
};
|
|
6716
6726
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6717
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6727
|
+
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 ? (
|
|
6718
6728
|
// @ts-ignore
|
|
6719
6729
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6720
6730
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6721
6731
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6722
6732
|
} }, { 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));
|
|
6723
6733
|
};
|
|
6724
|
-
var templateObject_1$
|
|
6734
|
+
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;
|
|
6725
6735
|
|
|
6726
|
-
var Container$
|
|
6736
|
+
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"])));
|
|
6727
6737
|
function withProductGrid(ProductItemComponent, data) {
|
|
6728
6738
|
function WithProductGrid(props) {
|
|
6729
|
-
return (jsx$1(Container$
|
|
6739
|
+
return (jsx$1(Container$S, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6730
6740
|
}
|
|
6731
6741
|
/* istanbul ignore next */
|
|
6732
6742
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6733
6743
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6734
6744
|
return WithProductGrid;
|
|
6735
6745
|
}
|
|
6736
|
-
var templateObject_1$
|
|
6746
|
+
var templateObject_1$1h;
|
|
6737
6747
|
|
|
6738
6748
|
var Collection = {
|
|
6739
6749
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6780,12 +6790,12 @@ var OutOfStock = function (_a) {
|
|
|
6780
6790
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6781
6791
|
};
|
|
6782
6792
|
|
|
6783
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6784
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6785
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6786
|
-
var Span = newStyled.span(templateObject_4$
|
|
6787
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6788
|
-
var Label$
|
|
6793
|
+
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"])));
|
|
6794
|
+
newStyled(lt.Label)(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6795
|
+
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"])));
|
|
6796
|
+
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6797
|
+
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"])));
|
|
6798
|
+
var Label$4 = function (_a) {
|
|
6789
6799
|
var label = _a.label, values = _a.values;
|
|
6790
6800
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6791
6801
|
};
|
|
@@ -6798,27 +6808,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6798
6808
|
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6799
6809
|
};
|
|
6800
6810
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6801
|
-
Label: Label$
|
|
6811
|
+
Label: Label$4,
|
|
6802
6812
|
Option: Option,
|
|
6803
6813
|
OptionsContainer: OptionsContainer,
|
|
6804
6814
|
});
|
|
6805
|
-
var templateObject_1$
|
|
6815
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o;
|
|
6806
6816
|
|
|
6807
|
-
var Container$
|
|
6817
|
+
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) {
|
|
6808
6818
|
var borderColor = _a.borderColor;
|
|
6809
6819
|
return borderColor;
|
|
6810
6820
|
}, function (_a) {
|
|
6811
6821
|
var noStock = _a.noStock;
|
|
6812
6822
|
return (noStock ? '0.4' : '1');
|
|
6813
6823
|
});
|
|
6814
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6824
|
+
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"])));
|
|
6815
6825
|
var PatternSelector = function (_a) {
|
|
6816
6826
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6817
6827
|
var theme = useTheme();
|
|
6818
6828
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6819
|
-
return (jsx$1(Container$
|
|
6829
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6820
6830
|
};
|
|
6821
|
-
var templateObject_1$
|
|
6831
|
+
var templateObject_1$1f, templateObject_2$V;
|
|
6822
6832
|
|
|
6823
6833
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6824
6834
|
if (options == null || options.length === 0) {
|
|
@@ -6877,21 +6887,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6877
6887
|
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));
|
|
6878
6888
|
};
|
|
6879
6889
|
|
|
6880
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6881
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6882
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6890
|
+
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'); });
|
|
6891
|
+
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"])));
|
|
6892
|
+
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) {
|
|
6883
6893
|
return props.rightToLeft &&
|
|
6884
6894
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6885
6895
|
});
|
|
6886
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6887
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6888
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6896
|
+
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; });
|
|
6897
|
+
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; });
|
|
6898
|
+
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; });
|
|
6889
6899
|
var CrossSellCheckbox = function (_a) {
|
|
6890
6900
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6891
6901
|
var theme = useTheme();
|
|
6892
6902
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6893
6903
|
};
|
|
6894
|
-
var templateObject_1$
|
|
6904
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
6895
6905
|
|
|
6896
6906
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6897
6907
|
__proto__: null,
|
|
@@ -6919,7 +6929,7 @@ var sizeMapper = (_a = {},
|
|
|
6919
6929
|
_a[ComponentSize.Large] = 'large',
|
|
6920
6930
|
_a[ComponentSize.XSmall] = 'small',
|
|
6921
6931
|
_a);
|
|
6922
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6932
|
+
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) {
|
|
6923
6933
|
var wide = _a.wide;
|
|
6924
6934
|
return (wide ? '100%' : 'fit-content');
|
|
6925
6935
|
}, function (_a) {
|
|
@@ -6941,11 +6951,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObj
|
|
|
6941
6951
|
var theme = _a.theme;
|
|
6942
6952
|
return theme.colors.text.disabled;
|
|
6943
6953
|
});
|
|
6944
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6954
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6945
6955
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6946
6956
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6947
6957
|
});
|
|
6948
|
-
var templateObject_1$
|
|
6958
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6949
6959
|
|
|
6950
6960
|
var BaseCTA = function (_a) {
|
|
6951
6961
|
var _b, _c, _d;
|
|
@@ -7032,44 +7042,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7032
7042
|
} }), void 0));
|
|
7033
7043
|
};
|
|
7034
7044
|
|
|
7035
|
-
var Container$
|
|
7036
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7037
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7038
|
-
var Details = newStyled.span(templateObject_4$
|
|
7045
|
+
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; });
|
|
7046
|
+
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"])));
|
|
7047
|
+
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; });
|
|
7048
|
+
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; });
|
|
7039
7049
|
var Note = function (_a) {
|
|
7040
7050
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7041
7051
|
var theme = useTheme();
|
|
7042
|
-
return (jsxs$1(Container$
|
|
7052
|
+
return (jsxs$1(Container$Q, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7043
7053
|
};
|
|
7044
|
-
var templateObject_1$
|
|
7054
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7045
7055
|
|
|
7046
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7056
|
+
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) {
|
|
7047
7057
|
var theme = _a.theme;
|
|
7048
7058
|
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 ");
|
|
7049
7059
|
});
|
|
7050
|
-
var Line = newStyled.div(templateObject_2$
|
|
7051
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7060
|
+
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; });
|
|
7061
|
+
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({
|
|
7052
7062
|
flexDirection: ['column', 'row'],
|
|
7053
7063
|
}));
|
|
7054
|
-
var Col = newStyled.div(templateObject_4$
|
|
7064
|
+
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({
|
|
7055
7065
|
margin: ['0', '0 1.25rem'],
|
|
7056
7066
|
marginBottom: ['1.875rem', '0'],
|
|
7057
7067
|
alignItems: ['center', 'flex-start'],
|
|
7058
7068
|
textAlign: ['center', 'inherit'],
|
|
7059
7069
|
width: ['100%', 'inherit'],
|
|
7060
7070
|
}));
|
|
7061
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7071
|
+
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({
|
|
7062
7072
|
marginRight: ['0', '0.438rem'],
|
|
7063
7073
|
marginBottom: ['10px', '0'],
|
|
7064
7074
|
width: ['auto', '1.5rem'],
|
|
7065
7075
|
}));
|
|
7066
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7076
|
+
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({
|
|
7067
7077
|
display: ['block', 'flex'],
|
|
7068
7078
|
}), function (_a) {
|
|
7069
7079
|
var theme = _a.theme;
|
|
7070
7080
|
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 ");
|
|
7071
7081
|
});
|
|
7072
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7082
|
+
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) {
|
|
7073
7083
|
var theme = _a.theme;
|
|
7074
7084
|
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 ");
|
|
7075
7085
|
}, function (_a) {
|
|
@@ -7080,22 +7090,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
7080
7090
|
})
|
|
7081
7091
|
: '';
|
|
7082
7092
|
});
|
|
7083
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7093
|
+
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; });
|
|
7084
7094
|
var DeliveryDetails = function (_a) {
|
|
7085
7095
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7086
7096
|
var theme = useTheme();
|
|
7087
7097
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7088
7098
|
};
|
|
7089
|
-
var templateObject_1$
|
|
7099
|
+
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;
|
|
7090
7100
|
|
|
7091
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7101
|
+
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) {
|
|
7092
7102
|
var top = _a.top;
|
|
7093
7103
|
return top;
|
|
7094
7104
|
}, function (_a) {
|
|
7095
7105
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7096
7106
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7097
7107
|
});
|
|
7098
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7108
|
+
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) {
|
|
7099
7109
|
var height = _a.height;
|
|
7100
7110
|
return height;
|
|
7101
7111
|
}, function (_a) {
|
|
@@ -7142,20 +7152,20 @@ var Drawer = function (_a) {
|
|
|
7142
7152
|
}, [isOpen, onClose, onOpen]);
|
|
7143
7153
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7144
7154
|
};
|
|
7145
|
-
var templateObject_1$
|
|
7155
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7146
7156
|
|
|
7147
7157
|
var TooltipArrow = function (_a) {
|
|
7148
7158
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7149
7159
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7150
7160
|
};
|
|
7151
7161
|
|
|
7152
|
-
var List = newStyled.ul(templateObject_1$
|
|
7153
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7154
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7155
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7156
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7157
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7158
|
-
var templateObject_1$
|
|
7162
|
+
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"])));
|
|
7163
|
+
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"])));
|
|
7164
|
+
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"])));
|
|
7165
|
+
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"])));
|
|
7166
|
+
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; });
|
|
7167
|
+
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; });
|
|
7168
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i;
|
|
7159
7169
|
|
|
7160
7170
|
var DropdownListIcons = function (_a) {
|
|
7161
7171
|
var items = _a.items;
|
|
@@ -7168,13 +7178,13 @@ var Dropdown = function (_a) {
|
|
|
7168
7178
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7169
7179
|
};
|
|
7170
7180
|
|
|
7171
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7172
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7173
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7174
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7175
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7176
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7177
|
-
var templateObject_1$
|
|
7181
|
+
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"])));
|
|
7182
|
+
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"])));
|
|
7183
|
+
var SizeLabel = newStyled.span(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7184
|
+
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"])));
|
|
7185
|
+
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"])));
|
|
7186
|
+
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"])));
|
|
7187
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7178
7188
|
|
|
7179
7189
|
var SizeDropdown = function (_a) {
|
|
7180
7190
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7197,10 +7207,10 @@ var SizeDropdown = function (_a) {
|
|
|
7197
7207
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7198
7208
|
};
|
|
7199
7209
|
|
|
7200
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7201
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7202
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7203
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7210
|
+
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; });
|
|
7211
|
+
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; });
|
|
7212
|
+
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"])));
|
|
7213
|
+
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"])));
|
|
7204
7214
|
var DropdownDialog = function (_a) {
|
|
7205
7215
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7206
7216
|
var theme = useTheme$1();
|
|
@@ -7209,7 +7219,7 @@ var DropdownDialog = function (_a) {
|
|
|
7209
7219
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7210
7220
|
}) }), void 0) }), void 0));
|
|
7211
7221
|
};
|
|
7212
|
-
var templateObject_1$
|
|
7222
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r;
|
|
7213
7223
|
|
|
7214
7224
|
function FilteringDropdown(_a) {
|
|
7215
7225
|
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;
|
|
@@ -7242,29 +7252,29 @@ function FilteringDropdown(_a) {
|
|
|
7242
7252
|
}) }, void 0)] }), void 0));
|
|
7243
7253
|
}
|
|
7244
7254
|
|
|
7245
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7246
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7247
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7248
|
-
var Container$
|
|
7255
|
+
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; });
|
|
7256
|
+
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; });
|
|
7257
|
+
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"])));
|
|
7258
|
+
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'); });
|
|
7249
7259
|
var Accordion = function (_a) {
|
|
7250
7260
|
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;
|
|
7251
7261
|
var theme = useTheme();
|
|
7252
7262
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7253
|
-
return (jsxs$1(Container$
|
|
7263
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7254
7264
|
};
|
|
7255
|
-
var templateObject_1$
|
|
7256
|
-
|
|
7257
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7258
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7259
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7260
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7261
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7262
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7263
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7264
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7265
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7266
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7267
|
-
var templateObject_1$
|
|
7265
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7266
|
+
|
|
7267
|
+
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; });
|
|
7268
|
+
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"])));
|
|
7269
|
+
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"])));
|
|
7270
|
+
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"])));
|
|
7271
|
+
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; });
|
|
7272
|
+
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; });
|
|
7273
|
+
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'); });
|
|
7274
|
+
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; });
|
|
7275
|
+
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"])));
|
|
7276
|
+
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"])));
|
|
7277
|
+
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;
|
|
7268
7278
|
|
|
7269
7279
|
var getStylesBySize$7 = function (size, theme) {
|
|
7270
7280
|
switch (size) {
|
|
@@ -7329,9 +7339,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7329
7339
|
} }), id: id }, void 0));
|
|
7330
7340
|
};
|
|
7331
7341
|
|
|
7332
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7333
|
-
var LI = newStyled.li(templateObject_2$
|
|
7334
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7342
|
+
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"])));
|
|
7343
|
+
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; });
|
|
7344
|
+
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"])));
|
|
7335
7345
|
var Tags = function (_a) {
|
|
7336
7346
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7337
7347
|
var theme = useTheme();
|
|
@@ -7339,7 +7349,7 @@ var Tags = function (_a) {
|
|
|
7339
7349
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7340
7350
|
}) }), void 0));
|
|
7341
7351
|
};
|
|
7342
|
-
var templateObject_1$
|
|
7352
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z;
|
|
7343
7353
|
|
|
7344
7354
|
var Filters = function (_a) {
|
|
7345
7355
|
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;
|
|
@@ -7475,8 +7485,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7475
7485
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7476
7486
|
};
|
|
7477
7487
|
|
|
7478
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7479
|
-
var Container$
|
|
7488
|
+
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"])));
|
|
7489
|
+
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"])));
|
|
7480
7490
|
var FitGuarantee = function (_a) {
|
|
7481
7491
|
var _b;
|
|
7482
7492
|
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;
|
|
@@ -7487,17 +7497,17 @@ var FitGuarantee = function (_a) {
|
|
|
7487
7497
|
console.error('Icon', iconName, 'not found');
|
|
7488
7498
|
return null;
|
|
7489
7499
|
}
|
|
7490
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7500
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7491
7501
|
margin: '0.1rem 0',
|
|
7492
7502
|
width: '100%',
|
|
7493
7503
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7494
7504
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7495
7505
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7496
7506
|
};
|
|
7497
|
-
var templateObject_1$
|
|
7507
|
+
var templateObject_1$13, templateObject_2$J;
|
|
7498
7508
|
|
|
7499
|
-
var Container$
|
|
7500
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7509
|
+
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"])));
|
|
7510
|
+
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; });
|
|
7501
7511
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7502
7512
|
border: 'none',
|
|
7503
7513
|
background: 'transparent',
|
|
@@ -7510,9 +7520,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7510
7520
|
var FitPredictor = function (_a) {
|
|
7511
7521
|
var onClick = _a.onClick;
|
|
7512
7522
|
var theme = useTheme();
|
|
7513
|
-
return (jsxs(Container$
|
|
7523
|
+
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));
|
|
7514
7524
|
};
|
|
7515
|
-
var templateObject_1$
|
|
7525
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7516
7526
|
|
|
7517
7527
|
var Button$7 = newStyled.button(function () { return ({
|
|
7518
7528
|
background: 'transparent',
|
|
@@ -11756,14 +11766,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11756
11766
|
return Slider;
|
|
11757
11767
|
}(React__default.Component);
|
|
11758
11768
|
|
|
11759
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11769
|
+
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) {
|
|
11760
11770
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11761
11771
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11762
11772
|
}, function (_a) {
|
|
11763
11773
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11764
11774
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11765
11775
|
});
|
|
11766
|
-
var templateObject_1$
|
|
11776
|
+
var templateObject_1$11;
|
|
11767
11777
|
|
|
11768
11778
|
var getStylesBySize$6 = function (size) {
|
|
11769
11779
|
// rem units
|
|
@@ -11822,7 +11832,7 @@ var SliderNavigation = function (_a) {
|
|
|
11822
11832
|
} }, { 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));
|
|
11823
11833
|
};
|
|
11824
11834
|
|
|
11825
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11835
|
+
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) {
|
|
11826
11836
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11827
11837
|
return borderRadiusVariant &&
|
|
11828
11838
|
"\n border-radius: 20px;\n ";
|
|
@@ -11832,7 +11842,7 @@ var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTe
|
|
|
11832
11842
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11833
11843
|
: 'inherit';
|
|
11834
11844
|
});
|
|
11835
|
-
var templateObject_1
|
|
11845
|
+
var templateObject_1$10;
|
|
11836
11846
|
|
|
11837
11847
|
var ImageSmallPreview = function (_a) {
|
|
11838
11848
|
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;
|
|
@@ -11840,9 +11850,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11840
11850
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height }, void 0));
|
|
11841
11851
|
};
|
|
11842
11852
|
|
|
11843
|
-
var horizontalStyles = css(templateObject_1
|
|
11844
|
-
var verticalStyles = css(templateObject_2$
|
|
11845
|
-
var Container$
|
|
11853
|
+
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"])));
|
|
11854
|
+
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"])));
|
|
11855
|
+
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) {
|
|
11846
11856
|
var position = _a.position;
|
|
11847
11857
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11848
11858
|
}, function (_a) {
|
|
@@ -11850,12 +11860,12 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11850
11860
|
return hasOverflowArrows &&
|
|
11851
11861
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11852
11862
|
});
|
|
11853
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11854
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11855
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11856
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11857
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11858
|
-
var templateObject_1
|
|
11863
|
+
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"])));
|
|
11864
|
+
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"])));
|
|
11865
|
+
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"])));
|
|
11866
|
+
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"])));
|
|
11867
|
+
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"])));
|
|
11868
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$y, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a;
|
|
11859
11869
|
|
|
11860
11870
|
var ImagePreviewList = function (_a) {
|
|
11861
11871
|
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;
|
|
@@ -11867,7 +11877,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11867
11877
|
var element = document.querySelector(".imageListContainer");
|
|
11868
11878
|
element.scrollBy(0, 200);
|
|
11869
11879
|
};
|
|
11870
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11880
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$M, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11871
11881
|
arrowWidth: 0.75,
|
|
11872
11882
|
arrowHeight: 1.25,
|
|
11873
11883
|
arrowPadding: 1.625,
|
|
@@ -13465,21 +13475,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13465
13475
|
afterZoomOut: PropTypes.func
|
|
13466
13476
|
} : {};
|
|
13467
13477
|
|
|
13468
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13469
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13470
|
-
var templateObject_1$
|
|
13478
|
+
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); });
|
|
13479
|
+
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; });
|
|
13480
|
+
var templateObject_1$_, templateObject_2$G;
|
|
13471
13481
|
|
|
13472
13482
|
var ProgressBar$1 = function (_a) {
|
|
13473
13483
|
var progress = _a.progress, hide = _a.hide;
|
|
13474
13484
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13475
13485
|
};
|
|
13476
13486
|
|
|
13477
|
-
var Container$
|
|
13478
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13479
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13480
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13481
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13482
|
-
var templateObject_1$
|
|
13487
|
+
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"])));
|
|
13488
|
+
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; });
|
|
13489
|
+
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"])));
|
|
13490
|
+
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"])));
|
|
13491
|
+
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"])));
|
|
13492
|
+
var templateObject_1$Z, templateObject_2$F, templateObject_3$x, templateObject_4$n, templateObject_5$h;
|
|
13483
13493
|
|
|
13484
13494
|
var Video$1 = function (_a) {
|
|
13485
13495
|
var _b, _c, _d, _e;
|
|
@@ -13518,41 +13528,41 @@ var Video$1 = function (_a) {
|
|
|
13518
13528
|
setVideoProgress(videoRef.current.currentTime);
|
|
13519
13529
|
}
|
|
13520
13530
|
};
|
|
13521
|
-
return (jsxs$1(Container$
|
|
13531
|
+
return (jsxs$1(Container$L, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13522
13532
|
};
|
|
13523
13533
|
|
|
13524
|
-
var Container$
|
|
13534
|
+
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) {
|
|
13525
13535
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13526
13536
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13527
13537
|
});
|
|
13528
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13538
|
+
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) {
|
|
13529
13539
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13530
13540
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13531
13541
|
}, function (_a) {
|
|
13532
13542
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13533
13543
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13534
13544
|
});
|
|
13535
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
13545
|
+
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) {
|
|
13536
13546
|
var isCTAHidden = _a.isCTAHidden;
|
|
13537
13547
|
return (isCTAHidden ? '60px' : '120px');
|
|
13538
13548
|
});
|
|
13539
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13540
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13541
|
-
var templateObject_1$
|
|
13549
|
+
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"])));
|
|
13550
|
+
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"])));
|
|
13551
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13542
13552
|
|
|
13543
13553
|
var ImageProductSlide$1 = function (_a) {
|
|
13544
13554
|
var _b;
|
|
13545
13555
|
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;
|
|
13546
13556
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13547
13557
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13548
|
-
return (jsxs$1(Container$
|
|
13558
|
+
return (jsxs$1(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13549
13559
|
alt: content.alt,
|
|
13550
13560
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13551
13561
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13552
13562
|
};
|
|
13553
13563
|
|
|
13554
|
-
var Container$
|
|
13555
|
-
var templateObject_1$
|
|
13564
|
+
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"])));
|
|
13565
|
+
var templateObject_1$X;
|
|
13556
13566
|
|
|
13557
13567
|
var getInitialIndex = function (images, selectedValue) {
|
|
13558
13568
|
if (selectedValue) {
|
|
@@ -13578,7 +13588,7 @@ var ProductGallery = function (_a) {
|
|
|
13578
13588
|
setActiveIndex(index);
|
|
13579
13589
|
};
|
|
13580
13590
|
var selectedImage = images[activeIndex];
|
|
13581
|
-
return (jsxs$1(Container$
|
|
13591
|
+
return (jsxs$1(Container$J, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13582
13592
|
};
|
|
13583
13593
|
|
|
13584
13594
|
var getStylesBySize$5 = function (size) {
|
|
@@ -13600,7 +13610,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13600
13610
|
};
|
|
13601
13611
|
}
|
|
13602
13612
|
};
|
|
13603
|
-
var Container$
|
|
13613
|
+
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) {
|
|
13604
13614
|
var backgroundColor = _a.backgroundColor;
|
|
13605
13615
|
return backgroundColor;
|
|
13606
13616
|
}, function (_a) {
|
|
@@ -13628,11 +13638,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13628
13638
|
var IconButton = function (_a) {
|
|
13629
13639
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13630
13640
|
var theme = useTheme();
|
|
13631
|
-
return (jsx$1(Container$
|
|
13641
|
+
return (jsx$1(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));
|
|
13632
13642
|
};
|
|
13633
|
-
var templateObject_1$
|
|
13643
|
+
var templateObject_1$W;
|
|
13634
13644
|
|
|
13635
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13645
|
+
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; });
|
|
13636
13646
|
var AmazonButton = function (_a) {
|
|
13637
13647
|
var onClick = _a.onClick;
|
|
13638
13648
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13641,9 +13651,9 @@ var PaypalButton = function (_a) {
|
|
|
13641
13651
|
var onClick = _a.onClick;
|
|
13642
13652
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13643
13653
|
};
|
|
13644
|
-
var templateObject_1$
|
|
13654
|
+
var templateObject_1$V;
|
|
13645
13655
|
|
|
13646
|
-
var Container$
|
|
13656
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13647
13657
|
height: 'auto',
|
|
13648
13658
|
textAlign: 'center',
|
|
13649
13659
|
justifyContent: 'center',
|
|
@@ -13693,12 +13703,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13693
13703
|
textAlign: 'center',
|
|
13694
13704
|
lineHeight: '18px',
|
|
13695
13705
|
};
|
|
13696
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13706
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$H, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13697
13707
|
};
|
|
13698
13708
|
|
|
13699
|
-
var Container$
|
|
13700
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13701
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13709
|
+
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'); });
|
|
13710
|
+
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'); });
|
|
13711
|
+
var StyledTitle = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13702
13712
|
var titlePosition = _a.titlePosition;
|
|
13703
13713
|
return titlePosition == 'center' &&
|
|
13704
13714
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13706,24 +13716,24 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13706
13716
|
var ImageCardWithDescription = function (_a) {
|
|
13707
13717
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13708
13718
|
var isMobile = useWindowDimensions().isMobile;
|
|
13709
|
-
return (jsxs$1(Container$
|
|
13719
|
+
return (jsxs$1(Container$G, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13710
13720
|
};
|
|
13711
|
-
var templateObject_1$
|
|
13721
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$v;
|
|
13712
13722
|
|
|
13713
|
-
var Label$
|
|
13723
|
+
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) {
|
|
13714
13724
|
var color = _a.color;
|
|
13715
13725
|
return color;
|
|
13716
13726
|
});
|
|
13717
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13727
|
+
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) {
|
|
13718
13728
|
var color = _a.color;
|
|
13719
13729
|
return color;
|
|
13720
13730
|
});
|
|
13721
13731
|
var InputLabel = function (_a) {
|
|
13722
13732
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13723
13733
|
var theme = useTheme();
|
|
13724
|
-
return (jsxs$1(Label$
|
|
13734
|
+
return (jsxs$1(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13725
13735
|
};
|
|
13726
|
-
var templateObject_1$
|
|
13736
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13727
13737
|
|
|
13728
13738
|
var containerByStatus = function (theme, status) {
|
|
13729
13739
|
if (status === InputValidationType.Valid)
|
|
@@ -13732,12 +13742,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13732
13742
|
return theme.colors.semantic.urgent.color;
|
|
13733
13743
|
return '';
|
|
13734
13744
|
};
|
|
13735
|
-
var Container$
|
|
13745
|
+
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) {
|
|
13736
13746
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13737
13747
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13738
13748
|
});
|
|
13739
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13740
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13749
|
+
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"])));
|
|
13750
|
+
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) {
|
|
13741
13751
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13742
13752
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13743
13753
|
}, function (_a) {
|
|
@@ -13792,11 +13802,11 @@ var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __
|
|
|
13792
13802
|
return hasValue &&
|
|
13793
13803
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13794
13804
|
});
|
|
13795
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13805
|
+
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) {
|
|
13796
13806
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13797
13807
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13798
13808
|
});
|
|
13799
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13809
|
+
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) {
|
|
13800
13810
|
var theme = _a.theme;
|
|
13801
13811
|
return theme.component.input.placeholderColor;
|
|
13802
13812
|
}, function (_a) {
|
|
@@ -13809,8 +13819,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13809
13819
|
var theme = _a.theme;
|
|
13810
13820
|
return theme.component.input.lineHeight;
|
|
13811
13821
|
});
|
|
13812
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13813
|
-
var templateObject_1$
|
|
13822
|
+
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"])));
|
|
13823
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u, templateObject_4$l, templateObject_5$f, templateObject_6$e;
|
|
13814
13824
|
|
|
13815
13825
|
var BaseInput = function (_a) {
|
|
13816
13826
|
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"]);
|
|
@@ -13833,7 +13843,7 @@ var BaseInput = function (_a) {
|
|
|
13833
13843
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13834
13844
|
}, [status]);
|
|
13835
13845
|
var hasValue = Boolean(value);
|
|
13836
|
-
return (jsxs$1(Container$
|
|
13846
|
+
return (jsxs$1(Container$F, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13837
13847
|
onChange(event.target.value, event);
|
|
13838
13848
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13839
13849
|
onChange('', { target: { value: '' } });
|
|
@@ -13854,11 +13864,11 @@ var Button$5 = function (_a) {
|
|
|
13854
13864
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13855
13865
|
};
|
|
13856
13866
|
|
|
13857
|
-
var Container$
|
|
13867
|
+
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) {
|
|
13858
13868
|
var theme = _a.theme;
|
|
13859
13869
|
return theme.component.inputCustom.input.borderRadius;
|
|
13860
13870
|
});
|
|
13861
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13871
|
+
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) {
|
|
13862
13872
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13863
13873
|
return defaultRounded
|
|
13864
13874
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13873,23 +13883,23 @@ var Custom = function (_a) {
|
|
|
13873
13883
|
text: text,
|
|
13874
13884
|
disabled: rest.disabled,
|
|
13875
13885
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13876
|
-
return (jsx$1(Container$
|
|
13886
|
+
return (jsx$1(Container$E, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13877
13887
|
};
|
|
13878
|
-
var templateObject_1$
|
|
13888
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13879
13889
|
|
|
13880
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13890
|
+
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) {
|
|
13881
13891
|
var size = _a.size;
|
|
13882
13892
|
return (size === 'small' ? '36px' : '');
|
|
13883
13893
|
});
|
|
13884
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13885
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13894
|
+
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"])));
|
|
13895
|
+
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"])));
|
|
13886
13896
|
var Success = function (_a) {
|
|
13887
13897
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13888
13898
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13889
13899
|
};
|
|
13890
|
-
var templateObject_1$
|
|
13900
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t;
|
|
13891
13901
|
|
|
13892
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13902
|
+
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) {
|
|
13893
13903
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13894
13904
|
return status === InputValidationType.Empty &&
|
|
13895
13905
|
type === 'primary' &&
|
|
@@ -13906,16 +13916,16 @@ var BasePlusButton = function (_a) {
|
|
|
13906
13916
|
}
|
|
13907
13917
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13908
13918
|
};
|
|
13909
|
-
var templateObject_1$
|
|
13919
|
+
var templateObject_1$P;
|
|
13910
13920
|
|
|
13911
|
-
var Container$
|
|
13912
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13921
|
+
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"])));
|
|
13922
|
+
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"])));
|
|
13913
13923
|
var BasePlusIcon = function (_a) {
|
|
13914
13924
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13915
13925
|
var theme = useTheme();
|
|
13916
|
-
return (jsx$1(Container$
|
|
13926
|
+
return (jsx$1(Container$D, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13917
13927
|
};
|
|
13918
|
-
var templateObject_1$
|
|
13928
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13919
13929
|
|
|
13920
13930
|
var Input$3 = {
|
|
13921
13931
|
Simple: BaseInput,
|
|
@@ -13960,7 +13970,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13960
13970
|
}, [preventTouch, ref, touchStart]);
|
|
13961
13971
|
}
|
|
13962
13972
|
|
|
13963
|
-
var Container$
|
|
13973
|
+
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) {
|
|
13964
13974
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13965
13975
|
return borderRadiusVariant &&
|
|
13966
13976
|
"\n border-radius: 40px;\n ";
|
|
@@ -13969,11 +13979,11 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13969
13979
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13970
13980
|
});
|
|
13971
13981
|
// max-height: 31.875rem;
|
|
13972
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13973
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13974
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_4$
|
|
13975
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
13976
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
13982
|
+
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'); });
|
|
13983
|
+
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"])));
|
|
13984
|
+
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"])));
|
|
13985
|
+
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"])));
|
|
13986
|
+
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"])));
|
|
13977
13987
|
var settings$1 = {
|
|
13978
13988
|
dots: true,
|
|
13979
13989
|
infinite: false,
|
|
@@ -14018,7 +14028,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14018
14028
|
}
|
|
14019
14029
|
}
|
|
14020
14030
|
}, [contents, selectedValue]);
|
|
14021
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14031
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14022
14032
|
var _a;
|
|
14023
14033
|
var activeSlide = contents[e];
|
|
14024
14034
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14032,16 +14042,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14032
14042
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14033
14043
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14034
14044
|
};
|
|
14035
|
-
var templateObject_1$
|
|
14045
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
14036
14046
|
|
|
14037
|
-
var Container$
|
|
14047
|
+
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"])));
|
|
14038
14048
|
var ProductGalleryMobile = function (_a) {
|
|
14039
14049
|
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;
|
|
14040
14050
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14041
14051
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14042
|
-
return (jsx$1(Container$
|
|
14052
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14043
14053
|
};
|
|
14044
|
-
var templateObject_1$
|
|
14054
|
+
var templateObject_1$M;
|
|
14045
14055
|
|
|
14046
14056
|
function _extends() {
|
|
14047
14057
|
_extends = Object.assign || function (target) {
|
|
@@ -14308,27 +14318,27 @@ function useSwipeable(options) {
|
|
|
14308
14318
|
return handlers;
|
|
14309
14319
|
}
|
|
14310
14320
|
|
|
14311
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14321
|
+
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"])));
|
|
14312
14322
|
var ArrowButton = function (_a) {
|
|
14313
14323
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14314
14324
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14315
14325
|
};
|
|
14316
|
-
var templateObject_1$
|
|
14326
|
+
var templateObject_1$L;
|
|
14317
14327
|
|
|
14318
|
-
var Container$
|
|
14328
|
+
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"])));
|
|
14319
14329
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14320
14330
|
var SlideDots = function (_a) {
|
|
14321
14331
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14322
14332
|
var theme = useTheme();
|
|
14323
|
-
return (jsx$1(Container$
|
|
14333
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14324
14334
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14325
14335
|
: 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));
|
|
14326
14336
|
};
|
|
14327
|
-
var templateObject_1$
|
|
14337
|
+
var templateObject_1$K;
|
|
14328
14338
|
|
|
14329
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14330
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14331
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14339
|
+
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"])));
|
|
14340
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14341
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14332
14342
|
var SlideNavigation = function (_a) {
|
|
14333
14343
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14334
14344
|
var theme = useTheme();
|
|
@@ -14340,23 +14350,23 @@ var SlideNavigation = function (_a) {
|
|
|
14340
14350
|
onNavigate(selectedIndex + 1);
|
|
14341
14351
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14342
14352
|
};
|
|
14343
|
-
var templateObject_1$
|
|
14353
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$r;
|
|
14344
14354
|
|
|
14345
|
-
var Container$
|
|
14355
|
+
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) {
|
|
14346
14356
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14347
14357
|
return borderRadiusVariant &&
|
|
14348
14358
|
"\n border-radius: 40px;\n ";
|
|
14349
14359
|
});
|
|
14350
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14351
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
14360
|
+
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'); });
|
|
14361
|
+
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"])));
|
|
14352
14362
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14353
14363
|
var _b, _c;
|
|
14354
14364
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14355
|
-
return (jsxs$1(Container$
|
|
14365
|
+
return (jsxs$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14356
14366
|
});
|
|
14357
|
-
var templateObject_1$
|
|
14367
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14358
14368
|
|
|
14359
|
-
var Container$
|
|
14369
|
+
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"])));
|
|
14360
14370
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14361
14371
|
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;
|
|
14362
14372
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14378,11 +14388,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14378
14388
|
useEffect(function () {
|
|
14379
14389
|
setSelectedImage(images[index]);
|
|
14380
14390
|
}, [index, images]);
|
|
14381
|
-
return (jsxs$1(Container$
|
|
14391
|
+
return (jsxs$1(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14382
14392
|
};
|
|
14383
|
-
var templateObject_1$
|
|
14393
|
+
var templateObject_1$H;
|
|
14384
14394
|
|
|
14385
|
-
var Container$
|
|
14395
|
+
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) {
|
|
14386
14396
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14387
14397
|
return borderRadiusVariant &&
|
|
14388
14398
|
"\n border-radius: 40px;\n ";
|
|
@@ -14391,14 +14401,14 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14391
14401
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14392
14402
|
});
|
|
14393
14403
|
// max-height: 31.875rem;
|
|
14394
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14395
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
14396
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14397
|
-
var Video = newStyled.div(templateObject_5$
|
|
14398
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14399
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14400
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14401
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
14404
|
+
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'); });
|
|
14405
|
+
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"])));
|
|
14406
|
+
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"])));
|
|
14407
|
+
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"])));
|
|
14408
|
+
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"])));
|
|
14409
|
+
var Text$2 = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14410
|
+
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"])));
|
|
14411
|
+
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"])));
|
|
14402
14412
|
var settings = {
|
|
14403
14413
|
dots: true,
|
|
14404
14414
|
infinite: false,
|
|
@@ -14443,7 +14453,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14443
14453
|
}
|
|
14444
14454
|
}
|
|
14445
14455
|
}, [images, selectedValue]);
|
|
14446
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14456
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$x, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14447
14457
|
var _a;
|
|
14448
14458
|
var activeSlide = images[e];
|
|
14449
14459
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14456,14 +14466,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14456
14466
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14457
14467
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14458
14468
|
};
|
|
14459
|
-
var templateObject_1$
|
|
14469
|
+
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;
|
|
14460
14470
|
|
|
14461
|
-
var Container$
|
|
14471
|
+
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"])));
|
|
14462
14472
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14463
14473
|
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;
|
|
14464
|
-
return (jsx$1(Container$
|
|
14474
|
+
return (jsx$1(Container$w, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14465
14475
|
};
|
|
14466
|
-
var templateObject_1$
|
|
14476
|
+
var templateObject_1$F;
|
|
14467
14477
|
|
|
14468
14478
|
var __defProp$1 = Object.defineProperty;
|
|
14469
14479
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14596,17 +14606,17 @@ var Portal = function (_a) {
|
|
|
14596
14606
|
var visibleStyle = function (_a) {
|
|
14597
14607
|
var opened = _a.opened;
|
|
14598
14608
|
return opened
|
|
14599
|
-
? css(templateObject_1$
|
|
14609
|
+
? 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 "])));
|
|
14600
14610
|
};
|
|
14601
14611
|
var transformStyle = function (_a) {
|
|
14602
14612
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14603
14613
|
return opened
|
|
14604
|
-
? css(templateObject_3$
|
|
14614
|
+
? 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%)');
|
|
14605
14615
|
};
|
|
14606
|
-
var Container$
|
|
14616
|
+
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({
|
|
14607
14617
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14608
14618
|
}), visibleStyle, transformStyle);
|
|
14609
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14619
|
+
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);
|
|
14610
14620
|
var Modal = function (_a) {
|
|
14611
14621
|
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;
|
|
14612
14622
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14616,7 +14626,7 @@ var Modal = function (_a) {
|
|
|
14616
14626
|
}
|
|
14617
14627
|
close();
|
|
14618
14628
|
};
|
|
14619
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14629
|
+
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));
|
|
14620
14630
|
};
|
|
14621
14631
|
var modalEvent = function (id, detail) {
|
|
14622
14632
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14644,9 +14654,9 @@ var useModal = function (id) {
|
|
|
14644
14654
|
close: close,
|
|
14645
14655
|
}); }, [close, open, opened]);
|
|
14646
14656
|
};
|
|
14647
|
-
var templateObject_1$
|
|
14657
|
+
var templateObject_1$E, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
14648
14658
|
|
|
14649
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14659
|
+
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) {
|
|
14650
14660
|
var height = _a.height;
|
|
14651
14661
|
return height || '0.5rem';
|
|
14652
14662
|
}, function (_a) {
|
|
@@ -14685,7 +14695,7 @@ var BarContainer = newStyled.div({
|
|
|
14685
14695
|
padding: '0 16px',
|
|
14686
14696
|
position: 'relative',
|
|
14687
14697
|
});
|
|
14688
|
-
var Container$
|
|
14698
|
+
var Container$u = newStyled.div(function (_a) {
|
|
14689
14699
|
var backgroundColor = _a.backgroundColor;
|
|
14690
14700
|
return ({
|
|
14691
14701
|
width: '475px',
|
|
@@ -14716,21 +14726,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14716
14726
|
var theme = useTheme();
|
|
14717
14727
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14718
14728
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14719
|
-
return (jsxs$1(Container$
|
|
14729
|
+
return (jsxs$1(Container$u, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14720
14730
|
};
|
|
14721
|
-
var templateObject_1$
|
|
14731
|
+
var templateObject_1$D;
|
|
14722
14732
|
|
|
14723
|
-
var Container$
|
|
14733
|
+
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) {
|
|
14724
14734
|
var theme = _a.theme;
|
|
14725
14735
|
return theme.component.orderBar.backgroundColor;
|
|
14726
14736
|
});
|
|
14727
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14737
|
+
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; });
|
|
14728
14738
|
var OrderBar = function (_a) {
|
|
14729
14739
|
var message = _a.message, color = _a.color;
|
|
14730
14740
|
var theme = useTheme();
|
|
14731
|
-
return (jsxs$1(Container$
|
|
14741
|
+
return (jsxs$1(Container$t, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14732
14742
|
};
|
|
14733
|
-
var templateObject_1$
|
|
14743
|
+
var templateObject_1$C, templateObject_2$s;
|
|
14734
14744
|
|
|
14735
14745
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14736
14746
|
background: props.bgColor,
|
|
@@ -14754,15 +14764,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14754
14764
|
justifyContent: 'center',
|
|
14755
14765
|
gap: '10px',
|
|
14756
14766
|
});
|
|
14757
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14767
|
+
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) {
|
|
14758
14768
|
var bgColor = _a.bgColor;
|
|
14759
14769
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14760
14770
|
}, function (_a) {
|
|
14761
14771
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14762
14772
|
return width;
|
|
14763
14773
|
});
|
|
14764
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14765
|
-
var templateObject_1$
|
|
14774
|
+
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"])));
|
|
14775
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14766
14776
|
|
|
14767
14777
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14768
14778
|
var background = _a.background, width = _a.width;
|
|
@@ -18582,17 +18592,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18582
18592
|
HTMLReactParser$1.attributesToProps;
|
|
18583
18593
|
HTMLReactParser$1.Element;
|
|
18584
18594
|
|
|
18585
|
-
var Container$
|
|
18586
|
-
var Card = newStyled.div(templateObject_2$
|
|
18587
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18588
|
-
var Label$
|
|
18589
|
-
var Check = newStyled.div(templateObject_5$
|
|
18590
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18591
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18592
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18595
|
+
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"])));
|
|
18596
|
+
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"])));
|
|
18597
|
+
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"])));
|
|
18598
|
+
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"])));
|
|
18599
|
+
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"])));
|
|
18600
|
+
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"])));
|
|
18601
|
+
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"])));
|
|
18602
|
+
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"])));
|
|
18593
18603
|
var PackSelector = function (_a) {
|
|
18594
18604
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18595
|
-
return (jsx$1(Container$
|
|
18605
|
+
return (jsx$1(Container$s, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18596
18606
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18597
18607
|
}) }), void 0));
|
|
18598
18608
|
};
|
|
@@ -18606,7 +18616,7 @@ var PackCard = function (_a) {
|
|
|
18606
18616
|
.then(function (icon) { return setIcon(icon); })
|
|
18607
18617
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18608
18618
|
}, [pack.meta.icon]);
|
|
18609
|
-
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
18619
|
+
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18610
18620
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18611
18621
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18612
18622
|
locale: 'en-US',
|
|
@@ -18619,14 +18629,14 @@ var PackCard = function (_a) {
|
|
|
18619
18629
|
currency: currencyCode || 'USD',
|
|
18620
18630
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18621
18631
|
};
|
|
18622
|
-
var templateObject_1$
|
|
18632
|
+
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;
|
|
18623
18633
|
|
|
18624
|
-
var Container$
|
|
18625
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18626
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18634
|
+
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"])));
|
|
18635
|
+
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"])));
|
|
18636
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18627
18637
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18628
18638
|
}));
|
|
18629
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18639
|
+
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) {
|
|
18630
18640
|
var bold = _a.bold;
|
|
18631
18641
|
return (bold ? '700' : '500');
|
|
18632
18642
|
}, function (_a) {
|
|
@@ -18643,7 +18653,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18643
18653
|
var background = _a.background;
|
|
18644
18654
|
return background || 'unset';
|
|
18645
18655
|
});
|
|
18646
|
-
var templateObject_1$
|
|
18656
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g;
|
|
18647
18657
|
|
|
18648
18658
|
var Pagination = function (_a) {
|
|
18649
18659
|
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;
|
|
@@ -18689,7 +18699,7 @@ var Pagination = function (_a) {
|
|
|
18689
18699
|
}
|
|
18690
18700
|
return pages;
|
|
18691
18701
|
}, [from, page, showReducedPages, to]);
|
|
18692
|
-
return (jsxs$1(Container$
|
|
18702
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(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 && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(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)), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18693
18703
|
};
|
|
18694
18704
|
|
|
18695
18705
|
var PaginatorBlog = function (_a) {
|
|
@@ -18703,12 +18713,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18703
18713
|
setPage(page);
|
|
18704
18714
|
onChange(page);
|
|
18705
18715
|
};
|
|
18706
|
-
return (jsxs$1(Container$
|
|
18716
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18707
18717
|
? theme.colors.shades['white'].color
|
|
18708
18718
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18709
18719
|
};
|
|
18710
18720
|
|
|
18711
|
-
var Container$
|
|
18721
|
+
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) {
|
|
18712
18722
|
var width = _a.width;
|
|
18713
18723
|
return width;
|
|
18714
18724
|
}, function (_a) {
|
|
@@ -18724,14 +18734,14 @@ var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
18724
18734
|
var PaymentMethod = function (_a) {
|
|
18725
18735
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18726
18736
|
var theme = useTheme();
|
|
18727
|
-
return (jsx$1(Container$
|
|
18737
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
18728
18738
|
};
|
|
18729
|
-
var templateObject_1$
|
|
18739
|
+
var templateObject_1$y;
|
|
18730
18740
|
|
|
18731
|
-
var Container$
|
|
18741
|
+
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"])));
|
|
18732
18742
|
var IMAGE_WIDTH = '63px';
|
|
18733
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18734
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18743
|
+
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);
|
|
18744
|
+
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({
|
|
18735
18745
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18736
18746
|
}), IMAGE_WIDTH);
|
|
18737
18747
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18754,7 +18764,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18754
18764
|
margin: '0.063rem 0',
|
|
18755
18765
|
});
|
|
18756
18766
|
});
|
|
18757
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18767
|
+
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) {
|
|
18758
18768
|
var withTag = _a.withTag; _a.theme;
|
|
18759
18769
|
return withTag
|
|
18760
18770
|
? mediaQueries({
|
|
@@ -18763,14 +18773,14 @@ var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
18763
18773
|
})
|
|
18764
18774
|
: 'justify-content: end';
|
|
18765
18775
|
});
|
|
18766
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18767
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18776
|
+
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"])));
|
|
18777
|
+
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"])));
|
|
18768
18778
|
var SimpleOrderItem = function (_a) {
|
|
18769
18779
|
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;
|
|
18770
18780
|
var theme = useTheme();
|
|
18771
|
-
return (jsxs$1(Container$
|
|
18781
|
+
return (jsxs$1(Container$p, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18772
18782
|
};
|
|
18773
|
-
var templateObject_1$
|
|
18783
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
18774
18784
|
|
|
18775
18785
|
var P$1 = newStyled.p(function (_a) {
|
|
18776
18786
|
var color = _a.color;
|
|
@@ -18784,7 +18794,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18784
18794
|
margin: '0.938rem 4.188rem',
|
|
18785
18795
|
});
|
|
18786
18796
|
});
|
|
18787
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18797
|
+
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) {
|
|
18788
18798
|
var height = _a.height;
|
|
18789
18799
|
return height || '0.5rem';
|
|
18790
18800
|
}, function (_a) {
|
|
@@ -18813,7 +18823,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18813
18823
|
position: 'absolute',
|
|
18814
18824
|
});
|
|
18815
18825
|
});
|
|
18816
|
-
var Container$
|
|
18826
|
+
var Container$o = newStyled.div(function (_a) {
|
|
18817
18827
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18818
18828
|
return ({
|
|
18819
18829
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18827,14 +18837,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18827
18837
|
var ProgressBar = function (_a) {
|
|
18828
18838
|
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;
|
|
18829
18839
|
var theme = useTheme();
|
|
18830
|
-
return (jsxs$1(Container$
|
|
18840
|
+
return (jsxs$1(Container$o, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18831
18841
|
};
|
|
18832
|
-
var templateObject_1$
|
|
18842
|
+
var templateObject_1$w;
|
|
18833
18843
|
|
|
18834
|
-
var Container$
|
|
18835
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18836
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18837
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18844
|
+
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; });
|
|
18845
|
+
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"])));
|
|
18846
|
+
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"])));
|
|
18847
|
+
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)'; });
|
|
18838
18848
|
var QuantityPicker = function (_a) {
|
|
18839
18849
|
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;
|
|
18840
18850
|
var theme = useTheme();
|
|
@@ -18857,9 +18867,9 @@ var QuantityPicker = function (_a) {
|
|
|
18857
18867
|
return clamp(value);
|
|
18858
18868
|
});
|
|
18859
18869
|
}, [value, clamp]);
|
|
18860
|
-
return (jsxs$1(Container$
|
|
18870
|
+
return (jsxs$1(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: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18861
18871
|
};
|
|
18862
|
-
var templateObject_1$
|
|
18872
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18863
18873
|
|
|
18864
18874
|
/* base styles & size variants */
|
|
18865
18875
|
var CustomRadioStyles$1 = {
|
|
@@ -18928,9 +18938,9 @@ var ContainerStyles$1 = {
|
|
|
18928
18938
|
},
|
|
18929
18939
|
};
|
|
18930
18940
|
|
|
18931
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18932
|
-
var Container$
|
|
18933
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18941
|
+
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"])));
|
|
18942
|
+
var Container$m = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18943
|
+
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) {
|
|
18934
18944
|
var disabled = _a.disabled;
|
|
18935
18945
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18936
18946
|
});
|
|
@@ -18938,7 +18948,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18938
18948
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18939
18949
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18940
18950
|
]; });
|
|
18941
|
-
var StyledLabel$1 = newStyled(Label$
|
|
18951
|
+
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"])));
|
|
18942
18952
|
var RadioPrimary = function (_a) {
|
|
18943
18953
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
18944
18954
|
var theme = useTheme();
|
|
@@ -18946,9 +18956,9 @@ var RadioPrimary = function (_a) {
|
|
|
18946
18956
|
var value = event.currentTarget.value;
|
|
18947
18957
|
onChange({ value: value, label: label });
|
|
18948
18958
|
};
|
|
18949
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18959
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$m, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18950
18960
|
};
|
|
18951
|
-
var templateObject_1$
|
|
18961
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j;
|
|
18952
18962
|
|
|
18953
18963
|
var RadioGroupInput = function (_a) {
|
|
18954
18964
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19027,9 +19037,9 @@ var ContainerStyles = {
|
|
|
19027
19037
|
},
|
|
19028
19038
|
};
|
|
19029
19039
|
|
|
19030
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19031
|
-
var Container$
|
|
19032
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19040
|
+
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"])));
|
|
19041
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19042
|
+
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) {
|
|
19033
19043
|
var disabled = _a.disabled;
|
|
19034
19044
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19035
19045
|
});
|
|
@@ -19037,7 +19047,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19037
19047
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19038
19048
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19039
19049
|
]; });
|
|
19040
|
-
var StyledLabel = newStyled(Label$
|
|
19050
|
+
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) {
|
|
19041
19051
|
var theme = _a.theme;
|
|
19042
19052
|
return theme.component.radio.textSize;
|
|
19043
19053
|
}, function (_a) {
|
|
@@ -19051,9 +19061,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19051
19061
|
var value = event.currentTarget.value;
|
|
19052
19062
|
onChange({ value: value, label: label });
|
|
19053
19063
|
};
|
|
19054
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19064
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19055
19065
|
};
|
|
19056
|
-
var templateObject_1$
|
|
19066
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
19057
19067
|
|
|
19058
19068
|
var ClubRadioGroupInput = function (_a) {
|
|
19059
19069
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19081,17 +19091,17 @@ function formatDate(date, format) {
|
|
|
19081
19091
|
}
|
|
19082
19092
|
}
|
|
19083
19093
|
|
|
19084
|
-
var Container$
|
|
19085
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19086
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19087
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19088
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19089
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19090
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19091
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19092
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19093
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
19094
|
-
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$
|
|
19094
|
+
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"])));
|
|
19095
|
+
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"])));
|
|
19096
|
+
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"])));
|
|
19097
|
+
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"])));
|
|
19098
|
+
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"])));
|
|
19099
|
+
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"])));
|
|
19100
|
+
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"])));
|
|
19101
|
+
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"])));
|
|
19102
|
+
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"])));
|
|
19103
|
+
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"])));
|
|
19104
|
+
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"])));
|
|
19095
19105
|
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"])));
|
|
19096
19106
|
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"])));
|
|
19097
19107
|
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"])));
|
|
@@ -19119,24 +19129,24 @@ var Review$1 = function (_a) {
|
|
|
19119
19129
|
}
|
|
19120
19130
|
}
|
|
19121
19131
|
}, [opened]);
|
|
19122
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19132
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$k, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
19123
19133
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19124
19134
|
};
|
|
19125
|
-
var templateObject_1$
|
|
19135
|
+
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;
|
|
19126
19136
|
|
|
19127
19137
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19128
19138
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19129
|
-
var Container$
|
|
19130
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19131
|
-
var Content = newStyled.div(templateObject_3$
|
|
19132
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19133
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19134
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19135
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19136
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19137
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19138
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
19139
|
-
var ImagesContainer = newStyled.div(templateObject_11$
|
|
19139
|
+
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"])));
|
|
19140
|
+
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"])));
|
|
19141
|
+
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"])));
|
|
19142
|
+
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"])));
|
|
19143
|
+
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"])));
|
|
19144
|
+
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"])));
|
|
19145
|
+
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"])));
|
|
19146
|
+
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"])));
|
|
19147
|
+
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"])));
|
|
19148
|
+
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"])));
|
|
19149
|
+
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"])));
|
|
19140
19150
|
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"])));
|
|
19141
19151
|
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"])));
|
|
19142
19152
|
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"])));
|
|
@@ -19168,7 +19178,7 @@ var Review = function (_a) {
|
|
|
19168
19178
|
});
|
|
19169
19179
|
};
|
|
19170
19180
|
}, [randomId]);
|
|
19171
|
-
return (jsxs$1(Container$
|
|
19181
|
+
return (jsxs$1(Container$j, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19172
19182
|
__html: showMoreMobile
|
|
19173
19183
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19174
19184
|
: description,
|
|
@@ -19178,15 +19188,15 @@ var Review = function (_a) {
|
|
|
19178
19188
|
: description,
|
|
19179
19189
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19180
19190
|
};
|
|
19181
|
-
var templateObject_1$
|
|
19182
|
-
|
|
19183
|
-
var Container$
|
|
19184
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19185
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19186
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19187
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19188
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19189
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19191
|
+
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;
|
|
19192
|
+
|
|
19193
|
+
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"])));
|
|
19194
|
+
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"])));
|
|
19195
|
+
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"])));
|
|
19196
|
+
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"])));
|
|
19197
|
+
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"])));
|
|
19198
|
+
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"])));
|
|
19199
|
+
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) {
|
|
19190
19200
|
var backgroundUrl = _a.backgroundUrl;
|
|
19191
19201
|
return "url(".concat(backgroundUrl, ")");
|
|
19192
19202
|
});
|
|
@@ -19194,19 +19204,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19194
19204
|
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;
|
|
19195
19205
|
var starsNumber = 5;
|
|
19196
19206
|
var theme = useTheme();
|
|
19197
|
-
return (jsxs$1(Container$
|
|
19207
|
+
return (jsxs$1(Container$i, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19198
19208
|
};
|
|
19199
|
-
var templateObject_1$
|
|
19209
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
19200
19210
|
|
|
19201
|
-
var Container$
|
|
19202
|
-
var Text = newStyled.p(templateObject_2$
|
|
19211
|
+
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"])));
|
|
19212
|
+
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; });
|
|
19203
19213
|
var ScrollToTop = function (_a) {
|
|
19204
19214
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19205
19215
|
var theme = useTheme();
|
|
19206
19216
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19207
|
-
return (jsxs$1(Container$
|
|
19217
|
+
return (jsxs$1(Container$h, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19208
19218
|
};
|
|
19209
|
-
var templateObject_1$
|
|
19219
|
+
var templateObject_1$p, templateObject_2$h;
|
|
19210
19220
|
|
|
19211
19221
|
var Input = newStyled.input(function (props) { return ({
|
|
19212
19222
|
padding: props.theme.component.input.padding,
|
|
@@ -19237,7 +19247,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19237
19247
|
},
|
|
19238
19248
|
}); });
|
|
19239
19249
|
|
|
19240
|
-
var Container$
|
|
19250
|
+
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({
|
|
19241
19251
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19242
19252
|
}));
|
|
19243
19253
|
var Description = newStyled.div({
|
|
@@ -19254,25 +19264,25 @@ var Description = newStyled.div({
|
|
|
19254
19264
|
var ProductItem = function (_a) {
|
|
19255
19265
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19256
19266
|
var theme = useTheme();
|
|
19257
|
-
return (jsxs$1(Container$
|
|
19267
|
+
return (jsxs$1(Container$g, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19258
19268
|
};
|
|
19259
|
-
var templateObject_1$
|
|
19269
|
+
var templateObject_1$o;
|
|
19260
19270
|
|
|
19261
|
-
var Container$
|
|
19271
|
+
var Container$f = newStyled.div({
|
|
19262
19272
|
display: 'flex',
|
|
19263
19273
|
justifyContent: 'center',
|
|
19264
19274
|
padding: '1rem',
|
|
19265
19275
|
});
|
|
19266
19276
|
var Footer = function (_a) {
|
|
19267
19277
|
var text = _a.text, onClick = _a.onClick;
|
|
19268
|
-
return (jsx$1(Container$
|
|
19278
|
+
return (jsx$1(Container$f, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19269
19279
|
};
|
|
19270
19280
|
|
|
19271
19281
|
var Ul = newStyled.ul({
|
|
19272
19282
|
margin: '0px',
|
|
19273
19283
|
padding: '0px',
|
|
19274
19284
|
});
|
|
19275
|
-
var Li = newStyled.li(templateObject_1$
|
|
19285
|
+
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({
|
|
19276
19286
|
padding: [0, '0rem 1rem'],
|
|
19277
19287
|
borderRadius: [0, '0.5rem'],
|
|
19278
19288
|
}));
|
|
@@ -19284,22 +19294,22 @@ var Anchor = newStyled.a({
|
|
|
19284
19294
|
padding: 0,
|
|
19285
19295
|
textDecoration: 'none',
|
|
19286
19296
|
});
|
|
19287
|
-
var Container$
|
|
19297
|
+
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({
|
|
19288
19298
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19289
19299
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19290
19300
|
borderRadius: ['0', '0.5rem'],
|
|
19291
19301
|
}));
|
|
19292
|
-
var Header = newStyled.div(templateObject_3$
|
|
19302
|
+
var Header = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19293
19303
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19294
19304
|
}));
|
|
19295
19305
|
var ResultsPanel = function (_a) {
|
|
19296
19306
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19297
19307
|
var theme = useTheme();
|
|
19298
|
-
return (jsxs$1(Container$
|
|
19308
|
+
return (jsxs$1(Container$e, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19299
19309
|
};
|
|
19300
|
-
var templateObject_1$
|
|
19310
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e;
|
|
19301
19311
|
|
|
19302
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19312
|
+
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({
|
|
19303
19313
|
right: ['1rem', '7.75rem'],
|
|
19304
19314
|
top: ['0.75rem', '0.75rem'],
|
|
19305
19315
|
}));
|
|
@@ -19308,7 +19318,7 @@ var ClearButton = function (_a) {
|
|
|
19308
19318
|
var theme = useTheme();
|
|
19309
19319
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19310
19320
|
};
|
|
19311
|
-
var templateObject_1$
|
|
19321
|
+
var templateObject_1$m;
|
|
19312
19322
|
|
|
19313
19323
|
var SearchIconContainer = newStyled.div({
|
|
19314
19324
|
display: 'flex',
|
|
@@ -19318,7 +19328,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19318
19328
|
background: 'white',
|
|
19319
19329
|
alignSelf: 'center',
|
|
19320
19330
|
});
|
|
19321
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19331
|
+
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"])));
|
|
19322
19332
|
var SearchControl = function (_a) {
|
|
19323
19333
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19324
19334
|
var theme = useTheme();
|
|
@@ -19334,7 +19344,7 @@ var SearchControl = function (_a) {
|
|
|
19334
19344
|
}
|
|
19335
19345
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19336
19346
|
};
|
|
19337
|
-
var templateObject_1$
|
|
19347
|
+
var templateObject_1$l;
|
|
19338
19348
|
|
|
19339
19349
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19340
19350
|
var reducer = function (state, action) {
|
|
@@ -19350,7 +19360,7 @@ var reducer = function (state, action) {
|
|
|
19350
19360
|
}
|
|
19351
19361
|
}
|
|
19352
19362
|
};
|
|
19353
|
-
var Container$
|
|
19363
|
+
var Container$d = newStyled.div({
|
|
19354
19364
|
position: 'relative',
|
|
19355
19365
|
display: 'flex',
|
|
19356
19366
|
});
|
|
@@ -19390,7 +19400,7 @@ var SearchBar = function (_a) {
|
|
|
19390
19400
|
if (e.cancelable) {
|
|
19391
19401
|
e.preventDefault();
|
|
19392
19402
|
}
|
|
19393
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19403
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$d, __assign$1({ theme: theme }, { children: [jsx$1(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) {
|
|
19394
19404
|
if (e.key === 'Enter') {
|
|
19395
19405
|
if (e.cancelable) {
|
|
19396
19406
|
e.preventDefault();
|
|
@@ -19401,20 +19411,20 @@ var SearchBar = function (_a) {
|
|
|
19401
19411
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19402
19412
|
};
|
|
19403
19413
|
|
|
19404
|
-
var Container$
|
|
19405
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19406
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19407
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19408
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19414
|
+
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"])));
|
|
19415
|
+
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"])));
|
|
19416
|
+
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"])));
|
|
19417
|
+
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"])));
|
|
19418
|
+
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"])));
|
|
19409
19419
|
var SearchNavigation = function (_a) {
|
|
19410
19420
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19411
|
-
return (jsxs$1(Container$
|
|
19421
|
+
return (jsxs$1(Container$c, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19412
19422
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19413
19423
|
}) }, void 0)] }, void 0));
|
|
19414
19424
|
};
|
|
19415
|
-
var templateObject_1$
|
|
19425
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$6;
|
|
19416
19426
|
|
|
19417
|
-
var Container$
|
|
19427
|
+
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) {
|
|
19418
19428
|
var alignCenter = _a.alignCenter;
|
|
19419
19429
|
return alignCenter &&
|
|
19420
19430
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19424,29 +19434,29 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19424
19434
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19425
19435
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19426
19436
|
});
|
|
19427
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19428
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19437
|
+
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"])));
|
|
19438
|
+
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"])));
|
|
19429
19439
|
var ShortBanner = function (_a) {
|
|
19430
19440
|
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;
|
|
19431
19441
|
var theme = useTheme();
|
|
19432
|
-
return (jsxs$1(Container$
|
|
19442
|
+
return (jsxs$1(Container$b, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19433
19443
|
};
|
|
19434
|
-
var templateObject_1$
|
|
19435
|
-
|
|
19436
|
-
var TableElement$
|
|
19437
|
-
var TableCell$
|
|
19438
|
-
var TableHead$
|
|
19439
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19440
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19441
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19442
|
-
var Container$
|
|
19443
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19444
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19445
|
-
var TableRow$
|
|
19446
|
-
var templateObject_1$
|
|
19447
|
-
|
|
19448
|
-
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19449
|
-
var getCellColor = function (index, cell) {
|
|
19444
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c;
|
|
19445
|
+
|
|
19446
|
+
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; });
|
|
19447
|
+
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; });
|
|
19448
|
+
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; });
|
|
19449
|
+
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"])));
|
|
19450
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19451
|
+
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"])));
|
|
19452
|
+
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"])));
|
|
19453
|
+
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"])));
|
|
19454
|
+
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"])));
|
|
19455
|
+
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; });
|
|
19456
|
+
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;
|
|
19457
|
+
|
|
19458
|
+
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19459
|
+
var getCellColor$1 = function (index, cell) {
|
|
19450
19460
|
if (index == 0) {
|
|
19451
19461
|
return '#f6f0e7';
|
|
19452
19462
|
}
|
|
@@ -19479,21 +19489,21 @@ var SizeChartTable = function (_a) {
|
|
|
19479
19489
|
var theme = useTheme();
|
|
19480
19490
|
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];
|
|
19481
19491
|
var isMultilabel = xLabel && yLabel;
|
|
19482
|
-
return (jsxs$1(Container$
|
|
19483
|
-
backgroundColor: getCellColor(index, cell),
|
|
19484
|
-
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$
|
|
19492
|
+
return (jsxs$1(Container$a, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$1, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ style: {
|
|
19493
|
+
backgroundColor: getCellColor$1(index, cell),
|
|
19494
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19485
19495
|
};
|
|
19486
19496
|
|
|
19487
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19488
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19489
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19490
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19497
|
+
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; });
|
|
19498
|
+
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; });
|
|
19499
|
+
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; });
|
|
19500
|
+
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; });
|
|
19491
19501
|
var SizeTable = function (_a) {
|
|
19492
19502
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19493
19503
|
var theme = useTheme();
|
|
19494
|
-
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19504
|
+
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19495
19505
|
};
|
|
19496
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8;
|
|
19497
19507
|
|
|
19498
19508
|
var getStylesBySize$4 = function (size) {
|
|
19499
19509
|
switch (size) {
|
|
@@ -19520,7 +19530,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19520
19530
|
} });
|
|
19521
19531
|
};
|
|
19522
19532
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19523
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19533
|
+
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));
|
|
19524
19534
|
};
|
|
19525
19535
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19526
19536
|
if (disabled)
|
|
@@ -19536,23 +19546,23 @@ var TextButton = function (_a) {
|
|
|
19536
19546
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19537
19547
|
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));
|
|
19538
19548
|
};
|
|
19539
|
-
var templateObject_1$
|
|
19549
|
+
var templateObject_1$g;
|
|
19540
19550
|
|
|
19541
|
-
var Container$
|
|
19542
|
-
var P = newStyled.p(templateObject_2$
|
|
19543
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19551
|
+
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"])));
|
|
19552
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19553
|
+
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"])));
|
|
19544
19554
|
var SizeFitGuide = function (_a) {
|
|
19545
19555
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19546
|
-
return (jsxs$1(Container$
|
|
19556
|
+
return (jsxs$1(Container$9, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19547
19557
|
};
|
|
19548
|
-
var templateObject_1$
|
|
19558
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9;
|
|
19549
19559
|
|
|
19550
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19560
|
+
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) {
|
|
19551
19561
|
var inline = _a.inline;
|
|
19552
19562
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19553
19563
|
});
|
|
19554
|
-
var Row = newStyled.div(templateObject_2$
|
|
19555
|
-
var templateObject_1$
|
|
19564
|
+
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"])));
|
|
19565
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19556
19566
|
|
|
19557
19567
|
var SizeSelector = function (_a) {
|
|
19558
19568
|
var _b;
|
|
@@ -19574,7 +19584,7 @@ var SizeSelector = function (_a) {
|
|
|
19574
19584
|
}) }), void 0)] }), void 0));
|
|
19575
19585
|
};
|
|
19576
19586
|
|
|
19577
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19587
|
+
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) {
|
|
19578
19588
|
var titleSize = _a.titleSize;
|
|
19579
19589
|
return titleSize;
|
|
19580
19590
|
}, function (_a) {
|
|
@@ -19591,18 +19601,18 @@ var Tab = function (_a) {
|
|
|
19591
19601
|
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;
|
|
19592
19602
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19593
19603
|
};
|
|
19594
|
-
var templateObject_1$
|
|
19604
|
+
var templateObject_1$d;
|
|
19595
19605
|
|
|
19596
|
-
var Container$
|
|
19597
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19606
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19607
|
+
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) {
|
|
19598
19608
|
var backgroundColor = _a.backgroundColor;
|
|
19599
19609
|
return backgroundColor;
|
|
19600
19610
|
}, function (_a) {
|
|
19601
19611
|
var borderColor = _a.borderColor;
|
|
19602
19612
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19603
19613
|
});
|
|
19604
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19605
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19614
|
+
var TabContent = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19615
|
+
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"])));
|
|
19606
19616
|
var Tabs = function (_a) {
|
|
19607
19617
|
var _b;
|
|
19608
19618
|
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;
|
|
@@ -19611,16 +19621,16 @@ var Tabs = function (_a) {
|
|
|
19611
19621
|
return null;
|
|
19612
19622
|
}
|
|
19613
19623
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19614
|
-
return (jsxs$1(Container$
|
|
19624
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19615
19625
|
};
|
|
19616
|
-
var templateObject_1$
|
|
19626
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$7;
|
|
19617
19627
|
|
|
19618
|
-
var Container$
|
|
19628
|
+
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"])));
|
|
19619
19629
|
var Tag = function (_a) {
|
|
19620
19630
|
var text = _a.text, className = _a.className;
|
|
19621
|
-
return jsx$1(Container$
|
|
19631
|
+
return jsx$1(Container$7, __assign$1({ className: className }, { children: text }), void 0);
|
|
19622
19632
|
};
|
|
19623
|
-
var templateObject_1$
|
|
19633
|
+
var templateObject_1$b;
|
|
19624
19634
|
|
|
19625
19635
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19626
19636
|
switch (size) {
|
|
@@ -19731,9 +19741,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19731
19741
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19732
19742
|
};
|
|
19733
19743
|
|
|
19734
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19735
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19736
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19744
|
+
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"])));
|
|
19745
|
+
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"])));
|
|
19746
|
+
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"])));
|
|
19737
19747
|
var ImageVideo = function (_a) {
|
|
19738
19748
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19739
19749
|
var video = useRef(null);
|
|
@@ -19753,12 +19763,12 @@ var ImageVideo = function (_a) {
|
|
|
19753
19763
|
height: '100%',
|
|
19754
19764
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19755
19765
|
};
|
|
19756
|
-
var templateObject_1$
|
|
19766
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19757
19767
|
|
|
19758
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19759
|
-
var ContainerMobile = css(templateObject_2$
|
|
19760
|
-
var Container$
|
|
19761
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19768
|
+
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"])));
|
|
19769
|
+
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"])));
|
|
19770
|
+
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);
|
|
19771
|
+
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"])));
|
|
19762
19772
|
var TextWithImage = function (_a) {
|
|
19763
19773
|
var _b, _c, _d, _e;
|
|
19764
19774
|
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"]);
|
|
@@ -19778,7 +19788,7 @@ var TextWithImage = function (_a) {
|
|
|
19778
19788
|
// @ts-ignore
|
|
19779
19789
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19780
19790
|
};
|
|
19781
|
-
return (jsxs(Container$
|
|
19791
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19782
19792
|
backgroundColor: props.btnBGColor,
|
|
19783
19793
|
color: '#ffffff',
|
|
19784
19794
|
border: props.btnBGColor,
|
|
@@ -19788,9 +19798,9 @@ var TextWithImage = function (_a) {
|
|
|
19788
19798
|
},
|
|
19789
19799
|
} }, 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));
|
|
19790
19800
|
};
|
|
19791
|
-
var templateObject_1$
|
|
19801
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6, templateObject_4$6;
|
|
19792
19802
|
|
|
19793
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19803
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19794
19804
|
var timerColor = _a.timerColor;
|
|
19795
19805
|
return timerColor || '';
|
|
19796
19806
|
});
|
|
@@ -19826,11 +19836,11 @@ var Timer = function (_a) {
|
|
|
19826
19836
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19827
19837
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19828
19838
|
};
|
|
19829
|
-
var templateObject_1$
|
|
19839
|
+
var templateObject_1$8;
|
|
19830
19840
|
|
|
19831
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19832
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19833
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19841
|
+
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"])));
|
|
19842
|
+
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; });
|
|
19843
|
+
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) {
|
|
19834
19844
|
var theme = _a.theme;
|
|
19835
19845
|
return theme.component.total.basicTotal.currency.color;
|
|
19836
19846
|
}, function (_a) {
|
|
@@ -19843,41 +19853,41 @@ var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __make
|
|
|
19843
19853
|
var theme = _a.theme;
|
|
19844
19854
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19845
19855
|
});
|
|
19846
|
-
var Container$
|
|
19856
|
+
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) {
|
|
19847
19857
|
var highlightColor = _a.highlightColor;
|
|
19848
19858
|
return highlightColor;
|
|
19849
19859
|
});
|
|
19850
|
-
var TotalContainer = newStyled(Container$
|
|
19860
|
+
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) {
|
|
19851
19861
|
var showTotalLabel = _a.showTotalLabel;
|
|
19852
19862
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19853
19863
|
});
|
|
19854
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19855
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19864
|
+
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"])));
|
|
19865
|
+
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) {
|
|
19856
19866
|
var theme = _a.theme;
|
|
19857
19867
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19858
19868
|
});
|
|
19859
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19860
|
-
var templateObject_1$
|
|
19869
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19870
|
+
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;
|
|
19861
19871
|
|
|
19862
19872
|
var Total = function (_a) {
|
|
19863
19873
|
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;
|
|
19864
19874
|
var theme = useTheme();
|
|
19865
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19875
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$5, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19866
19876
|
};
|
|
19867
19877
|
|
|
19868
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19878
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19869
19879
|
var color = _a.color;
|
|
19870
19880
|
return color;
|
|
19871
19881
|
});
|
|
19872
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19873
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19882
|
+
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"])));
|
|
19883
|
+
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) {
|
|
19874
19884
|
var theme = _a.theme;
|
|
19875
19885
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19876
19886
|
}, function (_a) {
|
|
19877
19887
|
var theme = _a.theme;
|
|
19878
19888
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19879
19889
|
});
|
|
19880
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19890
|
+
var CouponItem = newStyled(Item)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19881
19891
|
var color = _a.color;
|
|
19882
19892
|
return color;
|
|
19883
19893
|
});
|
|
@@ -19890,32 +19900,32 @@ var Subtotal = function (_a) {
|
|
|
19890
19900
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19891
19901
|
})] }), void 0));
|
|
19892
19902
|
};
|
|
19893
|
-
var templateObject_1$
|
|
19903
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19894
19904
|
|
|
19895
19905
|
var Totals = {
|
|
19896
19906
|
Total: Total,
|
|
19897
19907
|
Subtotal: Subtotal,
|
|
19898
19908
|
};
|
|
19899
19909
|
|
|
19900
|
-
var Container$
|
|
19901
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19902
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19903
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19904
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19905
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19910
|
+
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"])));
|
|
19911
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19912
|
+
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; });
|
|
19913
|
+
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'); });
|
|
19914
|
+
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"])));
|
|
19915
|
+
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) {
|
|
19906
19916
|
return props.finishedTrack
|
|
19907
19917
|
? props.finishedTrackColor
|
|
19908
19918
|
: props.activeTrack
|
|
19909
19919
|
? props.activeTrackColor
|
|
19910
19920
|
: '';
|
|
19911
19921
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19912
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19913
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19922
|
+
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"])));
|
|
19923
|
+
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) {
|
|
19914
19924
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19915
19925
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19916
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
19917
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_10$
|
|
19918
|
-
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"])));
|
|
19926
|
+
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)'); });
|
|
19927
|
+
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; });
|
|
19928
|
+
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"])));
|
|
19919
19929
|
var TrackingProgressV2 = function (_a) {
|
|
19920
19930
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, _b = _a.resumedStyle, resumedStyle = _b === void 0 ? false : _b, activeCheckpointColor = _a.activeCheckpointColor, warning = _a.warning;
|
|
19921
19931
|
var theme = useTheme();
|
|
@@ -19938,7 +19948,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19938
19948
|
}
|
|
19939
19949
|
return '30px';
|
|
19940
19950
|
};
|
|
19941
|
-
return (jsxs$1(Container$
|
|
19951
|
+
return (jsxs$1(Container$4, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19942
19952
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19943
19953
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19944
19954
|
? activeCheckpointColor
|
|
@@ -19949,18 +19959,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19949
19959
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19950
19960
|
})] }), void 0));
|
|
19951
19961
|
};
|
|
19952
|
-
var templateObject_1$
|
|
19953
|
-
|
|
19954
|
-
var Container$
|
|
19955
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19956
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19957
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19958
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19959
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
19962
|
+
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;
|
|
19963
|
+
|
|
19964
|
+
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"])));
|
|
19965
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19966
|
+
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; });
|
|
19967
|
+
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'); });
|
|
19968
|
+
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'); });
|
|
19969
|
+
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) {
|
|
19960
19970
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19961
19971
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19962
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19963
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
19972
|
+
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)'); });
|
|
19973
|
+
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; });
|
|
19964
19974
|
var TrackingProgress = function (_a) {
|
|
19965
19975
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19966
19976
|
var theme = useTheme();
|
|
@@ -19980,7 +19990,7 @@ var TrackingProgress = function (_a) {
|
|
|
19980
19990
|
}
|
|
19981
19991
|
return '30px';
|
|
19982
19992
|
};
|
|
19983
|
-
return (jsxs$1(Container$
|
|
19993
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19984
19994
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19985
19995
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19986
19996
|
? theme.colors.semantic.informative.color
|
|
@@ -19989,9 +19999,9 @@ var TrackingProgress = function (_a) {
|
|
|
19989
19999
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19990
20000
|
})] }), void 0));
|
|
19991
20001
|
};
|
|
19992
|
-
var templateObject_1$
|
|
20002
|
+
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;
|
|
19993
20003
|
|
|
19994
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20004
|
+
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) {
|
|
19995
20005
|
var textPosition = _a.textPosition;
|
|
19996
20006
|
return textPosition;
|
|
19997
20007
|
}, function (_a) {
|
|
@@ -20004,7 +20014,7 @@ var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = _
|
|
|
20004
20014
|
var borderRadius = _a.borderRadius;
|
|
20005
20015
|
return borderRadius || '8px';
|
|
20006
20016
|
});
|
|
20007
|
-
var templateObject_1$
|
|
20017
|
+
var templateObject_1$3;
|
|
20008
20018
|
|
|
20009
20019
|
var getDefaultCountdown = function () {
|
|
20010
20020
|
var tomorrowDate = new Date();
|
|
@@ -20020,7 +20030,7 @@ var HurryUp = function (_a) {
|
|
|
20020
20030
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
20021
20031
|
};
|
|
20022
20032
|
|
|
20023
|
-
var Container$
|
|
20033
|
+
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) {
|
|
20024
20034
|
var size = _a.size;
|
|
20025
20035
|
return (size ? size : '100%');
|
|
20026
20036
|
}, function (_a) {
|
|
@@ -20034,7 +20044,7 @@ var borderSize = {
|
|
|
20034
20044
|
large: '3px',
|
|
20035
20045
|
};
|
|
20036
20046
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20037
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20047
|
+
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) {
|
|
20038
20048
|
var size = _a.size;
|
|
20039
20049
|
return borderSize[size];
|
|
20040
20050
|
}, function (_a) {
|
|
@@ -20047,15 +20057,15 @@ var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __
|
|
|
20047
20057
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20048
20058
|
return duration;
|
|
20049
20059
|
});
|
|
20050
|
-
var templateObject_1$
|
|
20060
|
+
var templateObject_1$2, templateObject_2$2;
|
|
20051
20061
|
|
|
20052
20062
|
var Spinner = function (_a) {
|
|
20053
20063
|
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;
|
|
20054
|
-
return (jsx$1(Container$
|
|
20064
|
+
return (jsx$1(Container$2, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
20055
20065
|
};
|
|
20056
20066
|
|
|
20057
|
-
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"])));
|
|
20058
|
-
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) {
|
|
20067
|
+
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"])));
|
|
20068
|
+
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) {
|
|
20059
20069
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20060
20070
|
return borderRadiusVariant &&
|
|
20061
20071
|
"\n border-radius: 40px;\n ";
|
|
@@ -20066,30 +20076,30 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
|
|
|
20066
20076
|
var theme = _a.theme;
|
|
20067
20077
|
return theme.component.gallery.aspectRatio;
|
|
20068
20078
|
});
|
|
20069
|
-
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"])));
|
|
20070
|
-
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"])));
|
|
20071
|
-
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) {
|
|
20079
|
+
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"])));
|
|
20080
|
+
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"])));
|
|
20081
|
+
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) {
|
|
20072
20082
|
var theme = _a.theme;
|
|
20073
20083
|
return theme.colors.shades.white.color;
|
|
20074
20084
|
});
|
|
20075
|
-
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"])));
|
|
20076
|
-
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) {
|
|
20085
|
+
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"])));
|
|
20086
|
+
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) {
|
|
20077
20087
|
var theme = _a.theme;
|
|
20078
20088
|
return theme.colors.pallete.primary.color;
|
|
20079
20089
|
});
|
|
20080
|
-
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) {
|
|
20090
|
+
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) {
|
|
20081
20091
|
var theme = _a.theme;
|
|
20082
20092
|
return theme.component.gallery.aspectRatio;
|
|
20083
20093
|
});
|
|
20084
|
-
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) {
|
|
20094
|
+
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) {
|
|
20085
20095
|
var theme = _a.theme;
|
|
20086
20096
|
return theme.component.gallery.aspectRatio;
|
|
20087
20097
|
});
|
|
20088
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20098
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20089
20099
|
var theme = _a.theme;
|
|
20090
20100
|
return theme.component.gallery.aspectRatio;
|
|
20091
20101
|
});
|
|
20092
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
20102
|
+
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;
|
|
20093
20103
|
|
|
20094
20104
|
var SETTINGS = {
|
|
20095
20105
|
infinite: false,
|
|
@@ -20151,7 +20161,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20151
20161
|
if (thumbnailRef.current)
|
|
20152
20162
|
setNav2(thumbnailRef.current);
|
|
20153
20163
|
}, []);
|
|
20154
|
-
return (jsx$1(Container, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(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) {
|
|
20164
|
+
return (jsx$1(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(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) {
|
|
20155
20165
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20156
20166
|
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20157
20167
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
@@ -20160,5 +20170,57 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20160
20170
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20161
20171
|
};
|
|
20162
20172
|
|
|
20163
|
-
|
|
20173
|
+
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"])));
|
|
20174
|
+
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; });
|
|
20175
|
+
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; });
|
|
20176
|
+
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; });
|
|
20177
|
+
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"])));
|
|
20178
|
+
var TopLabel = newStyled(Label)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20179
|
+
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"])));
|
|
20180
|
+
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"])));
|
|
20181
|
+
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"])));
|
|
20182
|
+
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"])));
|
|
20183
|
+
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; });
|
|
20184
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
20185
|
+
|
|
20186
|
+
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
20187
|
+
var getCellColor = function (index, cell) {
|
|
20188
|
+
if (index == 0) {
|
|
20189
|
+
return '#f6f0e7';
|
|
20190
|
+
}
|
|
20191
|
+
switch (cell) {
|
|
20192
|
+
case 'XS':
|
|
20193
|
+
return '#f5bab0';
|
|
20194
|
+
case 'S':
|
|
20195
|
+
return '#f7a08b';
|
|
20196
|
+
case 'M':
|
|
20197
|
+
return '#ffe1b8';
|
|
20198
|
+
case 'L':
|
|
20199
|
+
return '#f5bab0';
|
|
20200
|
+
case 'XL':
|
|
20201
|
+
return '#8bbeea';
|
|
20202
|
+
case '2XL':
|
|
20203
|
+
return '#b1d7c3';
|
|
20204
|
+
case '3XL':
|
|
20205
|
+
return '#e7a4f7';
|
|
20206
|
+
case '4XL':
|
|
20207
|
+
return '#e7c9b2';
|
|
20208
|
+
default:
|
|
20209
|
+
return '';
|
|
20210
|
+
}
|
|
20211
|
+
};
|
|
20212
|
+
|
|
20213
|
+
// TODO: Refactor the table properties
|
|
20214
|
+
var SizeChartTableV2 = function (_a) {
|
|
20215
|
+
var _b, _c;
|
|
20216
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
20217
|
+
var theme = useTheme();
|
|
20218
|
+
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];
|
|
20219
|
+
var isMultilabel = xLabel && yLabel;
|
|
20220
|
+
return (jsxs$1(Container, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsx$1(ScrollContainer, { children: jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ style: {
|
|
20221
|
+
backgroundColor: getCellColor(index, cell),
|
|
20222
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
20223
|
+
};
|
|
20224
|
+
|
|
20225
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20164
20226
|
//# sourceMappingURL=index.esm.js.map
|