@trafilea/afrodita-components 5.0.0-beta.230 → 5.0.0-beta.231
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 +5 -1
- package/build/index.esm.js +210 -207
- package/build/index.esm.js.map +1 -1
- package/build/index.js +210 -207
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -13109,6 +13109,22 @@ var BuyNowPayLater = function (_a) {
|
|
|
13109
13109
|
};
|
|
13110
13110
|
var templateObject_1$H, templateObject_2$t;
|
|
13111
13111
|
|
|
13112
|
+
var Container$x = newStyled('div')(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
13113
|
+
var Content$1 = newStyled('div')(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
13114
|
+
var BarContainer = newStyled('div')(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
13115
|
+
var Bar = newStyled('div')(templateObject_4$g || (templateObject_4$g = __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) {
|
|
13116
|
+
var index = _a.index;
|
|
13117
|
+
return "".concat(6 + 3 * index, "px");
|
|
13118
|
+
}, function (_a) {
|
|
13119
|
+
var isFilled = _a.isFilled;
|
|
13120
|
+
return (isFilled ? '#292929' : '#D9D9D9');
|
|
13121
|
+
});
|
|
13122
|
+
var StrengthBars = function (_a) {
|
|
13123
|
+
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13124
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13125
|
+
};
|
|
13126
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$g;
|
|
13127
|
+
|
|
13112
13128
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13113
13129
|
var width = _a.width, height = _a.height;
|
|
13114
13130
|
return ({
|
|
@@ -13117,10 +13133,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13117
13133
|
height: height,
|
|
13118
13134
|
});
|
|
13119
13135
|
});
|
|
13120
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
13121
|
-
var Container$
|
|
13122
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
13123
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13136
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
13137
|
+
var Container$w = newStyled.a(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
13138
|
+
var ProdCardContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
13139
|
+
var Title$3 = newStyled.p(templateObject_4$f || (templateObject_4$f = __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; });
|
|
13124
13140
|
var getStylesBySize$1 = function (size) {
|
|
13125
13141
|
switch (size) {
|
|
13126
13142
|
case exports.ComponentSize.Medium:
|
|
@@ -13168,7 +13184,10 @@ var ProductItemMobile = function (_a) {
|
|
|
13168
13184
|
showLogo: true,
|
|
13169
13185
|
iconColor: '#292929',
|
|
13170
13186
|
fontSize: '12px',
|
|
13171
|
-
} : _e
|
|
13187
|
+
} : _e, _f = _a.hasStrength, hasStrength = _f === void 0 ? {
|
|
13188
|
+
strength: -1,
|
|
13189
|
+
description: '',
|
|
13190
|
+
} : _f;
|
|
13172
13191
|
var theme = useTheme();
|
|
13173
13192
|
var styles = getStylesBySize$1(size);
|
|
13174
13193
|
var space = React$2.useMemo(function () {
|
|
@@ -13183,32 +13202,32 @@ var ProductItemMobile = function (_a) {
|
|
|
13183
13202
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
13184
13203
|
};
|
|
13185
13204
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13186
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
13205
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (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, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { 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, { 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$w, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: 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, { 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), showBNPL && (jsx(BuyNowPayLater, { 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)), 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));
|
|
13187
13206
|
};
|
|
13188
|
-
var templateObject_1$
|
|
13207
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13189
13208
|
|
|
13190
|
-
var Container$
|
|
13209
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
13191
13210
|
function withProductGrid(ProductItemComponent, data) {
|
|
13192
13211
|
function WithProductGrid(props) {
|
|
13193
|
-
return (jsxRuntime.jsx(Container$
|
|
13212
|
+
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
13194
13213
|
}
|
|
13195
13214
|
/* istanbul ignore next */
|
|
13196
13215
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
13197
13216
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
13198
13217
|
return WithProductGrid;
|
|
13199
13218
|
}
|
|
13200
|
-
var templateObject_1$
|
|
13219
|
+
var templateObject_1$E;
|
|
13201
13220
|
|
|
13202
13221
|
var Collection = {
|
|
13203
13222
|
ProductItemMobile: ProductItemMobile,
|
|
13204
13223
|
withProductGrid: withProductGrid,
|
|
13205
13224
|
};
|
|
13206
13225
|
|
|
13207
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
13226
|
+
var Backdrop = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\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: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
13208
13227
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
13209
13228
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
13210
13229
|
});
|
|
13211
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
13230
|
+
var Sidebar = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
13212
13231
|
var width = _a.width;
|
|
13213
13232
|
return width;
|
|
13214
13233
|
}, function (_a) {
|
|
@@ -13249,28 +13268,28 @@ var Drawer = function (_a) {
|
|
|
13249
13268
|
}, [isOpen, onClose, onOpen]);
|
|
13250
13269
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
13251
13270
|
};
|
|
13252
|
-
var templateObject_1$
|
|
13271
|
+
var templateObject_1$D, templateObject_2$q;
|
|
13253
13272
|
|
|
13254
|
-
var Container$
|
|
13273
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
13255
13274
|
var size = _a.size;
|
|
13256
13275
|
return (size ? size : '100%');
|
|
13257
13276
|
}, function (_a) {
|
|
13258
13277
|
var size = _a.size;
|
|
13259
13278
|
return (size ? size : '100%');
|
|
13260
13279
|
});
|
|
13261
|
-
var Animation = newStyled.div(templateObject_2$
|
|
13280
|
+
var Animation = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
13262
13281
|
var animationDuration = _a.animationDuration;
|
|
13263
13282
|
return animationDuration;
|
|
13264
13283
|
});
|
|
13265
13284
|
var Spinner = function (_a) {
|
|
13266
13285
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
13267
|
-
return (jsxRuntime.jsx(Container$
|
|
13286
|
+
return (jsxRuntime.jsx(Container$u, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
13268
13287
|
};
|
|
13269
|
-
var templateObject_1$
|
|
13288
|
+
var templateObject_1$C, templateObject_2$p;
|
|
13270
13289
|
|
|
13271
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13272
|
-
var LI = newStyled.li(templateObject_2$
|
|
13273
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
13290
|
+
var UL = newStyled.ul(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
13291
|
+
var LI = newStyled.li(templateObject_2$o || (templateObject_2$o = __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; });
|
|
13292
|
+
var CloseIconContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
13274
13293
|
var Tags = function (_a) {
|
|
13275
13294
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
13276
13295
|
var theme = useTheme();
|
|
@@ -13278,7 +13297,7 @@ var Tags = function (_a) {
|
|
|
13278
13297
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
13279
13298
|
}) }), void 0));
|
|
13280
13299
|
};
|
|
13281
|
-
var templateObject_1$
|
|
13300
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$n;
|
|
13282
13301
|
|
|
13283
13302
|
function FilteringDropdown(_a) {
|
|
13284
13303
|
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;
|
|
@@ -13311,12 +13330,12 @@ function FilteringDropdown(_a) {
|
|
|
13311
13330
|
}) }, void 0)] }), void 0));
|
|
13312
13331
|
}
|
|
13313
13332
|
|
|
13314
|
-
var Container$
|
|
13315
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13316
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13333
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
13334
|
+
var IconContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
13335
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13317
13336
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13318
13337
|
}));
|
|
13319
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13338
|
+
var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __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) {
|
|
13320
13339
|
var bold = _a.bold;
|
|
13321
13340
|
return (bold ? '700' : '500');
|
|
13322
13341
|
}, function (_a) {
|
|
@@ -13333,7 +13352,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
13333
13352
|
var background = _a.background;
|
|
13334
13353
|
return background || 'unset';
|
|
13335
13354
|
});
|
|
13336
|
-
var templateObject_1$
|
|
13355
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$e;
|
|
13337
13356
|
|
|
13338
13357
|
var Pagination = function (_a) {
|
|
13339
13358
|
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;
|
|
@@ -13379,7 +13398,7 @@ var Pagination = function (_a) {
|
|
|
13379
13398
|
}
|
|
13380
13399
|
return pages;
|
|
13381
13400
|
}, [from, page, showReducedPages, to]);
|
|
13382
|
-
return (jsxRuntime.jsxs(Container$
|
|
13401
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13383
13402
|
};
|
|
13384
13403
|
|
|
13385
13404
|
var PaginatorBlog = function (_a) {
|
|
@@ -13393,12 +13412,12 @@ var PaginatorBlog = function (_a) {
|
|
|
13393
13412
|
setPage(page);
|
|
13394
13413
|
onChange(page);
|
|
13395
13414
|
};
|
|
13396
|
-
return (jsxRuntime.jsxs(Container$
|
|
13415
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13397
13416
|
? theme.colors.shades['white'].color
|
|
13398
13417
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13399
13418
|
};
|
|
13400
13419
|
|
|
13401
|
-
var Container$
|
|
13420
|
+
var Container$s = newStyled.div(templateObject_1$z || (templateObject_1$z = __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({
|
|
13402
13421
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13403
13422
|
}));
|
|
13404
13423
|
var Description$2 = newStyled.div({
|
|
@@ -13415,25 +13434,25 @@ var Description$2 = newStyled.div({
|
|
|
13415
13434
|
var ProductItem = function (_a) {
|
|
13416
13435
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13417
13436
|
var theme = useTheme();
|
|
13418
|
-
return (jsxRuntime.jsxs(Container$
|
|
13437
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13419
13438
|
};
|
|
13420
|
-
var templateObject_1$
|
|
13439
|
+
var templateObject_1$z;
|
|
13421
13440
|
|
|
13422
|
-
var Container$
|
|
13441
|
+
var Container$r = newStyled.div({
|
|
13423
13442
|
display: 'flex',
|
|
13424
13443
|
justifyContent: 'center',
|
|
13425
13444
|
padding: '1rem',
|
|
13426
13445
|
});
|
|
13427
13446
|
var Footer = function (_a) {
|
|
13428
13447
|
var text = _a.text, onClick = _a.onClick;
|
|
13429
|
-
return (jsxRuntime.jsx(Container$
|
|
13448
|
+
return (jsxRuntime.jsx(Container$r, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13430
13449
|
};
|
|
13431
13450
|
|
|
13432
13451
|
var Ul = newStyled.ul({
|
|
13433
13452
|
margin: '0px',
|
|
13434
13453
|
padding: '0px',
|
|
13435
13454
|
});
|
|
13436
|
-
var Li = newStyled.li(templateObject_1$
|
|
13455
|
+
var Li = newStyled.li(templateObject_1$y || (templateObject_1$y = __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({
|
|
13437
13456
|
padding: [0, '0rem 1rem'],
|
|
13438
13457
|
borderRadius: [0, '0.5rem'],
|
|
13439
13458
|
}));
|
|
@@ -13445,20 +13464,20 @@ var Anchor = newStyled.a({
|
|
|
13445
13464
|
padding: 0,
|
|
13446
13465
|
textDecoration: 'none',
|
|
13447
13466
|
});
|
|
13448
|
-
var Container$
|
|
13467
|
+
var Container$q = newStyled.div(templateObject_2$m || (templateObject_2$m = __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({
|
|
13449
13468
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13450
13469
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13451
13470
|
borderRadius: ['0', '0.5rem'],
|
|
13452
13471
|
}));
|
|
13453
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13472
|
+
var Header$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13454
13473
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13455
13474
|
}));
|
|
13456
13475
|
var ResultsPanel = function (_a) {
|
|
13457
13476
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13458
13477
|
var theme = useTheme();
|
|
13459
|
-
return (jsxRuntime.jsxs(Container$
|
|
13478
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13460
13479
|
};
|
|
13461
|
-
var templateObject_1$
|
|
13480
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$l;
|
|
13462
13481
|
|
|
13463
13482
|
var Input = newStyled.input(function (props) { return ({
|
|
13464
13483
|
padding: props.theme.component.input.padding,
|
|
@@ -13489,7 +13508,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13489
13508
|
},
|
|
13490
13509
|
}); });
|
|
13491
13510
|
|
|
13492
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13511
|
+
var Button$1 = newStyled.button(templateObject_1$x || (templateObject_1$x = __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({
|
|
13493
13512
|
right: ['1rem', '7.75rem'],
|
|
13494
13513
|
top: ['0.75rem', '0.75rem'],
|
|
13495
13514
|
}));
|
|
@@ -13498,7 +13517,7 @@ var ClearButton = function (_a) {
|
|
|
13498
13517
|
var theme = useTheme();
|
|
13499
13518
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13500
13519
|
};
|
|
13501
|
-
var templateObject_1$
|
|
13520
|
+
var templateObject_1$x;
|
|
13502
13521
|
|
|
13503
13522
|
var useOnClickOutside = function (ref, handler) {
|
|
13504
13523
|
React$2.useEffect(function () {
|
|
@@ -13587,7 +13606,7 @@ var reducer = function (state, action) {
|
|
|
13587
13606
|
}
|
|
13588
13607
|
}
|
|
13589
13608
|
};
|
|
13590
|
-
var Container$
|
|
13609
|
+
var Container$p = newStyled.div({
|
|
13591
13610
|
position: 'relative',
|
|
13592
13611
|
display: 'flex',
|
|
13593
13612
|
});
|
|
@@ -13623,7 +13642,7 @@ var SearchBar = function (_a) {
|
|
|
13623
13642
|
onClose();
|
|
13624
13643
|
}
|
|
13625
13644
|
};
|
|
13626
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13645
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13627
13646
|
if (e.key === 'Enter') {
|
|
13628
13647
|
e.preventDefault();
|
|
13629
13648
|
e.stopPropagation();
|
|
@@ -13632,14 +13651,14 @@ var SearchBar = function (_a) {
|
|
|
13632
13651
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13633
13652
|
};
|
|
13634
13653
|
|
|
13635
|
-
var Container$
|
|
13654
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13636
13655
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13637
13656
|
return borderRadiusVariant &&
|
|
13638
13657
|
"\n border-radius: 40px;\n ";
|
|
13639
13658
|
});
|
|
13640
13659
|
// max-height: 31.875rem;
|
|
13641
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13642
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13660
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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'); });
|
|
13661
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13643
13662
|
var settings = {
|
|
13644
13663
|
dots: true,
|
|
13645
13664
|
infinite: false,
|
|
@@ -13666,7 +13685,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13666
13685
|
}
|
|
13667
13686
|
}
|
|
13668
13687
|
}, [images, selectedValue]);
|
|
13669
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13688
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13670
13689
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13671
13690
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13672
13691
|
};
|
|
@@ -13703,14 +13722,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13703
13722
|
};
|
|
13704
13723
|
}, [preventTouch, ref, touchStart]);
|
|
13705
13724
|
}
|
|
13706
|
-
var templateObject_1$
|
|
13725
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13707
13726
|
|
|
13708
|
-
var Container$
|
|
13727
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
13709
13728
|
var ProductGalleryMobile = function (_a) {
|
|
13710
13729
|
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;
|
|
13711
|
-
return (jsxRuntime.jsx(Container$
|
|
13730
|
+
return (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13712
13731
|
};
|
|
13713
|
-
var templateObject_1$
|
|
13732
|
+
var templateObject_1$v;
|
|
13714
13733
|
|
|
13715
13734
|
var Portal = function (_a) {
|
|
13716
13735
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13843,14 +13862,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13843
13862
|
var visibleStyle = function (_a) {
|
|
13844
13863
|
var opened = _a.opened;
|
|
13845
13864
|
return opened
|
|
13846
|
-
? css(templateObject_1$
|
|
13865
|
+
? css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13847
13866
|
};
|
|
13848
13867
|
var transformStyle = function (_a) {
|
|
13849
13868
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13850
13869
|
return opened
|
|
13851
|
-
? css(templateObject_3$
|
|
13870
|
+
? css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13852
13871
|
};
|
|
13853
|
-
var Container$
|
|
13872
|
+
var Container$m = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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({
|
|
13854
13873
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13855
13874
|
}), visibleStyle, transformStyle);
|
|
13856
13875
|
var Overlay = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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);
|
|
@@ -13863,7 +13882,7 @@ var Modal = function (_a) {
|
|
|
13863
13882
|
}
|
|
13864
13883
|
close();
|
|
13865
13884
|
};
|
|
13866
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13885
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$m, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13867
13886
|
};
|
|
13868
13887
|
var modalEvent = function (id, detail) {
|
|
13869
13888
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13891,39 +13910,39 @@ var useModal = function (id) {
|
|
|
13891
13910
|
close: close,
|
|
13892
13911
|
}); }, [close, open, opened]);
|
|
13893
13912
|
};
|
|
13894
|
-
var templateObject_1$
|
|
13913
|
+
var templateObject_1$u, templateObject_2$k, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
13895
13914
|
|
|
13896
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13915
|
+
var Text$2 = newStyled.span(templateObject_1$t || (templateObject_1$t = __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; });
|
|
13897
13916
|
var Title$2 = function (_a) {
|
|
13898
13917
|
var title = _a.title;
|
|
13899
13918
|
var theme = useTheme();
|
|
13900
13919
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13901
13920
|
};
|
|
13902
|
-
var templateObject_1$
|
|
13921
|
+
var templateObject_1$t;
|
|
13903
13922
|
|
|
13904
|
-
var P = newStyled.p(templateObject_1$
|
|
13923
|
+
var P = newStyled.p(templateObject_1$s || (templateObject_1$s = __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; });
|
|
13905
13924
|
var Promo = function (_a) {
|
|
13906
13925
|
var text = _a.text;
|
|
13907
13926
|
var theme = useTheme();
|
|
13908
13927
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13909
13928
|
};
|
|
13910
|
-
var templateObject_1$
|
|
13929
|
+
var templateObject_1$s;
|
|
13911
13930
|
|
|
13912
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13931
|
+
var Text$1 = newStyled.span(templateObject_1$r || (templateObject_1$r = __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; });
|
|
13913
13932
|
var Description$1 = function (_a) {
|
|
13914
13933
|
var text = _a.text;
|
|
13915
13934
|
var theme = useTheme();
|
|
13916
13935
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13917
13936
|
};
|
|
13918
|
-
var templateObject_1$
|
|
13937
|
+
var templateObject_1$r;
|
|
13919
13938
|
|
|
13920
|
-
var Container$
|
|
13939
|
+
var Container$l = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"); });
|
|
13921
13940
|
var CloseButton$1 = function (_a) {
|
|
13922
13941
|
var onClick = _a.onClick, size = _a.size;
|
|
13923
13942
|
var theme = useTheme();
|
|
13924
|
-
return (jsxRuntime.jsx(Container$
|
|
13943
|
+
return (jsxRuntime.jsx(Container$l, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13925
13944
|
};
|
|
13926
|
-
var templateObject_1$
|
|
13945
|
+
var templateObject_1$q;
|
|
13927
13946
|
|
|
13928
13947
|
var CartProductItem = {
|
|
13929
13948
|
Title: Title$2,
|
|
@@ -13933,10 +13952,10 @@ var CartProductItem = {
|
|
|
13933
13952
|
CloseButton: CloseButton$1,
|
|
13934
13953
|
};
|
|
13935
13954
|
|
|
13936
|
-
var Container$
|
|
13937
|
-
var Item = newStyled.span(templateObject_2$
|
|
13938
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13939
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13955
|
+
var Container$k = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\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: 0.5rem;\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.color; });
|
|
13956
|
+
var Item = newStyled.span(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
13957
|
+
var Number$1 = newStyled(Item)(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
13958
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$c || (templateObject_4$c = __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)'; });
|
|
13940
13959
|
var QuantityPicker = function (_a) {
|
|
13941
13960
|
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;
|
|
13942
13961
|
var theme = useTheme();
|
|
@@ -13959,9 +13978,9 @@ var QuantityPicker = function (_a) {
|
|
|
13959
13978
|
return clamp(value);
|
|
13960
13979
|
});
|
|
13961
13980
|
}, [value, clamp]);
|
|
13962
|
-
return (jsxRuntime.jsxs(Container$
|
|
13981
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13963
13982
|
};
|
|
13964
|
-
var templateObject_1$
|
|
13983
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$i, templateObject_4$c;
|
|
13965
13984
|
|
|
13966
13985
|
var htmlReactParser = {exports: {}};
|
|
13967
13986
|
|
|
@@ -17742,17 +17761,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17742
17761
|
HTMLReactParser$1.attributesToProps;
|
|
17743
17762
|
HTMLReactParser$1.Element;
|
|
17744
17763
|
|
|
17745
|
-
var Container$
|
|
17746
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
17747
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
17748
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
17764
|
+
var Container$j = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
17765
|
+
var Card$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __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 color: var(--color);\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 color: var(--color);\n }\n }\n"])));
|
|
17766
|
+
var Tag$1 = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
17767
|
+
var Label$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
17749
17768
|
var Check$1 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
17750
17769
|
var IconContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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"])));
|
|
17751
17770
|
var IconPlaceholder = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __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"])));
|
|
17752
17771
|
var DiscountContainer$1 = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __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"])));
|
|
17753
17772
|
var PackSelector = function (_a) {
|
|
17754
17773
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17755
|
-
return (jsxRuntime.jsx(Container$
|
|
17774
|
+
return (jsxRuntime.jsx(Container$j, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17756
17775
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17757
17776
|
}) }), void 0));
|
|
17758
17777
|
};
|
|
@@ -17778,17 +17797,17 @@ var PackCard$1 = function (_a) {
|
|
|
17778
17797
|
currency: currencyCode || 'USD',
|
|
17779
17798
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17780
17799
|
};
|
|
17781
|
-
var templateObject_1$
|
|
17800
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4;
|
|
17782
17801
|
|
|
17783
|
-
var Container$
|
|
17784
|
-
var Card = newStyled.div(templateObject_2$
|
|
17785
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17786
|
-
var Label = newStyled.div(templateObject_4$
|
|
17802
|
+
var Container$i = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
17803
|
+
var Card = newStyled.div(templateObject_2$h || (templateObject_2$h = __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 color: var(--color);\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 color: var(--color);\n }\n }\n"])));
|
|
17804
|
+
var Tag = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
17805
|
+
var Label = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
17787
17806
|
var Check = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
17788
17807
|
var DiscountContainer = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
17789
17808
|
var PackSelectorV2 = function (_a) {
|
|
17790
17809
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17791
|
-
return (jsxRuntime.jsx(Container$
|
|
17810
|
+
return (jsxRuntime.jsx(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17792
17811
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17793
17812
|
}) }), void 0));
|
|
17794
17813
|
};
|
|
@@ -17809,31 +17828,31 @@ var PackCard = function (_a) {
|
|
|
17809
17828
|
currency: currencyCode || 'USD',
|
|
17810
17829
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17811
17830
|
};
|
|
17812
|
-
var templateObject_1$
|
|
17831
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
17813
17832
|
|
|
17814
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
17815
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
17816
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17817
|
-
var Container$
|
|
17833
|
+
var Title$1 = newStyled.div(templateObject_1$m || (templateObject_1$m = __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; });
|
|
17834
|
+
var H3 = newStyled.h3(templateObject_2$g || (templateObject_2$g = __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; });
|
|
17835
|
+
var ArrowContainer = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17836
|
+
var Container$h = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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'); });
|
|
17818
17837
|
var Accordion = function (_a) {
|
|
17819
17838
|
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;
|
|
17820
17839
|
var theme = useTheme();
|
|
17821
17840
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17822
|
-
return (jsxRuntime.jsxs(Container$
|
|
17841
|
+
return (jsxRuntime.jsxs(Container$h, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17823
17842
|
};
|
|
17824
|
-
var templateObject_1$
|
|
17843
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9;
|
|
17825
17844
|
|
|
17826
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17827
|
-
var Header = newStyled.div(templateObject_2$
|
|
17828
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17829
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17845
|
+
var SectionContent = newStyled.div(templateObject_1$l || (templateObject_1$l = __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; });
|
|
17846
|
+
var Header = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
17847
|
+
var MobileHeader = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
17848
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
17830
17849
|
var H4 = newStyled.h4(templateObject_5$5 || (templateObject_5$5 = __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; });
|
|
17831
17850
|
var FilterLink = newStyled.a(templateObject_6$4 || (templateObject_6$4 = __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; });
|
|
17832
17851
|
var OptionContainer = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\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"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17833
17852
|
var ClearAll = newStyled.span(templateObject_8$3 || (templateObject_8$3 = __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; });
|
|
17834
17853
|
var MobileFooter = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
17835
17854
|
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __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"])));
|
|
17836
|
-
var templateObject_1$
|
|
17855
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$e, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$2, templateObject_10$1;
|
|
17837
17856
|
|
|
17838
17857
|
var Filters = function (_a) {
|
|
17839
17858
|
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, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17950,20 +17969,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17950
17969
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17951
17970
|
};
|
|
17952
17971
|
|
|
17953
|
-
var Container$
|
|
17954
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17955
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17956
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17972
|
+
var Container$g = 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"])));
|
|
17973
|
+
var BackArrow = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17974
|
+
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"])));
|
|
17975
|
+
var NormalSpan = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
17957
17976
|
var SearchNavigationParents = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
17958
17977
|
var SearchNavigation = function (_a) {
|
|
17959
17978
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17960
|
-
return (jsxRuntime.jsxs(Container$
|
|
17979
|
+
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17961
17980
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17962
17981
|
}) }, void 0)] }, void 0));
|
|
17963
17982
|
};
|
|
17964
|
-
var templateObject_1$
|
|
17983
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$4;
|
|
17965
17984
|
|
|
17966
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17985
|
+
var TabContainer = newStyled.div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
17967
17986
|
var titleSize = _a.titleSize;
|
|
17968
17987
|
return titleSize;
|
|
17969
17988
|
}, function (_a) {
|
|
@@ -17980,15 +17999,15 @@ var Tab = function (_a) {
|
|
|
17980
17999
|
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;
|
|
17981
18000
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17982
18001
|
};
|
|
17983
|
-
var templateObject_1$
|
|
18002
|
+
var templateObject_1$j;
|
|
17984
18003
|
|
|
17985
|
-
var Container$
|
|
17986
|
-
var TabList = newStyled.div(templateObject_2$
|
|
18004
|
+
var Container$f = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18005
|
+
var TabList = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17987
18006
|
var backgroundColor = _a.backgroundColor;
|
|
17988
18007
|
return backgroundColor;
|
|
17989
18008
|
});
|
|
17990
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17991
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
18009
|
+
var TabContent = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18010
|
+
var TabSeparator = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
17992
18011
|
var Tabs = function (_a) {
|
|
17993
18012
|
var _b;
|
|
17994
18013
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17997,11 +18016,11 @@ var Tabs = function (_a) {
|
|
|
17997
18016
|
return null;
|
|
17998
18017
|
}
|
|
17999
18018
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18000
|
-
return (jsxRuntime.jsxs(Container$
|
|
18019
|
+
return (jsxRuntime.jsxs(Container$f, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18001
18020
|
};
|
|
18002
|
-
var templateObject_1$
|
|
18021
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$6;
|
|
18003
18022
|
|
|
18004
|
-
var Container$
|
|
18023
|
+
var Container$e = newStyled.div(function (props) { return ({
|
|
18005
18024
|
height: 'auto',
|
|
18006
18025
|
textAlign: 'center',
|
|
18007
18026
|
justifyContent: 'center',
|
|
@@ -18051,12 +18070,12 @@ var IconsWithTitle = function (_a) {
|
|
|
18051
18070
|
textAlign: 'center',
|
|
18052
18071
|
lineHeight: '18px',
|
|
18053
18072
|
};
|
|
18054
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
18073
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18055
18074
|
};
|
|
18056
18075
|
|
|
18057
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
18058
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
18059
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
18076
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
18077
|
+
var VideoOverlay = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
18078
|
+
var FullscreenVideo = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
18060
18079
|
var ImageVideo = function (_a) {
|
|
18061
18080
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
18062
18081
|
var video = React$2.useRef(null);
|
|
@@ -18076,12 +18095,12 @@ var ImageVideo = function (_a) {
|
|
|
18076
18095
|
height: '100%',
|
|
18077
18096
|
} }, void 0)] }, void 0))] }, void 0));
|
|
18078
18097
|
};
|
|
18079
|
-
var templateObject_1$
|
|
18098
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$b;
|
|
18080
18099
|
|
|
18081
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18082
|
-
var ContainerMobile = css(templateObject_2$
|
|
18083
|
-
var Container$
|
|
18084
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
18100
|
+
var ContainerDesktop = css(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
18101
|
+
var ContainerMobile = css(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
18102
|
+
var Container$d = newStyled.div(templateObject_3$a || (templateObject_3$a = __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);
|
|
18103
|
+
var TextContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
18085
18104
|
var TextWithImage = function (_a) {
|
|
18086
18105
|
var _b, _c, _d, _e;
|
|
18087
18106
|
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"]);
|
|
@@ -18101,7 +18120,7 @@ var TextWithImage = function (_a) {
|
|
|
18101
18120
|
// @ts-ignore
|
|
18102
18121
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
18103
18122
|
};
|
|
18104
|
-
return (jsxs(Container$
|
|
18123
|
+
return (jsxs(Container$d, __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$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
18105
18124
|
backgroundColor: props.btnBGColor,
|
|
18106
18125
|
color: '#ffffff',
|
|
18107
18126
|
border: props.btnBGColor,
|
|
@@ -18111,9 +18130,9 @@ var TextWithImage = function (_a) {
|
|
|
18111
18130
|
},
|
|
18112
18131
|
} }, 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));
|
|
18113
18132
|
};
|
|
18114
|
-
var templateObject_1$
|
|
18133
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$a, templateObject_4$5;
|
|
18115
18134
|
|
|
18116
|
-
var Container$
|
|
18135
|
+
var Container$c = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
18117
18136
|
var AccordionOptions = function (_a) {
|
|
18118
18137
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
18119
18138
|
var _b = React$2.useState({
|
|
@@ -18126,7 +18145,7 @@ var AccordionOptions = function (_a) {
|
|
|
18126
18145
|
}
|
|
18127
18146
|
return false;
|
|
18128
18147
|
};
|
|
18129
|
-
return (jsxRuntime.jsx(Container$
|
|
18148
|
+
return (jsxRuntime.jsx(Container$c, { children: accordions.map(function (accordion, index) {
|
|
18130
18149
|
var forceOpenValue = getForceOpen(index);
|
|
18131
18150
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
18132
18151
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -18137,9 +18156,9 @@ var AccordionOptions = function (_a) {
|
|
|
18137
18156
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
18138
18157
|
}) }, void 0));
|
|
18139
18158
|
};
|
|
18140
|
-
var templateObject_1$
|
|
18159
|
+
var templateObject_1$f;
|
|
18141
18160
|
|
|
18142
|
-
var Container$
|
|
18161
|
+
var Container$b = newStyled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
18143
18162
|
var alignCenter = _a.alignCenter;
|
|
18144
18163
|
return alignCenter &&
|
|
18145
18164
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18149,14 +18168,14 @@ var Container$c = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
18149
18168
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18150
18169
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18151
18170
|
});
|
|
18152
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18153
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
18171
|
+
var TitleText = newStyled.div(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
18172
|
+
var BannerText = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
18154
18173
|
var ShortBanner = function (_a) {
|
|
18155
18174
|
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;
|
|
18156
18175
|
var theme = useTheme();
|
|
18157
|
-
return (jsxRuntime.jsxs(Container$
|
|
18176
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18158
18177
|
};
|
|
18159
|
-
var templateObject_1$
|
|
18178
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9;
|
|
18160
18179
|
|
|
18161
18180
|
/* base styles & size variants */
|
|
18162
18181
|
var getStylesBySize = function (size, theme) {
|
|
@@ -18212,23 +18231,23 @@ var getStylesBySize = function (size, theme) {
|
|
|
18212
18231
|
}
|
|
18213
18232
|
};
|
|
18214
18233
|
|
|
18215
|
-
var Container$
|
|
18216
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
18217
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
18218
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
18234
|
+
var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __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; });
|
|
18235
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
18236
|
+
var ImageCard = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
18237
|
+
var UserInfoText = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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 (props) { return props.color; }, function (props) { return props.styles.userInfoTextFontSize; }, function (props) { return (props.alignCenter ? 'center' : 'left'); }, function (props) { return props.styles.userInfoTextMobileFontSize; });
|
|
18219
18238
|
var BeforeAfterCard = function (_a) {
|
|
18220
18239
|
var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Small : _d;
|
|
18221
18240
|
var theme = useTheme();
|
|
18222
18241
|
var stylesBySize = getStylesBySize(size, theme);
|
|
18223
18242
|
var infoText = age ? "".concat(name, ", ").concat(age) : name;
|
|
18224
18243
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
18225
|
-
return (jsxRuntime.jsxs(Container$
|
|
18244
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
|
|
18226
18245
|
};
|
|
18227
|
-
var templateObject_1$
|
|
18246
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
18228
18247
|
|
|
18229
|
-
var Container$
|
|
18230
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18231
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
18248
|
+
var Container$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __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'); });
|
|
18249
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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'); });
|
|
18250
|
+
var StyledTitle = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
18232
18251
|
var titlePosition = _a.titlePosition;
|
|
18233
18252
|
return titlePosition == 'center' &&
|
|
18234
18253
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -18236,14 +18255,14 @@ var StyledTitle = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __ma
|
|
|
18236
18255
|
var ImageCardWithDescription = function (_a) {
|
|
18237
18256
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
18238
18257
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18239
|
-
return (jsxRuntime.jsxs(Container$
|
|
18258
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18240
18259
|
};
|
|
18241
|
-
var templateObject_1$
|
|
18260
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7;
|
|
18242
18261
|
|
|
18243
|
-
var Container$
|
|
18244
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
18245
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
18246
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
18262
|
+
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18263
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18264
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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; });
|
|
18265
|
+
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'); });
|
|
18247
18266
|
var CheckpointStatus$1 = newStyled.p(templateObject_5$3 || (templateObject_5$3 = __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'); });
|
|
18248
18267
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$3 || (templateObject_6$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) {
|
|
18249
18268
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -18269,7 +18288,7 @@ var TrackingProgress = function (_a) {
|
|
|
18269
18288
|
}
|
|
18270
18289
|
return '30px';
|
|
18271
18290
|
};
|
|
18272
|
-
return (jsxRuntime.jsxs(Container$
|
|
18291
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18273
18292
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18274
18293
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
18275
18294
|
? theme.colors.semantic.informative.color
|
|
@@ -18278,12 +18297,12 @@ var TrackingProgress = function (_a) {
|
|
|
18278
18297
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus$1, { finishedTrack: false }, void 0)] }), index));
|
|
18279
18298
|
})] }), void 0));
|
|
18280
18299
|
};
|
|
18281
|
-
var templateObject_1$
|
|
18300
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$2;
|
|
18282
18301
|
|
|
18283
|
-
var Container$
|
|
18284
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
18285
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
18286
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
18302
|
+
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18303
|
+
var CheckpointContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18304
|
+
var CheckpointDate = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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; });
|
|
18305
|
+
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'); });
|
|
18287
18306
|
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\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 display: flex;\n gap: 4px;\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) {
|
|
18288
18307
|
return props.finishedTrack
|
|
18289
18308
|
? props.finishedTrackColor
|
|
@@ -18319,7 +18338,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18319
18338
|
}
|
|
18320
18339
|
return '30px';
|
|
18321
18340
|
};
|
|
18322
|
-
return (jsxRuntime.jsxs(Container$
|
|
18341
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18323
18342
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18324
18343
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
18325
18344
|
? theme.colors.semantic.informative.color
|
|
@@ -18328,12 +18347,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18328
18347
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
18329
18348
|
})] }), void 0));
|
|
18330
18349
|
};
|
|
18331
|
-
var templateObject_1$
|
|
18350
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1;
|
|
18332
18351
|
|
|
18333
|
-
var Container$
|
|
18334
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18335
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18336
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18352
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
18353
|
+
var ReviewsContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
18354
|
+
var ReviewsCount = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
18355
|
+
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
18337
18356
|
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
18338
18357
|
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
18339
18358
|
var SummaryItem = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __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) {
|
|
@@ -18344,14 +18363,14 @@ var ReviewsHeader = function (_a) {
|
|
|
18344
18363
|
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;
|
|
18345
18364
|
var starsNumber = 5;
|
|
18346
18365
|
var theme = useTheme();
|
|
18347
|
-
return (jsxRuntime.jsxs(Container$
|
|
18366
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18348
18367
|
};
|
|
18349
|
-
var templateObject_1$
|
|
18368
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18350
18369
|
|
|
18351
|
-
var Container$
|
|
18352
|
-
var Content
|
|
18353
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18354
|
-
var ReviewContainer = newStyled.div(templateObject_4
|
|
18370
|
+
var Container$5 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
18371
|
+
var Content = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
18372
|
+
var StarsContent = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18373
|
+
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
18355
18374
|
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __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"])));
|
|
18356
18375
|
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __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"])));
|
|
18357
18376
|
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __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"])));
|
|
@@ -18386,10 +18405,10 @@ var Review = function (_a) {
|
|
|
18386
18405
|
}
|
|
18387
18406
|
}
|
|
18388
18407
|
}, [opened]);
|
|
18389
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18390
|
-
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content
|
|
18408
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18409
|
+
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18391
18410
|
};
|
|
18392
|
-
var templateObject_1$
|
|
18411
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18393
18412
|
|
|
18394
18413
|
function _extends() {
|
|
18395
18414
|
_extends = Object.assign || function (target) {
|
|
@@ -18656,40 +18675,40 @@ function useSwipeable(options) {
|
|
|
18656
18675
|
return handlers;
|
|
18657
18676
|
}
|
|
18658
18677
|
|
|
18659
|
-
var Container$
|
|
18678
|
+
var Container$4 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
18660
18679
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18661
18680
|
return borderRadiusVariant &&
|
|
18662
18681
|
"\n border-radius: 40px;\n ";
|
|
18663
18682
|
});
|
|
18664
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18665
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18683
|
+
var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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'); });
|
|
18684
|
+
var BottomTagContainer = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18666
18685
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18667
18686
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18668
|
-
return (jsxRuntime.jsxs(Container$
|
|
18687
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18669
18688
|
});
|
|
18670
|
-
var templateObject_1$
|
|
18689
|
+
var templateObject_1$7, templateObject_2$3, templateObject_3$2;
|
|
18671
18690
|
|
|
18672
|
-
var Button = newStyled.button(templateObject_1$
|
|
18691
|
+
var Button = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
18673
18692
|
var ArrowButton = function (_a) {
|
|
18674
18693
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18675
18694
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18676
18695
|
};
|
|
18677
|
-
var templateObject_1$
|
|
18696
|
+
var templateObject_1$6;
|
|
18678
18697
|
|
|
18679
|
-
var Container$
|
|
18698
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
18680
18699
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18681
18700
|
var SlideDots = function (_a) {
|
|
18682
18701
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18683
18702
|
var theme = useTheme();
|
|
18684
|
-
return (jsxRuntime.jsx(Container$
|
|
18703
|
+
return (jsxRuntime.jsx(Container$3, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18685
18704
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18686
18705
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18687
18706
|
};
|
|
18688
|
-
var templateObject_1$
|
|
18707
|
+
var templateObject_1$5;
|
|
18689
18708
|
|
|
18690
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18691
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
18692
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
18709
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$4 || (templateObject_1$4 = __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"])));
|
|
18710
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18711
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18693
18712
|
var SlideNavigation = function (_a) {
|
|
18694
18713
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18695
18714
|
var theme = useTheme();
|
|
@@ -18701,9 +18720,9 @@ var SlideNavigation = function (_a) {
|
|
|
18701
18720
|
onNavigate(selectedIndex + 1);
|
|
18702
18721
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18703
18722
|
};
|
|
18704
|
-
var templateObject_1$
|
|
18723
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
18705
18724
|
|
|
18706
|
-
var Container$
|
|
18725
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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"])));
|
|
18707
18726
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18708
18727
|
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;
|
|
18709
18728
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18725,31 +18744,31 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18725
18744
|
React$2.useEffect(function () {
|
|
18726
18745
|
setSelectedImage(images[index]);
|
|
18727
18746
|
}, [index, images]);
|
|
18728
|
-
return (jsxRuntime.jsxs(Container$
|
|
18747
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18729
18748
|
};
|
|
18730
|
-
var templateObject_1$
|
|
18749
|
+
var templateObject_1$3;
|
|
18731
18750
|
|
|
18732
|
-
var Container$
|
|
18733
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
18751
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
18752
|
+
var DropContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18734
18753
|
var DropList = function (_a) {
|
|
18735
18754
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
18736
|
-
return (jsxRuntime.jsx(Container$
|
|
18755
|
+
return (jsxRuntime.jsx(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
18737
18756
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
18738
18757
|
}) }, void 0));
|
|
18739
18758
|
};
|
|
18740
|
-
var templateObject_1$
|
|
18759
|
+
var templateObject_1$2, templateObject_2$1;
|
|
18741
18760
|
|
|
18742
18761
|
var DROPS_TOTAL = 5;
|
|
18743
|
-
var Container
|
|
18744
|
-
var Title = newStyled.p(templateObject_2
|
|
18745
|
-
var Description = newStyled.p(templateObject_3
|
|
18762
|
+
var Container = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18763
|
+
var Title = newStyled.p(templateObject_2 || (templateObject_2 = __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"])));
|
|
18764
|
+
var Description = 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"])));
|
|
18746
18765
|
var AbsorbencyLevel = function (_a) {
|
|
18747
18766
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18748
|
-
return (jsxRuntime.jsxs(Container
|
|
18767
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Title, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18749
18768
|
};
|
|
18750
|
-
var templateObject_1$
|
|
18769
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18751
18770
|
|
|
18752
|
-
var TimerContainer = newStyled.div(templateObject_1
|
|
18771
|
+
var TimerContainer = newStyled.div(templateObject_1 || (templateObject_1 = __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: 0px;\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: 8px;\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: 0px;\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: 8px;\n }\n"])), function (_a) {
|
|
18753
18772
|
var textPosition = _a.textPosition;
|
|
18754
18773
|
return textPosition;
|
|
18755
18774
|
}, function (_a) {
|
|
@@ -18776,23 +18795,7 @@ var HurryUp = function (_a) {
|
|
|
18776
18795
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18777
18796
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$6, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18778
18797
|
};
|
|
18779
|
-
var templateObject_1
|
|
18780
|
-
|
|
18781
|
-
var Container = newStyled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n align-items: flex-end;\n"])));
|
|
18782
|
-
var Content = 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"])));
|
|
18783
|
-
var BarContainer = newStyled('div')(templateObject_3 || (templateObject_3 = __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"])));
|
|
18784
|
-
var Bar = newStyled('div')(templateObject_4 || (templateObject_4 = __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) {
|
|
18785
|
-
var index = _a.index;
|
|
18786
|
-
return "".concat(6 + 3 * index, "px");
|
|
18787
|
-
}, function (_a) {
|
|
18788
|
-
var isFilled = _a.isFilled;
|
|
18789
|
-
return (isFilled ? '#292929' : '#D9D9D9');
|
|
18790
|
-
});
|
|
18791
|
-
var StrengthBars = function (_a) {
|
|
18792
|
-
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
18793
|
-
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content, { children: supportText }, void 0)] }), void 0));
|
|
18794
|
-
};
|
|
18795
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18798
|
+
var templateObject_1;
|
|
18796
18799
|
|
|
18797
18800
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
18798
18801
|
exports.Accordion = Accordion$1;
|