@trafilea/afrodita-components 5.0.0-beta.259 → 5.0.0-beta.261
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.esm.js +58 -57
- package/build/index.esm.js.map +1 -1
- package/build/index.js +58 -57
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +14 -9
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4845,7 +4845,7 @@ var templateObject_1$1x, templateObject_2$10;
|
|
|
4845
4845
|
|
|
4846
4846
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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; });
|
|
4847
4847
|
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; });
|
|
4848
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4848
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
4849
4849
|
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"])));
|
|
4850
4850
|
var DropdownDialog = function (_a) {
|
|
4851
4851
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4854,7 +4854,7 @@ var DropdownDialog = function (_a) {
|
|
|
4854
4854
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4855
4855
|
}) }), void 0) }), void 0));
|
|
4856
4856
|
};
|
|
4857
|
-
var templateObject_1$1w, templateObject_2$$, templateObject_3$
|
|
4857
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$P, templateObject_4$z;
|
|
4858
4858
|
|
|
4859
4859
|
var getStylesBySize$a = function (size, theme) {
|
|
4860
4860
|
switch (size) {
|
|
@@ -4924,7 +4924,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4924
4924
|
var TAGS = {
|
|
4925
4925
|
hero1: newStyled.h1(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""]))),
|
|
4926
4926
|
hero2: newStyled.h2(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject([""], [""]))),
|
|
4927
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4927
|
+
hero3: newStyled.h3(templateObject_3$O || (templateObject_3$O = __makeTemplateObject([""], [""]))),
|
|
4928
4928
|
display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
|
|
4929
4929
|
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4930
4930
|
heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
|
|
@@ -5054,7 +5054,7 @@ var DEFAULTS = {
|
|
|
5054
5054
|
size: 'regular',
|
|
5055
5055
|
},
|
|
5056
5056
|
};
|
|
5057
|
-
var templateObject_1$1v, templateObject_2$_, templateObject_3$
|
|
5057
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$O, 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, templateObject_18$2, templateObject_19$1;
|
|
5058
5058
|
|
|
5059
5059
|
var ButtonsContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
5060
5060
|
var inline = _a.inline;
|
|
@@ -5122,12 +5122,12 @@ var templateObject_1$1t;
|
|
|
5122
5122
|
|
|
5123
5123
|
var Container$11 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
5124
5124
|
var P$3 = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5125
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5125
|
+
var PercentageSpan = newStyled.span(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
5126
5126
|
var SizeFitGuide = function (_a) {
|
|
5127
5127
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5128
5128
|
return (jsxs$1(Container$11, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5129
5129
|
};
|
|
5130
|
-
var templateObject_1$1s, templateObject_2$Z, templateObject_3$
|
|
5130
|
+
var templateObject_1$1s, templateObject_2$Z, templateObject_3$N;
|
|
5131
5131
|
|
|
5132
5132
|
var getStylesBySize$8 = function (size) {
|
|
5133
5133
|
switch (size) {
|
|
@@ -5191,13 +5191,13 @@ var H3$3 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5191
5191
|
var size = _a.size;
|
|
5192
5192
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5193
5193
|
});
|
|
5194
|
-
var Now = newStyled(H3$3)(templateObject_3$
|
|
5194
|
+
var Now = newStyled(H3$3)(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: none;\n margin-right: 0.25rem;\n"], ["\n display: none;\n margin-right: 0.25rem;\n"])));
|
|
5195
5195
|
var DiscountTag = function (_a) {
|
|
5196
5196
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5197
5197
|
var theme = useTheme();
|
|
5198
5198
|
return (jsxs$1(Container$10, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: [jsx$1(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
|
|
5199
5199
|
};
|
|
5200
|
-
var templateObject_1$1r, templateObject_2$Y, templateObject_3$
|
|
5200
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$M;
|
|
5201
5201
|
|
|
5202
5202
|
var getStylesBySize$7 = function (size) {
|
|
5203
5203
|
switch (size) {
|
|
@@ -5257,7 +5257,7 @@ var Price = newStyled.p(templateObject_2$X || (templateObject_2$X = __makeTempla
|
|
|
5257
5257
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5258
5258
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5259
5259
|
});
|
|
5260
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5260
|
+
var TagContainer = newStyled.p(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5261
5261
|
var _b;
|
|
5262
5262
|
var size = _a.size;
|
|
5263
5263
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5280,7 +5280,7 @@ var PriceLabel = function (_a) {
|
|
|
5280
5280
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5281
5281
|
return (jsxs$1(Container$$, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5282
5282
|
};
|
|
5283
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5283
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L;
|
|
5284
5284
|
|
|
5285
5285
|
var getStylesBySize$6 = function (size) {
|
|
5286
5286
|
switch (size) {
|
|
@@ -5435,7 +5435,7 @@ var OutOfStock = function (_a) {
|
|
|
5435
5435
|
|
|
5436
5436
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5437
5437
|
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5438
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5438
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
5439
5439
|
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5440
5440
|
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"])));
|
|
5441
5441
|
var Label$3 = function (_a) {
|
|
@@ -5455,7 +5455,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5455
5455
|
Option: Option,
|
|
5456
5456
|
OptionsContainer: OptionsContainer,
|
|
5457
5457
|
});
|
|
5458
|
-
var templateObject_1$1n, templateObject_2$V, templateObject_3$
|
|
5458
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$K, templateObject_4$x, templateObject_5$k;
|
|
5459
5459
|
|
|
5460
5460
|
var Container$Z = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
5461
5461
|
var borderColor = _a.borderColor;
|
|
@@ -10003,7 +10003,7 @@ var SliderNavigation = function (_a) {
|
|
|
10003
10003
|
|
|
10004
10004
|
var horizontalStyles = css(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
10005
10005
|
var verticalStyles = css(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
10006
|
-
var Container$Y = newStyled.div(templateObject_3$
|
|
10006
|
+
var Container$Y = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
10007
10007
|
var position = _a.position;
|
|
10008
10008
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10009
10009
|
});
|
|
@@ -10016,7 +10016,7 @@ var ImagePreviewList = function (_a) {
|
|
|
10016
10016
|
arrowPadding: 1.625,
|
|
10017
10017
|
}, 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 === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : 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 === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10018
10018
|
};
|
|
10019
|
-
var templateObject_1$1j, templateObject_2$T, templateObject_3$
|
|
10019
|
+
var templateObject_1$1j, templateObject_2$T, templateObject_3$J, templateObject_4$w;
|
|
10020
10020
|
|
|
10021
10021
|
var propTypes = {exports: {}};
|
|
10022
10022
|
|
|
@@ -11615,7 +11615,7 @@ var Container$X = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
11615
11615
|
"\n border-radius: 40px;\n ";
|
|
11616
11616
|
});
|
|
11617
11617
|
var TopTagContainer$3 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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'); });
|
|
11618
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11618
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11619
11619
|
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"])));
|
|
11620
11620
|
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: 666px;\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: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11621
11621
|
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"])));
|
|
@@ -11628,7 +11628,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11628
11628
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11629
11629
|
}, 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));
|
|
11630
11630
|
};
|
|
11631
|
-
var templateObject_1$1i, templateObject_2$S, templateObject_3$
|
|
11631
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$I, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
|
|
11632
11632
|
|
|
11633
11633
|
var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
11634
11634
|
var ProductGallery = function (_a) {
|
|
@@ -12107,7 +12107,7 @@ var ContentWrapper = newStyled.div(templateObject_2$Q || (templateObject_2$Q = _
|
|
|
12107
12107
|
var backgroundColor = _a.backgroundColor;
|
|
12108
12108
|
return backgroundColor;
|
|
12109
12109
|
});
|
|
12110
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12110
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
12111
12111
|
var position = _a.position;
|
|
12112
12112
|
return getArrowRotation(position);
|
|
12113
12113
|
}, function (_a) {
|
|
@@ -12127,7 +12127,7 @@ var Title$7 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTem
|
|
|
12127
12127
|
return color;
|
|
12128
12128
|
});
|
|
12129
12129
|
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"])));
|
|
12130
|
-
var templateObject_1$1a, templateObject_2$Q, templateObject_3$
|
|
12130
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
|
|
12131
12131
|
|
|
12132
12132
|
var Tooltip = function (_a) {
|
|
12133
12133
|
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;
|
|
@@ -12305,7 +12305,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12305
12305
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12306
12306
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12307
12307
|
]; });
|
|
12308
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12308
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
12309
12309
|
var RadioPrimary = function (_a) {
|
|
12310
12310
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
12311
12311
|
var theme = useTheme();
|
|
@@ -12315,7 +12315,7 @@ var RadioPrimary = function (_a) {
|
|
|
12315
12315
|
};
|
|
12316
12316
|
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12317
12317
|
};
|
|
12318
|
-
var templateObject_1$18, templateObject_2$P, templateObject_3$
|
|
12318
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$G;
|
|
12319
12319
|
|
|
12320
12320
|
/* base styles & size variants */
|
|
12321
12321
|
var CustomRadioStyles$1 = {
|
|
@@ -12390,7 +12390,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12390
12390
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12391
12391
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12392
12392
|
]; });
|
|
12393
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12393
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12394
12394
|
var theme = _a.theme;
|
|
12395
12395
|
return theme.component.radio.textSize;
|
|
12396
12396
|
}, function (_a) {
|
|
@@ -12406,7 +12406,7 @@ var RadioInput = function (_a) {
|
|
|
12406
12406
|
};
|
|
12407
12407
|
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$O, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$3, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12408
12408
|
};
|
|
12409
|
-
var templateObject_1$17, templateObject_2$O, templateObject_3$
|
|
12409
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$F;
|
|
12410
12410
|
|
|
12411
12411
|
var RadioGroupInput = function (_a) {
|
|
12412
12412
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12495,7 +12495,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12495
12495
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12496
12496
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12497
12497
|
]; });
|
|
12498
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12498
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12499
12499
|
var theme = _a.theme;
|
|
12500
12500
|
return theme.component.radio.textSize;
|
|
12501
12501
|
}, function (_a) {
|
|
@@ -12511,7 +12511,7 @@ var ClubRadioInput = function (_a) {
|
|
|
12511
12511
|
};
|
|
12512
12512
|
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$N, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12513
12513
|
};
|
|
12514
|
-
var templateObject_1$16, templateObject_2$N, templateObject_3$
|
|
12514
|
+
var templateObject_1$16, templateObject_2$N, templateObject_3$E;
|
|
12515
12515
|
|
|
12516
12516
|
var ClubRadioGroupInput = function (_a) {
|
|
12517
12517
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12536,14 +12536,14 @@ var templateObject_1$15, templateObject_2$M;
|
|
|
12536
12536
|
|
|
12537
12537
|
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"])));
|
|
12538
12538
|
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; });
|
|
12539
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12539
|
+
var Details$1 = newStyled.span(templateObject_3$D || (templateObject_3$D = __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; });
|
|
12540
12540
|
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"])));
|
|
12541
12541
|
var Simple = function (_a) {
|
|
12542
12542
|
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;
|
|
12543
12543
|
var theme = useTheme();
|
|
12544
12544
|
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));
|
|
12545
12545
|
};
|
|
12546
|
-
var templateObject_1$14, templateObject_2$L, templateObject_3$
|
|
12546
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$D, templateObject_4$t;
|
|
12547
12547
|
|
|
12548
12548
|
var Bundle = {
|
|
12549
12549
|
Minimalistic: Minimalistic,
|
|
@@ -12685,7 +12685,7 @@ var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __
|
|
|
12685
12685
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12686
12686
|
});
|
|
12687
12687
|
var StyledLabel = newStyled.label(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
12688
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12688
|
+
var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12689
12689
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12690
12690
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12691
12691
|
}, function (_a) {
|
|
@@ -12758,7 +12758,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5
|
|
|
12758
12758
|
return theme.component.input.lineHeight;
|
|
12759
12759
|
});
|
|
12760
12760
|
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"])));
|
|
12761
|
-
var templateObject_1$11, templateObject_2$J, templateObject_3$
|
|
12761
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$C, templateObject_4$s, templateObject_5$h, templateObject_6$f;
|
|
12762
12762
|
|
|
12763
12763
|
var BaseInput = function (_a) {
|
|
12764
12764
|
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"]);
|
|
@@ -12828,12 +12828,12 @@ var SuccessContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ =
|
|
|
12828
12828
|
return (size === 'small' ? '36px' : '');
|
|
12829
12829
|
});
|
|
12830
12830
|
var SuccessMessage = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
12831
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12831
|
+
var SuccessText = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
12832
12832
|
var Success = function (_a) {
|
|
12833
12833
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12834
12834
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12835
12835
|
};
|
|
12836
|
-
var templateObject_1$$, templateObject_2$H, templateObject_3$
|
|
12836
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$B;
|
|
12837
12837
|
|
|
12838
12838
|
var ButtonContainer = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12839
12839
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -12911,7 +12911,7 @@ var templateObject_1$X;
|
|
|
12911
12911
|
|
|
12912
12912
|
var Wrapper$2 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12913
12913
|
var GrandTotal = newStyled.h1(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12914
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12914
|
+
var Currency = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12915
12915
|
var theme = _a.theme;
|
|
12916
12916
|
return theme.component.total.basicTotal.currency.color;
|
|
12917
12917
|
}, function (_a) {
|
|
@@ -12947,14 +12947,14 @@ var Total = function (_a) {
|
|
|
12947
12947
|
var theme = useTheme();
|
|
12948
12948
|
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));
|
|
12949
12949
|
};
|
|
12950
|
-
var templateObject_1$W, templateObject_2$F, templateObject_3$
|
|
12950
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r, templateObject_5$g, templateObject_6$e;
|
|
12951
12951
|
|
|
12952
12952
|
var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12953
12953
|
var color = _a.color;
|
|
12954
12954
|
return color;
|
|
12955
12955
|
});
|
|
12956
12956
|
var ItemContainer = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12957
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12957
|
+
var Item$2 = newStyled.h4(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12958
12958
|
var theme = _a.theme;
|
|
12959
12959
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12960
12960
|
}, function (_a) {
|
|
@@ -12974,7 +12974,7 @@ var Subtotal = function (_a) {
|
|
|
12974
12974
|
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));
|
|
12975
12975
|
})] }), void 0));
|
|
12976
12976
|
};
|
|
12977
|
-
var templateObject_1$V, templateObject_2$E, templateObject_3$
|
|
12977
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$z, templateObject_4$q;
|
|
12978
12978
|
|
|
12979
12979
|
var Totals = {
|
|
12980
12980
|
Total: Total,
|
|
@@ -12983,21 +12983,21 @@ var Totals = {
|
|
|
12983
12983
|
|
|
12984
12984
|
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; });
|
|
12985
12985
|
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"])));
|
|
12986
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
12986
|
+
var Text$5 = newStyled.p(templateObject_3$y || (templateObject_3$y = __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; });
|
|
12987
12987
|
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; });
|
|
12988
12988
|
var Note = function (_a) {
|
|
12989
12989
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12990
12990
|
var theme = useTheme();
|
|
12991
12991
|
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));
|
|
12992
12992
|
};
|
|
12993
|
-
var templateObject_1$U, templateObject_2$D, templateObject_3$
|
|
12993
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$y, templateObject_4$p;
|
|
12994
12994
|
|
|
12995
12995
|
var Title$5 = newStyled.h1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
12996
12996
|
var theme = _a.theme;
|
|
12997
|
-
return "\n font-size: ".concat(theme.component.deliveryDetails.
|
|
12997
|
+
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
12998
12998
|
});
|
|
12999
|
-
var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin:
|
|
13000
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12999
|
+
var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
13000
|
+
var Row$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __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({
|
|
13001
13001
|
flexDirection: ['column', 'row'],
|
|
13002
13002
|
}));
|
|
13003
13003
|
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({
|
|
@@ -13035,7 +13035,7 @@ var DeliveryDetails = function (_a) {
|
|
|
13035
13035
|
var theme = useTheme();
|
|
13036
13036
|
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));
|
|
13037
13037
|
};
|
|
13038
|
-
var templateObject_1$T, templateObject_2$C, templateObject_3$
|
|
13038
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$f, templateObject_6$d, templateObject_7$9, templateObject_8$6;
|
|
13039
13039
|
|
|
13040
13040
|
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"])));
|
|
13041
13041
|
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; });
|
|
@@ -13061,18 +13061,18 @@ var templateObject_1$R, templateObject_2$A;
|
|
|
13061
13061
|
|
|
13062
13062
|
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; });
|
|
13063
13063
|
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; });
|
|
13064
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13064
|
+
var TableHead$1 = newStyled.th(templateObject_3$w || (templateObject_3$w = __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; });
|
|
13065
13065
|
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; });
|
|
13066
13066
|
var SizeTable = function (_a) {
|
|
13067
13067
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13068
13068
|
var theme = useTheme();
|
|
13069
13069
|
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));
|
|
13070
13070
|
};
|
|
13071
|
-
var templateObject_1$Q, templateObject_2$z, templateObject_3$
|
|
13071
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$w, templateObject_4$n;
|
|
13072
13072
|
|
|
13073
13073
|
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; });
|
|
13074
13074
|
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; });
|
|
13075
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13075
|
+
var TableHead = 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 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; });
|
|
13076
13076
|
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; });
|
|
13077
13077
|
var SizeChartTable = function (_a) {
|
|
13078
13078
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -13104,7 +13104,7 @@ var SizeChartTable = function (_a) {
|
|
|
13104
13104
|
backgroundColor: getCellColor(index, cell),
|
|
13105
13105
|
}, 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));
|
|
13106
13106
|
};
|
|
13107
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$
|
|
13107
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$v, templateObject_4$m;
|
|
13108
13108
|
|
|
13109
13109
|
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; });
|
|
13110
13110
|
var Image = function (_a) {
|
|
@@ -13116,15 +13116,15 @@ var templateObject_1$O;
|
|
|
13116
13116
|
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
13117
13117
|
var IMAGE_WIDTH = '63px';
|
|
13118
13118
|
var ImageContainer$4 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
13119
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13119
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
13120
13120
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13121
13121
|
}), IMAGE_WIDTH);
|
|
13122
13122
|
var Title$4 = newStyled.h2(function (_a) {
|
|
13123
13123
|
var color = _a.color;
|
|
13124
13124
|
return ({
|
|
13125
13125
|
fontWeight: 600,
|
|
13126
|
-
fontSize: '
|
|
13127
|
-
lineHeight: '1.
|
|
13126
|
+
fontSize: '1rem',
|
|
13127
|
+
lineHeight: '1.5rem',
|
|
13128
13128
|
color: color,
|
|
13129
13129
|
margin: '0.063rem 0',
|
|
13130
13130
|
});
|
|
@@ -13154,7 +13154,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
13154
13154
|
var theme = useTheme();
|
|
13155
13155
|
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));
|
|
13156
13156
|
};
|
|
13157
|
-
var templateObject_1$N, templateObject_2$x, templateObject_3$
|
|
13157
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e;
|
|
13158
13158
|
|
|
13159
13159
|
function formatDate(date) {
|
|
13160
13160
|
var day = date.getDate();
|
|
@@ -13165,7 +13165,7 @@ function formatDate(date) {
|
|
|
13165
13165
|
|
|
13166
13166
|
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"])));
|
|
13167
13167
|
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"])));
|
|
13168
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13168
|
+
var Content$2 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13169
13169
|
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"])));
|
|
13170
13170
|
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"])));
|
|
13171
13171
|
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"])));
|
|
@@ -13186,15 +13186,15 @@ var Review$1 = function (_a) {
|
|
|
13186
13186
|
var theme = useTheme();
|
|
13187
13187
|
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));
|
|
13188
13188
|
};
|
|
13189
|
-
var templateObject_1$M, templateObject_2$w, templateObject_3$
|
|
13189
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$t, 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;
|
|
13190
13190
|
|
|
13191
13191
|
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"])));
|
|
13192
13192
|
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"])));
|
|
13193
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13193
|
+
var DropdownWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
13194
13194
|
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"])));
|
|
13195
13195
|
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; });
|
|
13196
13196
|
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; });
|
|
13197
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$
|
|
13197
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13198
13198
|
|
|
13199
13199
|
var DropdownListIcons = function (_a) {
|
|
13200
13200
|
var items = _a.items;
|
|
@@ -13220,7 +13220,7 @@ var templateObject_1$K;
|
|
|
13220
13220
|
|
|
13221
13221
|
var Wrapper = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
13222
13222
|
var Col = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13223
|
-
var Row = newStyled.div(templateObject_3$
|
|
13223
|
+
var Row = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
13224
13224
|
return props.rightToLeft &&
|
|
13225
13225
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13226
13226
|
});
|
|
@@ -13232,7 +13232,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
13232
13232
|
var theme = useTheme();
|
|
13233
13233
|
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));
|
|
13234
13234
|
};
|
|
13235
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$
|
|
13235
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13236
13236
|
|
|
13237
13237
|
var index = /*#__PURE__*/Object.freeze({
|
|
13238
13238
|
__proto__: null,
|
|
@@ -13278,7 +13278,8 @@ var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
13278
13278
|
var displayBNPL = _a.displayBNPL;
|
|
13279
13279
|
return (displayBNPL ? 'flex' : 'none');
|
|
13280
13280
|
});
|
|
13281
|
-
var
|
|
13281
|
+
var TextContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
13282
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13282
13283
|
var BuyNowPayLater = function (_a) {
|
|
13283
13284
|
var _b;
|
|
13284
13285
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -13288,9 +13289,9 @@ var BuyNowPayLater = function (_a) {
|
|
|
13288
13289
|
console.error('Icon', iconName, 'not found');
|
|
13289
13290
|
return null;
|
|
13290
13291
|
}
|
|
13291
|
-
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(
|
|
13292
|
+
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$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));
|
|
13292
13293
|
};
|
|
13293
|
-
var templateObject_1$H, templateObject_2$t;
|
|
13294
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q;
|
|
13294
13295
|
|
|
13295
13296
|
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"])));
|
|
13296
13297
|
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"])));
|