@trafilea/afrodita-components 5.0.0-beta.230 → 5.0.0-beta.232
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 +223 -210
- package/build/index.esm.js.map +1 -1
- package/build/index.js +223 -210
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -11754,7 +11754,9 @@ var Rating = function (_a) {
|
|
|
11754
11754
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.wrapWithParenthesis, wrapWithParenthesis = _c === void 0 ? false : _c, _d = _a.underline, underline = _d === void 0 ? false : _d, reviewsContainerId = _a.reviewsContainerId;
|
|
11755
11755
|
function handleAnchorClick(e) {
|
|
11756
11756
|
var _a;
|
|
11757
|
-
e.
|
|
11757
|
+
if (e.cancelable) {
|
|
11758
|
+
e.preventDefault();
|
|
11759
|
+
}
|
|
11758
11760
|
if (reviewsContainerId) {
|
|
11759
11761
|
(_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
11760
11762
|
behavior: 'smooth',
|
|
@@ -13083,6 +13085,22 @@ var BuyNowPayLater = function (_a) {
|
|
|
13083
13085
|
};
|
|
13084
13086
|
var templateObject_1$H, templateObject_2$t;
|
|
13085
13087
|
|
|
13088
|
+
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"])));
|
|
13089
|
+
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"])));
|
|
13090
|
+
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"])));
|
|
13091
|
+
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) {
|
|
13092
|
+
var index = _a.index;
|
|
13093
|
+
return "".concat(6 + 3 * index, "px");
|
|
13094
|
+
}, function (_a) {
|
|
13095
|
+
var isFilled = _a.isFilled;
|
|
13096
|
+
return (isFilled ? '#292929' : '#D9D9D9');
|
|
13097
|
+
});
|
|
13098
|
+
var StrengthBars = function (_a) {
|
|
13099
|
+
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13100
|
+
return (jsxs$1(Container$x, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13101
|
+
};
|
|
13102
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$g;
|
|
13103
|
+
|
|
13086
13104
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13087
13105
|
var width = _a.width, height = _a.height;
|
|
13088
13106
|
return ({
|
|
@@ -13091,10 +13109,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13091
13109
|
height: height,
|
|
13092
13110
|
});
|
|
13093
13111
|
});
|
|
13094
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
13095
|
-
var Container$
|
|
13096
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
13097
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13112
|
+
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"])));
|
|
13113
|
+
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"])));
|
|
13114
|
+
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"])));
|
|
13115
|
+
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; });
|
|
13098
13116
|
var getStylesBySize$1 = function (size) {
|
|
13099
13117
|
switch (size) {
|
|
13100
13118
|
case ComponentSize.Medium:
|
|
@@ -13142,7 +13160,10 @@ var ProductItemMobile = function (_a) {
|
|
|
13142
13160
|
showLogo: true,
|
|
13143
13161
|
iconColor: '#292929',
|
|
13144
13162
|
fontSize: '12px',
|
|
13145
|
-
} : _e
|
|
13163
|
+
} : _e, _f = _a.hasStrength, hasStrength = _f === void 0 ? {
|
|
13164
|
+
strength: -1,
|
|
13165
|
+
description: '',
|
|
13166
|
+
} : _f;
|
|
13146
13167
|
var theme = useTheme();
|
|
13147
13168
|
var styles = getStylesBySize$1(size);
|
|
13148
13169
|
var space = useMemo(function () {
|
|
@@ -13157,32 +13178,32 @@ var ProductItemMobile = function (_a) {
|
|
|
13157
13178
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
13158
13179
|
};
|
|
13159
13180
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13160
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
13181
|
+
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));
|
|
13161
13182
|
};
|
|
13162
|
-
var templateObject_1$
|
|
13183
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13163
13184
|
|
|
13164
|
-
var Container$
|
|
13185
|
+
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"])));
|
|
13165
13186
|
function withProductGrid(ProductItemComponent, data) {
|
|
13166
13187
|
function WithProductGrid(props) {
|
|
13167
|
-
return (jsx$1(Container$
|
|
13188
|
+
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
13168
13189
|
}
|
|
13169
13190
|
/* istanbul ignore next */
|
|
13170
13191
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
13171
13192
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
13172
13193
|
return WithProductGrid;
|
|
13173
13194
|
}
|
|
13174
|
-
var templateObject_1$
|
|
13195
|
+
var templateObject_1$E;
|
|
13175
13196
|
|
|
13176
13197
|
var Collection = {
|
|
13177
13198
|
ProductItemMobile: ProductItemMobile,
|
|
13178
13199
|
withProductGrid: withProductGrid,
|
|
13179
13200
|
};
|
|
13180
13201
|
|
|
13181
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
13202
|
+
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) {
|
|
13182
13203
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
13183
13204
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
13184
13205
|
});
|
|
13185
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
13206
|
+
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) {
|
|
13186
13207
|
var width = _a.width;
|
|
13187
13208
|
return width;
|
|
13188
13209
|
}, function (_a) {
|
|
@@ -13223,28 +13244,28 @@ var Drawer = function (_a) {
|
|
|
13223
13244
|
}, [isOpen, onClose, onOpen]);
|
|
13224
13245
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
13225
13246
|
};
|
|
13226
|
-
var templateObject_1$
|
|
13247
|
+
var templateObject_1$D, templateObject_2$q;
|
|
13227
13248
|
|
|
13228
|
-
var Container$
|
|
13249
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
13229
13250
|
var size = _a.size;
|
|
13230
13251
|
return (size ? size : '100%');
|
|
13231
13252
|
}, function (_a) {
|
|
13232
13253
|
var size = _a.size;
|
|
13233
13254
|
return (size ? size : '100%');
|
|
13234
13255
|
});
|
|
13235
|
-
var Animation = newStyled.div(templateObject_2$
|
|
13256
|
+
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) {
|
|
13236
13257
|
var animationDuration = _a.animationDuration;
|
|
13237
13258
|
return animationDuration;
|
|
13238
13259
|
});
|
|
13239
13260
|
var Spinner = function (_a) {
|
|
13240
13261
|
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;
|
|
13241
|
-
return (jsx$1(Container$
|
|
13262
|
+
return (jsx$1(Container$u, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
13242
13263
|
};
|
|
13243
|
-
var templateObject_1$
|
|
13264
|
+
var templateObject_1$C, templateObject_2$p;
|
|
13244
13265
|
|
|
13245
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13246
|
-
var LI = newStyled.li(templateObject_2$
|
|
13247
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
13266
|
+
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"])));
|
|
13267
|
+
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; });
|
|
13268
|
+
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"])));
|
|
13248
13269
|
var Tags = function (_a) {
|
|
13249
13270
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
13250
13271
|
var theme = useTheme();
|
|
@@ -13252,7 +13273,7 @@ var Tags = function (_a) {
|
|
|
13252
13273
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
13253
13274
|
}) }), void 0));
|
|
13254
13275
|
};
|
|
13255
|
-
var templateObject_1$
|
|
13276
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$n;
|
|
13256
13277
|
|
|
13257
13278
|
function FilteringDropdown(_a) {
|
|
13258
13279
|
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;
|
|
@@ -13285,12 +13306,12 @@ function FilteringDropdown(_a) {
|
|
|
13285
13306
|
}) }, void 0)] }), void 0));
|
|
13286
13307
|
}
|
|
13287
13308
|
|
|
13288
|
-
var Container$
|
|
13289
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13290
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13309
|
+
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"])));
|
|
13310
|
+
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"])));
|
|
13311
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13291
13312
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13292
13313
|
}));
|
|
13293
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13314
|
+
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) {
|
|
13294
13315
|
var bold = _a.bold;
|
|
13295
13316
|
return (bold ? '700' : '500');
|
|
13296
13317
|
}, function (_a) {
|
|
@@ -13307,7 +13328,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
13307
13328
|
var background = _a.background;
|
|
13308
13329
|
return background || 'unset';
|
|
13309
13330
|
});
|
|
13310
|
-
var templateObject_1$
|
|
13331
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$e;
|
|
13311
13332
|
|
|
13312
13333
|
var Pagination = function (_a) {
|
|
13313
13334
|
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;
|
|
@@ -13353,7 +13374,7 @@ var Pagination = function (_a) {
|
|
|
13353
13374
|
}
|
|
13354
13375
|
return pages;
|
|
13355
13376
|
}, [from, page, showReducedPages, to]);
|
|
13356
|
-
return (jsxs$1(Container$
|
|
13377
|
+
return (jsxs$1(Container$t, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13357
13378
|
};
|
|
13358
13379
|
|
|
13359
13380
|
var PaginatorBlog = function (_a) {
|
|
@@ -13367,12 +13388,12 @@ var PaginatorBlog = function (_a) {
|
|
|
13367
13388
|
setPage(page);
|
|
13368
13389
|
onChange(page);
|
|
13369
13390
|
};
|
|
13370
|
-
return (jsxs$1(Container$
|
|
13391
|
+
return (jsxs$1(Container$t, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13371
13392
|
? theme.colors.shades['white'].color
|
|
13372
13393
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13373
13394
|
};
|
|
13374
13395
|
|
|
13375
|
-
var Container$
|
|
13396
|
+
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({
|
|
13376
13397
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13377
13398
|
}));
|
|
13378
13399
|
var Description$2 = newStyled.div({
|
|
@@ -13389,25 +13410,25 @@ var Description$2 = newStyled.div({
|
|
|
13389
13410
|
var ProductItem = function (_a) {
|
|
13390
13411
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13391
13412
|
var theme = useTheme();
|
|
13392
|
-
return (jsxs$1(Container$
|
|
13413
|
+
return (jsxs$1(Container$s, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$2, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13393
13414
|
};
|
|
13394
|
-
var templateObject_1$
|
|
13415
|
+
var templateObject_1$z;
|
|
13395
13416
|
|
|
13396
|
-
var Container$
|
|
13417
|
+
var Container$r = newStyled.div({
|
|
13397
13418
|
display: 'flex',
|
|
13398
13419
|
justifyContent: 'center',
|
|
13399
13420
|
padding: '1rem',
|
|
13400
13421
|
});
|
|
13401
13422
|
var Footer = function (_a) {
|
|
13402
13423
|
var text = _a.text, onClick = _a.onClick;
|
|
13403
|
-
return (jsx$1(Container$
|
|
13424
|
+
return (jsx$1(Container$r, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13404
13425
|
};
|
|
13405
13426
|
|
|
13406
13427
|
var Ul = newStyled.ul({
|
|
13407
13428
|
margin: '0px',
|
|
13408
13429
|
padding: '0px',
|
|
13409
13430
|
});
|
|
13410
|
-
var Li = newStyled.li(templateObject_1$
|
|
13431
|
+
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({
|
|
13411
13432
|
padding: [0, '0rem 1rem'],
|
|
13412
13433
|
borderRadius: [0, '0.5rem'],
|
|
13413
13434
|
}));
|
|
@@ -13419,20 +13440,20 @@ var Anchor = newStyled.a({
|
|
|
13419
13440
|
padding: 0,
|
|
13420
13441
|
textDecoration: 'none',
|
|
13421
13442
|
});
|
|
13422
|
-
var Container$
|
|
13443
|
+
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({
|
|
13423
13444
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13424
13445
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13425
13446
|
borderRadius: ['0', '0.5rem'],
|
|
13426
13447
|
}));
|
|
13427
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13448
|
+
var Header$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13428
13449
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13429
13450
|
}));
|
|
13430
13451
|
var ResultsPanel = function (_a) {
|
|
13431
13452
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13432
13453
|
var theme = useTheme();
|
|
13433
|
-
return (jsxs$1(Container$
|
|
13454
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13434
13455
|
};
|
|
13435
|
-
var templateObject_1$
|
|
13456
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$l;
|
|
13436
13457
|
|
|
13437
13458
|
var Input = newStyled.input(function (props) { return ({
|
|
13438
13459
|
padding: props.theme.component.input.padding,
|
|
@@ -13463,7 +13484,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13463
13484
|
},
|
|
13464
13485
|
}); });
|
|
13465
13486
|
|
|
13466
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13487
|
+
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({
|
|
13467
13488
|
right: ['1rem', '7.75rem'],
|
|
13468
13489
|
top: ['0.75rem', '0.75rem'],
|
|
13469
13490
|
}));
|
|
@@ -13472,7 +13493,7 @@ var ClearButton = function (_a) {
|
|
|
13472
13493
|
var theme = useTheme();
|
|
13473
13494
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13474
13495
|
};
|
|
13475
|
-
var templateObject_1$
|
|
13496
|
+
var templateObject_1$x;
|
|
13476
13497
|
|
|
13477
13498
|
var useOnClickOutside = function (ref, handler) {
|
|
13478
13499
|
useEffect(function () {
|
|
@@ -13561,7 +13582,7 @@ var reducer = function (state, action) {
|
|
|
13561
13582
|
}
|
|
13562
13583
|
}
|
|
13563
13584
|
};
|
|
13564
|
-
var Container$
|
|
13585
|
+
var Container$p = newStyled.div({
|
|
13565
13586
|
position: 'relative',
|
|
13566
13587
|
display: 'flex',
|
|
13567
13588
|
});
|
|
@@ -13597,23 +13618,29 @@ var SearchBar = function (_a) {
|
|
|
13597
13618
|
onClose();
|
|
13598
13619
|
}
|
|
13599
13620
|
};
|
|
13600
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) {
|
|
13621
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) {
|
|
13622
|
+
if (e.cancelable) {
|
|
13623
|
+
e.preventDefault();
|
|
13624
|
+
}
|
|
13625
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$p, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13601
13626
|
if (e.key === 'Enter') {
|
|
13602
|
-
e.
|
|
13627
|
+
if (e.cancelable) {
|
|
13628
|
+
e.preventDefault();
|
|
13629
|
+
}
|
|
13603
13630
|
e.stopPropagation();
|
|
13604
13631
|
onSearch(state.term);
|
|
13605
13632
|
}
|
|
13606
13633
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13607
13634
|
};
|
|
13608
13635
|
|
|
13609
|
-
var Container$
|
|
13636
|
+
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) {
|
|
13610
13637
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13611
13638
|
return borderRadiusVariant &&
|
|
13612
13639
|
"\n border-radius: 40px;\n ";
|
|
13613
13640
|
});
|
|
13614
13641
|
// max-height: 31.875rem;
|
|
13615
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13616
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13642
|
+
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'); });
|
|
13643
|
+
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"])));
|
|
13617
13644
|
var settings = {
|
|
13618
13645
|
dots: true,
|
|
13619
13646
|
infinite: false,
|
|
@@ -13640,7 +13667,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13640
13667
|
}
|
|
13641
13668
|
}
|
|
13642
13669
|
}, [images, selectedValue]);
|
|
13643
|
-
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13670
|
+
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13644
13671
|
return (jsxs$1("div", { children: [jsx$1(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), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13645
13672
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13646
13673
|
};
|
|
@@ -13652,7 +13679,9 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13652
13679
|
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13653
13680
|
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13654
13681
|
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13655
|
-
e.
|
|
13682
|
+
if (e.cancelable) {
|
|
13683
|
+
e.preventDefault();
|
|
13684
|
+
}
|
|
13656
13685
|
e.returnValue = false;
|
|
13657
13686
|
return false;
|
|
13658
13687
|
}
|
|
@@ -13677,14 +13706,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13677
13706
|
};
|
|
13678
13707
|
}, [preventTouch, ref, touchStart]);
|
|
13679
13708
|
}
|
|
13680
|
-
var templateObject_1$
|
|
13709
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13681
13710
|
|
|
13682
|
-
var Container$
|
|
13711
|
+
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"])));
|
|
13683
13712
|
var ProductGalleryMobile = function (_a) {
|
|
13684
13713
|
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;
|
|
13685
|
-
return (jsx$1(Container$
|
|
13714
|
+
return (jsx$1(Container$n, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13686
13715
|
};
|
|
13687
|
-
var templateObject_1$
|
|
13716
|
+
var templateObject_1$v;
|
|
13688
13717
|
|
|
13689
13718
|
var Portal = function (_a) {
|
|
13690
13719
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13817,14 +13846,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13817
13846
|
var visibleStyle = function (_a) {
|
|
13818
13847
|
var opened = _a.opened;
|
|
13819
13848
|
return opened
|
|
13820
|
-
? css(templateObject_1$
|
|
13849
|
+
? 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 "])));
|
|
13821
13850
|
};
|
|
13822
13851
|
var transformStyle = function (_a) {
|
|
13823
13852
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13824
13853
|
return opened
|
|
13825
|
-
? css(templateObject_3$
|
|
13854
|
+
? 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%)');
|
|
13826
13855
|
};
|
|
13827
|
-
var Container$
|
|
13856
|
+
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({
|
|
13828
13857
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13829
13858
|
}), visibleStyle, transformStyle);
|
|
13830
13859
|
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);
|
|
@@ -13837,7 +13866,7 @@ var Modal = function (_a) {
|
|
|
13837
13866
|
}
|
|
13838
13867
|
close();
|
|
13839
13868
|
};
|
|
13840
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13869
|
+
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));
|
|
13841
13870
|
};
|
|
13842
13871
|
var modalEvent = function (id, detail) {
|
|
13843
13872
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13865,39 +13894,39 @@ var useModal = function (id) {
|
|
|
13865
13894
|
close: close,
|
|
13866
13895
|
}); }, [close, open, opened]);
|
|
13867
13896
|
};
|
|
13868
|
-
var templateObject_1$
|
|
13897
|
+
var templateObject_1$u, templateObject_2$k, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
13869
13898
|
|
|
13870
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13899
|
+
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; });
|
|
13871
13900
|
var Title$2 = function (_a) {
|
|
13872
13901
|
var title = _a.title;
|
|
13873
13902
|
var theme = useTheme();
|
|
13874
13903
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13875
13904
|
};
|
|
13876
|
-
var templateObject_1$
|
|
13905
|
+
var templateObject_1$t;
|
|
13877
13906
|
|
|
13878
|
-
var P = newStyled.p(templateObject_1$
|
|
13907
|
+
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; });
|
|
13879
13908
|
var Promo = function (_a) {
|
|
13880
13909
|
var text = _a.text;
|
|
13881
13910
|
var theme = useTheme();
|
|
13882
13911
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13883
13912
|
};
|
|
13884
|
-
var templateObject_1$
|
|
13913
|
+
var templateObject_1$s;
|
|
13885
13914
|
|
|
13886
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13915
|
+
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; });
|
|
13887
13916
|
var Description$1 = function (_a) {
|
|
13888
13917
|
var text = _a.text;
|
|
13889
13918
|
var theme = useTheme();
|
|
13890
13919
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13891
13920
|
};
|
|
13892
|
-
var templateObject_1$
|
|
13921
|
+
var templateObject_1$r;
|
|
13893
13922
|
|
|
13894
|
-
var Container$
|
|
13923
|
+
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"); });
|
|
13895
13924
|
var CloseButton$1 = function (_a) {
|
|
13896
13925
|
var onClick = _a.onClick, size = _a.size;
|
|
13897
13926
|
var theme = useTheme();
|
|
13898
|
-
return (jsx$1(Container$
|
|
13927
|
+
return (jsx$1(Container$l, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13899
13928
|
};
|
|
13900
|
-
var templateObject_1$
|
|
13929
|
+
var templateObject_1$q;
|
|
13901
13930
|
|
|
13902
13931
|
var CartProductItem = {
|
|
13903
13932
|
Title: Title$2,
|
|
@@ -13907,10 +13936,10 @@ var CartProductItem = {
|
|
|
13907
13936
|
CloseButton: CloseButton$1,
|
|
13908
13937
|
};
|
|
13909
13938
|
|
|
13910
|
-
var Container$
|
|
13911
|
-
var Item = newStyled.span(templateObject_2$
|
|
13912
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13913
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13939
|
+
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; });
|
|
13940
|
+
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"])));
|
|
13941
|
+
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"])));
|
|
13942
|
+
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)'; });
|
|
13914
13943
|
var QuantityPicker = function (_a) {
|
|
13915
13944
|
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;
|
|
13916
13945
|
var theme = useTheme();
|
|
@@ -13933,9 +13962,9 @@ var QuantityPicker = function (_a) {
|
|
|
13933
13962
|
return clamp(value);
|
|
13934
13963
|
});
|
|
13935
13964
|
}, [value, clamp]);
|
|
13936
|
-
return (jsxs$1(Container$
|
|
13965
|
+
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13937
13966
|
};
|
|
13938
|
-
var templateObject_1$
|
|
13967
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$i, templateObject_4$c;
|
|
13939
13968
|
|
|
13940
13969
|
var htmlReactParser = {exports: {}};
|
|
13941
13970
|
|
|
@@ -17716,17 +17745,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17716
17745
|
HTMLReactParser$1.attributesToProps;
|
|
17717
17746
|
HTMLReactParser$1.Element;
|
|
17718
17747
|
|
|
17719
|
-
var Container$
|
|
17720
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
17721
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
17722
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
17748
|
+
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"])));
|
|
17749
|
+
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"])));
|
|
17750
|
+
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"])));
|
|
17751
|
+
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"])));
|
|
17723
17752
|
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"])));
|
|
17724
17753
|
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"])));
|
|
17725
17754
|
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"])));
|
|
17726
17755
|
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"])));
|
|
17727
17756
|
var PackSelector = function (_a) {
|
|
17728
17757
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17729
|
-
return (jsx$1(Container$
|
|
17758
|
+
return (jsx$1(Container$j, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17730
17759
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17731
17760
|
}) }), void 0));
|
|
17732
17761
|
};
|
|
@@ -17752,17 +17781,17 @@ var PackCard$1 = function (_a) {
|
|
|
17752
17781
|
currency: currencyCode || 'USD',
|
|
17753
17782
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17754
17783
|
};
|
|
17755
|
-
var templateObject_1$
|
|
17784
|
+
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;
|
|
17756
17785
|
|
|
17757
|
-
var Container$
|
|
17758
|
-
var Card = newStyled.div(templateObject_2$
|
|
17759
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17760
|
-
var Label = newStyled.div(templateObject_4$
|
|
17786
|
+
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"])));
|
|
17787
|
+
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"])));
|
|
17788
|
+
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"])));
|
|
17789
|
+
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"])));
|
|
17761
17790
|
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"])));
|
|
17762
17791
|
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"])));
|
|
17763
17792
|
var PackSelectorV2 = function (_a) {
|
|
17764
17793
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17765
|
-
return (jsx$1(Container$
|
|
17794
|
+
return (jsx$1(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17766
17795
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17767
17796
|
}) }), void 0));
|
|
17768
17797
|
};
|
|
@@ -17783,31 +17812,31 @@ var PackCard = function (_a) {
|
|
|
17783
17812
|
currency: currencyCode || 'USD',
|
|
17784
17813
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17785
17814
|
};
|
|
17786
|
-
var templateObject_1$
|
|
17815
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
17787
17816
|
|
|
17788
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
17789
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
17790
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17791
|
-
var Container$
|
|
17817
|
+
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; });
|
|
17818
|
+
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; });
|
|
17819
|
+
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"])));
|
|
17820
|
+
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'); });
|
|
17792
17821
|
var Accordion = function (_a) {
|
|
17793
17822
|
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;
|
|
17794
17823
|
var theme = useTheme();
|
|
17795
17824
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17796
|
-
return (jsxs$1(Container$
|
|
17825
|
+
return (jsxs$1(Container$h, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17797
17826
|
};
|
|
17798
|
-
var templateObject_1$
|
|
17827
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9;
|
|
17799
17828
|
|
|
17800
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17801
|
-
var Header = newStyled.div(templateObject_2$
|
|
17802
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17803
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17829
|
+
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; });
|
|
17830
|
+
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"])));
|
|
17831
|
+
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"])));
|
|
17832
|
+
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"])));
|
|
17804
17833
|
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; });
|
|
17805
17834
|
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; });
|
|
17806
17835
|
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'); });
|
|
17807
17836
|
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; });
|
|
17808
17837
|
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"])));
|
|
17809
17838
|
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"])));
|
|
17810
|
-
var templateObject_1$
|
|
17839
|
+
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;
|
|
17811
17840
|
|
|
17812
17841
|
var Filters = function (_a) {
|
|
17813
17842
|
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;
|
|
@@ -17924,20 +17953,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17924
17953
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17925
17954
|
};
|
|
17926
17955
|
|
|
17927
|
-
var Container$
|
|
17928
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17929
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17930
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17956
|
+
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"])));
|
|
17957
|
+
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"])));
|
|
17958
|
+
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"])));
|
|
17959
|
+
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"])));
|
|
17931
17960
|
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"])));
|
|
17932
17961
|
var SearchNavigation = function (_a) {
|
|
17933
17962
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17934
|
-
return (jsxs$1(Container$
|
|
17963
|
+
return (jsxs$1(Container$g, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17935
17964
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17936
17965
|
}) }, void 0)] }, void 0));
|
|
17937
17966
|
};
|
|
17938
|
-
var templateObject_1$
|
|
17967
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$4;
|
|
17939
17968
|
|
|
17940
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17969
|
+
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) {
|
|
17941
17970
|
var titleSize = _a.titleSize;
|
|
17942
17971
|
return titleSize;
|
|
17943
17972
|
}, function (_a) {
|
|
@@ -17954,15 +17983,15 @@ var Tab = function (_a) {
|
|
|
17954
17983
|
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;
|
|
17955
17984
|
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17956
17985
|
};
|
|
17957
|
-
var templateObject_1$
|
|
17986
|
+
var templateObject_1$j;
|
|
17958
17987
|
|
|
17959
|
-
var Container$
|
|
17960
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17988
|
+
var Container$f = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17989
|
+
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) {
|
|
17961
17990
|
var backgroundColor = _a.backgroundColor;
|
|
17962
17991
|
return backgroundColor;
|
|
17963
17992
|
});
|
|
17964
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17965
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17993
|
+
var TabContent = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17994
|
+
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"])));
|
|
17966
17995
|
var Tabs = function (_a) {
|
|
17967
17996
|
var _b;
|
|
17968
17997
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17971,11 +18000,11 @@ var Tabs = function (_a) {
|
|
|
17971
18000
|
return null;
|
|
17972
18001
|
}
|
|
17973
18002
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17974
|
-
return (jsxs$1(Container$
|
|
18003
|
+
return (jsxs$1(Container$f, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17975
18004
|
};
|
|
17976
|
-
var templateObject_1$
|
|
18005
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$6;
|
|
17977
18006
|
|
|
17978
|
-
var Container$
|
|
18007
|
+
var Container$e = newStyled.div(function (props) { return ({
|
|
17979
18008
|
height: 'auto',
|
|
17980
18009
|
textAlign: 'center',
|
|
17981
18010
|
justifyContent: 'center',
|
|
@@ -18025,12 +18054,12 @@ var IconsWithTitle = function (_a) {
|
|
|
18025
18054
|
textAlign: 'center',
|
|
18026
18055
|
lineHeight: '18px',
|
|
18027
18056
|
};
|
|
18028
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
18057
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18029
18058
|
};
|
|
18030
18059
|
|
|
18031
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
18032
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
18033
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
18060
|
+
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"])));
|
|
18061
|
+
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"])));
|
|
18062
|
+
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"])));
|
|
18034
18063
|
var ImageVideo = function (_a) {
|
|
18035
18064
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
18036
18065
|
var video = useRef(null);
|
|
@@ -18050,12 +18079,12 @@ var ImageVideo = function (_a) {
|
|
|
18050
18079
|
height: '100%',
|
|
18051
18080
|
} }, void 0)] }, void 0))] }, void 0));
|
|
18052
18081
|
};
|
|
18053
|
-
var templateObject_1$
|
|
18082
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$b;
|
|
18054
18083
|
|
|
18055
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18056
|
-
var ContainerMobile = css(templateObject_2$
|
|
18057
|
-
var Container$
|
|
18058
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
18084
|
+
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"])));
|
|
18085
|
+
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"])));
|
|
18086
|
+
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);
|
|
18087
|
+
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"])));
|
|
18059
18088
|
var TextWithImage = function (_a) {
|
|
18060
18089
|
var _b, _c, _d, _e;
|
|
18061
18090
|
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"]);
|
|
@@ -18075,7 +18104,7 @@ var TextWithImage = function (_a) {
|
|
|
18075
18104
|
// @ts-ignore
|
|
18076
18105
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
18077
18106
|
};
|
|
18078
|
-
return (jsxs(Container$
|
|
18107
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
18079
18108
|
backgroundColor: props.btnBGColor,
|
|
18080
18109
|
color: '#ffffff',
|
|
18081
18110
|
border: props.btnBGColor,
|
|
@@ -18085,9 +18114,9 @@ var TextWithImage = function (_a) {
|
|
|
18085
18114
|
},
|
|
18086
18115
|
} }, 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));
|
|
18087
18116
|
};
|
|
18088
|
-
var templateObject_1$
|
|
18117
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$a, templateObject_4$5;
|
|
18089
18118
|
|
|
18090
|
-
var Container$
|
|
18119
|
+
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"])));
|
|
18091
18120
|
var AccordionOptions = function (_a) {
|
|
18092
18121
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
18093
18122
|
var _b = useState({
|
|
@@ -18100,7 +18129,7 @@ var AccordionOptions = function (_a) {
|
|
|
18100
18129
|
}
|
|
18101
18130
|
return false;
|
|
18102
18131
|
};
|
|
18103
|
-
return (jsx$1(Container$
|
|
18132
|
+
return (jsx$1(Container$c, { children: accordions.map(function (accordion, index) {
|
|
18104
18133
|
var forceOpenValue = getForceOpen(index);
|
|
18105
18134
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
18106
18135
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -18111,9 +18140,9 @@ var AccordionOptions = function (_a) {
|
|
|
18111
18140
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
18112
18141
|
}) }, void 0));
|
|
18113
18142
|
};
|
|
18114
|
-
var templateObject_1$
|
|
18143
|
+
var templateObject_1$f;
|
|
18115
18144
|
|
|
18116
|
-
var Container$
|
|
18145
|
+
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) {
|
|
18117
18146
|
var alignCenter = _a.alignCenter;
|
|
18118
18147
|
return alignCenter &&
|
|
18119
18148
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18123,14 +18152,14 @@ var Container$c = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
18123
18152
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18124
18153
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18125
18154
|
});
|
|
18126
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18127
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
18155
|
+
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"])));
|
|
18156
|
+
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"])));
|
|
18128
18157
|
var ShortBanner = function (_a) {
|
|
18129
18158
|
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;
|
|
18130
18159
|
var theme = useTheme();
|
|
18131
|
-
return (jsxs$1(Container$
|
|
18160
|
+
return (jsxs$1(Container$b, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18132
18161
|
};
|
|
18133
|
-
var templateObject_1$
|
|
18162
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9;
|
|
18134
18163
|
|
|
18135
18164
|
/* base styles & size variants */
|
|
18136
18165
|
var getStylesBySize = function (size, theme) {
|
|
@@ -18186,23 +18215,23 @@ var getStylesBySize = function (size, theme) {
|
|
|
18186
18215
|
}
|
|
18187
18216
|
};
|
|
18188
18217
|
|
|
18189
|
-
var Container$
|
|
18190
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
18191
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
18192
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
18218
|
+
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; });
|
|
18219
|
+
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"])));
|
|
18220
|
+
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; });
|
|
18221
|
+
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; });
|
|
18193
18222
|
var BeforeAfterCard = function (_a) {
|
|
18194
18223
|
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 ? ComponentSize.Small : _d;
|
|
18195
18224
|
var theme = useTheme();
|
|
18196
18225
|
var stylesBySize = getStylesBySize(size, theme);
|
|
18197
18226
|
var infoText = age ? "".concat(name, ", ").concat(age) : name;
|
|
18198
18227
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
18199
|
-
return (jsxs$1(Container$
|
|
18228
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
|
|
18200
18229
|
};
|
|
18201
|
-
var templateObject_1$
|
|
18230
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
18202
18231
|
|
|
18203
|
-
var Container$
|
|
18204
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18205
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
18232
|
+
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'); });
|
|
18233
|
+
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'); });
|
|
18234
|
+
var StyledTitle = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
18206
18235
|
var titlePosition = _a.titlePosition;
|
|
18207
18236
|
return titlePosition == 'center' &&
|
|
18208
18237
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -18210,14 +18239,14 @@ var StyledTitle = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __ma
|
|
|
18210
18239
|
var ImageCardWithDescription = function (_a) {
|
|
18211
18240
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
18212
18241
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18213
|
-
return (jsxs$1(Container$
|
|
18242
|
+
return (jsxs$1(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18214
18243
|
};
|
|
18215
|
-
var templateObject_1$
|
|
18244
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7;
|
|
18216
18245
|
|
|
18217
|
-
var Container$
|
|
18218
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
18219
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
18220
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
18246
|
+
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"])));
|
|
18247
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18248
|
+
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; });
|
|
18249
|
+
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'); });
|
|
18221
18250
|
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'); });
|
|
18222
18251
|
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) {
|
|
18223
18252
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -18243,7 +18272,7 @@ var TrackingProgress = function (_a) {
|
|
|
18243
18272
|
}
|
|
18244
18273
|
return '30px';
|
|
18245
18274
|
};
|
|
18246
|
-
return (jsxs$1(Container$
|
|
18275
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18247
18276
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18248
18277
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
18249
18278
|
? theme.colors.semantic.informative.color
|
|
@@ -18252,12 +18281,12 @@ var TrackingProgress = function (_a) {
|
|
|
18252
18281
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus$1, { finishedTrack: false }, void 0)] }), index));
|
|
18253
18282
|
})] }), void 0));
|
|
18254
18283
|
};
|
|
18255
|
-
var templateObject_1$
|
|
18284
|
+
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;
|
|
18256
18285
|
|
|
18257
|
-
var Container$
|
|
18258
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
18259
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
18260
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
18286
|
+
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"])));
|
|
18287
|
+
var CheckpointContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18288
|
+
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; });
|
|
18289
|
+
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'); });
|
|
18261
18290
|
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) {
|
|
18262
18291
|
return props.finishedTrack
|
|
18263
18292
|
? props.finishedTrackColor
|
|
@@ -18293,7 +18322,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18293
18322
|
}
|
|
18294
18323
|
return '30px';
|
|
18295
18324
|
};
|
|
18296
|
-
return (jsxs$1(Container$
|
|
18325
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18297
18326
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18298
18327
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
18299
18328
|
? theme.colors.semantic.informative.color
|
|
@@ -18302,12 +18331,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18302
18331
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
18303
18332
|
})] }), void 0));
|
|
18304
18333
|
};
|
|
18305
|
-
var templateObject_1$
|
|
18334
|
+
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;
|
|
18306
18335
|
|
|
18307
|
-
var Container$
|
|
18308
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18309
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18310
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18336
|
+
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"])));
|
|
18337
|
+
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"])));
|
|
18338
|
+
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"])));
|
|
18339
|
+
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"])));
|
|
18311
18340
|
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"])));
|
|
18312
18341
|
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"])));
|
|
18313
18342
|
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) {
|
|
@@ -18318,14 +18347,14 @@ var ReviewsHeader = function (_a) {
|
|
|
18318
18347
|
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;
|
|
18319
18348
|
var starsNumber = 5;
|
|
18320
18349
|
var theme = useTheme();
|
|
18321
|
-
return (jsxs$1(Container$
|
|
18350
|
+
return (jsxs$1(Container$6, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18322
18351
|
};
|
|
18323
|
-
var templateObject_1$
|
|
18352
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18324
18353
|
|
|
18325
|
-
var Container$
|
|
18326
|
-
var Content
|
|
18327
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18328
|
-
var ReviewContainer = newStyled.div(templateObject_4
|
|
18354
|
+
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"])));
|
|
18355
|
+
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"])));
|
|
18356
|
+
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"])));
|
|
18357
|
+
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"])));
|
|
18329
18358
|
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"])));
|
|
18330
18359
|
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"])));
|
|
18331
18360
|
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"])));
|
|
@@ -18360,10 +18389,10 @@ var Review = function (_a) {
|
|
|
18360
18389
|
}
|
|
18361
18390
|
}
|
|
18362
18391
|
}, [opened]);
|
|
18363
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18364
|
-
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content
|
|
18392
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$5, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18393
|
+
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18365
18394
|
};
|
|
18366
|
-
var templateObject_1$
|
|
18395
|
+
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;
|
|
18367
18396
|
|
|
18368
18397
|
function _extends() {
|
|
18369
18398
|
_extends = Object.assign || function (target) {
|
|
@@ -18630,40 +18659,40 @@ function useSwipeable(options) {
|
|
|
18630
18659
|
return handlers;
|
|
18631
18660
|
}
|
|
18632
18661
|
|
|
18633
|
-
var Container$
|
|
18662
|
+
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) {
|
|
18634
18663
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18635
18664
|
return borderRadiusVariant &&
|
|
18636
18665
|
"\n border-radius: 40px;\n ";
|
|
18637
18666
|
});
|
|
18638
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18639
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18667
|
+
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'); });
|
|
18668
|
+
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"])));
|
|
18640
18669
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18641
18670
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18642
|
-
return (jsxs$1(Container$
|
|
18671
|
+
return (jsxs$1(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(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), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18643
18672
|
});
|
|
18644
|
-
var templateObject_1$
|
|
18673
|
+
var templateObject_1$7, templateObject_2$3, templateObject_3$2;
|
|
18645
18674
|
|
|
18646
|
-
var Button = newStyled.button(templateObject_1$
|
|
18675
|
+
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"])));
|
|
18647
18676
|
var ArrowButton = function (_a) {
|
|
18648
18677
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18649
18678
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18650
18679
|
};
|
|
18651
|
-
var templateObject_1$
|
|
18680
|
+
var templateObject_1$6;
|
|
18652
18681
|
|
|
18653
|
-
var Container$
|
|
18682
|
+
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"])));
|
|
18654
18683
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18655
18684
|
var SlideDots = function (_a) {
|
|
18656
18685
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18657
18686
|
var theme = useTheme();
|
|
18658
|
-
return (jsx$1(Container$
|
|
18687
|
+
return (jsx$1(Container$3, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18659
18688
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18660
18689
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18661
18690
|
};
|
|
18662
|
-
var templateObject_1$
|
|
18691
|
+
var templateObject_1$5;
|
|
18663
18692
|
|
|
18664
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18665
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
18666
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
18693
|
+
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"])));
|
|
18694
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18695
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18667
18696
|
var SlideNavigation = function (_a) {
|
|
18668
18697
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18669
18698
|
var theme = useTheme();
|
|
@@ -18675,9 +18704,9 @@ var SlideNavigation = function (_a) {
|
|
|
18675
18704
|
onNavigate(selectedIndex + 1);
|
|
18676
18705
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18677
18706
|
};
|
|
18678
|
-
var templateObject_1$
|
|
18707
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
18679
18708
|
|
|
18680
|
-
var Container$
|
|
18709
|
+
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"])));
|
|
18681
18710
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18682
18711
|
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;
|
|
18683
18712
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18699,31 +18728,31 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18699
18728
|
useEffect(function () {
|
|
18700
18729
|
setSelectedImage(images[index]);
|
|
18701
18730
|
}, [index, images]);
|
|
18702
|
-
return (jsxs$1(Container$
|
|
18731
|
+
return (jsxs$1(Container$2, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18703
18732
|
};
|
|
18704
|
-
var templateObject_1$
|
|
18733
|
+
var templateObject_1$3;
|
|
18705
18734
|
|
|
18706
|
-
var Container$
|
|
18707
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
18735
|
+
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"])));
|
|
18736
|
+
var DropContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18708
18737
|
var DropList = function (_a) {
|
|
18709
18738
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
18710
|
-
return (jsx$1(Container$
|
|
18739
|
+
return (jsx$1(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
18711
18740
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
18712
18741
|
}) }, void 0));
|
|
18713
18742
|
};
|
|
18714
|
-
var templateObject_1$
|
|
18743
|
+
var templateObject_1$2, templateObject_2$1;
|
|
18715
18744
|
|
|
18716
18745
|
var DROPS_TOTAL = 5;
|
|
18717
|
-
var Container
|
|
18718
|
-
var Title = newStyled.p(templateObject_2
|
|
18719
|
-
var Description = newStyled.p(templateObject_3
|
|
18746
|
+
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"])));
|
|
18747
|
+
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"])));
|
|
18748
|
+
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"])));
|
|
18720
18749
|
var AbsorbencyLevel = function (_a) {
|
|
18721
18750
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18722
|
-
return (jsxs$1(Container
|
|
18751
|
+
return (jsxs$1(Container, { children: [jsx$1(Title, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18723
18752
|
};
|
|
18724
|
-
var templateObject_1$
|
|
18753
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18725
18754
|
|
|
18726
|
-
var TimerContainer = newStyled.div(templateObject_1
|
|
18755
|
+
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) {
|
|
18727
18756
|
var textPosition = _a.textPosition;
|
|
18728
18757
|
return textPosition;
|
|
18729
18758
|
}, function (_a) {
|
|
@@ -18750,23 +18779,7 @@ var HurryUp = function (_a) {
|
|
|
18750
18779
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18751
18780
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$6, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18752
18781
|
};
|
|
18753
|
-
var templateObject_1
|
|
18754
|
-
|
|
18755
|
-
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"])));
|
|
18756
|
-
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"])));
|
|
18757
|
-
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"])));
|
|
18758
|
-
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) {
|
|
18759
|
-
var index = _a.index;
|
|
18760
|
-
return "".concat(6 + 3 * index, "px");
|
|
18761
|
-
}, function (_a) {
|
|
18762
|
-
var isFilled = _a.isFilled;
|
|
18763
|
-
return (isFilled ? '#292929' : '#D9D9D9');
|
|
18764
|
-
});
|
|
18765
|
-
var StrengthBars = function (_a) {
|
|
18766
|
-
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
18767
|
-
return (jsxs$1(Container, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content, { children: supportText }, void 0)] }), void 0));
|
|
18768
|
-
};
|
|
18769
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18782
|
+
var templateObject_1;
|
|
18770
18783
|
|
|
18771
18784
|
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18772
18785
|
//# sourceMappingURL=index.esm.js.map
|