@trafilea/afrodita-components 5.0.0-beta.246 → 5.0.0-beta.248
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 +17 -1
- package/build/index.esm.js +155 -108
- package/build/index.esm.js.map +1 -1
- package/build/index.js +155 -108
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +15 -0
- package/build/theme/revel.theme.js +18 -0
- package/build/theme/shapermint.theme.d.ts +15 -0
- package/build/theme/shapermint.theme.js +18 -0
- package/build/theme/thespadr.theme.d.ts +15 -0
- package/build/theme/thespadr.theme.js +28 -5
- package/build/theme/truekind.theme.d.ts +15 -0
- package/build/theme/truekind.theme.js +18 -0
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4840,7 +4840,7 @@ var templateObject_1$1w, templateObject_2$$;
|
|
|
4840
4840
|
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; });
|
|
4841
4841
|
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; });
|
|
4842
4842
|
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"])));
|
|
4843
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4843
|
+
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"])));
|
|
4844
4844
|
var DropdownDialog = function (_a) {
|
|
4845
4845
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4846
4846
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4848,7 +4848,7 @@ var DropdownDialog = function (_a) {
|
|
|
4848
4848
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4849
4849
|
}) }), void 0) }), void 0));
|
|
4850
4850
|
};
|
|
4851
|
-
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$
|
|
4851
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$z;
|
|
4852
4852
|
|
|
4853
4853
|
var getStylesBySize$a = function (size, theme) {
|
|
4854
4854
|
switch (size) {
|
|
@@ -4919,10 +4919,10 @@ var TAGS = {
|
|
|
4919
4919
|
hero1: newStyled.h1(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""]))),
|
|
4920
4920
|
hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
|
|
4921
4921
|
hero3: newStyled.h3(templateObject_3$M || (templateObject_3$M = __makeTemplateObject([""], [""]))),
|
|
4922
|
-
display1: newStyled.h1(templateObject_4$
|
|
4923
|
-
display2: newStyled.h2(templateObject_5$
|
|
4924
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4925
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4922
|
+
display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
|
|
4923
|
+
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4924
|
+
heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
|
|
4925
|
+
heading2: newStyled.h2(templateObject_7$c || (templateObject_7$c = __makeTemplateObject([""], [""]))),
|
|
4926
4926
|
heading3: newStyled.h3(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject([""], [""]))),
|
|
4927
4927
|
heading4: newStyled.h4(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject([""], [""]))),
|
|
4928
4928
|
heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4937,7 +4937,7 @@ var TAGS = {
|
|
|
4937
4937
|
}),
|
|
4938
4938
|
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' : ''); }),
|
|
4939
4939
|
};
|
|
4940
|
-
var Text$
|
|
4940
|
+
var Text$8 = function (_a) {
|
|
4941
4941
|
var _b;
|
|
4942
4942
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4943
4943
|
var theme = useTheme();
|
|
@@ -5040,7 +5040,7 @@ var DEFAULTS = {
|
|
|
5040
5040
|
size: 'regular',
|
|
5041
5041
|
},
|
|
5042
5042
|
};
|
|
5043
|
-
var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$
|
|
5043
|
+
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;
|
|
5044
5044
|
|
|
5045
5045
|
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) {
|
|
5046
5046
|
var inline = _a.inline;
|
|
@@ -5052,7 +5052,7 @@ var SizeSelector = function (_a) {
|
|
|
5052
5052
|
display: 'flex',
|
|
5053
5053
|
flexDirection: inline ? 'row' : 'column',
|
|
5054
5054
|
alignItems: inline ? 'center' : 'start',
|
|
5055
|
-
} }, { children: [jsxs(Text$
|
|
5055
|
+
} }, { 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) {
|
|
5056
5056
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
5057
5057
|
return (jsx(SelectorSecondary, { css: {
|
|
5058
5058
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -5418,11 +5418,11 @@ var OutOfStock = function (_a) {
|
|
|
5418
5418
|
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"])));
|
|
5419
5419
|
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5420
5420
|
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"])));
|
|
5421
|
-
var Span = newStyled.span(templateObject_4$
|
|
5422
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5421
|
+
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5422
|
+
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"])));
|
|
5423
5423
|
var Label$3 = function (_a) {
|
|
5424
5424
|
var label = _a.label, values = _a.values;
|
|
5425
|
-
return (jsxs$1(Text$
|
|
5425
|
+
return (jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
5426
5426
|
};
|
|
5427
5427
|
var Option = function (_a) {
|
|
5428
5428
|
var value = _a.value, children = _a.children;
|
|
@@ -5437,7 +5437,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5437
5437
|
Option: Option,
|
|
5438
5438
|
OptionsContainer: OptionsContainer,
|
|
5439
5439
|
});
|
|
5440
|
-
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$
|
|
5440
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$k;
|
|
5441
5441
|
|
|
5442
5442
|
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) {
|
|
5443
5443
|
var borderColor = _a.borderColor;
|
|
@@ -9989,16 +9989,16 @@ var Container$X = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
9989
9989
|
var position = _a.position;
|
|
9990
9990
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9991
9991
|
});
|
|
9992
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9992
|
+
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"])));
|
|
9993
9993
|
var ImagePreviewList = function (_a) {
|
|
9994
9994
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9995
9995
|
return (jsx$1(Container$X, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9996
9996
|
arrowWidth: 0.75,
|
|
9997
9997
|
arrowHeight: 1.25,
|
|
9998
9998
|
arrowPadding: 1.625,
|
|
9999
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9999
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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));
|
|
10000
10000
|
};
|
|
10001
|
-
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$
|
|
10001
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
10002
10002
|
|
|
10003
10003
|
var propTypes = {exports: {}};
|
|
10004
10004
|
|
|
@@ -11598,15 +11598,19 @@ var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
11598
11598
|
});
|
|
11599
11599
|
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'); });
|
|
11600
11600
|
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"])));
|
|
11601
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11601
|
+
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"])));
|
|
11602
|
+
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"])));
|
|
11603
|
+
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"])));
|
|
11604
|
+
var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11602
11605
|
var ImageProductWithTags$1 = function (_a) {
|
|
11606
|
+
var _b, _c;
|
|
11603
11607
|
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;
|
|
11604
|
-
return (jsxs$1(Container$W, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11605
|
-
|
|
11606
|
-
|
|
11607
|
-
|
|
11608
|
+
return (jsxs$1(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')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11609
|
+
alt: image.alt,
|
|
11610
|
+
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11611
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("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), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11608
11612
|
};
|
|
11609
|
-
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$
|
|
11613
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
|
|
11610
11614
|
|
|
11611
11615
|
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"])));
|
|
11612
11616
|
var ProductGallery = function (_a) {
|
|
@@ -12095,17 +12099,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$F || (templateObject_
|
|
|
12095
12099
|
var position = _a.position;
|
|
12096
12100
|
return getArrowContainerMargin(position);
|
|
12097
12101
|
});
|
|
12098
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12102
|
+
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) {
|
|
12099
12103
|
var color = _a.color;
|
|
12100
12104
|
return color;
|
|
12101
12105
|
});
|
|
12102
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12103
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
12106
|
+
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"])));
|
|
12107
|
+
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) {
|
|
12104
12108
|
var color = _a.color;
|
|
12105
12109
|
return color;
|
|
12106
12110
|
});
|
|
12107
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12108
|
-
var templateObject_1$19, templateObject_2$P, templateObject_3$F, templateObject_4$
|
|
12111
|
+
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"])));
|
|
12112
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$F, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
|
|
12109
12113
|
|
|
12110
12114
|
var Tooltip = function (_a) {
|
|
12111
12115
|
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;
|
|
@@ -12419,20 +12423,20 @@ var Container$M = newStyled.div(templateObject_2$M || (templateObject_2$M = __ma
|
|
|
12419
12423
|
var Minimalistic = function (_a) {
|
|
12420
12424
|
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;
|
|
12421
12425
|
var theme = useTheme();
|
|
12422
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$
|
|
12426
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12423
12427
|
};
|
|
12424
12428
|
var templateObject_1$15, templateObject_2$M;
|
|
12425
12429
|
|
|
12426
12430
|
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"])));
|
|
12427
12431
|
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; });
|
|
12428
12432
|
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; });
|
|
12429
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12433
|
+
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"])));
|
|
12430
12434
|
var Simple = function (_a) {
|
|
12431
12435
|
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;
|
|
12432
12436
|
var theme = useTheme();
|
|
12433
12437
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$L, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12434
12438
|
};
|
|
12435
|
-
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$
|
|
12439
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$t;
|
|
12436
12440
|
|
|
12437
12441
|
var Bundle = {
|
|
12438
12442
|
Minimalistic: Minimalistic,
|
|
@@ -12629,13 +12633,13 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
12629
12633
|
return hasValue &&
|
|
12630
12634
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12631
12635
|
});
|
|
12632
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12636
|
+
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) {
|
|
12633
12637
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12634
12638
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12635
12639
|
});
|
|
12636
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
12637
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12638
|
-
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$
|
|
12640
|
+
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"])));
|
|
12641
|
+
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"])));
|
|
12642
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$h, templateObject_6$f;
|
|
12639
12643
|
|
|
12640
12644
|
var BaseInput = function (_a) {
|
|
12641
12645
|
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"]);
|
|
@@ -12772,7 +12776,7 @@ var PaymentMethod = function (_a) {
|
|
|
12772
12776
|
};
|
|
12773
12777
|
var templateObject_1$Y;
|
|
12774
12778
|
|
|
12775
|
-
var Text$
|
|
12779
|
+
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) {
|
|
12776
12780
|
var backgroundColor = _a.backgroundColor;
|
|
12777
12781
|
return backgroundColor;
|
|
12778
12782
|
}, function (_a) {
|
|
@@ -12782,7 +12786,7 @@ var Text$5 = newStyled.h3(templateObject_1$X || (templateObject_1$X = __makeTemp
|
|
|
12782
12786
|
var OfferBanner = function (_a) {
|
|
12783
12787
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
12784
12788
|
var theme = useTheme();
|
|
12785
|
-
return (jsx$1(Text$
|
|
12789
|
+
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12786
12790
|
};
|
|
12787
12791
|
var templateObject_1$X;
|
|
12788
12792
|
|
|
@@ -12801,15 +12805,15 @@ var Currency = newStyled.span(templateObject_3$z || (templateObject_3$z = __make
|
|
|
12801
12805
|
var theme = _a.theme;
|
|
12802
12806
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12803
12807
|
});
|
|
12804
|
-
var Container$F = newStyled.div(templateObject_4$
|
|
12805
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12808
|
+
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; });
|
|
12809
|
+
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) {
|
|
12806
12810
|
var theme = _a.theme;
|
|
12807
12811
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12808
12812
|
}, function (_a) {
|
|
12809
12813
|
var theme = _a.theme;
|
|
12810
12814
|
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12811
12815
|
});
|
|
12812
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12816
|
+
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) {
|
|
12813
12817
|
var theme = _a.theme;
|
|
12814
12818
|
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12815
12819
|
}, function (_a) {
|
|
@@ -12824,7 +12828,7 @@ var Total = function (_a) {
|
|
|
12824
12828
|
var theme = useTheme();
|
|
12825
12829
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12826
12830
|
};
|
|
12827
|
-
var templateObject_1$W, templateObject_2$F, templateObject_3$z, templateObject_4$
|
|
12831
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$g, templateObject_6$e;
|
|
12828
12832
|
|
|
12829
12833
|
var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12830
12834
|
var color = _a.color;
|
|
@@ -12838,7 +12842,7 @@ var Item$2 = newStyled.h4(templateObject_3$y || (templateObject_3$y = __makeTemp
|
|
|
12838
12842
|
var theme = _a.theme;
|
|
12839
12843
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12840
12844
|
});
|
|
12841
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12845
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12842
12846
|
var color = _a.color;
|
|
12843
12847
|
return color;
|
|
12844
12848
|
});
|
|
@@ -12851,7 +12855,7 @@ var Subtotal = function (_a) {
|
|
|
12851
12855
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12852
12856
|
})] }), void 0));
|
|
12853
12857
|
};
|
|
12854
|
-
var templateObject_1$V, templateObject_2$E, templateObject_3$y, templateObject_4$
|
|
12858
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$y, templateObject_4$q;
|
|
12855
12859
|
|
|
12856
12860
|
var Totals = {
|
|
12857
12861
|
Total: Total,
|
|
@@ -12860,39 +12864,48 @@ var Totals = {
|
|
|
12860
12864
|
|
|
12861
12865
|
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; });
|
|
12862
12866
|
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"])));
|
|
12863
|
-
var Text$
|
|
12864
|
-
var Details = newStyled.span(templateObject_4$
|
|
12867
|
+
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; });
|
|
12868
|
+
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; });
|
|
12865
12869
|
var Note = function (_a) {
|
|
12866
12870
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12867
12871
|
var theme = useTheme();
|
|
12868
|
-
return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$
|
|
12872
|
+
return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12869
12873
|
};
|
|
12870
|
-
var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$
|
|
12874
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$p;
|
|
12871
12875
|
|
|
12872
12876
|
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; });
|
|
12873
12877
|
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; });
|
|
12874
12878
|
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({
|
|
12875
12879
|
flexDirection: ['column', 'row'],
|
|
12876
12880
|
}));
|
|
12877
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12881
|
+
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({
|
|
12878
12882
|
margin: ['0', '0 1.25rem'],
|
|
12879
12883
|
marginBottom: ['1.875rem', '0'],
|
|
12880
12884
|
alignItems: ['center', 'flex-start'],
|
|
12881
12885
|
textAlign: ['center', 'inherit'],
|
|
12882
12886
|
width: ['100%', 'inherit'],
|
|
12883
12887
|
}));
|
|
12884
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12888
|
+
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({
|
|
12885
12889
|
marginRight: ['0', '0.438rem'],
|
|
12886
12890
|
marginBottom: ['10px', '0'],
|
|
12887
12891
|
width: ['auto', '1.375rem'],
|
|
12888
12892
|
}));
|
|
12889
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12893
|
+
var SectionTitle = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
12890
12894
|
display: ['block', 'flex'],
|
|
12891
12895
|
}), function (_a) {
|
|
12892
12896
|
var theme = _a.theme;
|
|
12893
12897
|
return theme.colors.shades['700'].color;
|
|
12898
|
+
}, function (_a) {
|
|
12899
|
+
var theme = _a.theme;
|
|
12900
|
+
return theme.component.deliveryDetails.title.fontSize;
|
|
12901
|
+
}, function (_a) {
|
|
12902
|
+
var theme = _a.theme;
|
|
12903
|
+
return theme.component.deliveryDetails.title.lineHeight;
|
|
12904
|
+
}, function (_a) {
|
|
12905
|
+
var theme = _a.theme;
|
|
12906
|
+
return theme.component.deliveryDetails.title.weight;
|
|
12894
12907
|
});
|
|
12895
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12908
|
+
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) {
|
|
12896
12909
|
var theme = _a.theme;
|
|
12897
12910
|
return theme.component.deliveryDetails.SectionDetails
|
|
12898
12911
|
? mediaQueries({
|
|
@@ -12904,17 +12917,17 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$6 || (templateObject_8$6 = __m
|
|
|
12904
12917
|
var DeliveryDetails = function (_a) {
|
|
12905
12918
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12906
12919
|
var theme = useTheme();
|
|
12907
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.
|
|
12920
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12908
12921
|
};
|
|
12909
|
-
var templateObject_1$T, templateObject_2$C, templateObject_3$w, templateObject_4$
|
|
12922
|
+
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;
|
|
12910
12923
|
|
|
12911
12924
|
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"])));
|
|
12912
|
-
var Text$
|
|
12925
|
+
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; });
|
|
12913
12926
|
var ScrollToTop = function (_a) {
|
|
12914
12927
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12915
12928
|
var theme = useTheme();
|
|
12916
12929
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12917
|
-
return (jsxs$1(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$
|
|
12930
|
+
return (jsxs$1(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12918
12931
|
};
|
|
12919
12932
|
var templateObject_1$S, templateObject_2$B;
|
|
12920
12933
|
|
|
@@ -12933,18 +12946,18 @@ var templateObject_1$R, templateObject_2$A;
|
|
|
12933
12946
|
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; });
|
|
12934
12947
|
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; });
|
|
12935
12948
|
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; });
|
|
12936
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12949
|
+
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; });
|
|
12937
12950
|
var SizeTable = function (_a) {
|
|
12938
12951
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
12939
12952
|
var theme = useTheme();
|
|
12940
12953
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12941
12954
|
};
|
|
12942
|
-
var templateObject_1$Q, templateObject_2$z, templateObject_3$v, templateObject_4$
|
|
12955
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$v, templateObject_4$n;
|
|
12943
12956
|
|
|
12944
12957
|
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; });
|
|
12945
12958
|
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; });
|
|
12946
12959
|
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; });
|
|
12947
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12960
|
+
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; });
|
|
12948
12961
|
var SizeChartTable = function (_a) {
|
|
12949
12962
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12950
12963
|
var theme = useTheme();
|
|
@@ -12975,7 +12988,7 @@ var SizeChartTable = function (_a) {
|
|
|
12975
12988
|
backgroundColor: getCellColor(index, cell),
|
|
12976
12989
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(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 (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12977
12990
|
};
|
|
12978
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$u, templateObject_4$
|
|
12991
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$u, templateObject_4$m;
|
|
12979
12992
|
|
|
12980
12993
|
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; });
|
|
12981
12994
|
var Image = function (_a) {
|
|
@@ -13009,7 +13022,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13009
13022
|
margin: '0.063rem 0',
|
|
13010
13023
|
});
|
|
13011
13024
|
});
|
|
13012
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13025
|
+
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) {
|
|
13013
13026
|
var withTag = _a.withTag; _a.theme;
|
|
13014
13027
|
return withTag
|
|
13015
13028
|
? mediaQueries({
|
|
@@ -13018,13 +13031,13 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
13018
13031
|
})
|
|
13019
13032
|
: 'justify-content: end';
|
|
13020
13033
|
});
|
|
13021
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13034
|
+
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"])));
|
|
13022
13035
|
var SimpleOrderItem = function (_a) {
|
|
13023
13036
|
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;
|
|
13024
13037
|
var theme = useTheme();
|
|
13025
13038
|
return (jsxs$1(Container$B, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13026
13039
|
};
|
|
13027
|
-
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$
|
|
13040
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$l, templateObject_5$e;
|
|
13028
13041
|
|
|
13029
13042
|
function formatDate(date) {
|
|
13030
13043
|
var day = date.getDate();
|
|
@@ -13036,10 +13049,10 @@ function formatDate(date) {
|
|
|
13036
13049
|
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"])));
|
|
13037
13050
|
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"])));
|
|
13038
13051
|
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"])));
|
|
13039
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13040
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13041
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13042
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13052
|
+
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"])));
|
|
13053
|
+
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"])));
|
|
13054
|
+
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"])));
|
|
13055
|
+
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"])));
|
|
13043
13056
|
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"])));
|
|
13044
13057
|
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"])));
|
|
13045
13058
|
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"])));
|
|
@@ -13056,15 +13069,15 @@ var Review$1 = function (_a) {
|
|
|
13056
13069
|
var theme = useTheme();
|
|
13057
13070
|
return (jsxs$1(Container$A, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$2, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxs$1(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13058
13071
|
};
|
|
13059
|
-
var templateObject_1$M, templateObject_2$w, templateObject_3$s, templateObject_4$
|
|
13072
|
+
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;
|
|
13060
13073
|
|
|
13061
13074
|
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"])));
|
|
13062
13075
|
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"])));
|
|
13063
13076
|
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"])));
|
|
13064
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13065
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13066
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13067
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$
|
|
13077
|
+
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"])));
|
|
13078
|
+
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; });
|
|
13079
|
+
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; });
|
|
13080
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13068
13081
|
|
|
13069
13082
|
var DropdownListIcons = function (_a) {
|
|
13070
13083
|
var items = _a.items;
|
|
@@ -13094,15 +13107,15 @@ var Row = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTempla
|
|
|
13094
13107
|
return props.rightToLeft &&
|
|
13095
13108
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13096
13109
|
});
|
|
13097
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13098
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13099
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13110
|
+
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; });
|
|
13111
|
+
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; });
|
|
13112
|
+
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; });
|
|
13100
13113
|
var CrossSellCheckbox = function (_a) {
|
|
13101
13114
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13102
13115
|
var theme = useTheme();
|
|
13103
13116
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13104
13117
|
};
|
|
13105
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$
|
|
13118
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13106
13119
|
|
|
13107
13120
|
var index = /*#__PURE__*/Object.freeze({
|
|
13108
13121
|
__proto__: null,
|
|
@@ -13158,14 +13171,14 @@ var BuyNowPayLater = function (_a) {
|
|
|
13158
13171
|
console.error('Icon', iconName, 'not found');
|
|
13159
13172
|
return null;
|
|
13160
13173
|
}
|
|
13161
|
-
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(Text$
|
|
13174
|
+
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(Text$8, __assign$1({ variant: "body", style: { fontSize: fontSize }, testId: "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13162
13175
|
};
|
|
13163
13176
|
var templateObject_1$H, templateObject_2$t;
|
|
13164
13177
|
|
|
13165
13178
|
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"])));
|
|
13166
13179
|
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"])));
|
|
13167
13180
|
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"])));
|
|
13168
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13181
|
+
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) {
|
|
13169
13182
|
var index = _a.index;
|
|
13170
13183
|
return "".concat(6 + 3 * index, "px");
|
|
13171
13184
|
}, function (_a) {
|
|
@@ -13176,7 +13189,7 @@ var StrengthBars = function (_a) {
|
|
|
13176
13189
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13177
13190
|
return (jsxs$1(Container$x, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13178
13191
|
};
|
|
13179
|
-
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$
|
|
13192
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h;
|
|
13180
13193
|
|
|
13181
13194
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13182
13195
|
var width = _a.width, height = _a.height;
|
|
@@ -13189,7 +13202,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13189
13202
|
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"])));
|
|
13190
13203
|
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"])));
|
|
13191
13204
|
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"])));
|
|
13192
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13205
|
+
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; });
|
|
13193
13206
|
var getStylesBySize$1 = function (size) {
|
|
13194
13207
|
switch (size) {
|
|
13195
13208
|
case ComponentSize.Medium:
|
|
@@ -13215,15 +13228,15 @@ var getStylesBySize$1 = function (size) {
|
|
|
13215
13228
|
};
|
|
13216
13229
|
}
|
|
13217
13230
|
};
|
|
13218
|
-
var TopTagContainer$2 = newStyled.div(templateObject_5$
|
|
13231
|
+
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) {
|
|
13219
13232
|
var style = _a.style;
|
|
13220
13233
|
return style.width;
|
|
13221
13234
|
});
|
|
13222
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_6$
|
|
13235
|
+
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) {
|
|
13223
13236
|
var style = _a.style;
|
|
13224
13237
|
return style.width;
|
|
13225
13238
|
});
|
|
13226
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
13239
|
+
var MarginTopContainer = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13227
13240
|
var ProductItemMobile = function (_a) {
|
|
13228
13241
|
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 ? {
|
|
13229
13242
|
display: false,
|
|
@@ -13258,7 +13271,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13258
13271
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13259
13272
|
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));
|
|
13260
13273
|
};
|
|
13261
|
-
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$
|
|
13274
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
13262
13275
|
|
|
13263
13276
|
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"])));
|
|
13264
13277
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -13389,7 +13402,7 @@ var IconContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n =
|
|
|
13389
13402
|
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13390
13403
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13391
13404
|
}));
|
|
13392
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13405
|
+
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) {
|
|
13393
13406
|
var bold = _a.bold;
|
|
13394
13407
|
return (bold ? '700' : '500');
|
|
13395
13408
|
}, function (_a) {
|
|
@@ -13406,7 +13419,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
13406
13419
|
var background = _a.background;
|
|
13407
13420
|
return background || 'unset';
|
|
13408
13421
|
});
|
|
13409
|
-
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$
|
|
13422
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$m, templateObject_4$f;
|
|
13410
13423
|
|
|
13411
13424
|
var Pagination = function (_a) {
|
|
13412
13425
|
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;
|
|
@@ -13488,7 +13501,7 @@ var Description$2 = newStyled.div({
|
|
|
13488
13501
|
var ProductItem = function (_a) {
|
|
13489
13502
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13490
13503
|
var theme = useTheme();
|
|
13491
|
-
return (jsxs$1(Container$s, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$2, { children: [jsx$1(Text$
|
|
13504
|
+
return (jsxs$1(Container$s, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$2, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13492
13505
|
};
|
|
13493
13506
|
var templateObject_1$z;
|
|
13494
13507
|
|
|
@@ -13499,7 +13512,7 @@ var Container$r = newStyled.div({
|
|
|
13499
13512
|
});
|
|
13500
13513
|
var Footer = function (_a) {
|
|
13501
13514
|
var text = _a.text, onClick = _a.onClick;
|
|
13502
|
-
return (jsx$1(Container$r, { children: jsx$1(Text$
|
|
13515
|
+
return (jsx$1(Container$r, { children: jsx$1(Text$8, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13503
13516
|
};
|
|
13504
13517
|
|
|
13505
13518
|
var Ul = newStyled.ul({
|
|
@@ -13529,7 +13542,7 @@ var Header$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeT
|
|
|
13529
13542
|
var ResultsPanel = function (_a) {
|
|
13530
13543
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13531
13544
|
var theme = useTheme();
|
|
13532
|
-
return (jsxs$1(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
13545
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13533
13546
|
};
|
|
13534
13547
|
var templateObject_1$y, templateObject_2$m, templateObject_3$l;
|
|
13535
13548
|
|
|
@@ -13719,6 +13732,10 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
13719
13732
|
// max-height: 31.875rem;
|
|
13720
13733
|
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'); });
|
|
13721
13734
|
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"])));
|
|
13735
|
+
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"])));
|
|
13736
|
+
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"])));
|
|
13737
|
+
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"])));
|
|
13738
|
+
var Text$3 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13722
13739
|
var settings = {
|
|
13723
13740
|
dots: true,
|
|
13724
13741
|
infinite: false,
|
|
@@ -13731,11 +13748,29 @@ var ImageProductWithTags = function (_a) {
|
|
|
13731
13748
|
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;
|
|
13732
13749
|
var slick = useRef(null);
|
|
13733
13750
|
var sliderWrapper = useRef(null);
|
|
13751
|
+
var iframeRef = useRef(null);
|
|
13752
|
+
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13734
13753
|
usePreventVerticalScroll(sliderWrapper);
|
|
13735
13754
|
var onButtonClick = useCallback(function (i) {
|
|
13736
13755
|
var _a;
|
|
13737
13756
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
13738
13757
|
}, [slick]);
|
|
13758
|
+
var _sendCommandToIframe = function (command) {
|
|
13759
|
+
var iframe = document.getElementById('vwo-video');
|
|
13760
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
13761
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
13762
|
+
event: 'command',
|
|
13763
|
+
func: command,
|
|
13764
|
+
}), '*');
|
|
13765
|
+
};
|
|
13766
|
+
var _stopVideo = function () {
|
|
13767
|
+
_sendCommandToIframe('stopVideo');
|
|
13768
|
+
setIsPlaying(false);
|
|
13769
|
+
};
|
|
13770
|
+
var _playVideo = function () {
|
|
13771
|
+
_sendCommandToIframe('playVideo');
|
|
13772
|
+
setIsPlaying(true);
|
|
13773
|
+
};
|
|
13739
13774
|
useEffect(function () {
|
|
13740
13775
|
var _a;
|
|
13741
13776
|
if (selectedValue) {
|
|
@@ -13745,8 +13780,19 @@ var ImageProductWithTags = function (_a) {
|
|
|
13745
13780
|
}
|
|
13746
13781
|
}
|
|
13747
13782
|
}, [images, selectedValue]);
|
|
13748
|
-
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({
|
|
13749
|
-
|
|
13783
|
+
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13784
|
+
var _a;
|
|
13785
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
13786
|
+
// @ts-ignore
|
|
13787
|
+
var urlParams = new URLSearchParams((_a = document.getElementById('vwo-video')) === null || _a === void 0 ? void 0 : _a.src);
|
|
13788
|
+
var autoplay = urlParams.get('autoplay') === '1';
|
|
13789
|
+
var vwoIndex = Number(urlParams.get('vwo-index'));
|
|
13790
|
+
e == vwoIndex && autoplay ? _playVideo() : _stopVideo();
|
|
13791
|
+
} }, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13792
|
+
var _a, _b;
|
|
13793
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsx$1(Fragment$1, { children: jsxs$1(Video, { children: [jsx$1("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), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
13794
|
+
isPlaying ? _stopVideo() : _playVideo();
|
|
13795
|
+
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0) }, void 0))] }, image.key));
|
|
13750
13796
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13751
13797
|
};
|
|
13752
13798
|
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
@@ -13784,7 +13830,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13784
13830
|
};
|
|
13785
13831
|
}, [preventTouch, ref, touchStart]);
|
|
13786
13832
|
}
|
|
13787
|
-
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13833
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13788
13834
|
|
|
13789
13835
|
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"])));
|
|
13790
13836
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -17846,15 +17892,15 @@ var PackCard$1 = function (_a) {
|
|
|
17846
17892
|
.then(function (icon) { return setIcon(icon); })
|
|
17847
17893
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17848
17894
|
}, [pack.meta.icon]);
|
|
17849
|
-
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
17895
|
+
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$8, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$1, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17850
17896
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17851
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$
|
|
17897
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$8, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17852
17898
|
locale: 'en-US',
|
|
17853
17899
|
currency: currencyCode || 'USD',
|
|
17854
|
-
}) }), void 0), jsxs$1(Text$
|
|
17900
|
+
}) }), void 0), jsxs$1(Text$8, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
17855
17901
|
locale: 'en-US',
|
|
17856
17902
|
currency: currencyCode || 'USD',
|
|
17857
|
-
})] }), void 0)] }, void 0), jsxs$1(Text$
|
|
17903
|
+
})] }), void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17858
17904
|
locale: 'en-US',
|
|
17859
17905
|
currency: currencyCode || 'USD',
|
|
17860
17906
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -17882,10 +17928,10 @@ var PackCard = function (_a) {
|
|
|
17882
17928
|
.then(function (icon) { return setIcon(icon); })
|
|
17883
17929
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17884
17930
|
}, [pack.meta.icon]);
|
|
17885
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
17931
|
+
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$8, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$8, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
17886
17932
|
locale: 'en-US',
|
|
17887
17933
|
currency: currencyCode || 'USD',
|
|
17888
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$
|
|
17934
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$8, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17889
17935
|
locale: 'en-US',
|
|
17890
17936
|
currency: currencyCode || 'USD',
|
|
17891
17937
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
@@ -18038,7 +18084,7 @@ var NormalSpan = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
18038
18084
|
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"])));
|
|
18039
18085
|
var SearchNavigation = function (_a) {
|
|
18040
18086
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18041
|
-
return (jsxs$1(Container$g, { children: [jsxs$1(Text$
|
|
18087
|
+
return (jsxs$1(Container$g, { children: [jsxs$1(Text$8, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
18042
18088
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18043
18089
|
}) }, void 0)] }, void 0));
|
|
18044
18090
|
};
|
|
@@ -18132,7 +18178,7 @@ var IconsWithTitle = function (_a) {
|
|
|
18132
18178
|
textAlign: 'center',
|
|
18133
18179
|
lineHeight: '18px',
|
|
18134
18180
|
};
|
|
18135
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$
|
|
18181
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18136
18182
|
};
|
|
18137
18183
|
|
|
18138
18184
|
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"])));
|
|
@@ -18145,7 +18191,7 @@ var ImageVideo = function (_a) {
|
|
|
18145
18191
|
var handleOnClick = function () {
|
|
18146
18192
|
setOpened(true);
|
|
18147
18193
|
};
|
|
18148
|
-
return (jsxs$1(Fragment$1, { children: [jsxs$1(ImageWrapper$1, { children: [jsx$1(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$
|
|
18194
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(ImageWrapper$1, { children: [jsx$1(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$8, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$8, __assign$1({ variant: "link", style: {
|
|
18149
18195
|
position: 'absolute',
|
|
18150
18196
|
top: '10px',
|
|
18151
18197
|
right: '10px',
|
|
@@ -18167,12 +18213,12 @@ var TextWithImage = function (_a) {
|
|
|
18167
18213
|
var _b, _c, _d, _e;
|
|
18168
18214
|
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"]);
|
|
18169
18215
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18170
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
18216
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$8, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
18171
18217
|
? titleStyle
|
|
18172
18218
|
: {
|
|
18173
18219
|
color: '#000000',
|
|
18174
18220
|
textAlign: 'center',
|
|
18175
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
18221
|
+
} }, { children: title }), void 0)) : (jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
18176
18222
|
? titleStyle
|
|
18177
18223
|
: {
|
|
18178
18224
|
color: '#000000',
|
|
@@ -18182,7 +18228,7 @@ var TextWithImage = function (_a) {
|
|
|
18182
18228
|
// @ts-ignore
|
|
18183
18229
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
18184
18230
|
};
|
|
18185
|
-
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$
|
|
18231
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
18186
18232
|
backgroundColor: props.btnBGColor,
|
|
18187
18233
|
color: '#ffffff',
|
|
18188
18234
|
border: props.btnBGColor,
|
|
@@ -18317,7 +18363,7 @@ var StyledTitle = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __ma
|
|
|
18317
18363
|
var ImageCardWithDescription = function (_a) {
|
|
18318
18364
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
18319
18365
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18320
|
-
return (jsxs$1(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$
|
|
18366
|
+
return (jsxs$1(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18321
18367
|
};
|
|
18322
18368
|
var templateObject_1$c, templateObject_2$8, templateObject_3$7;
|
|
18323
18369
|
|
|
@@ -18415,7 +18461,7 @@ var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __ma
|
|
|
18415
18461
|
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"])));
|
|
18416
18462
|
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"])));
|
|
18417
18463
|
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"])));
|
|
18418
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18464
|
+
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"])));
|
|
18419
18465
|
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"])));
|
|
18420
18466
|
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) {
|
|
18421
18467
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18425,7 +18471,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18425
18471
|
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;
|
|
18426
18472
|
var starsNumber = 5;
|
|
18427
18473
|
var theme = useTheme();
|
|
18428
|
-
return (jsxs$1(Container$6, { children: [jsx$1(Text$
|
|
18474
|
+
return (jsxs$1(Container$6, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18429
18475
|
};
|
|
18430
18476
|
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18431
18477
|
|
|
@@ -18745,8 +18791,9 @@ var Container$4 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __ma
|
|
|
18745
18791
|
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'); });
|
|
18746
18792
|
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"])));
|
|
18747
18793
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18794
|
+
var _b, _c;
|
|
18748
18795
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18749
|
-
return (jsxs$1(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18796
|
+
return (jsxs$1(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')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
18750
18797
|
});
|
|
18751
18798
|
var templateObject_1$7, templateObject_2$3, templateObject_3$2;
|
|
18752
18799
|
|
|
@@ -18855,9 +18902,9 @@ var HurryUp = function (_a) {
|
|
|
18855
18902
|
seconds: seconds,
|
|
18856
18903
|
};
|
|
18857
18904
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18858
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$
|
|
18905
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18859
18906
|
};
|
|
18860
18907
|
var templateObject_1;
|
|
18861
18908
|
|
|
18862
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$
|
|
18909
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18863
18910
|
//# sourceMappingURL=index.esm.js.map
|