@trafilea/afrodita-components 5.0.0-beta.245 → 5.0.0-beta.247
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 +1 -0
- package/build/index.esm.js +145 -107
- package/build/index.esm.js.map +1 -1
- package/build/index.js +145 -107
- package/build/index.js.map +1 -1
- package/build/theme/thespadr.theme.js +8 -8
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4866,7 +4866,7 @@ var templateObject_1$1w, templateObject_2$$;
|
|
|
4866
4866
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4867
4867
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4868
4868
|
var DialogDropdownListItem = newStyled.li(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4869
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4869
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4870
4870
|
var DropdownDialog = function (_a) {
|
|
4871
4871
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4872
4872
|
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4874,7 +4874,7 @@ var DropdownDialog = function (_a) {
|
|
|
4874
4874
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4875
4875
|
}) }), void 0) }), void 0));
|
|
4876
4876
|
};
|
|
4877
|
-
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$
|
|
4877
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$z;
|
|
4878
4878
|
|
|
4879
4879
|
var getStylesBySize$a = function (size, theme) {
|
|
4880
4880
|
switch (size) {
|
|
@@ -4945,10 +4945,10 @@ var TAGS = {
|
|
|
4945
4945
|
hero1: newStyled.h1(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""]))),
|
|
4946
4946
|
hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
|
|
4947
4947
|
hero3: newStyled.h3(templateObject_3$M || (templateObject_3$M = __makeTemplateObject([""], [""]))),
|
|
4948
|
-
display1: newStyled.h1(templateObject_4$
|
|
4949
|
-
display2: newStyled.h2(templateObject_5$
|
|
4950
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4951
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4948
|
+
display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
|
|
4949
|
+
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4950
|
+
heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
|
|
4951
|
+
heading2: newStyled.h2(templateObject_7$c || (templateObject_7$c = __makeTemplateObject([""], [""]))),
|
|
4952
4952
|
heading3: newStyled.h3(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject([""], [""]))),
|
|
4953
4953
|
heading4: newStyled.h4(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject([""], [""]))),
|
|
4954
4954
|
heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4963,7 +4963,7 @@ var TAGS = {
|
|
|
4963
4963
|
}),
|
|
4964
4964
|
tag: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4965
4965
|
};
|
|
4966
|
-
var Text$
|
|
4966
|
+
var Text$8 = function (_a) {
|
|
4967
4967
|
var _b;
|
|
4968
4968
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4969
4969
|
var theme = useTheme();
|
|
@@ -5066,7 +5066,7 @@ var DEFAULTS = {
|
|
|
5066
5066
|
size: 'regular',
|
|
5067
5067
|
},
|
|
5068
5068
|
};
|
|
5069
|
-
var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$
|
|
5069
|
+
var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$y, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
5070
5070
|
|
|
5071
5071
|
var ButtonsContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
5072
5072
|
var inline = _a.inline;
|
|
@@ -5078,7 +5078,7 @@ var SizeSelector = function (_a) {
|
|
|
5078
5078
|
display: 'flex',
|
|
5079
5079
|
flexDirection: inline ? 'row' : 'column',
|
|
5080
5080
|
alignItems: inline ? 'center' : 'start',
|
|
5081
|
-
} }, { children: [jsxs(Text$
|
|
5081
|
+
} }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
5082
5082
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
5083
5083
|
return (jsx(SelectorSecondary, { css: {
|
|
5084
5084
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -5444,11 +5444,11 @@ var OutOfStock = function (_a) {
|
|
|
5444
5444
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5445
5445
|
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5446
5446
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5447
|
-
var Span = newStyled.span(templateObject_4$
|
|
5448
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5447
|
+
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5448
|
+
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
5449
5449
|
var Label$3 = function (_a) {
|
|
5450
5450
|
var label = _a.label, values = _a.values;
|
|
5451
|
-
return (jsxRuntime.jsxs(Text$
|
|
5451
|
+
return (jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
5452
5452
|
};
|
|
5453
5453
|
var Option = function (_a) {
|
|
5454
5454
|
var value = _a.value, children = _a.children;
|
|
@@ -5463,7 +5463,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5463
5463
|
Option: Option,
|
|
5464
5464
|
OptionsContainer: OptionsContainer,
|
|
5465
5465
|
});
|
|
5466
|
-
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$
|
|
5466
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$k;
|
|
5467
5467
|
|
|
5468
5468
|
var Container$Y = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
5469
5469
|
var borderColor = _a.borderColor;
|
|
@@ -10015,16 +10015,16 @@ var Container$X = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
10015
10015
|
var position = _a.position;
|
|
10016
10016
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10017
10017
|
});
|
|
10018
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
10018
|
+
var Button$3 = newStyled.button(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
10019
10019
|
var ImagePreviewList = function (_a) {
|
|
10020
10020
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10021
10021
|
return (jsxRuntime.jsx(Container$X, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10022
10022
|
arrowWidth: 0.75,
|
|
10023
10023
|
arrowHeight: 1.25,
|
|
10024
10024
|
arrowPadding: 1.625,
|
|
10025
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10025
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10026
10026
|
};
|
|
10027
|
-
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$
|
|
10027
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
10028
10028
|
|
|
10029
10029
|
var propTypes = {exports: {}};
|
|
10030
10030
|
|
|
@@ -11624,15 +11624,19 @@ var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
11624
11624
|
});
|
|
11625
11625
|
var TopTagContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11626
11626
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11627
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11627
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11628
|
+
var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 706px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 706px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11629
|
+
var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
11630
|
+
var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11628
11631
|
var ImageProductWithTags$1 = function (_a) {
|
|
11632
|
+
var _b, _c;
|
|
11629
11633
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
11630
|
-
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11631
|
-
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11635
|
+
alt: image.alt,
|
|
11636
|
+
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11637
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11634
11638
|
};
|
|
11635
|
-
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$
|
|
11639
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
|
|
11636
11640
|
|
|
11637
11641
|
var Container$V = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11638
11642
|
var ProductGallery = function (_a) {
|
|
@@ -12121,17 +12125,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$F || (templateObject_
|
|
|
12121
12125
|
var position = _a.position;
|
|
12122
12126
|
return getArrowContainerMargin(position);
|
|
12123
12127
|
});
|
|
12124
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12128
|
+
var TooltipText = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12125
12129
|
var color = _a.color;
|
|
12126
12130
|
return color;
|
|
12127
12131
|
});
|
|
12128
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12129
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
12132
|
+
var TopSection = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
12133
|
+
var Title$7 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12130
12134
|
var color = _a.color;
|
|
12131
12135
|
return color;
|
|
12132
12136
|
});
|
|
12133
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12134
|
-
var templateObject_1$19, templateObject_2$P, templateObject_3$F, templateObject_4$
|
|
12137
|
+
var IconContainer$5 = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
12138
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$F, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
|
|
12135
12139
|
|
|
12136
12140
|
var Tooltip = function (_a) {
|
|
12137
12141
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -12445,20 +12449,20 @@ var Container$M = newStyled.div(templateObject_2$M || (templateObject_2$M = __ma
|
|
|
12445
12449
|
var Minimalistic = function (_a) {
|
|
12446
12450
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
12447
12451
|
var theme = useTheme();
|
|
12448
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$
|
|
12452
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12449
12453
|
};
|
|
12450
12454
|
var templateObject_1$15, templateObject_2$M;
|
|
12451
12455
|
|
|
12452
12456
|
var Container$L = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12453
12457
|
var Title$6 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12454
12458
|
var Details$1 = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12455
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12459
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
12456
12460
|
var Simple = function (_a) {
|
|
12457
12461
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
12458
12462
|
var theme = useTheme();
|
|
12459
12463
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$L, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12460
12464
|
};
|
|
12461
|
-
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$
|
|
12465
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$t;
|
|
12462
12466
|
|
|
12463
12467
|
var Bundle = {
|
|
12464
12468
|
Minimalistic: Minimalistic,
|
|
@@ -12655,13 +12659,13 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
12655
12659
|
return hasValue &&
|
|
12656
12660
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12657
12661
|
});
|
|
12658
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12662
|
+
var InputWrapper = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12659
12663
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12660
12664
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12661
12665
|
});
|
|
12662
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
12663
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12664
|
-
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$
|
|
12666
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12667
|
+
var ClearInput = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12668
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$h, templateObject_6$f;
|
|
12665
12669
|
|
|
12666
12670
|
var BaseInput = function (_a) {
|
|
12667
12671
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -12798,7 +12802,7 @@ var PaymentMethod = function (_a) {
|
|
|
12798
12802
|
};
|
|
12799
12803
|
var templateObject_1$Y;
|
|
12800
12804
|
|
|
12801
|
-
var Text$
|
|
12805
|
+
var Text$6 = newStyled.h3(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
12802
12806
|
var backgroundColor = _a.backgroundColor;
|
|
12803
12807
|
return backgroundColor;
|
|
12804
12808
|
}, function (_a) {
|
|
@@ -12808,7 +12812,7 @@ var Text$5 = newStyled.h3(templateObject_1$X || (templateObject_1$X = __makeTemp
|
|
|
12808
12812
|
var OfferBanner = function (_a) {
|
|
12809
12813
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
12810
12814
|
var theme = useTheme();
|
|
12811
|
-
return (jsxRuntime.jsx(Text$
|
|
12815
|
+
return (jsxRuntime.jsx(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12812
12816
|
};
|
|
12813
12817
|
var templateObject_1$X;
|
|
12814
12818
|
|
|
@@ -12827,15 +12831,15 @@ var Currency = newStyled.span(templateObject_3$z || (templateObject_3$z = __make
|
|
|
12827
12831
|
var theme = _a.theme;
|
|
12828
12832
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12829
12833
|
});
|
|
12830
|
-
var Container$F = newStyled.div(templateObject_4$
|
|
12831
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12834
|
+
var Container$F = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12835
|
+
var DiscountText = newStyled.h3(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12832
12836
|
var theme = _a.theme;
|
|
12833
12837
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12834
12838
|
}, function (_a) {
|
|
12835
12839
|
var theme = _a.theme;
|
|
12836
12840
|
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12837
12841
|
});
|
|
12838
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12842
|
+
var DiscountAmount = newStyled.h3(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12839
12843
|
var theme = _a.theme;
|
|
12840
12844
|
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12841
12845
|
}, function (_a) {
|
|
@@ -12850,7 +12854,7 @@ var Total = function (_a) {
|
|
|
12850
12854
|
var theme = useTheme();
|
|
12851
12855
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12852
12856
|
};
|
|
12853
|
-
var templateObject_1$W, templateObject_2$F, templateObject_3$z, templateObject_4$
|
|
12857
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$g, templateObject_6$e;
|
|
12854
12858
|
|
|
12855
12859
|
var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12856
12860
|
var color = _a.color;
|
|
@@ -12864,7 +12868,7 @@ var Item$2 = newStyled.h4(templateObject_3$y || (templateObject_3$y = __makeTemp
|
|
|
12864
12868
|
var theme = _a.theme;
|
|
12865
12869
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12866
12870
|
});
|
|
12867
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12871
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12868
12872
|
var color = _a.color;
|
|
12869
12873
|
return color;
|
|
12870
12874
|
});
|
|
@@ -12877,7 +12881,7 @@ var Subtotal = function (_a) {
|
|
|
12877
12881
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12878
12882
|
})] }), void 0));
|
|
12879
12883
|
};
|
|
12880
|
-
var templateObject_1$V, templateObject_2$E, templateObject_3$y, templateObject_4$
|
|
12884
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$y, templateObject_4$q;
|
|
12881
12885
|
|
|
12882
12886
|
var Totals = {
|
|
12883
12887
|
Total: Total,
|
|
@@ -12886,39 +12890,39 @@ var Totals = {
|
|
|
12886
12890
|
|
|
12887
12891
|
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12888
12892
|
var IconContainer$3 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
12889
|
-
var Text$
|
|
12890
|
-
var Details = newStyled.span(templateObject_4$
|
|
12893
|
+
var Text$5 = newStyled.p(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12894
|
+
var Details = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12891
12895
|
var Note = function (_a) {
|
|
12892
12896
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12893
12897
|
var theme = useTheme();
|
|
12894
|
-
return (jsxRuntime.jsxs(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$
|
|
12898
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12895
12899
|
};
|
|
12896
|
-
var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$
|
|
12900
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$p;
|
|
12897
12901
|
|
|
12898
12902
|
var Title$5 = newStyled.h1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12899
12903
|
var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12900
12904
|
var Row$1 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12901
12905
|
flexDirection: ['column', 'row'],
|
|
12902
12906
|
}));
|
|
12903
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12907
|
+
var Col$1 = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
12904
12908
|
margin: ['0', '0 1.25rem'],
|
|
12905
12909
|
marginBottom: ['1.875rem', '0'],
|
|
12906
12910
|
alignItems: ['center', 'flex-start'],
|
|
12907
12911
|
textAlign: ['center', 'inherit'],
|
|
12908
12912
|
width: ['100%', 'inherit'],
|
|
12909
12913
|
}));
|
|
12910
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12914
|
+
var IconContainer$2 = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"])), mediaQueries({
|
|
12911
12915
|
marginRight: ['0', '0.438rem'],
|
|
12912
12916
|
marginBottom: ['10px', '0'],
|
|
12913
12917
|
width: ['auto', '1.375rem'],
|
|
12914
12918
|
}));
|
|
12915
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12919
|
+
var SectionTitle = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
12916
12920
|
display: ['block', 'flex'],
|
|
12917
12921
|
}), function (_a) {
|
|
12918
12922
|
var theme = _a.theme;
|
|
12919
12923
|
return theme.colors.shades['700'].color;
|
|
12920
12924
|
});
|
|
12921
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12925
|
+
var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
12922
12926
|
var theme = _a.theme;
|
|
12923
12927
|
return theme.component.deliveryDetails.SectionDetails
|
|
12924
12928
|
? mediaQueries({
|
|
@@ -12932,15 +12936,15 @@ var DeliveryDetails = function (_a) {
|
|
|
12932
12936
|
var theme = useTheme();
|
|
12933
12937
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12934
12938
|
};
|
|
12935
|
-
var templateObject_1$T, templateObject_2$C, templateObject_3$w, templateObject_4$
|
|
12939
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$w, templateObject_4$o, templateObject_5$f, templateObject_6$d, templateObject_7$9, templateObject_8$6;
|
|
12936
12940
|
|
|
12937
12941
|
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
12938
|
-
var Text$
|
|
12942
|
+
var Text$4 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12939
12943
|
var ScrollToTop = function (_a) {
|
|
12940
12944
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12941
12945
|
var theme = useTheme();
|
|
12942
12946
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12943
|
-
return (jsxRuntime.jsxs(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$
|
|
12947
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12944
12948
|
};
|
|
12945
12949
|
var templateObject_1$S, templateObject_2$B;
|
|
12946
12950
|
|
|
@@ -12959,18 +12963,18 @@ var templateObject_1$R, templateObject_2$A;
|
|
|
12959
12963
|
var TableElement$1 = newStyled.table(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12960
12964
|
var TableCell$1 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12961
12965
|
var TableHead$1 = newStyled.th(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12962
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12966
|
+
var TableRow$1 = newStyled.tr(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12963
12967
|
var SizeTable = function (_a) {
|
|
12964
12968
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
12965
12969
|
var theme = useTheme();
|
|
12966
12970
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12967
12971
|
};
|
|
12968
|
-
var templateObject_1$Q, templateObject_2$z, templateObject_3$v, templateObject_4$
|
|
12972
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$v, templateObject_4$n;
|
|
12969
12973
|
|
|
12970
12974
|
var TableElement = newStyled.table(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12971
12975
|
var TableCell = newStyled.td(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12972
12976
|
var TableHead = newStyled.th(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12973
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12977
|
+
var TableRow = newStyled.tr(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12974
12978
|
var SizeChartTable = function (_a) {
|
|
12975
12979
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12976
12980
|
var theme = useTheme();
|
|
@@ -13001,7 +13005,7 @@ var SizeChartTable = function (_a) {
|
|
|
13001
13005
|
backgroundColor: getCellColor(index, cell),
|
|
13002
13006
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13003
13007
|
};
|
|
13004
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$u, templateObject_4$
|
|
13008
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$u, templateObject_4$m;
|
|
13005
13009
|
|
|
13006
13010
|
var Img = newStyled.img(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
13007
13011
|
var Image = function (_a) {
|
|
@@ -13035,7 +13039,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13035
13039
|
margin: '0.063rem 0',
|
|
13036
13040
|
});
|
|
13037
13041
|
});
|
|
13038
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13042
|
+
var PriceContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
13039
13043
|
var withTag = _a.withTag; _a.theme;
|
|
13040
13044
|
return withTag
|
|
13041
13045
|
? mediaQueries({
|
|
@@ -13044,13 +13048,13 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
13044
13048
|
})
|
|
13045
13049
|
: 'justify-content: end';
|
|
13046
13050
|
});
|
|
13047
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13051
|
+
var Quantity = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
13048
13052
|
var SimpleOrderItem = function (_a) {
|
|
13049
13053
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
13050
13054
|
var theme = useTheme();
|
|
13051
13055
|
return (jsxRuntime.jsxs(Container$B, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13052
13056
|
};
|
|
13053
|
-
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$
|
|
13057
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$l, templateObject_5$e;
|
|
13054
13058
|
|
|
13055
13059
|
function formatDate(date) {
|
|
13056
13060
|
var day = date.getDate();
|
|
@@ -13062,10 +13066,10 @@ function formatDate(date) {
|
|
|
13062
13066
|
var Container$A = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
13063
13067
|
var Heading = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13064
13068
|
var Content$2 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13065
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13066
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13067
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13068
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13069
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13070
|
+
var DateText$1 = newStyled.span(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13071
|
+
var VariantText = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13072
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
13069
13073
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13070
13074
|
var ReviewDescription$1 = newStyled.p(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13071
13075
|
var ImagesContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
@@ -13082,15 +13086,15 @@ var Review$1 = function (_a) {
|
|
|
13082
13086
|
var theme = useTheme();
|
|
13083
13087
|
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$2, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13084
13088
|
};
|
|
13085
|
-
var templateObject_1$M, templateObject_2$w, templateObject_3$s, templateObject_4$
|
|
13089
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
13086
13090
|
|
|
13087
13091
|
var List = newStyled.ul(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13088
13092
|
var Item$1 = newStyled.li(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
13089
13093
|
var DropdownWrapper = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
13090
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13091
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13092
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13093
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$
|
|
13094
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
13095
|
+
var StyledDropdown = newStyled.ul(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
13096
|
+
var DropdownItem = newStyled.li(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
13097
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13094
13098
|
|
|
13095
13099
|
var DropdownListIcons = function (_a) {
|
|
13096
13100
|
var items = _a.items;
|
|
@@ -13120,15 +13124,15 @@ var Row = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTempla
|
|
|
13120
13124
|
return props.rightToLeft &&
|
|
13121
13125
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13122
13126
|
});
|
|
13123
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13124
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13125
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13127
|
+
var H5 = newStyled.h5(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13128
|
+
var H3$1 = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13129
|
+
var FreeShipping = newStyled.span(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13126
13130
|
var CrossSellCheckbox = function (_a) {
|
|
13127
13131
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13128
13132
|
var theme = useTheme();
|
|
13129
13133
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13130
13134
|
};
|
|
13131
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$
|
|
13135
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13132
13136
|
|
|
13133
13137
|
var index = /*#__PURE__*/Object.freeze({
|
|
13134
13138
|
__proto__: null,
|
|
@@ -13184,14 +13188,14 @@ var BuyNowPayLater = function (_a) {
|
|
|
13184
13188
|
console.error('Icon', iconName, 'not found');
|
|
13185
13189
|
return null;
|
|
13186
13190
|
}
|
|
13187
|
-
return (jsxRuntime.jsx(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(Text$
|
|
13191
|
+
return (jsxRuntime.jsx(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", style: { fontSize: fontSize }, testId: "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13188
13192
|
};
|
|
13189
13193
|
var templateObject_1$H, templateObject_2$t;
|
|
13190
13194
|
|
|
13191
13195
|
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"])));
|
|
13192
13196
|
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"])));
|
|
13193
13197
|
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"])));
|
|
13194
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13198
|
+
var Bar = newStyled('div')(templateObject_4$h || (templateObject_4$h = __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) {
|
|
13195
13199
|
var index = _a.index;
|
|
13196
13200
|
return "".concat(6 + 3 * index, "px");
|
|
13197
13201
|
}, function (_a) {
|
|
@@ -13202,7 +13206,7 @@ var StrengthBars = function (_a) {
|
|
|
13202
13206
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13203
13207
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13204
13208
|
};
|
|
13205
|
-
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$
|
|
13209
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h;
|
|
13206
13210
|
|
|
13207
13211
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13208
13212
|
var width = _a.width, height = _a.height;
|
|
@@ -13215,7 +13219,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13215
13219
|
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"])));
|
|
13216
13220
|
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"])));
|
|
13217
13221
|
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"])));
|
|
13218
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13222
|
+
var Title$3 = newStyled.p(templateObject_4$g || (templateObject_4$g = __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; });
|
|
13219
13223
|
var getStylesBySize$1 = function (size) {
|
|
13220
13224
|
switch (size) {
|
|
13221
13225
|
case exports.ComponentSize.Medium:
|
|
@@ -13241,15 +13245,15 @@ var getStylesBySize$1 = function (size) {
|
|
|
13241
13245
|
};
|
|
13242
13246
|
}
|
|
13243
13247
|
};
|
|
13244
|
-
var TopTagContainer$2 = newStyled.div(templateObject_5$
|
|
13248
|
+
var TopTagContainer$2 = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13245
13249
|
var style = _a.style;
|
|
13246
13250
|
return style.width;
|
|
13247
13251
|
});
|
|
13248
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_6$
|
|
13252
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13249
13253
|
var style = _a.style;
|
|
13250
13254
|
return style.width;
|
|
13251
13255
|
});
|
|
13252
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
13256
|
+
var MarginTopContainer = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13253
13257
|
var ProductItemMobile = function (_a) {
|
|
13254
13258
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
|
|
13255
13259
|
display: false,
|
|
@@ -13284,7 +13288,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13284
13288
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13285
13289
|
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), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), 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));
|
|
13286
13290
|
};
|
|
13287
|
-
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$
|
|
13291
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
13288
13292
|
|
|
13289
13293
|
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"])));
|
|
13290
13294
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -13415,7 +13419,7 @@ var IconContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n =
|
|
|
13415
13419
|
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13416
13420
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13417
13421
|
}));
|
|
13418
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13422
|
+
var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __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) {
|
|
13419
13423
|
var bold = _a.bold;
|
|
13420
13424
|
return (bold ? '700' : '500');
|
|
13421
13425
|
}, function (_a) {
|
|
@@ -13432,7 +13436,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
13432
13436
|
var background = _a.background;
|
|
13433
13437
|
return background || 'unset';
|
|
13434
13438
|
});
|
|
13435
|
-
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$
|
|
13439
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$f;
|
|
13436
13440
|
|
|
13437
13441
|
var Pagination = function (_a) {
|
|
13438
13442
|
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;
|
|
@@ -13514,7 +13518,7 @@ var Description$2 = newStyled.div({
|
|
|
13514
13518
|
var ProductItem = function (_a) {
|
|
13515
13519
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13516
13520
|
var theme = useTheme();
|
|
13517
|
-
return (jsxRuntime.jsxs(Container$s, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$
|
|
13521
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13518
13522
|
};
|
|
13519
13523
|
var templateObject_1$z;
|
|
13520
13524
|
|
|
@@ -13525,7 +13529,7 @@ var Container$r = newStyled.div({
|
|
|
13525
13529
|
});
|
|
13526
13530
|
var Footer = function (_a) {
|
|
13527
13531
|
var text = _a.text, onClick = _a.onClick;
|
|
13528
|
-
return (jsxRuntime.jsx(Container$r, { children: jsxRuntime.jsx(Text$
|
|
13532
|
+
return (jsxRuntime.jsx(Container$r, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13529
13533
|
};
|
|
13530
13534
|
|
|
13531
13535
|
var Ul = newStyled.ul({
|
|
@@ -13555,7 +13559,7 @@ var Header$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeT
|
|
|
13555
13559
|
var ResultsPanel = function (_a) {
|
|
13556
13560
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13557
13561
|
var theme = useTheme();
|
|
13558
|
-
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$
|
|
13562
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13559
13563
|
};
|
|
13560
13564
|
var templateObject_1$y, templateObject_2$m, templateObject_3$l;
|
|
13561
13565
|
|
|
@@ -13745,6 +13749,10 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
13745
13749
|
// max-height: 31.875rem;
|
|
13746
13750
|
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'); });
|
|
13747
13751
|
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"])));
|
|
13752
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
13753
|
+
var Video = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
13754
|
+
var VideoTag = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13755
|
+
var Text$3 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13748
13756
|
var settings = {
|
|
13749
13757
|
dots: true,
|
|
13750
13758
|
infinite: false,
|
|
@@ -13757,11 +13765,29 @@ var ImageProductWithTags = function (_a) {
|
|
|
13757
13765
|
var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13758
13766
|
var slick = React$2.useRef(null);
|
|
13759
13767
|
var sliderWrapper = React$2.useRef(null);
|
|
13768
|
+
var iframeRef = React$2.useRef(null);
|
|
13769
|
+
var _c = React$2.useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13760
13770
|
usePreventVerticalScroll(sliderWrapper);
|
|
13761
13771
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13762
13772
|
var _a;
|
|
13763
13773
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
13764
13774
|
}, [slick]);
|
|
13775
|
+
var _sendCommandToIframe = function (command) {
|
|
13776
|
+
var iframe = document.getElementById('vwo-video');
|
|
13777
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
13778
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
13779
|
+
event: 'command',
|
|
13780
|
+
func: command,
|
|
13781
|
+
}), '*');
|
|
13782
|
+
};
|
|
13783
|
+
var _stopVideo = function () {
|
|
13784
|
+
_sendCommandToIframe('stopVideo');
|
|
13785
|
+
setIsPlaying(false);
|
|
13786
|
+
};
|
|
13787
|
+
var _playVideo = function () {
|
|
13788
|
+
_sendCommandToIframe('playVideo');
|
|
13789
|
+
setIsPlaying(true);
|
|
13790
|
+
};
|
|
13765
13791
|
React$2.useEffect(function () {
|
|
13766
13792
|
var _a;
|
|
13767
13793
|
if (selectedValue) {
|
|
@@ -13771,8 +13797,19 @@ var ImageProductWithTags = function (_a) {
|
|
|
13771
13797
|
}
|
|
13772
13798
|
}
|
|
13773
13799
|
}, [images, selectedValue]);
|
|
13774
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({
|
|
13775
|
-
|
|
13800
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13801
|
+
var _a;
|
|
13802
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
13803
|
+
// @ts-ignore
|
|
13804
|
+
var urlParams = new URLSearchParams((_a = document.getElementById('vwo-video')) === null || _a === void 0 ? void 0 : _a.src);
|
|
13805
|
+
var autoplay = urlParams.get('autoplay') === '1';
|
|
13806
|
+
var vwoIndex = Number(urlParams.get('vwo-index'));
|
|
13807
|
+
e == vwoIndex && autoplay ? _playVideo() : _stopVideo();
|
|
13808
|
+
} }, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13809
|
+
var _a, _b;
|
|
13810
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
13811
|
+
isPlaying ? _stopVideo() : _playVideo();
|
|
13812
|
+
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0) }, void 0))] }, image.key));
|
|
13776
13813
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13777
13814
|
};
|
|
13778
13815
|
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
@@ -13810,7 +13847,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13810
13847
|
};
|
|
13811
13848
|
}, [preventTouch, ref, touchStart]);
|
|
13812
13849
|
}
|
|
13813
|
-
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13850
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13814
13851
|
|
|
13815
13852
|
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"])));
|
|
13816
13853
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -17872,15 +17909,15 @@ var PackCard$1 = function (_a) {
|
|
|
17872
17909
|
.then(function (icon) { return setIcon(icon); })
|
|
17873
17910
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17874
17911
|
}, [pack.meta.icon]);
|
|
17875
|
-
return (jsxRuntime.jsxs(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
17912
|
+
return (jsxRuntime.jsxs(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17876
17913
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17877
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$
|
|
17914
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17878
17915
|
locale: 'en-US',
|
|
17879
17916
|
currency: currencyCode || 'USD',
|
|
17880
|
-
}) }), void 0), jsxRuntime.jsxs(Text$
|
|
17917
|
+
}) }), void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
17881
17918
|
locale: 'en-US',
|
|
17882
17919
|
currency: currencyCode || 'USD',
|
|
17883
|
-
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$
|
|
17920
|
+
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17884
17921
|
locale: 'en-US',
|
|
17885
17922
|
currency: currencyCode || 'USD',
|
|
17886
17923
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -17908,10 +17945,10 @@ var PackCard = function (_a) {
|
|
|
17908
17945
|
.then(function (icon) { return setIcon(icon); })
|
|
17909
17946
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17910
17947
|
}, [pack.meta.icon]);
|
|
17911
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
17948
|
+
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
17912
17949
|
locale: 'en-US',
|
|
17913
17950
|
currency: currencyCode || 'USD',
|
|
17914
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$
|
|
17951
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17915
17952
|
locale: 'en-US',
|
|
17916
17953
|
currency: currencyCode || 'USD',
|
|
17917
17954
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
@@ -18064,7 +18101,7 @@ var NormalSpan = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
18064
18101
|
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"])));
|
|
18065
18102
|
var SearchNavigation = function (_a) {
|
|
18066
18103
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18067
|
-
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$
|
|
18104
|
+
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$8, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
18068
18105
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18069
18106
|
}) }, void 0)] }, void 0));
|
|
18070
18107
|
};
|
|
@@ -18158,7 +18195,7 @@ var IconsWithTitle = function (_a) {
|
|
|
18158
18195
|
textAlign: 'center',
|
|
18159
18196
|
lineHeight: '18px',
|
|
18160
18197
|
};
|
|
18161
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$
|
|
18198
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18162
18199
|
};
|
|
18163
18200
|
|
|
18164
18201
|
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"])));
|
|
@@ -18171,7 +18208,7 @@ var ImageVideo = function (_a) {
|
|
|
18171
18208
|
var handleOnClick = function () {
|
|
18172
18209
|
setOpened(true);
|
|
18173
18210
|
};
|
|
18174
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper$1, { children: [jsxRuntime.jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$
|
|
18211
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper$1, { children: [jsxRuntime.jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", style: {
|
|
18175
18212
|
position: 'absolute',
|
|
18176
18213
|
top: '10px',
|
|
18177
18214
|
right: '10px',
|
|
@@ -18193,12 +18230,12 @@ var TextWithImage = function (_a) {
|
|
|
18193
18230
|
var _b, _c, _d, _e;
|
|
18194
18231
|
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"]);
|
|
18195
18232
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18196
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
18233
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$8, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
18197
18234
|
? titleStyle
|
|
18198
18235
|
: {
|
|
18199
18236
|
color: '#000000',
|
|
18200
18237
|
textAlign: 'center',
|
|
18201
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
18238
|
+
} }, { children: title }), void 0)) : (jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
18202
18239
|
? titleStyle
|
|
18203
18240
|
: {
|
|
18204
18241
|
color: '#000000',
|
|
@@ -18208,7 +18245,7 @@ var TextWithImage = function (_a) {
|
|
|
18208
18245
|
// @ts-ignore
|
|
18209
18246
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
18210
18247
|
};
|
|
18211
|
-
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$
|
|
18248
|
+
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$8, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
18212
18249
|
backgroundColor: props.btnBGColor,
|
|
18213
18250
|
color: '#ffffff',
|
|
18214
18251
|
border: props.btnBGColor,
|
|
@@ -18343,7 +18380,7 @@ var StyledTitle = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __ma
|
|
|
18343
18380
|
var ImageCardWithDescription = function (_a) {
|
|
18344
18381
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
18345
18382
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18346
|
-
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$
|
|
18383
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18347
18384
|
};
|
|
18348
18385
|
var templateObject_1$c, templateObject_2$8, templateObject_3$7;
|
|
18349
18386
|
|
|
@@ -18441,7 +18478,7 @@ var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __ma
|
|
|
18441
18478
|
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"])));
|
|
18442
18479
|
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"])));
|
|
18443
18480
|
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"])));
|
|
18444
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18481
|
+
var ReviewsTextCount = newStyled(Text$8)(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"])));
|
|
18445
18482
|
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"])));
|
|
18446
18483
|
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) {
|
|
18447
18484
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18451,7 +18488,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18451
18488
|
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;
|
|
18452
18489
|
var starsNumber = 5;
|
|
18453
18490
|
var theme = useTheme();
|
|
18454
|
-
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$
|
|
18491
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18455
18492
|
};
|
|
18456
18493
|
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18457
18494
|
|
|
@@ -18771,8 +18808,9 @@ var Container$4 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __ma
|
|
|
18771
18808
|
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'); });
|
|
18772
18809
|
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"])));
|
|
18773
18810
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18811
|
+
var _b, _c;
|
|
18774
18812
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18775
|
-
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18813
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
18776
18814
|
});
|
|
18777
18815
|
var templateObject_1$7, templateObject_2$3, templateObject_3$2;
|
|
18778
18816
|
|
|
@@ -18881,7 +18919,7 @@ var HurryUp = function (_a) {
|
|
|
18881
18919
|
seconds: seconds,
|
|
18882
18920
|
};
|
|
18883
18921
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18884
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$
|
|
18922
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18885
18923
|
};
|
|
18886
18924
|
var templateObject_1;
|
|
18887
18925
|
|
|
@@ -18966,7 +19004,7 @@ exports.StarList = StarList;
|
|
|
18966
19004
|
exports.StrengthBars = StrengthBars;
|
|
18967
19005
|
exports.Tab = Tab;
|
|
18968
19006
|
exports.Tabs = Tabs;
|
|
18969
|
-
exports.Text = Text$
|
|
19007
|
+
exports.Text = Text$8;
|
|
18970
19008
|
exports.TextButton = TextButton;
|
|
18971
19009
|
exports.TextWithImage = TextWithImage;
|
|
18972
19010
|
exports.ThemeProvider = ThemeProvider;
|