@trafilea/afrodita-components 6.17.3 → 6.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +13 -5
- package/build/index.esm.js +744 -692
- package/build/index.esm.js.map +1 -1
- package/build/index.js +744 -691
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.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,17 +4173,17 @@ 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
4188
|
heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
|
|
4189
4189
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -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,9 @@ 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
5194
|
|
|
5195
5195
|
var useOnClickOutside = function (ref, handler) {
|
|
5196
5196
|
useEffect(function () {
|
|
@@ -5336,7 +5336,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5336
5336
|
}
|
|
5337
5337
|
};
|
|
5338
5338
|
|
|
5339
|
-
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) {
|
|
5340
5340
|
var position = _a.position;
|
|
5341
5341
|
return getWrapperFlexDirection(position);
|
|
5342
5342
|
}, function (_a) {
|
|
@@ -5346,7 +5346,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5346
5346
|
var disableHover = _a.disableHover;
|
|
5347
5347
|
return (disableHover ? 0 : 1);
|
|
5348
5348
|
});
|
|
5349
|
-
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) {
|
|
5350
5350
|
var position = _a.position;
|
|
5351
5351
|
return getContainerFlexDirection(position);
|
|
5352
5352
|
}, function (_a) {
|
|
@@ -5374,14 +5374,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5374
5374
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5375
5375
|
return actual === expected ? margin : '0';
|
|
5376
5376
|
};
|
|
5377
|
-
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) {
|
|
5378
5378
|
var borderColor = _a.borderColor;
|
|
5379
5379
|
return borderColor;
|
|
5380
5380
|
}, function (_a) {
|
|
5381
5381
|
var backgroundColor = _a.backgroundColor;
|
|
5382
5382
|
return backgroundColor;
|
|
5383
5383
|
});
|
|
5384
|
-
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
5385
|
var theme = _a.theme;
|
|
5386
5386
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5387
5387
|
}, function (_a) {
|
|
@@ -5391,17 +5391,17 @@ var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __ma
|
|
|
5391
5391
|
var color = _a.color;
|
|
5392
5392
|
return color;
|
|
5393
5393
|
});
|
|
5394
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5395
|
-
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) {
|
|
5396
5396
|
var color = _a.color;
|
|
5397
5397
|
return color;
|
|
5398
5398
|
});
|
|
5399
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5400
|
-
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) {
|
|
5401
5401
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5402
5402
|
return right;
|
|
5403
5403
|
});
|
|
5404
|
-
var templateObject_1$
|
|
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;
|
|
5405
5405
|
|
|
5406
5406
|
var Tooltip = function (_a) {
|
|
5407
5407
|
var _b;
|
|
@@ -5472,7 +5472,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5472
5472
|
};
|
|
5473
5473
|
}
|
|
5474
5474
|
};
|
|
5475
|
-
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) {
|
|
5476
5476
|
var backgroundColor = _a.backgroundColor;
|
|
5477
5477
|
return backgroundColor;
|
|
5478
5478
|
}, function (_a) {
|
|
@@ -5494,7 +5494,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
5494
5494
|
var size = _a.size;
|
|
5495
5495
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5496
5496
|
});
|
|
5497
|
-
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) {
|
|
5498
5498
|
var textColor = _a.textColor;
|
|
5499
5499
|
return textColor;
|
|
5500
5500
|
}, function (_a) {
|
|
@@ -5509,9 +5509,9 @@ var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __makeTemp
|
|
|
5509
5509
|
var ClubOfferTag = function (_a) {
|
|
5510
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;
|
|
5511
5511
|
var theme = useTheme();
|
|
5512
|
-
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));
|
|
5513
5513
|
};
|
|
5514
|
-
var templateObject_1$
|
|
5514
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
5515
5515
|
|
|
5516
5516
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5517
5517
|
var _a, _b, _c;
|
|
@@ -5542,7 +5542,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5542
5542
|
};
|
|
5543
5543
|
}
|
|
5544
5544
|
};
|
|
5545
|
-
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) {
|
|
5546
5546
|
var backgroundColor = _a.backgroundColor;
|
|
5547
5547
|
return backgroundColor;
|
|
5548
5548
|
}, function (_a) {
|
|
@@ -5564,7 +5564,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5564
5564
|
var size = _a.size;
|
|
5565
5565
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5566
5566
|
});
|
|
5567
|
-
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) {
|
|
5568
5568
|
var textColor = _a.textColor;
|
|
5569
5569
|
return textColor;
|
|
5570
5570
|
}, function (_a) {
|
|
@@ -5579,9 +5579,9 @@ var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemp
|
|
|
5579
5579
|
var DiscountTag$1 = function (_a) {
|
|
5580
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;
|
|
5581
5581
|
var theme = useTheme();
|
|
5582
|
-
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));
|
|
5583
5583
|
};
|
|
5584
|
-
var templateObject_1$
|
|
5584
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5585
5585
|
|
|
5586
5586
|
var getStylesBySize$b = function (size, theme) {
|
|
5587
5587
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5623,8 +5623,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5623
5623
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5624
5624
|
}
|
|
5625
5625
|
};
|
|
5626
|
-
var Container$
|
|
5627
|
-
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) {
|
|
5628
5628
|
var weight = _a.weight;
|
|
5629
5629
|
return (weight ? weight : '400');
|
|
5630
5630
|
}, function (_a) {
|
|
@@ -5648,7 +5648,7 @@ var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5648
5648
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5649
5649
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5650
5650
|
});
|
|
5651
|
-
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) {
|
|
5652
5652
|
var _b;
|
|
5653
5653
|
var size = _a.size;
|
|
5654
5654
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5679,11 +5679,11 @@ var PriceLabel = function (_a) {
|
|
|
5679
5679
|
: ComponentSize.XSmall;
|
|
5680
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));
|
|
5681
5681
|
};
|
|
5682
|
-
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));
|
|
5683
5683
|
};
|
|
5684
|
-
var templateObject_1$
|
|
5684
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$W;
|
|
5685
5685
|
|
|
5686
|
-
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"])));
|
|
5687
5687
|
var PriceLabelV2 = function (_a) {
|
|
5688
5688
|
var _b;
|
|
5689
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"]);
|
|
@@ -5736,7 +5736,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5736
5736
|
var savetoString = saveto.toFixed(2);
|
|
5737
5737
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5738
5738
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5739
|
-
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: {
|
|
5740
5740
|
marginTop: '-5px',
|
|
5741
5741
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5742
5742
|
? finalPriceArray[0]
|
|
@@ -5754,11 +5754,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5754
5754
|
lineHeight: '22px',
|
|
5755
5755
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5756
5756
|
};
|
|
5757
|
-
var templateObject_1$
|
|
5757
|
+
var templateObject_1$1H;
|
|
5758
5758
|
|
|
5759
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5760
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5761
|
-
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"])));
|
|
5762
5762
|
var PriceLabelV3 = function (_a) {
|
|
5763
5763
|
var _b;
|
|
5764
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"]);
|
|
@@ -5813,7 +5813,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5813
5813
|
return null;
|
|
5814
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));
|
|
5815
5815
|
};
|
|
5816
|
-
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: {
|
|
5817
5817
|
marginTop: '-5px',
|
|
5818
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: {
|
|
5819
5819
|
marginTop: '-6px',
|
|
@@ -5829,10 +5829,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5829
5829
|
lineHeight: '22px',
|
|
5830
5830
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5831
5831
|
};
|
|
5832
|
-
var templateObject_1$
|
|
5832
|
+
var templateObject_1$1G, templateObject_2$17, templateObject_3$V;
|
|
5833
5833
|
|
|
5834
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5835
|
-
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) {
|
|
5836
5836
|
var selected = _a.selected, theme = _a.theme;
|
|
5837
5837
|
return selected
|
|
5838
5838
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5846,30 +5846,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5846
5846
|
var theme = _a.theme;
|
|
5847
5847
|
return theme.colors.pallete.primary.color;
|
|
5848
5848
|
});
|
|
5849
|
-
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) {
|
|
5850
5850
|
var onClick = _a.onClick;
|
|
5851
5851
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5852
5852
|
});
|
|
5853
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5854
|
-
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) {
|
|
5855
5855
|
var theme = _a.theme;
|
|
5856
5856
|
return theme.colors.shades[200].color;
|
|
5857
5857
|
}, function (_a) {
|
|
5858
5858
|
var theme = _a.theme;
|
|
5859
5859
|
return theme.colors.pallete.primary.color;
|
|
5860
5860
|
});
|
|
5861
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5862
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5863
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5864
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5865
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5866
|
-
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"])));
|
|
5867
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) {
|
|
5868
5868
|
var selected = _a.selected, theme = _a.theme;
|
|
5869
5869
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5870
5870
|
});
|
|
5871
|
-
var Container$
|
|
5872
|
-
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;
|
|
5873
5873
|
|
|
5874
5874
|
var radioIds$1 = {
|
|
5875
5875
|
oneTime: {
|
|
@@ -5919,17 +5919,17 @@ var Autoship = function (_a) {
|
|
|
5919
5919
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5920
5920
|
};
|
|
5921
5921
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5922
|
-
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
|
|
5923
5923
|
? benefitsColor.selected
|
|
5924
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));
|
|
5925
5925
|
};
|
|
5926
5926
|
|
|
5927
|
-
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) {
|
|
5928
5928
|
var theme = _a.theme;
|
|
5929
5929
|
return theme.name === 'TheSpaDr' &&
|
|
5930
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 ";
|
|
5931
5931
|
});
|
|
5932
|
-
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) {
|
|
5933
5933
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5934
5934
|
return isSelected
|
|
5935
5935
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5945,7 +5945,7 @@ var getSelectedBorder = function (_a) {
|
|
|
5945
5945
|
}
|
|
5946
5946
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
5947
5947
|
};
|
|
5948
|
-
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) {
|
|
5949
5949
|
var selected = _a.selected, theme = _a.theme;
|
|
5950
5950
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
5951
5951
|
}, function (_a) {
|
|
@@ -5957,32 +5957,32 @@ var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __
|
|
|
5957
5957
|
var theme = _a.theme;
|
|
5958
5958
|
return theme.colors.pallete.primary.color;
|
|
5959
5959
|
});
|
|
5960
|
-
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) {
|
|
5961
5961
|
var onClick = _a.onClick;
|
|
5962
5962
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5963
5963
|
});
|
|
5964
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5965
|
-
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) {
|
|
5966
5966
|
var theme = _a.theme;
|
|
5967
5967
|
return theme.colors.shades[200].color;
|
|
5968
5968
|
}, function (_a) {
|
|
5969
5969
|
var theme = _a.theme;
|
|
5970
5970
|
return theme.colors.pallete.primary.color;
|
|
5971
5971
|
});
|
|
5972
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5973
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5974
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5975
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
5976
|
-
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) {
|
|
5977
5977
|
var selected = _a.selected, theme = _a.theme;
|
|
5978
5978
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5979
5979
|
});
|
|
5980
|
-
var Container$
|
|
5980
|
+
var Container$12 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5981
5981
|
var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
5982
5982
|
var theme = _a.theme;
|
|
5983
5983
|
return theme.component.autoship.tooltip.margin;
|
|
5984
5984
|
});
|
|
5985
|
-
var templateObject_1$
|
|
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;
|
|
5986
5986
|
|
|
5987
5987
|
var radioIds = {
|
|
5988
5988
|
oneTime: {
|
|
@@ -6042,7 +6042,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6042
6042
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6043
6043
|
};
|
|
6044
6044
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6045
|
-
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
|
|
6046
6046
|
? benefitsColor.selected
|
|
6047
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));
|
|
6048
6048
|
};
|
|
@@ -6060,13 +6060,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6060
6060
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6061
6061
|
_a$2);
|
|
6062
6062
|
|
|
6063
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6064
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6065
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6066
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6067
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6068
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6069
|
-
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;
|
|
6070
6070
|
|
|
6071
6071
|
var NameWithStars = function (_a) {
|
|
6072
6072
|
var name = _a.name, size = _a.size;
|
|
@@ -6084,10 +6084,10 @@ var ResultFeedback = function (_a) {
|
|
|
6084
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));
|
|
6085
6085
|
};
|
|
6086
6086
|
|
|
6087
|
-
var Container$
|
|
6088
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6089
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6090
|
-
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) {
|
|
6091
6091
|
var theme = _a.theme;
|
|
6092
6092
|
return theme.colors.pallete.secondary.color;
|
|
6093
6093
|
}, function (_a) {
|
|
@@ -6097,7 +6097,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
6097
6097
|
var theme = _a.theme, size = _a.size;
|
|
6098
6098
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6099
6099
|
});
|
|
6100
|
-
var templateObject_1$
|
|
6100
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F;
|
|
6101
6101
|
|
|
6102
6102
|
/* base styles & size variants */
|
|
6103
6103
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6172,10 +6172,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6172
6172
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6173
6173
|
var infoText = buildInfoText(name, age, months);
|
|
6174
6174
|
var Component = componentByVariant[variant];
|
|
6175
|
-
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));
|
|
6176
6176
|
};
|
|
6177
6177
|
|
|
6178
|
-
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) {
|
|
6179
6179
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6180
6180
|
});
|
|
6181
6181
|
var CardHeader = function (_a) {
|
|
@@ -6186,16 +6186,16 @@ var CardFooter = function (_a) {
|
|
|
6186
6186
|
var children = _a.children;
|
|
6187
6187
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6188
6188
|
};
|
|
6189
|
-
var templateObject_1$
|
|
6189
|
+
var templateObject_1$1B;
|
|
6190
6190
|
|
|
6191
|
-
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"])));
|
|
6192
6192
|
var CardBody = function (_a) {
|
|
6193
6193
|
var children = _a.children;
|
|
6194
6194
|
return jsx$1(Body, { children: children }, void 0);
|
|
6195
6195
|
};
|
|
6196
|
-
var templateObject_1$
|
|
6196
|
+
var templateObject_1$1A;
|
|
6197
6197
|
|
|
6198
|
-
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) {
|
|
6199
6199
|
var flex = _a.flex;
|
|
6200
6200
|
return flex &&
|
|
6201
6201
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6210,23 +6210,23 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
6210
6210
|
var Card$1 = function (_a) {
|
|
6211
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;
|
|
6212
6212
|
var theme = useTheme();
|
|
6213
|
-
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));
|
|
6214
6214
|
};
|
|
6215
6215
|
var Card$2 = Object.assign(Card$1, {
|
|
6216
6216
|
Header: CardHeader,
|
|
6217
6217
|
Footer: CardFooter,
|
|
6218
6218
|
Body: CardBody,
|
|
6219
6219
|
});
|
|
6220
|
-
var templateObject_1$
|
|
6220
|
+
var templateObject_1$1z;
|
|
6221
6221
|
|
|
6222
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6223
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6224
|
-
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) {
|
|
6225
6225
|
var color = _a.color;
|
|
6226
6226
|
return color;
|
|
6227
6227
|
});
|
|
6228
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6229
|
-
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;
|
|
6230
6230
|
|
|
6231
6231
|
var Minimalistic = function (_a) {
|
|
6232
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;
|
|
@@ -6234,28 +6234,28 @@ var Minimalistic = function (_a) {
|
|
|
6234
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));
|
|
6235
6235
|
};
|
|
6236
6236
|
|
|
6237
|
-
var Container
|
|
6238
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
6239
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6240
|
-
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"])));
|
|
6241
6241
|
var Simple = function (_a) {
|
|
6242
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;
|
|
6243
6243
|
var theme = useTheme();
|
|
6244
|
-
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));
|
|
6245
6245
|
};
|
|
6246
|
-
var templateObject_1$
|
|
6246
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6247
6247
|
|
|
6248
6248
|
var Bundle = {
|
|
6249
6249
|
Minimalistic: Minimalistic,
|
|
6250
6250
|
Simple: Simple,
|
|
6251
6251
|
};
|
|
6252
6252
|
|
|
6253
|
-
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) {
|
|
6254
6254
|
var displayBNPL = _a.displayBNPL;
|
|
6255
6255
|
return (displayBNPL ? 'flex' : 'none');
|
|
6256
6256
|
});
|
|
6257
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6258
|
-
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"])));
|
|
6259
6259
|
var BuyNowPayLater = function (_a) {
|
|
6260
6260
|
var _b;
|
|
6261
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;
|
|
@@ -6265,43 +6265,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6265
6265
|
console.error('Icon', iconName, 'not found');
|
|
6266
6266
|
return null;
|
|
6267
6267
|
}
|
|
6268
|
-
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));
|
|
6269
6269
|
};
|
|
6270
|
-
var templateObject_1$
|
|
6270
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O;
|
|
6271
6271
|
|
|
6272
|
-
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; });
|
|
6273
6273
|
var Title$5 = function (_a) {
|
|
6274
6274
|
var title = _a.title;
|
|
6275
6275
|
var theme = useTheme();
|
|
6276
6276
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6277
6277
|
};
|
|
6278
|
-
var templateObject_1$
|
|
6278
|
+
var templateObject_1$1v;
|
|
6279
6279
|
|
|
6280
|
-
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; });
|
|
6281
6281
|
var Promo = function (_a) {
|
|
6282
6282
|
var text = _a.text;
|
|
6283
6283
|
var theme = useTheme();
|
|
6284
6284
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6285
6285
|
};
|
|
6286
|
-
var templateObject_1$
|
|
6286
|
+
var templateObject_1$1u;
|
|
6287
6287
|
|
|
6288
|
-
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; });
|
|
6289
6289
|
var Description$1 = function (_a) {
|
|
6290
6290
|
var text = _a.text;
|
|
6291
6291
|
var theme = useTheme();
|
|
6292
6292
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6293
6293
|
};
|
|
6294
|
-
var templateObject_1$
|
|
6294
|
+
var templateObject_1$1t;
|
|
6295
6295
|
|
|
6296
|
-
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"); });
|
|
6297
6297
|
var CloseButton$1 = function (_a) {
|
|
6298
6298
|
var onClick = _a.onClick, size = _a.size;
|
|
6299
6299
|
var theme = useTheme();
|
|
6300
|
-
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));
|
|
6301
6301
|
};
|
|
6302
|
-
var templateObject_1$
|
|
6302
|
+
var templateObject_1$1s;
|
|
6303
6303
|
|
|
6304
|
-
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) {
|
|
6305
6305
|
var backgroundColor = _a.backgroundColor;
|
|
6306
6306
|
return backgroundColor;
|
|
6307
6307
|
}, function (_a) {
|
|
@@ -6316,7 +6316,7 @@ var OfferBanner = function (_a) {
|
|
|
6316
6316
|
var theme = useTheme();
|
|
6317
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));
|
|
6318
6318
|
};
|
|
6319
|
-
var templateObject_1$
|
|
6319
|
+
var templateObject_1$1r;
|
|
6320
6320
|
|
|
6321
6321
|
var CartProductItem = {
|
|
6322
6322
|
Title: Title$5,
|
|
@@ -6326,20 +6326,20 @@ var CartProductItem = {
|
|
|
6326
6326
|
CloseButton: CloseButton$1,
|
|
6327
6327
|
};
|
|
6328
6328
|
|
|
6329
|
-
var Container$
|
|
6330
|
-
var MobileContainer = newStyled(Container$
|
|
6331
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6332
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6333
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6334
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6335
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6336
|
-
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"])));
|
|
6337
6337
|
var ClubPriceLabel = function (_a) {
|
|
6338
6338
|
var clubPrice = _a.clubPrice;
|
|
6339
6339
|
var isMobile = useWindowDimensions().isMobile;
|
|
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$
|
|
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));
|
|
6341
6341
|
};
|
|
6342
|
-
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;
|
|
6343
6343
|
|
|
6344
6344
|
var Spacing = function (_a) {
|
|
6345
6345
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6347,10 +6347,10 @@ var Spacing = function (_a) {
|
|
|
6347
6347
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6348
6348
|
};
|
|
6349
6349
|
|
|
6350
|
-
var Container$
|
|
6351
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6352
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6353
|
-
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) {
|
|
6354
6354
|
var index = _a.index;
|
|
6355
6355
|
return "".concat(6 + 3 * index, "px");
|
|
6356
6356
|
}, function (_a) {
|
|
@@ -6359,15 +6359,15 @@ var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeT
|
|
|
6359
6359
|
});
|
|
6360
6360
|
var StrengthBars = function (_a) {
|
|
6361
6361
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6362
|
-
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));
|
|
6363
6363
|
};
|
|
6364
|
-
var templateObject_1$
|
|
6364
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B;
|
|
6365
6365
|
|
|
6366
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6367
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6368
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6369
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6370
|
-
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"])));
|
|
6371
6371
|
var RegularPriceTag = function () {
|
|
6372
6372
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6373
6373
|
};
|
|
@@ -6416,16 +6416,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6416
6416
|
: ComponentSize.XSmall;
|
|
6417
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));
|
|
6418
6418
|
};
|
|
6419
|
-
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]
|
|
6420
6420
|
? finalPriceArray[0]
|
|
6421
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));
|
|
6422
6422
|
};
|
|
6423
|
-
var templateObject_1$
|
|
6423
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$r;
|
|
6424
6424
|
|
|
6425
|
-
var Container$
|
|
6426
|
-
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;
|
|
6427
6427
|
|
|
6428
|
-
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) {
|
|
6429
6429
|
var marginRight = _a.marginRight;
|
|
6430
6430
|
return marginRight;
|
|
6431
6431
|
});
|
|
@@ -6437,11 +6437,11 @@ var StarList = function (_a) {
|
|
|
6437
6437
|
width: theme.component.stars.element[size].width,
|
|
6438
6438
|
height: theme.component.stars.element[size].height,
|
|
6439
6439
|
};
|
|
6440
|
-
return (jsx$1(Container$
|
|
6440
|
+
return (jsx$1(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6441
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)));
|
|
6442
6442
|
}) }, void 0));
|
|
6443
6443
|
};
|
|
6444
|
-
var templateObject_1$
|
|
6444
|
+
var templateObject_1$1m;
|
|
6445
6445
|
|
|
6446
6446
|
/* base styles & size variants */
|
|
6447
6447
|
var LabelStyles = {
|
|
@@ -6482,8 +6482,8 @@ var LabelStyles = {
|
|
|
6482
6482
|
});
|
|
6483
6483
|
},
|
|
6484
6484
|
};
|
|
6485
|
-
var Container$
|
|
6486
|
-
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;
|
|
6487
6487
|
|
|
6488
6488
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6489
6489
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6503,7 +6503,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6503
6503
|
}),
|
|
6504
6504
|
];
|
|
6505
6505
|
});
|
|
6506
|
-
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; });
|
|
6507
6507
|
var starsNumber = 5;
|
|
6508
6508
|
var Rating = function (_a) {
|
|
6509
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;
|
|
@@ -6524,9 +6524,9 @@ var Rating = function (_a) {
|
|
|
6524
6524
|
href: reviewsContainerId,
|
|
6525
6525
|
}
|
|
6526
6526
|
: {};
|
|
6527
|
-
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));
|
|
6528
6528
|
};
|
|
6529
|
-
var templateObject_1$
|
|
6529
|
+
var templateObject_1$1k;
|
|
6530
6530
|
|
|
6531
6531
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6532
6532
|
var width = _a.width, height = _a.height;
|
|
@@ -6536,10 +6536,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6536
6536
|
height: height,
|
|
6537
6537
|
});
|
|
6538
6538
|
});
|
|
6539
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6540
|
-
var Container$
|
|
6541
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6542
|
-
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; });
|
|
6543
6543
|
var getStylesBySize$9 = function (size) {
|
|
6544
6544
|
switch (size) {
|
|
6545
6545
|
case ComponentSize.Medium:
|
|
@@ -6565,15 +6565,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6565
6565
|
};
|
|
6566
6566
|
}
|
|
6567
6567
|
};
|
|
6568
|
-
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) {
|
|
6569
6569
|
var style = _a.style;
|
|
6570
6570
|
return style.width;
|
|
6571
6571
|
});
|
|
6572
|
-
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) {
|
|
6573
6573
|
var style = _a.style;
|
|
6574
6574
|
return style.width;
|
|
6575
6575
|
});
|
|
6576
|
-
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"])));
|
|
6577
6577
|
var ProductItemMobile = function (_a) {
|
|
6578
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 ? {
|
|
6579
6579
|
display: false,
|
|
@@ -6630,9 +6630,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6630
6630
|
return jsx(Fragment, {}, void 0);
|
|
6631
6631
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6632
6632
|
};
|
|
6633
|
-
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));
|
|
6634
6634
|
};
|
|
6635
|
-
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;
|
|
6636
6636
|
|
|
6637
6637
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6638
6638
|
var width = _a.width, height = _a.height;
|
|
@@ -6642,10 +6642,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6642
6642
|
height: height,
|
|
6643
6643
|
});
|
|
6644
6644
|
});
|
|
6645
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6646
|
-
var Container$
|
|
6647
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6648
|
-
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; });
|
|
6649
6649
|
var getStylesBySize$8 = function (size) {
|
|
6650
6650
|
switch (size) {
|
|
6651
6651
|
case ComponentSize.Medium:
|
|
@@ -6671,16 +6671,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6671
6671
|
};
|
|
6672
6672
|
}
|
|
6673
6673
|
};
|
|
6674
|
-
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) {
|
|
6675
6675
|
var style = _a.style;
|
|
6676
6676
|
return style.width;
|
|
6677
6677
|
});
|
|
6678
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6679
|
-
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) {
|
|
6680
6680
|
var style = _a.style;
|
|
6681
6681
|
return style.width;
|
|
6682
6682
|
});
|
|
6683
|
-
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"])));
|
|
6684
6684
|
var ProductItemTK = function (_a) {
|
|
6685
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 ? {
|
|
6686
6686
|
display: false,
|
|
@@ -6724,26 +6724,26 @@ var ProductItemTK = function (_a) {
|
|
|
6724
6724
|
: undefined }, void 0));
|
|
6725
6725
|
};
|
|
6726
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)); };
|
|
6727
|
-
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 ? (
|
|
6728
6728
|
// @ts-ignore
|
|
6729
6729
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6730
6730
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6731
6731
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6732
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));
|
|
6733
6733
|
};
|
|
6734
|
-
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;
|
|
6735
6735
|
|
|
6736
|
-
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"])));
|
|
6737
6737
|
function withProductGrid(ProductItemComponent, data) {
|
|
6738
6738
|
function WithProductGrid(props) {
|
|
6739
|
-
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));
|
|
6740
6740
|
}
|
|
6741
6741
|
/* istanbul ignore next */
|
|
6742
6742
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6743
6743
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6744
6744
|
return WithProductGrid;
|
|
6745
6745
|
}
|
|
6746
|
-
var templateObject_1$
|
|
6746
|
+
var templateObject_1$1h;
|
|
6747
6747
|
|
|
6748
6748
|
var Collection = {
|
|
6749
6749
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6790,12 +6790,12 @@ var OutOfStock = function (_a) {
|
|
|
6790
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));
|
|
6791
6791
|
};
|
|
6792
6792
|
|
|
6793
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6794
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6795
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6796
|
-
var Span = newStyled.span(templateObject_4$
|
|
6797
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6798
|
-
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) {
|
|
6799
6799
|
var label = _a.label, values = _a.values;
|
|
6800
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));
|
|
6801
6801
|
};
|
|
@@ -6808,27 +6808,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6808
6808
|
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6809
6809
|
};
|
|
6810
6810
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6811
|
-
Label: Label$
|
|
6811
|
+
Label: Label$4,
|
|
6812
6812
|
Option: Option,
|
|
6813
6813
|
OptionsContainer: OptionsContainer,
|
|
6814
6814
|
});
|
|
6815
|
-
var templateObject_1$
|
|
6815
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o;
|
|
6816
6816
|
|
|
6817
|
-
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) {
|
|
6818
6818
|
var borderColor = _a.borderColor;
|
|
6819
6819
|
return borderColor;
|
|
6820
6820
|
}, function (_a) {
|
|
6821
6821
|
var noStock = _a.noStock;
|
|
6822
6822
|
return (noStock ? '0.4' : '1');
|
|
6823
6823
|
});
|
|
6824
|
-
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"])));
|
|
6825
6825
|
var PatternSelector = function (_a) {
|
|
6826
6826
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6827
6827
|
var theme = useTheme();
|
|
6828
6828
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6829
|
-
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));
|
|
6830
6830
|
};
|
|
6831
|
-
var templateObject_1$
|
|
6831
|
+
var templateObject_1$1f, templateObject_2$V;
|
|
6832
6832
|
|
|
6833
6833
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6834
6834
|
if (options == null || options.length === 0) {
|
|
@@ -6887,21 +6887,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6887
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));
|
|
6888
6888
|
};
|
|
6889
6889
|
|
|
6890
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6891
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6892
|
-
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) {
|
|
6893
6893
|
return props.rightToLeft &&
|
|
6894
6894
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6895
6895
|
});
|
|
6896
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6897
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6898
|
-
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; });
|
|
6899
6899
|
var CrossSellCheckbox = function (_a) {
|
|
6900
6900
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6901
6901
|
var theme = useTheme();
|
|
6902
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));
|
|
6903
6903
|
};
|
|
6904
|
-
var templateObject_1$
|
|
6904
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
6905
6905
|
|
|
6906
6906
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6907
6907
|
__proto__: null,
|
|
@@ -6929,7 +6929,7 @@ var sizeMapper = (_a = {},
|
|
|
6929
6929
|
_a[ComponentSize.Large] = 'large',
|
|
6930
6930
|
_a[ComponentSize.XSmall] = 'small',
|
|
6931
6931
|
_a);
|
|
6932
|
-
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) {
|
|
6933
6933
|
var wide = _a.wide;
|
|
6934
6934
|
return (wide ? '100%' : 'fit-content');
|
|
6935
6935
|
}, function (_a) {
|
|
@@ -6951,11 +6951,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObj
|
|
|
6951
6951
|
var theme = _a.theme;
|
|
6952
6952
|
return theme.colors.text.disabled;
|
|
6953
6953
|
});
|
|
6954
|
-
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) {
|
|
6955
6955
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6956
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 ");
|
|
6957
6957
|
});
|
|
6958
|
-
var templateObject_1$
|
|
6958
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6959
6959
|
|
|
6960
6960
|
var BaseCTA = function (_a) {
|
|
6961
6961
|
var _b, _c, _d;
|
|
@@ -7042,44 +7042,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7042
7042
|
} }), void 0));
|
|
7043
7043
|
};
|
|
7044
7044
|
|
|
7045
|
-
var Container$
|
|
7046
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7047
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7048
|
-
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; });
|
|
7049
7049
|
var Note = function (_a) {
|
|
7050
7050
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7051
7051
|
var theme = useTheme();
|
|
7052
|
-
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));
|
|
7053
7053
|
};
|
|
7054
|
-
var templateObject_1$
|
|
7054
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7055
7055
|
|
|
7056
|
-
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) {
|
|
7057
7057
|
var theme = _a.theme;
|
|
7058
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 ");
|
|
7059
7059
|
});
|
|
7060
|
-
var Line = newStyled.div(templateObject_2$
|
|
7061
|
-
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({
|
|
7062
7062
|
flexDirection: ['column', 'row'],
|
|
7063
7063
|
}));
|
|
7064
|
-
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({
|
|
7065
7065
|
margin: ['0', '0 1.25rem'],
|
|
7066
7066
|
marginBottom: ['1.875rem', '0'],
|
|
7067
7067
|
alignItems: ['center', 'flex-start'],
|
|
7068
7068
|
textAlign: ['center', 'inherit'],
|
|
7069
7069
|
width: ['100%', 'inherit'],
|
|
7070
7070
|
}));
|
|
7071
|
-
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({
|
|
7072
7072
|
marginRight: ['0', '0.438rem'],
|
|
7073
7073
|
marginBottom: ['10px', '0'],
|
|
7074
7074
|
width: ['auto', '1.5rem'],
|
|
7075
7075
|
}));
|
|
7076
|
-
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({
|
|
7077
7077
|
display: ['block', 'flex'],
|
|
7078
7078
|
}), function (_a) {
|
|
7079
7079
|
var theme = _a.theme;
|
|
7080
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 ");
|
|
7081
7081
|
});
|
|
7082
|
-
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) {
|
|
7083
7083
|
var theme = _a.theme;
|
|
7084
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 ");
|
|
7085
7085
|
}, function (_a) {
|
|
@@ -7090,22 +7090,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
7090
7090
|
})
|
|
7091
7091
|
: '';
|
|
7092
7092
|
});
|
|
7093
|
-
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; });
|
|
7094
7094
|
var DeliveryDetails = function (_a) {
|
|
7095
7095
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7096
7096
|
var theme = useTheme();
|
|
7097
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));
|
|
7098
7098
|
};
|
|
7099
|
-
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;
|
|
7100
7100
|
|
|
7101
|
-
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) {
|
|
7102
7102
|
var top = _a.top;
|
|
7103
7103
|
return top;
|
|
7104
7104
|
}, function (_a) {
|
|
7105
7105
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7106
7106
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7107
7107
|
});
|
|
7108
|
-
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) {
|
|
7109
7109
|
var height = _a.height;
|
|
7110
7110
|
return height;
|
|
7111
7111
|
}, function (_a) {
|
|
@@ -7152,20 +7152,20 @@ var Drawer = function (_a) {
|
|
|
7152
7152
|
}, [isOpen, onClose, onOpen]);
|
|
7153
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;
|
|
7154
7154
|
};
|
|
7155
|
-
var templateObject_1$
|
|
7155
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7156
7156
|
|
|
7157
7157
|
var TooltipArrow = function (_a) {
|
|
7158
7158
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7159
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));
|
|
7160
7160
|
};
|
|
7161
7161
|
|
|
7162
|
-
var List = newStyled.ul(templateObject_1$
|
|
7163
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7164
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7165
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7166
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7167
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7168
|
-
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;
|
|
7169
7169
|
|
|
7170
7170
|
var DropdownListIcons = function (_a) {
|
|
7171
7171
|
var items = _a.items;
|
|
@@ -7178,13 +7178,13 @@ var Dropdown = function (_a) {
|
|
|
7178
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));
|
|
7179
7179
|
};
|
|
7180
7180
|
|
|
7181
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7182
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7183
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7184
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7185
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7186
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7187
|
-
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;
|
|
7188
7188
|
|
|
7189
7189
|
var SizeDropdown = function (_a) {
|
|
7190
7190
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7207,10 +7207,10 @@ var SizeDropdown = function (_a) {
|
|
|
7207
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));
|
|
7208
7208
|
};
|
|
7209
7209
|
|
|
7210
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7211
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7212
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7213
|
-
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"])));
|
|
7214
7214
|
var DropdownDialog = function (_a) {
|
|
7215
7215
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7216
7216
|
var theme = useTheme$1();
|
|
@@ -7219,7 +7219,7 @@ var DropdownDialog = function (_a) {
|
|
|
7219
7219
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7220
7220
|
}) }), void 0) }), void 0));
|
|
7221
7221
|
};
|
|
7222
|
-
var templateObject_1$
|
|
7222
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r;
|
|
7223
7223
|
|
|
7224
7224
|
function FilteringDropdown(_a) {
|
|
7225
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;
|
|
@@ -7252,29 +7252,29 @@ function FilteringDropdown(_a) {
|
|
|
7252
7252
|
}) }, void 0)] }), void 0));
|
|
7253
7253
|
}
|
|
7254
7254
|
|
|
7255
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7256
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7257
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7258
|
-
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'); });
|
|
7259
7259
|
var Accordion = function (_a) {
|
|
7260
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;
|
|
7261
7261
|
var theme = useTheme();
|
|
7262
7262
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7263
|
-
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));
|
|
7264
7264
|
};
|
|
7265
|
-
var templateObject_1$
|
|
7266
|
-
|
|
7267
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7268
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7269
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7270
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7271
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7272
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7273
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7274
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7275
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7276
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7277
|
-
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;
|
|
7278
7278
|
|
|
7279
7279
|
var getStylesBySize$7 = function (size, theme) {
|
|
7280
7280
|
switch (size) {
|
|
@@ -7339,9 +7339,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7339
7339
|
} }), id: id }, void 0));
|
|
7340
7340
|
};
|
|
7341
7341
|
|
|
7342
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7343
|
-
var LI = newStyled.li(templateObject_2$
|
|
7344
|
-
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"])));
|
|
7345
7345
|
var Tags = function (_a) {
|
|
7346
7346
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7347
7347
|
var theme = useTheme();
|
|
@@ -7349,7 +7349,7 @@ var Tags = function (_a) {
|
|
|
7349
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));
|
|
7350
7350
|
}) }), void 0));
|
|
7351
7351
|
};
|
|
7352
|
-
var templateObject_1$
|
|
7352
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z;
|
|
7353
7353
|
|
|
7354
7354
|
var Filters = function (_a) {
|
|
7355
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;
|
|
@@ -7485,8 +7485,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7485
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));
|
|
7486
7486
|
};
|
|
7487
7487
|
|
|
7488
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7489
|
-
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"])));
|
|
7490
7490
|
var FitGuarantee = function (_a) {
|
|
7491
7491
|
var _b;
|
|
7492
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;
|
|
@@ -7497,17 +7497,17 @@ var FitGuarantee = function (_a) {
|
|
|
7497
7497
|
console.error('Icon', iconName, 'not found');
|
|
7498
7498
|
return null;
|
|
7499
7499
|
}
|
|
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$
|
|
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: {
|
|
7501
7501
|
margin: '0.1rem 0',
|
|
7502
7502
|
width: '100%',
|
|
7503
7503
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7504
7504
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7505
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));
|
|
7506
7506
|
};
|
|
7507
|
-
var templateObject_1$
|
|
7507
|
+
var templateObject_1$13, templateObject_2$J;
|
|
7508
7508
|
|
|
7509
|
-
var Container$
|
|
7510
|
-
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; });
|
|
7511
7511
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7512
7512
|
border: 'none',
|
|
7513
7513
|
background: 'transparent',
|
|
@@ -7520,9 +7520,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7520
7520
|
var FitPredictor = function (_a) {
|
|
7521
7521
|
var onClick = _a.onClick;
|
|
7522
7522
|
var theme = useTheme();
|
|
7523
|
-
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));
|
|
7524
7524
|
};
|
|
7525
|
-
var templateObject_1$
|
|
7525
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7526
7526
|
|
|
7527
7527
|
var Button$7 = newStyled.button(function () { return ({
|
|
7528
7528
|
background: 'transparent',
|
|
@@ -11766,14 +11766,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11766
11766
|
return Slider;
|
|
11767
11767
|
}(React__default.Component);
|
|
11768
11768
|
|
|
11769
|
-
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) {
|
|
11770
11770
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11771
11771
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11772
11772
|
}, function (_a) {
|
|
11773
11773
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11774
11774
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11775
11775
|
});
|
|
11776
|
-
var templateObject_1$
|
|
11776
|
+
var templateObject_1$11;
|
|
11777
11777
|
|
|
11778
11778
|
var getStylesBySize$6 = function (size) {
|
|
11779
11779
|
// rem units
|
|
@@ -11832,7 +11832,7 @@ var SliderNavigation = function (_a) {
|
|
|
11832
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));
|
|
11833
11833
|
};
|
|
11834
11834
|
|
|
11835
|
-
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) {
|
|
11836
11836
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11837
11837
|
return borderRadiusVariant &&
|
|
11838
11838
|
"\n border-radius: 20px;\n ";
|
|
@@ -11842,7 +11842,7 @@ var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTe
|
|
|
11842
11842
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11843
11843
|
: 'inherit';
|
|
11844
11844
|
});
|
|
11845
|
-
var templateObject_1
|
|
11845
|
+
var templateObject_1$10;
|
|
11846
11846
|
|
|
11847
11847
|
var ImageSmallPreview = function (_a) {
|
|
11848
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;
|
|
@@ -11850,9 +11850,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11850
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));
|
|
11851
11851
|
};
|
|
11852
11852
|
|
|
11853
|
-
var horizontalStyles = css(templateObject_1
|
|
11854
|
-
var verticalStyles = css(templateObject_2$
|
|
11855
|
-
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) {
|
|
11856
11856
|
var position = _a.position;
|
|
11857
11857
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11858
11858
|
}, function (_a) {
|
|
@@ -11860,12 +11860,12 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11860
11860
|
return hasOverflowArrows &&
|
|
11861
11861
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11862
11862
|
});
|
|
11863
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11864
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11865
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11866
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11867
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11868
|
-
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;
|
|
11869
11869
|
|
|
11870
11870
|
var ImagePreviewList = function (_a) {
|
|
11871
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;
|
|
@@ -11877,7 +11877,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11877
11877
|
var element = document.querySelector(".imageListContainer");
|
|
11878
11878
|
element.scrollBy(0, 200);
|
|
11879
11879
|
};
|
|
11880
|
-
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: {
|
|
11881
11881
|
arrowWidth: 0.75,
|
|
11882
11882
|
arrowHeight: 1.25,
|
|
11883
11883
|
arrowPadding: 1.625,
|
|
@@ -13475,21 +13475,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13475
13475
|
afterZoomOut: PropTypes.func
|
|
13476
13476
|
} : {};
|
|
13477
13477
|
|
|
13478
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13479
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13480
|
-
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;
|
|
13481
13481
|
|
|
13482
13482
|
var ProgressBar$1 = function (_a) {
|
|
13483
13483
|
var progress = _a.progress, hide = _a.hide;
|
|
13484
13484
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13485
13485
|
};
|
|
13486
13486
|
|
|
13487
|
-
var Container$
|
|
13488
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13489
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13490
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13491
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13492
|
-
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;
|
|
13493
13493
|
|
|
13494
13494
|
var Video$1 = function (_a) {
|
|
13495
13495
|
var _b, _c, _d, _e;
|
|
@@ -13528,41 +13528,41 @@ var Video$1 = function (_a) {
|
|
|
13528
13528
|
setVideoProgress(videoRef.current.currentTime);
|
|
13529
13529
|
}
|
|
13530
13530
|
};
|
|
13531
|
-
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));
|
|
13532
13532
|
};
|
|
13533
13533
|
|
|
13534
|
-
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) {
|
|
13535
13535
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13536
13536
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13537
13537
|
});
|
|
13538
|
-
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) {
|
|
13539
13539
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13540
13540
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13541
13541
|
}, function (_a) {
|
|
13542
13542
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13543
13543
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13544
13544
|
});
|
|
13545
|
-
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) {
|
|
13546
13546
|
var isCTAHidden = _a.isCTAHidden;
|
|
13547
13547
|
return (isCTAHidden ? '60px' : '120px');
|
|
13548
13548
|
});
|
|
13549
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13550
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13551
|
-
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;
|
|
13552
13552
|
|
|
13553
13553
|
var ImageProductSlide$1 = function (_a) {
|
|
13554
13554
|
var _b;
|
|
13555
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;
|
|
13556
13556
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13557
13557
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13558
|
-
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: {
|
|
13559
13559
|
alt: content.alt,
|
|
13560
13560
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13561
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));
|
|
13562
13562
|
};
|
|
13563
13563
|
|
|
13564
|
-
var Container$
|
|
13565
|
-
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;
|
|
13566
13566
|
|
|
13567
13567
|
var getInitialIndex = function (images, selectedValue) {
|
|
13568
13568
|
if (selectedValue) {
|
|
@@ -13588,7 +13588,7 @@ var ProductGallery = function (_a) {
|
|
|
13588
13588
|
setActiveIndex(index);
|
|
13589
13589
|
};
|
|
13590
13590
|
var selectedImage = images[activeIndex];
|
|
13591
|
-
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));
|
|
13592
13592
|
};
|
|
13593
13593
|
|
|
13594
13594
|
var getStylesBySize$5 = function (size) {
|
|
@@ -13610,7 +13610,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13610
13610
|
};
|
|
13611
13611
|
}
|
|
13612
13612
|
};
|
|
13613
|
-
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) {
|
|
13614
13614
|
var backgroundColor = _a.backgroundColor;
|
|
13615
13615
|
return backgroundColor;
|
|
13616
13616
|
}, function (_a) {
|
|
@@ -13638,11 +13638,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13638
13638
|
var IconButton = function (_a) {
|
|
13639
13639
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13640
13640
|
var theme = useTheme();
|
|
13641
|
-
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));
|
|
13642
13642
|
};
|
|
13643
|
-
var templateObject_1$
|
|
13643
|
+
var templateObject_1$W;
|
|
13644
13644
|
|
|
13645
|
-
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; });
|
|
13646
13646
|
var AmazonButton = function (_a) {
|
|
13647
13647
|
var onClick = _a.onClick;
|
|
13648
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));
|
|
@@ -13651,9 +13651,9 @@ var PaypalButton = function (_a) {
|
|
|
13651
13651
|
var onClick = _a.onClick;
|
|
13652
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));
|
|
13653
13653
|
};
|
|
13654
|
-
var templateObject_1$
|
|
13654
|
+
var templateObject_1$V;
|
|
13655
13655
|
|
|
13656
|
-
var Container$
|
|
13656
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13657
13657
|
height: 'auto',
|
|
13658
13658
|
textAlign: 'center',
|
|
13659
13659
|
justifyContent: 'center',
|
|
@@ -13703,12 +13703,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13703
13703
|
textAlign: 'center',
|
|
13704
13704
|
lineHeight: '18px',
|
|
13705
13705
|
};
|
|
13706
|
-
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));
|
|
13707
13707
|
};
|
|
13708
13708
|
|
|
13709
|
-
var Container$
|
|
13710
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13711
|
-
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) {
|
|
13712
13712
|
var titlePosition = _a.titlePosition;
|
|
13713
13713
|
return titlePosition == 'center' &&
|
|
13714
13714
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13716,24 +13716,24 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13716
13716
|
var ImageCardWithDescription = function (_a) {
|
|
13717
13717
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13718
13718
|
var isMobile = useWindowDimensions().isMobile;
|
|
13719
|
-
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));
|
|
13720
13720
|
};
|
|
13721
|
-
var templateObject_1$
|
|
13721
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$v;
|
|
13722
13722
|
|
|
13723
|
-
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) {
|
|
13724
13724
|
var color = _a.color;
|
|
13725
13725
|
return color;
|
|
13726
13726
|
});
|
|
13727
|
-
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) {
|
|
13728
13728
|
var color = _a.color;
|
|
13729
13729
|
return color;
|
|
13730
13730
|
});
|
|
13731
13731
|
var InputLabel = function (_a) {
|
|
13732
13732
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13733
13733
|
var theme = useTheme();
|
|
13734
|
-
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));
|
|
13735
13735
|
};
|
|
13736
|
-
var templateObject_1$
|
|
13736
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13737
13737
|
|
|
13738
13738
|
var containerByStatus = function (theme, status) {
|
|
13739
13739
|
if (status === InputValidationType.Valid)
|
|
@@ -13742,12 +13742,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13742
13742
|
return theme.colors.semantic.urgent.color;
|
|
13743
13743
|
return '';
|
|
13744
13744
|
};
|
|
13745
|
-
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) {
|
|
13746
13746
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13747
13747
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13748
13748
|
});
|
|
13749
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13750
|
-
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) {
|
|
13751
13751
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13752
13752
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13753
13753
|
}, function (_a) {
|
|
@@ -13802,11 +13802,11 @@ var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __
|
|
|
13802
13802
|
return hasValue &&
|
|
13803
13803
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13804
13804
|
});
|
|
13805
|
-
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) {
|
|
13806
13806
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13807
13807
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13808
13808
|
});
|
|
13809
|
-
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) {
|
|
13810
13810
|
var theme = _a.theme;
|
|
13811
13811
|
return theme.component.input.placeholderColor;
|
|
13812
13812
|
}, function (_a) {
|
|
@@ -13819,8 +13819,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13819
13819
|
var theme = _a.theme;
|
|
13820
13820
|
return theme.component.input.lineHeight;
|
|
13821
13821
|
});
|
|
13822
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13823
|
-
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;
|
|
13824
13824
|
|
|
13825
13825
|
var BaseInput = function (_a) {
|
|
13826
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"]);
|
|
@@ -13843,7 +13843,7 @@ var BaseInput = function (_a) {
|
|
|
13843
13843
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13844
13844
|
}, [status]);
|
|
13845
13845
|
var hasValue = Boolean(value);
|
|
13846
|
-
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) {
|
|
13847
13847
|
onChange(event.target.value, event);
|
|
13848
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 () {
|
|
13849
13849
|
onChange('', { target: { value: '' } });
|
|
@@ -13864,11 +13864,11 @@ var Button$5 = function (_a) {
|
|
|
13864
13864
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13865
13865
|
};
|
|
13866
13866
|
|
|
13867
|
-
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) {
|
|
13868
13868
|
var theme = _a.theme;
|
|
13869
13869
|
return theme.component.inputCustom.input.borderRadius;
|
|
13870
13870
|
});
|
|
13871
|
-
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) {
|
|
13872
13872
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13873
13873
|
return defaultRounded
|
|
13874
13874
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13883,23 +13883,23 @@ var Custom = function (_a) {
|
|
|
13883
13883
|
text: text,
|
|
13884
13884
|
disabled: rest.disabled,
|
|
13885
13885
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13886
|
-
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));
|
|
13887
13887
|
};
|
|
13888
|
-
var templateObject_1$
|
|
13888
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13889
13889
|
|
|
13890
|
-
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) {
|
|
13891
13891
|
var size = _a.size;
|
|
13892
13892
|
return (size === 'small' ? '36px' : '');
|
|
13893
13893
|
});
|
|
13894
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13895
|
-
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"])));
|
|
13896
13896
|
var Success = function (_a) {
|
|
13897
13897
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13898
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));
|
|
13899
13899
|
};
|
|
13900
|
-
var templateObject_1$
|
|
13900
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t;
|
|
13901
13901
|
|
|
13902
|
-
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) {
|
|
13903
13903
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13904
13904
|
return status === InputValidationType.Empty &&
|
|
13905
13905
|
type === 'primary' &&
|
|
@@ -13916,16 +13916,16 @@ var BasePlusButton = function (_a) {
|
|
|
13916
13916
|
}
|
|
13917
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));
|
|
13918
13918
|
};
|
|
13919
|
-
var templateObject_1$
|
|
13919
|
+
var templateObject_1$P;
|
|
13920
13920
|
|
|
13921
|
-
var Container$
|
|
13922
|
-
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"])));
|
|
13923
13923
|
var BasePlusIcon = function (_a) {
|
|
13924
13924
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13925
13925
|
var theme = useTheme();
|
|
13926
|
-
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));
|
|
13927
13927
|
};
|
|
13928
|
-
var templateObject_1$
|
|
13928
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13929
13929
|
|
|
13930
13930
|
var Input$3 = {
|
|
13931
13931
|
Simple: BaseInput,
|
|
@@ -13970,7 +13970,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13970
13970
|
}, [preventTouch, ref, touchStart]);
|
|
13971
13971
|
}
|
|
13972
13972
|
|
|
13973
|
-
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) {
|
|
13974
13974
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13975
13975
|
return borderRadiusVariant &&
|
|
13976
13976
|
"\n border-radius: 40px;\n ";
|
|
@@ -13979,11 +13979,11 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13979
13979
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13980
13980
|
});
|
|
13981
13981
|
// max-height: 31.875rem;
|
|
13982
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13983
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13984
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_4$
|
|
13985
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
13986
|
-
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"])));
|
|
13987
13987
|
var settings$1 = {
|
|
13988
13988
|
dots: true,
|
|
13989
13989
|
infinite: false,
|
|
@@ -14028,7 +14028,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14028
14028
|
}
|
|
14029
14029
|
}
|
|
14030
14030
|
}, [contents, selectedValue]);
|
|
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$
|
|
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) {
|
|
14032
14032
|
var _a;
|
|
14033
14033
|
var activeSlide = contents[e];
|
|
14034
14034
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14042,16 +14042,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14042
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));
|
|
14043
14043
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14044
14044
|
};
|
|
14045
|
-
var templateObject_1$
|
|
14045
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
14046
14046
|
|
|
14047
|
-
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"])));
|
|
14048
14048
|
var ProductGalleryMobile = function (_a) {
|
|
14049
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;
|
|
14050
14050
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14051
14051
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14052
|
-
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));
|
|
14053
14053
|
};
|
|
14054
|
-
var templateObject_1$
|
|
14054
|
+
var templateObject_1$M;
|
|
14055
14055
|
|
|
14056
14056
|
function _extends() {
|
|
14057
14057
|
_extends = Object.assign || function (target) {
|
|
@@ -14318,27 +14318,27 @@ function useSwipeable(options) {
|
|
|
14318
14318
|
return handlers;
|
|
14319
14319
|
}
|
|
14320
14320
|
|
|
14321
|
-
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"])));
|
|
14322
14322
|
var ArrowButton = function (_a) {
|
|
14323
14323
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14324
14324
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14325
14325
|
};
|
|
14326
|
-
var templateObject_1$
|
|
14326
|
+
var templateObject_1$L;
|
|
14327
14327
|
|
|
14328
|
-
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"])));
|
|
14329
14329
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14330
14330
|
var SlideDots = function (_a) {
|
|
14331
14331
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14332
14332
|
var theme = useTheme();
|
|
14333
|
-
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
|
|
14334
14334
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14335
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));
|
|
14336
14336
|
};
|
|
14337
|
-
var templateObject_1$
|
|
14337
|
+
var templateObject_1$K;
|
|
14338
14338
|
|
|
14339
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14340
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14341
|
-
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"])));
|
|
14342
14342
|
var SlideNavigation = function (_a) {
|
|
14343
14343
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14344
14344
|
var theme = useTheme();
|
|
@@ -14350,23 +14350,23 @@ var SlideNavigation = function (_a) {
|
|
|
14350
14350
|
onNavigate(selectedIndex + 1);
|
|
14351
14351
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14352
14352
|
};
|
|
14353
|
-
var templateObject_1$
|
|
14353
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$r;
|
|
14354
14354
|
|
|
14355
|
-
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) {
|
|
14356
14356
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14357
14357
|
return borderRadiusVariant &&
|
|
14358
14358
|
"\n border-radius: 40px;\n ";
|
|
14359
14359
|
});
|
|
14360
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14361
|
-
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"])));
|
|
14362
14362
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14363
14363
|
var _b, _c;
|
|
14364
14364
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14365
|
-
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));
|
|
14366
14366
|
});
|
|
14367
|
-
var templateObject_1$
|
|
14367
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14368
14368
|
|
|
14369
|
-
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"])));
|
|
14370
14370
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14371
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;
|
|
14372
14372
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14388,11 +14388,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14388
14388
|
useEffect(function () {
|
|
14389
14389
|
setSelectedImage(images[index]);
|
|
14390
14390
|
}, [index, images]);
|
|
14391
|
-
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));
|
|
14392
14392
|
};
|
|
14393
|
-
var templateObject_1$
|
|
14393
|
+
var templateObject_1$H;
|
|
14394
14394
|
|
|
14395
|
-
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) {
|
|
14396
14396
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14397
14397
|
return borderRadiusVariant &&
|
|
14398
14398
|
"\n border-radius: 40px;\n ";
|
|
@@ -14401,14 +14401,14 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14401
14401
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14402
14402
|
});
|
|
14403
14403
|
// max-height: 31.875rem;
|
|
14404
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14405
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
14406
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14407
|
-
var Video = newStyled.div(templateObject_5$
|
|
14408
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14409
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14410
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14411
|
-
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"])));
|
|
14412
14412
|
var settings = {
|
|
14413
14413
|
dots: true,
|
|
14414
14414
|
infinite: false,
|
|
@@ -14453,7 +14453,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14453
14453
|
}
|
|
14454
14454
|
}
|
|
14455
14455
|
}, [images, selectedValue]);
|
|
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$
|
|
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) {
|
|
14457
14457
|
var _a;
|
|
14458
14458
|
var activeSlide = images[e];
|
|
14459
14459
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14466,14 +14466,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14466
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));
|
|
14467
14467
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14468
14468
|
};
|
|
14469
|
-
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;
|
|
14470
14470
|
|
|
14471
|
-
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"])));
|
|
14472
14472
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14473
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;
|
|
14474
|
-
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));
|
|
14475
14475
|
};
|
|
14476
|
-
var templateObject_1$
|
|
14476
|
+
var templateObject_1$F;
|
|
14477
14477
|
|
|
14478
14478
|
var __defProp$1 = Object.defineProperty;
|
|
14479
14479
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14606,17 +14606,17 @@ var Portal = function (_a) {
|
|
|
14606
14606
|
var visibleStyle = function (_a) {
|
|
14607
14607
|
var opened = _a.opened;
|
|
14608
14608
|
return opened
|
|
14609
|
-
? 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 "])));
|
|
14610
14610
|
};
|
|
14611
14611
|
var transformStyle = function (_a) {
|
|
14612
14612
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14613
14613
|
return opened
|
|
14614
|
-
? 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%)');
|
|
14615
14615
|
};
|
|
14616
|
-
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({
|
|
14617
14617
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14618
14618
|
}), visibleStyle, transformStyle);
|
|
14619
|
-
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);
|
|
14620
14620
|
var Modal = function (_a) {
|
|
14621
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;
|
|
14622
14622
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14626,7 +14626,7 @@ var Modal = function (_a) {
|
|
|
14626
14626
|
}
|
|
14627
14627
|
close();
|
|
14628
14628
|
};
|
|
14629
|
-
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));
|
|
14630
14630
|
};
|
|
14631
14631
|
var modalEvent = function (id, detail) {
|
|
14632
14632
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14654,9 +14654,9 @@ var useModal = function (id) {
|
|
|
14654
14654
|
close: close,
|
|
14655
14655
|
}); }, [close, open, opened]);
|
|
14656
14656
|
};
|
|
14657
|
-
var templateObject_1$
|
|
14657
|
+
var templateObject_1$E, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
14658
14658
|
|
|
14659
|
-
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) {
|
|
14660
14660
|
var height = _a.height;
|
|
14661
14661
|
return height || '0.5rem';
|
|
14662
14662
|
}, function (_a) {
|
|
@@ -14695,7 +14695,7 @@ var BarContainer = newStyled.div({
|
|
|
14695
14695
|
padding: '0 16px',
|
|
14696
14696
|
position: 'relative',
|
|
14697
14697
|
});
|
|
14698
|
-
var Container$
|
|
14698
|
+
var Container$u = newStyled.div(function (_a) {
|
|
14699
14699
|
var backgroundColor = _a.backgroundColor;
|
|
14700
14700
|
return ({
|
|
14701
14701
|
width: '475px',
|
|
@@ -14726,21 +14726,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14726
14726
|
var theme = useTheme();
|
|
14727
14727
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14728
14728
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14729
|
-
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));
|
|
14730
14730
|
};
|
|
14731
|
-
var templateObject_1$
|
|
14731
|
+
var templateObject_1$D;
|
|
14732
14732
|
|
|
14733
|
-
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) {
|
|
14734
14734
|
var theme = _a.theme;
|
|
14735
14735
|
return theme.component.orderBar.backgroundColor;
|
|
14736
14736
|
});
|
|
14737
|
-
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; });
|
|
14738
14738
|
var OrderBar = function (_a) {
|
|
14739
14739
|
var message = _a.message, color = _a.color;
|
|
14740
14740
|
var theme = useTheme();
|
|
14741
|
-
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));
|
|
14742
14742
|
};
|
|
14743
|
-
var templateObject_1$
|
|
14743
|
+
var templateObject_1$C, templateObject_2$s;
|
|
14744
14744
|
|
|
14745
14745
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14746
14746
|
background: props.bgColor,
|
|
@@ -14764,15 +14764,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14764
14764
|
justifyContent: 'center',
|
|
14765
14765
|
gap: '10px',
|
|
14766
14766
|
});
|
|
14767
|
-
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) {
|
|
14768
14768
|
var bgColor = _a.bgColor;
|
|
14769
14769
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14770
14770
|
}, function (_a) {
|
|
14771
14771
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14772
14772
|
return width;
|
|
14773
14773
|
});
|
|
14774
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14775
|
-
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;
|
|
14776
14776
|
|
|
14777
14777
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14778
14778
|
var background = _a.background, width = _a.width;
|
|
@@ -18592,17 +18592,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18592
18592
|
HTMLReactParser$1.attributesToProps;
|
|
18593
18593
|
HTMLReactParser$1.Element;
|
|
18594
18594
|
|
|
18595
|
-
var Container$
|
|
18596
|
-
var Card = newStyled.div(templateObject_2$
|
|
18597
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18598
|
-
var Label$
|
|
18599
|
-
var Check = newStyled.div(templateObject_5$
|
|
18600
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18601
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18602
|
-
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"])));
|
|
18603
18603
|
var PackSelector = function (_a) {
|
|
18604
18604
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18605
|
-
return (jsx$1(Container$
|
|
18605
|
+
return (jsx$1(Container$s, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18606
18606
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18607
18607
|
}) }), void 0));
|
|
18608
18608
|
};
|
|
@@ -18616,7 +18616,7 @@ var PackCard = function (_a) {
|
|
|
18616
18616
|
.then(function (icon) { return setIcon(icon); })
|
|
18617
18617
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18618
18618
|
}, [pack.meta.icon]);
|
|
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$
|
|
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: {
|
|
18620
18620
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18621
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, {
|
|
18622
18622
|
locale: 'en-US',
|
|
@@ -18629,14 +18629,14 @@ var PackCard = function (_a) {
|
|
|
18629
18629
|
currency: currencyCode || 'USD',
|
|
18630
18630
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18631
18631
|
};
|
|
18632
|
-
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;
|
|
18633
18633
|
|
|
18634
|
-
var Container$
|
|
18635
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18636
|
-
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({
|
|
18637
18637
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18638
18638
|
}));
|
|
18639
|
-
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) {
|
|
18640
18640
|
var bold = _a.bold;
|
|
18641
18641
|
return (bold ? '700' : '500');
|
|
18642
18642
|
}, function (_a) {
|
|
@@ -18653,7 +18653,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18653
18653
|
var background = _a.background;
|
|
18654
18654
|
return background || 'unset';
|
|
18655
18655
|
});
|
|
18656
|
-
var templateObject_1$
|
|
18656
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g;
|
|
18657
18657
|
|
|
18658
18658
|
var Pagination = function (_a) {
|
|
18659
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;
|
|
@@ -18699,7 +18699,7 @@ var Pagination = function (_a) {
|
|
|
18699
18699
|
}
|
|
18700
18700
|
return pages;
|
|
18701
18701
|
}, [from, page, showReducedPages, to]);
|
|
18702
|
-
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));
|
|
18703
18703
|
};
|
|
18704
18704
|
|
|
18705
18705
|
var PaginatorBlog = function (_a) {
|
|
@@ -18713,12 +18713,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18713
18713
|
setPage(page);
|
|
18714
18714
|
onChange(page);
|
|
18715
18715
|
};
|
|
18716
|
-
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
|
|
18717
18717
|
? theme.colors.shades['white'].color
|
|
18718
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));
|
|
18719
18719
|
};
|
|
18720
18720
|
|
|
18721
|
-
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) {
|
|
18722
18722
|
var width = _a.width;
|
|
18723
18723
|
return width;
|
|
18724
18724
|
}, function (_a) {
|
|
@@ -18734,14 +18734,14 @@ var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
18734
18734
|
var PaymentMethod = function (_a) {
|
|
18735
18735
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18736
18736
|
var theme = useTheme();
|
|
18737
|
-
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));
|
|
18738
18738
|
};
|
|
18739
|
-
var templateObject_1$
|
|
18739
|
+
var templateObject_1$y;
|
|
18740
18740
|
|
|
18741
|
-
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"])));
|
|
18742
18742
|
var IMAGE_WIDTH = '63px';
|
|
18743
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18744
|
-
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({
|
|
18745
18745
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18746
18746
|
}), IMAGE_WIDTH);
|
|
18747
18747
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18764,7 +18764,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18764
18764
|
margin: '0.063rem 0',
|
|
18765
18765
|
});
|
|
18766
18766
|
});
|
|
18767
|
-
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) {
|
|
18768
18768
|
var withTag = _a.withTag; _a.theme;
|
|
18769
18769
|
return withTag
|
|
18770
18770
|
? mediaQueries({
|
|
@@ -18773,14 +18773,14 @@ var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
18773
18773
|
})
|
|
18774
18774
|
: 'justify-content: end';
|
|
18775
18775
|
});
|
|
18776
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18777
|
-
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"])));
|
|
18778
18778
|
var SimpleOrderItem = function (_a) {
|
|
18779
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;
|
|
18780
18780
|
var theme = useTheme();
|
|
18781
|
-
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));
|
|
18782
18782
|
};
|
|
18783
|
-
var templateObject_1$
|
|
18783
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
18784
18784
|
|
|
18785
18785
|
var P$1 = newStyled.p(function (_a) {
|
|
18786
18786
|
var color = _a.color;
|
|
@@ -18794,7 +18794,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18794
18794
|
margin: '0.938rem 4.188rem',
|
|
18795
18795
|
});
|
|
18796
18796
|
});
|
|
18797
|
-
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) {
|
|
18798
18798
|
var height = _a.height;
|
|
18799
18799
|
return height || '0.5rem';
|
|
18800
18800
|
}, function (_a) {
|
|
@@ -18823,7 +18823,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18823
18823
|
position: 'absolute',
|
|
18824
18824
|
});
|
|
18825
18825
|
});
|
|
18826
|
-
var Container$
|
|
18826
|
+
var Container$o = newStyled.div(function (_a) {
|
|
18827
18827
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18828
18828
|
return ({
|
|
18829
18829
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18837,14 +18837,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18837
18837
|
var ProgressBar = function (_a) {
|
|
18838
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;
|
|
18839
18839
|
var theme = useTheme();
|
|
18840
|
-
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));
|
|
18841
18841
|
};
|
|
18842
|
-
var templateObject_1$
|
|
18842
|
+
var templateObject_1$w;
|
|
18843
18843
|
|
|
18844
|
-
var Container$
|
|
18845
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18846
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18847
|
-
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)'; });
|
|
18848
18848
|
var QuantityPicker = function (_a) {
|
|
18849
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;
|
|
18850
18850
|
var theme = useTheme();
|
|
@@ -18867,9 +18867,9 @@ var QuantityPicker = function (_a) {
|
|
|
18867
18867
|
return clamp(value);
|
|
18868
18868
|
});
|
|
18869
18869
|
}, [value, clamp]);
|
|
18870
|
-
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));
|
|
18871
18871
|
};
|
|
18872
|
-
var templateObject_1$
|
|
18872
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18873
18873
|
|
|
18874
18874
|
/* base styles & size variants */
|
|
18875
18875
|
var CustomRadioStyles$1 = {
|
|
@@ -18938,9 +18938,9 @@ var ContainerStyles$1 = {
|
|
|
18938
18938
|
},
|
|
18939
18939
|
};
|
|
18940
18940
|
|
|
18941
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18942
|
-
var Container$
|
|
18943
|
-
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) {
|
|
18944
18944
|
var disabled = _a.disabled;
|
|
18945
18945
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18946
18946
|
});
|
|
@@ -18948,7 +18948,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18948
18948
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18949
18949
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18950
18950
|
]; });
|
|
18951
|
-
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"])));
|
|
18952
18952
|
var RadioPrimary = function (_a) {
|
|
18953
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;
|
|
18954
18954
|
var theme = useTheme();
|
|
@@ -18956,9 +18956,9 @@ var RadioPrimary = function (_a) {
|
|
|
18956
18956
|
var value = event.currentTarget.value;
|
|
18957
18957
|
onChange({ value: value, label: label });
|
|
18958
18958
|
};
|
|
18959
|
-
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));
|
|
18960
18960
|
};
|
|
18961
|
-
var templateObject_1$
|
|
18961
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j;
|
|
18962
18962
|
|
|
18963
18963
|
var RadioGroupInput = function (_a) {
|
|
18964
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;
|
|
@@ -19037,9 +19037,9 @@ var ContainerStyles = {
|
|
|
19037
19037
|
},
|
|
19038
19038
|
};
|
|
19039
19039
|
|
|
19040
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19041
|
-
var Container$
|
|
19042
|
-
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) {
|
|
19043
19043
|
var disabled = _a.disabled;
|
|
19044
19044
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19045
19045
|
});
|
|
@@ -19047,7 +19047,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19047
19047
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19048
19048
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19049
19049
|
]; });
|
|
19050
|
-
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) {
|
|
19051
19051
|
var theme = _a.theme;
|
|
19052
19052
|
return theme.component.radio.textSize;
|
|
19053
19053
|
}, function (_a) {
|
|
@@ -19061,9 +19061,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19061
19061
|
var value = event.currentTarget.value;
|
|
19062
19062
|
onChange({ value: value, label: label });
|
|
19063
19063
|
};
|
|
19064
|
-
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));
|
|
19065
19065
|
};
|
|
19066
|
-
var templateObject_1$
|
|
19066
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
19067
19067
|
|
|
19068
19068
|
var ClubRadioGroupInput = function (_a) {
|
|
19069
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;
|
|
@@ -19091,17 +19091,17 @@ function formatDate(date, format) {
|
|
|
19091
19091
|
}
|
|
19092
19092
|
}
|
|
19093
19093
|
|
|
19094
|
-
var Container$
|
|
19095
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19096
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19097
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19098
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19099
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19100
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19101
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19102
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19103
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
19104
|
-
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"])));
|
|
19105
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"])));
|
|
19106
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"])));
|
|
19107
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"])));
|
|
@@ -19129,24 +19129,24 @@ var Review$1 = function (_a) {
|
|
|
19129
19129
|
}
|
|
19130
19130
|
}
|
|
19131
19131
|
}, [opened]);
|
|
19132
|
-
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 &&
|
|
19133
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));
|
|
19134
19134
|
};
|
|
19135
|
-
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;
|
|
19136
19136
|
|
|
19137
19137
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19138
19138
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19139
|
-
var Container$
|
|
19140
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19141
|
-
var Content = newStyled.div(templateObject_3$
|
|
19142
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19143
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19144
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19145
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19146
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19147
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19148
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
19149
|
-
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"])));
|
|
19150
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"])));
|
|
19151
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"])));
|
|
19152
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"])));
|
|
@@ -19178,7 +19178,7 @@ var Review = function (_a) {
|
|
|
19178
19178
|
});
|
|
19179
19179
|
};
|
|
19180
19180
|
}, [randomId]);
|
|
19181
|
-
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: {
|
|
19182
19182
|
__html: showMoreMobile
|
|
19183
19183
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19184
19184
|
: description,
|
|
@@ -19188,15 +19188,15 @@ var Review = function (_a) {
|
|
|
19188
19188
|
: description,
|
|
19189
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));
|
|
19190
19190
|
};
|
|
19191
|
-
var templateObject_1$
|
|
19192
|
-
|
|
19193
|
-
var Container$
|
|
19194
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19195
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19196
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19197
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19198
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19199
|
-
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) {
|
|
19200
19200
|
var backgroundUrl = _a.backgroundUrl;
|
|
19201
19201
|
return "url(".concat(backgroundUrl, ")");
|
|
19202
19202
|
});
|
|
@@ -19204,19 +19204,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19204
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;
|
|
19205
19205
|
var starsNumber = 5;
|
|
19206
19206
|
var theme = useTheme();
|
|
19207
|
-
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));
|
|
19208
19208
|
};
|
|
19209
|
-
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;
|
|
19210
19210
|
|
|
19211
|
-
var Container$
|
|
19212
|
-
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; });
|
|
19213
19213
|
var ScrollToTop = function (_a) {
|
|
19214
19214
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19215
19215
|
var theme = useTheme();
|
|
19216
19216
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19217
|
-
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));
|
|
19218
19218
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19219
|
+
var templateObject_1$p, templateObject_2$h;
|
|
19220
19220
|
|
|
19221
19221
|
var Input = newStyled.input(function (props) { return ({
|
|
19222
19222
|
padding: props.theme.component.input.padding,
|
|
@@ -19247,7 +19247,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19247
19247
|
},
|
|
19248
19248
|
}); });
|
|
19249
19249
|
|
|
19250
|
-
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({
|
|
19251
19251
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19252
19252
|
}));
|
|
19253
19253
|
var Description = newStyled.div({
|
|
@@ -19264,25 +19264,25 @@ var Description = newStyled.div({
|
|
|
19264
19264
|
var ProductItem = function (_a) {
|
|
19265
19265
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19266
19266
|
var theme = useTheme();
|
|
19267
|
-
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));
|
|
19268
19268
|
};
|
|
19269
|
-
var templateObject_1$
|
|
19269
|
+
var templateObject_1$o;
|
|
19270
19270
|
|
|
19271
|
-
var Container$
|
|
19271
|
+
var Container$f = newStyled.div({
|
|
19272
19272
|
display: 'flex',
|
|
19273
19273
|
justifyContent: 'center',
|
|
19274
19274
|
padding: '1rem',
|
|
19275
19275
|
});
|
|
19276
19276
|
var Footer = function (_a) {
|
|
19277
19277
|
var text = _a.text, onClick = _a.onClick;
|
|
19278
|
-
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));
|
|
19279
19279
|
};
|
|
19280
19280
|
|
|
19281
19281
|
var Ul = newStyled.ul({
|
|
19282
19282
|
margin: '0px',
|
|
19283
19283
|
padding: '0px',
|
|
19284
19284
|
});
|
|
19285
|
-
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({
|
|
19286
19286
|
padding: [0, '0rem 1rem'],
|
|
19287
19287
|
borderRadius: [0, '0.5rem'],
|
|
19288
19288
|
}));
|
|
@@ -19294,22 +19294,22 @@ var Anchor = newStyled.a({
|
|
|
19294
19294
|
padding: 0,
|
|
19295
19295
|
textDecoration: 'none',
|
|
19296
19296
|
});
|
|
19297
|
-
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({
|
|
19298
19298
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19299
19299
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19300
19300
|
borderRadius: ['0', '0.5rem'],
|
|
19301
19301
|
}));
|
|
19302
|
-
var Header = newStyled.div(templateObject_3$
|
|
19302
|
+
var Header = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19303
19303
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19304
19304
|
}));
|
|
19305
19305
|
var ResultsPanel = function (_a) {
|
|
19306
19306
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19307
19307
|
var theme = useTheme();
|
|
19308
|
-
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));
|
|
19309
19309
|
};
|
|
19310
|
-
var templateObject_1$
|
|
19310
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e;
|
|
19311
19311
|
|
|
19312
|
-
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({
|
|
19313
19313
|
right: ['1rem', '7.75rem'],
|
|
19314
19314
|
top: ['0.75rem', '0.75rem'],
|
|
19315
19315
|
}));
|
|
@@ -19318,7 +19318,7 @@ var ClearButton = function (_a) {
|
|
|
19318
19318
|
var theme = useTheme();
|
|
19319
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));
|
|
19320
19320
|
};
|
|
19321
|
-
var templateObject_1$
|
|
19321
|
+
var templateObject_1$m;
|
|
19322
19322
|
|
|
19323
19323
|
var SearchIconContainer = newStyled.div({
|
|
19324
19324
|
display: 'flex',
|
|
@@ -19328,7 +19328,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19328
19328
|
background: 'white',
|
|
19329
19329
|
alignSelf: 'center',
|
|
19330
19330
|
});
|
|
19331
|
-
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"])));
|
|
19332
19332
|
var SearchControl = function (_a) {
|
|
19333
19333
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19334
19334
|
var theme = useTheme();
|
|
@@ -19344,7 +19344,7 @@ var SearchControl = function (_a) {
|
|
|
19344
19344
|
}
|
|
19345
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));
|
|
19346
19346
|
};
|
|
19347
|
-
var templateObject_1$
|
|
19347
|
+
var templateObject_1$l;
|
|
19348
19348
|
|
|
19349
19349
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19350
19350
|
var reducer = function (state, action) {
|
|
@@ -19360,7 +19360,7 @@ var reducer = function (state, action) {
|
|
|
19360
19360
|
}
|
|
19361
19361
|
}
|
|
19362
19362
|
};
|
|
19363
|
-
var Container$
|
|
19363
|
+
var Container$d = newStyled.div({
|
|
19364
19364
|
position: 'relative',
|
|
19365
19365
|
display: 'flex',
|
|
19366
19366
|
});
|
|
@@ -19400,7 +19400,7 @@ var SearchBar = function (_a) {
|
|
|
19400
19400
|
if (e.cancelable) {
|
|
19401
19401
|
e.preventDefault();
|
|
19402
19402
|
}
|
|
19403
|
-
}, 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) {
|
|
19404
19404
|
if (e.key === 'Enter') {
|
|
19405
19405
|
if (e.cancelable) {
|
|
19406
19406
|
e.preventDefault();
|
|
@@ -19411,20 +19411,20 @@ var SearchBar = function (_a) {
|
|
|
19411
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));
|
|
19412
19412
|
};
|
|
19413
19413
|
|
|
19414
|
-
var Container$
|
|
19415
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19416
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19417
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19418
|
-
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"])));
|
|
19419
19419
|
var SearchNavigation = function (_a) {
|
|
19420
19420
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19421
|
-
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) {
|
|
19422
19422
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19423
19423
|
}) }, void 0)] }, void 0));
|
|
19424
19424
|
};
|
|
19425
|
-
var templateObject_1$
|
|
19425
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$6;
|
|
19426
19426
|
|
|
19427
|
-
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) {
|
|
19428
19428
|
var alignCenter = _a.alignCenter;
|
|
19429
19429
|
return alignCenter &&
|
|
19430
19430
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19434,29 +19434,29 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19434
19434
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19435
19435
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19436
19436
|
});
|
|
19437
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19438
|
-
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"])));
|
|
19439
19439
|
var ShortBanner = function (_a) {
|
|
19440
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;
|
|
19441
19441
|
var theme = useTheme();
|
|
19442
|
-
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));
|
|
19443
19443
|
};
|
|
19444
|
-
var templateObject_1$
|
|
19445
|
-
|
|
19446
|
-
var TableElement$
|
|
19447
|
-
var TableCell$
|
|
19448
|
-
var TableHead$
|
|
19449
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19450
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19451
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19452
|
-
var Container$
|
|
19453
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19454
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19455
|
-
var TableRow$
|
|
19456
|
-
var templateObject_1$
|
|
19457
|
-
|
|
19458
|
-
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19459
|
-
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) {
|
|
19460
19460
|
if (index == 0) {
|
|
19461
19461
|
return '#f6f0e7';
|
|
19462
19462
|
}
|
|
@@ -19489,21 +19489,21 @@ var SizeChartTable = function (_a) {
|
|
|
19489
19489
|
var theme = useTheme();
|
|
19490
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];
|
|
19491
19491
|
var isMultilabel = xLabel && yLabel;
|
|
19492
|
-
return (jsxs$1(Container$
|
|
19493
|
-
backgroundColor: getCellColor(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$
|
|
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));
|
|
19495
19495
|
};
|
|
19496
19496
|
|
|
19497
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19498
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19499
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19500
|
-
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; });
|
|
19501
19501
|
var SizeTable = function (_a) {
|
|
19502
19502
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19503
19503
|
var theme = useTheme();
|
|
19504
|
-
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));
|
|
19505
19505
|
};
|
|
19506
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8;
|
|
19507
19507
|
|
|
19508
19508
|
var getStylesBySize$4 = function (size) {
|
|
19509
19509
|
switch (size) {
|
|
@@ -19530,7 +19530,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19530
19530
|
} });
|
|
19531
19531
|
};
|
|
19532
19532
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19533
|
-
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));
|
|
19534
19534
|
};
|
|
19535
19535
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19536
19536
|
if (disabled)
|
|
@@ -19546,23 +19546,23 @@ var TextButton = function (_a) {
|
|
|
19546
19546
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19547
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));
|
|
19548
19548
|
};
|
|
19549
|
-
var templateObject_1$
|
|
19549
|
+
var templateObject_1$g;
|
|
19550
19550
|
|
|
19551
|
-
var Container$
|
|
19552
|
-
var P = newStyled.p(templateObject_2$
|
|
19553
|
-
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"])));
|
|
19554
19554
|
var SizeFitGuide = function (_a) {
|
|
19555
19555
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19556
|
-
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));
|
|
19557
19557
|
};
|
|
19558
|
-
var templateObject_1$
|
|
19558
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9;
|
|
19559
19559
|
|
|
19560
|
-
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) {
|
|
19561
19561
|
var inline = _a.inline;
|
|
19562
19562
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19563
19563
|
});
|
|
19564
|
-
var Row = newStyled.div(templateObject_2$
|
|
19565
|
-
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;
|
|
19566
19566
|
|
|
19567
19567
|
var SizeSelector = function (_a) {
|
|
19568
19568
|
var _b;
|
|
@@ -19584,7 +19584,7 @@ var SizeSelector = function (_a) {
|
|
|
19584
19584
|
}) }), void 0)] }), void 0));
|
|
19585
19585
|
};
|
|
19586
19586
|
|
|
19587
|
-
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) {
|
|
19588
19588
|
var titleSize = _a.titleSize;
|
|
19589
19589
|
return titleSize;
|
|
19590
19590
|
}, function (_a) {
|
|
@@ -19601,18 +19601,18 @@ var Tab = function (_a) {
|
|
|
19601
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;
|
|
19602
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));
|
|
19603
19603
|
};
|
|
19604
|
-
var templateObject_1$
|
|
19604
|
+
var templateObject_1$d;
|
|
19605
19605
|
|
|
19606
|
-
var Container$
|
|
19607
|
-
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) {
|
|
19608
19608
|
var backgroundColor = _a.backgroundColor;
|
|
19609
19609
|
return backgroundColor;
|
|
19610
19610
|
}, function (_a) {
|
|
19611
19611
|
var borderColor = _a.borderColor;
|
|
19612
19612
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19613
19613
|
});
|
|
19614
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19615
|
-
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"])));
|
|
19616
19616
|
var Tabs = function (_a) {
|
|
19617
19617
|
var _b;
|
|
19618
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;
|
|
@@ -19621,16 +19621,16 @@ var Tabs = function (_a) {
|
|
|
19621
19621
|
return null;
|
|
19622
19622
|
}
|
|
19623
19623
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19624
|
-
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));
|
|
19625
19625
|
};
|
|
19626
|
-
var templateObject_1$
|
|
19626
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$7;
|
|
19627
19627
|
|
|
19628
|
-
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"])));
|
|
19629
19629
|
var Tag = function (_a) {
|
|
19630
19630
|
var text = _a.text, className = _a.className;
|
|
19631
|
-
return jsx$1(Container$
|
|
19631
|
+
return jsx$1(Container$7, __assign$1({ className: className }, { children: text }), void 0);
|
|
19632
19632
|
};
|
|
19633
|
-
var templateObject_1$
|
|
19633
|
+
var templateObject_1$b;
|
|
19634
19634
|
|
|
19635
19635
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19636
19636
|
switch (size) {
|
|
@@ -19741,9 +19741,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19741
19741
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19742
19742
|
};
|
|
19743
19743
|
|
|
19744
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19745
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19746
|
-
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"])));
|
|
19747
19747
|
var ImageVideo = function (_a) {
|
|
19748
19748
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19749
19749
|
var video = useRef(null);
|
|
@@ -19763,12 +19763,12 @@ var ImageVideo = function (_a) {
|
|
|
19763
19763
|
height: '100%',
|
|
19764
19764
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19765
19765
|
};
|
|
19766
|
-
var templateObject_1$
|
|
19766
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19767
19767
|
|
|
19768
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19769
|
-
var ContainerMobile = css(templateObject_2$
|
|
19770
|
-
var Container$
|
|
19771
|
-
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"])));
|
|
19772
19772
|
var TextWithImage = function (_a) {
|
|
19773
19773
|
var _b, _c, _d, _e;
|
|
19774
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"]);
|
|
@@ -19788,7 +19788,7 @@ var TextWithImage = function (_a) {
|
|
|
19788
19788
|
// @ts-ignore
|
|
19789
19789
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19790
19790
|
};
|
|
19791
|
-
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: {
|
|
19792
19792
|
backgroundColor: props.btnBGColor,
|
|
19793
19793
|
color: '#ffffff',
|
|
19794
19794
|
border: props.btnBGColor,
|
|
@@ -19798,9 +19798,9 @@ var TextWithImage = function (_a) {
|
|
|
19798
19798
|
},
|
|
19799
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));
|
|
19800
19800
|
};
|
|
19801
|
-
var templateObject_1$
|
|
19801
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6, templateObject_4$6;
|
|
19802
19802
|
|
|
19803
|
-
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) {
|
|
19804
19804
|
var timerColor = _a.timerColor;
|
|
19805
19805
|
return timerColor || '';
|
|
19806
19806
|
});
|
|
@@ -19836,11 +19836,11 @@ var Timer = function (_a) {
|
|
|
19836
19836
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19837
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));
|
|
19838
19838
|
};
|
|
19839
|
-
var templateObject_1$
|
|
19839
|
+
var templateObject_1$8;
|
|
19840
19840
|
|
|
19841
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19842
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19843
|
-
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) {
|
|
19844
19844
|
var theme = _a.theme;
|
|
19845
19845
|
return theme.component.total.basicTotal.currency.color;
|
|
19846
19846
|
}, function (_a) {
|
|
@@ -19853,41 +19853,41 @@ var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __make
|
|
|
19853
19853
|
var theme = _a.theme;
|
|
19854
19854
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19855
19855
|
});
|
|
19856
|
-
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) {
|
|
19857
19857
|
var highlightColor = _a.highlightColor;
|
|
19858
19858
|
return highlightColor;
|
|
19859
19859
|
});
|
|
19860
|
-
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) {
|
|
19861
19861
|
var showTotalLabel = _a.showTotalLabel;
|
|
19862
19862
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19863
19863
|
});
|
|
19864
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19865
|
-
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) {
|
|
19866
19866
|
var theme = _a.theme;
|
|
19867
19867
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19868
19868
|
});
|
|
19869
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19870
|
-
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;
|
|
19871
19871
|
|
|
19872
19872
|
var Total = function (_a) {
|
|
19873
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;
|
|
19874
19874
|
var theme = useTheme();
|
|
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$
|
|
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));
|
|
19876
19876
|
};
|
|
19877
19877
|
|
|
19878
|
-
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) {
|
|
19879
19879
|
var color = _a.color;
|
|
19880
19880
|
return color;
|
|
19881
19881
|
});
|
|
19882
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19883
|
-
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) {
|
|
19884
19884
|
var theme = _a.theme;
|
|
19885
19885
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19886
19886
|
}, function (_a) {
|
|
19887
19887
|
var theme = _a.theme;
|
|
19888
19888
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19889
19889
|
});
|
|
19890
|
-
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) {
|
|
19891
19891
|
var color = _a.color;
|
|
19892
19892
|
return color;
|
|
19893
19893
|
});
|
|
@@ -19900,32 +19900,32 @@ var Subtotal = function (_a) {
|
|
|
19900
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));
|
|
19901
19901
|
})] }), void 0));
|
|
19902
19902
|
};
|
|
19903
|
-
var templateObject_1$
|
|
19903
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19904
19904
|
|
|
19905
19905
|
var Totals = {
|
|
19906
19906
|
Total: Total,
|
|
19907
19907
|
Subtotal: Subtotal,
|
|
19908
19908
|
};
|
|
19909
19909
|
|
|
19910
|
-
var Container$
|
|
19911
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19912
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19913
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19914
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19915
|
-
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) {
|
|
19916
19916
|
return props.finishedTrack
|
|
19917
19917
|
? props.finishedTrackColor
|
|
19918
19918
|
: props.activeTrack
|
|
19919
19919
|
? props.activeTrackColor
|
|
19920
19920
|
: '';
|
|
19921
19921
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19922
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19923
|
-
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) {
|
|
19924
19924
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19925
19925
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19926
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
19927
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_10$
|
|
19928
|
-
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"])));
|
|
19929
19929
|
var TrackingProgressV2 = function (_a) {
|
|
19930
19930
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, _b = _a.resumedStyle, resumedStyle = _b === void 0 ? false : _b, activeCheckpointColor = _a.activeCheckpointColor, warning = _a.warning;
|
|
19931
19931
|
var theme = useTheme();
|
|
@@ -19948,7 +19948,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19948
19948
|
}
|
|
19949
19949
|
return '30px';
|
|
19950
19950
|
};
|
|
19951
|
-
return (jsxs$1(Container$
|
|
19951
|
+
return (jsxs$1(Container$4, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19952
19952
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19953
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
|
|
19954
19954
|
? activeCheckpointColor
|
|
@@ -19959,18 +19959,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19959
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));
|
|
19960
19960
|
})] }), void 0));
|
|
19961
19961
|
};
|
|
19962
|
-
var templateObject_1$
|
|
19963
|
-
|
|
19964
|
-
var Container$
|
|
19965
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19966
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19967
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19968
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19969
|
-
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) {
|
|
19970
19970
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19971
19971
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19972
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19973
|
-
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; });
|
|
19974
19974
|
var TrackingProgress = function (_a) {
|
|
19975
19975
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19976
19976
|
var theme = useTheme();
|
|
@@ -19990,7 +19990,7 @@ var TrackingProgress = function (_a) {
|
|
|
19990
19990
|
}
|
|
19991
19991
|
return '30px';
|
|
19992
19992
|
};
|
|
19993
|
-
return (jsxs$1(Container$
|
|
19993
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19994
19994
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19995
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
|
|
19996
19996
|
? theme.colors.semantic.informative.color
|
|
@@ -19999,9 +19999,9 @@ var TrackingProgress = function (_a) {
|
|
|
19999
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));
|
|
20000
20000
|
})] }), void 0));
|
|
20001
20001
|
};
|
|
20002
|
-
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;
|
|
20003
20003
|
|
|
20004
|
-
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) {
|
|
20005
20005
|
var textPosition = _a.textPosition;
|
|
20006
20006
|
return textPosition;
|
|
20007
20007
|
}, function (_a) {
|
|
@@ -20014,7 +20014,7 @@ var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = _
|
|
|
20014
20014
|
var borderRadius = _a.borderRadius;
|
|
20015
20015
|
return borderRadius || '8px';
|
|
20016
20016
|
});
|
|
20017
|
-
var templateObject_1$
|
|
20017
|
+
var templateObject_1$3;
|
|
20018
20018
|
|
|
20019
20019
|
var getDefaultCountdown = function () {
|
|
20020
20020
|
var tomorrowDate = new Date();
|
|
@@ -20030,7 +20030,7 @@ var HurryUp = function (_a) {
|
|
|
20030
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));
|
|
20031
20031
|
};
|
|
20032
20032
|
|
|
20033
|
-
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) {
|
|
20034
20034
|
var size = _a.size;
|
|
20035
20035
|
return (size ? size : '100%');
|
|
20036
20036
|
}, function (_a) {
|
|
@@ -20044,7 +20044,7 @@ var borderSize = {
|
|
|
20044
20044
|
large: '3px',
|
|
20045
20045
|
};
|
|
20046
20046
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20047
|
-
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) {
|
|
20048
20048
|
var size = _a.size;
|
|
20049
20049
|
return borderSize[size];
|
|
20050
20050
|
}, function (_a) {
|
|
@@ -20057,15 +20057,15 @@ var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __
|
|
|
20057
20057
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20058
20058
|
return duration;
|
|
20059
20059
|
});
|
|
20060
|
-
var templateObject_1$
|
|
20060
|
+
var templateObject_1$2, templateObject_2$2;
|
|
20061
20061
|
|
|
20062
20062
|
var Spinner = function (_a) {
|
|
20063
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;
|
|
20064
|
-
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));
|
|
20065
20065
|
};
|
|
20066
20066
|
|
|
20067
|
-
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"])));
|
|
20068
|
-
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) {
|
|
20069
20069
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20070
20070
|
return borderRadiusVariant &&
|
|
20071
20071
|
"\n border-radius: 40px;\n ";
|
|
@@ -20076,30 +20076,30 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
|
|
|
20076
20076
|
var theme = _a.theme;
|
|
20077
20077
|
return theme.component.gallery.aspectRatio;
|
|
20078
20078
|
});
|
|
20079
|
-
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"])));
|
|
20080
|
-
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"])));
|
|
20081
|
-
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) {
|
|
20082
20082
|
var theme = _a.theme;
|
|
20083
20083
|
return theme.colors.shades.white.color;
|
|
20084
20084
|
});
|
|
20085
|
-
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"])));
|
|
20086
|
-
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) {
|
|
20087
20087
|
var theme = _a.theme;
|
|
20088
20088
|
return theme.colors.pallete.primary.color;
|
|
20089
20089
|
});
|
|
20090
|
-
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) {
|
|
20091
20091
|
var theme = _a.theme;
|
|
20092
20092
|
return theme.component.gallery.aspectRatio;
|
|
20093
20093
|
});
|
|
20094
|
-
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) {
|
|
20095
20095
|
var theme = _a.theme;
|
|
20096
20096
|
return theme.component.gallery.aspectRatio;
|
|
20097
20097
|
});
|
|
20098
|
-
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) {
|
|
20099
20099
|
var theme = _a.theme;
|
|
20100
20100
|
return theme.component.gallery.aspectRatio;
|
|
20101
20101
|
});
|
|
20102
|
-
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;
|
|
20103
20103
|
|
|
20104
20104
|
var SETTINGS = {
|
|
20105
20105
|
infinite: false,
|
|
@@ -20161,7 +20161,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20161
20161
|
if (thumbnailRef.current)
|
|
20162
20162
|
setNav2(thumbnailRef.current);
|
|
20163
20163
|
}, []);
|
|
20164
|
-
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) {
|
|
20165
20165
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20166
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));
|
|
20167
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) {
|
|
@@ -20170,5 +20170,57 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20170
20170
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20171
20171
|
};
|
|
20172
20172
|
|
|
20173
|
-
|
|
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 };
|
|
20174
20226
|
//# sourceMappingURL=index.esm.js.map
|