@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.js
CHANGED
|
@@ -4871,7 +4871,7 @@ var templateObject_1$1x, templateObject_2$10;
|
|
|
4871
4871
|
|
|
4872
4872
|
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; });
|
|
4873
4873
|
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; });
|
|
4874
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4874
|
+
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"])));
|
|
4875
4875
|
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"])));
|
|
4876
4876
|
var DropdownDialog = function (_a) {
|
|
4877
4877
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4880,7 +4880,7 @@ var DropdownDialog = function (_a) {
|
|
|
4880
4880
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4881
4881
|
}) }), void 0) }), void 0));
|
|
4882
4882
|
};
|
|
4883
|
-
var templateObject_1$1w, templateObject_2$$, templateObject_3$
|
|
4883
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$P, templateObject_4$z;
|
|
4884
4884
|
|
|
4885
4885
|
var getStylesBySize$a = function (size, theme) {
|
|
4886
4886
|
switch (size) {
|
|
@@ -4950,7 +4950,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4950
4950
|
var TAGS = {
|
|
4951
4951
|
hero1: newStyled.h1(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""]))),
|
|
4952
4952
|
hero2: newStyled.h2(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject([""], [""]))),
|
|
4953
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4953
|
+
hero3: newStyled.h3(templateObject_3$O || (templateObject_3$O = __makeTemplateObject([""], [""]))),
|
|
4954
4954
|
display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
|
|
4955
4955
|
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4956
4956
|
heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
|
|
@@ -5080,7 +5080,7 @@ var DEFAULTS = {
|
|
|
5080
5080
|
size: 'regular',
|
|
5081
5081
|
},
|
|
5082
5082
|
};
|
|
5083
|
-
var templateObject_1$1v, templateObject_2$_, templateObject_3$
|
|
5083
|
+
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;
|
|
5084
5084
|
|
|
5085
5085
|
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) {
|
|
5086
5086
|
var inline = _a.inline;
|
|
@@ -5148,12 +5148,12 @@ var templateObject_1$1t;
|
|
|
5148
5148
|
|
|
5149
5149
|
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"])));
|
|
5150
5150
|
var P$3 = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5151
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5151
|
+
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"])));
|
|
5152
5152
|
var SizeFitGuide = function (_a) {
|
|
5153
5153
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5154
5154
|
return (jsxRuntime.jsxs(Container$11, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5155
5155
|
};
|
|
5156
|
-
var templateObject_1$1s, templateObject_2$Z, templateObject_3$
|
|
5156
|
+
var templateObject_1$1s, templateObject_2$Z, templateObject_3$N;
|
|
5157
5157
|
|
|
5158
5158
|
var getStylesBySize$8 = function (size) {
|
|
5159
5159
|
switch (size) {
|
|
@@ -5217,13 +5217,13 @@ var H3$3 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5217
5217
|
var size = _a.size;
|
|
5218
5218
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5219
5219
|
});
|
|
5220
|
-
var Now = newStyled(H3$3)(templateObject_3$
|
|
5220
|
+
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"])));
|
|
5221
5221
|
var DiscountTag = function (_a) {
|
|
5222
5222
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5223
5223
|
var theme = useTheme();
|
|
5224
5224
|
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
|
|
5225
5225
|
};
|
|
5226
|
-
var templateObject_1$1r, templateObject_2$Y, templateObject_3$
|
|
5226
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$M;
|
|
5227
5227
|
|
|
5228
5228
|
var getStylesBySize$7 = function (size) {
|
|
5229
5229
|
switch (size) {
|
|
@@ -5283,7 +5283,7 @@ var Price = newStyled.p(templateObject_2$X || (templateObject_2$X = __makeTempla
|
|
|
5283
5283
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5284
5284
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5285
5285
|
});
|
|
5286
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5286
|
+
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) {
|
|
5287
5287
|
var _b;
|
|
5288
5288
|
var size = _a.size;
|
|
5289
5289
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5306,7 +5306,7 @@ var PriceLabel = function (_a) {
|
|
|
5306
5306
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5307
5307
|
return (jsxRuntime.jsxs(Container$$, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5308
5308
|
};
|
|
5309
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5309
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L;
|
|
5310
5310
|
|
|
5311
5311
|
var getStylesBySize$6 = function (size) {
|
|
5312
5312
|
switch (size) {
|
|
@@ -5461,7 +5461,7 @@ var OutOfStock = function (_a) {
|
|
|
5461
5461
|
|
|
5462
5462
|
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"])));
|
|
5463
5463
|
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5464
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5464
|
+
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"])));
|
|
5465
5465
|
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5466
5466
|
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"])));
|
|
5467
5467
|
var Label$3 = function (_a) {
|
|
@@ -5481,7 +5481,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5481
5481
|
Option: Option,
|
|
5482
5482
|
OptionsContainer: OptionsContainer,
|
|
5483
5483
|
});
|
|
5484
|
-
var templateObject_1$1n, templateObject_2$V, templateObject_3$
|
|
5484
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$K, templateObject_4$x, templateObject_5$k;
|
|
5485
5485
|
|
|
5486
5486
|
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) {
|
|
5487
5487
|
var borderColor = _a.borderColor;
|
|
@@ -10029,7 +10029,7 @@ var SliderNavigation = function (_a) {
|
|
|
10029
10029
|
|
|
10030
10030
|
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"])));
|
|
10031
10031
|
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"])));
|
|
10032
|
-
var Container$Y = newStyled.div(templateObject_3$
|
|
10032
|
+
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) {
|
|
10033
10033
|
var position = _a.position;
|
|
10034
10034
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10035
10035
|
});
|
|
@@ -10042,7 +10042,7 @@ var ImagePreviewList = function (_a) {
|
|
|
10042
10042
|
arrowPadding: 1.625,
|
|
10043
10043
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === 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 (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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));
|
|
10044
10044
|
};
|
|
10045
|
-
var templateObject_1$1j, templateObject_2$T, templateObject_3$
|
|
10045
|
+
var templateObject_1$1j, templateObject_2$T, templateObject_3$J, templateObject_4$w;
|
|
10046
10046
|
|
|
10047
10047
|
var propTypes = {exports: {}};
|
|
10048
10048
|
|
|
@@ -11641,7 +11641,7 @@ var Container$X = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
11641
11641
|
"\n border-radius: 40px;\n ";
|
|
11642
11642
|
});
|
|
11643
11643
|
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'); });
|
|
11644
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11644
|
+
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"])));
|
|
11645
11645
|
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"])));
|
|
11646
11646
|
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"])));
|
|
11647
11647
|
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"])));
|
|
@@ -11654,7 +11654,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11654
11654
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11655
11655
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11656
11656
|
};
|
|
11657
|
-
var templateObject_1$1i, templateObject_2$S, templateObject_3$
|
|
11657
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$I, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
|
|
11658
11658
|
|
|
11659
11659
|
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"])));
|
|
11660
11660
|
var ProductGallery = function (_a) {
|
|
@@ -12133,7 +12133,7 @@ var ContentWrapper = newStyled.div(templateObject_2$Q || (templateObject_2$Q = _
|
|
|
12133
12133
|
var backgroundColor = _a.backgroundColor;
|
|
12134
12134
|
return backgroundColor;
|
|
12135
12135
|
});
|
|
12136
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12136
|
+
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) {
|
|
12137
12137
|
var position = _a.position;
|
|
12138
12138
|
return getArrowRotation(position);
|
|
12139
12139
|
}, function (_a) {
|
|
@@ -12153,7 +12153,7 @@ var Title$7 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTem
|
|
|
12153
12153
|
return color;
|
|
12154
12154
|
});
|
|
12155
12155
|
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"])));
|
|
12156
|
-
var templateObject_1$1a, templateObject_2$Q, templateObject_3$
|
|
12156
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
|
|
12157
12157
|
|
|
12158
12158
|
var Tooltip = function (_a) {
|
|
12159
12159
|
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;
|
|
@@ -12331,7 +12331,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12331
12331
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12332
12332
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12333
12333
|
]; });
|
|
12334
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12334
|
+
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"])));
|
|
12335
12335
|
var RadioPrimary = function (_a) {
|
|
12336
12336
|
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 ? exports.ComponentSize.Medium : _d;
|
|
12337
12337
|
var theme = useTheme();
|
|
@@ -12341,7 +12341,7 @@ var RadioPrimary = function (_a) {
|
|
|
12341
12341
|
};
|
|
12342
12342
|
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsxs(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12343
12343
|
};
|
|
12344
|
-
var templateObject_1$18, templateObject_2$P, templateObject_3$
|
|
12344
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$G;
|
|
12345
12345
|
|
|
12346
12346
|
/* base styles & size variants */
|
|
12347
12347
|
var CustomRadioStyles$1 = {
|
|
@@ -12416,7 +12416,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12416
12416
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12417
12417
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12418
12418
|
]; });
|
|
12419
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12419
|
+
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) {
|
|
12420
12420
|
var theme = _a.theme;
|
|
12421
12421
|
return theme.component.radio.textSize;
|
|
12422
12422
|
}, function (_a) {
|
|
@@ -12432,7 +12432,7 @@ var RadioInput = function (_a) {
|
|
|
12432
12432
|
};
|
|
12433
12433
|
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$O, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12434
12434
|
};
|
|
12435
|
-
var templateObject_1$17, templateObject_2$O, templateObject_3$
|
|
12435
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$F;
|
|
12436
12436
|
|
|
12437
12437
|
var RadioGroupInput = function (_a) {
|
|
12438
12438
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12521,7 +12521,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12521
12521
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12522
12522
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12523
12523
|
]; });
|
|
12524
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12524
|
+
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) {
|
|
12525
12525
|
var theme = _a.theme;
|
|
12526
12526
|
return theme.component.radio.textSize;
|
|
12527
12527
|
}, function (_a) {
|
|
@@ -12537,7 +12537,7 @@ var ClubRadioInput = function (_a) {
|
|
|
12537
12537
|
};
|
|
12538
12538
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$N, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
12539
12539
|
};
|
|
12540
|
-
var templateObject_1$16, templateObject_2$N, templateObject_3$
|
|
12540
|
+
var templateObject_1$16, templateObject_2$N, templateObject_3$E;
|
|
12541
12541
|
|
|
12542
12542
|
var ClubRadioGroupInput = function (_a) {
|
|
12543
12543
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12562,14 +12562,14 @@ var templateObject_1$15, templateObject_2$M;
|
|
|
12562
12562
|
|
|
12563
12563
|
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"])));
|
|
12564
12564
|
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; });
|
|
12565
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12565
|
+
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; });
|
|
12566
12566
|
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"])));
|
|
12567
12567
|
var Simple = function (_a) {
|
|
12568
12568
|
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;
|
|
12569
12569
|
var theme = useTheme();
|
|
12570
12570
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$L, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12571
12571
|
};
|
|
12572
|
-
var templateObject_1$14, templateObject_2$L, templateObject_3$
|
|
12572
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$D, templateObject_4$t;
|
|
12573
12573
|
|
|
12574
12574
|
var Bundle = {
|
|
12575
12575
|
Minimalistic: Minimalistic,
|
|
@@ -12711,7 +12711,7 @@ var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __
|
|
|
12711
12711
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12712
12712
|
});
|
|
12713
12713
|
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"])));
|
|
12714
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12714
|
+
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) {
|
|
12715
12715
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12716
12716
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12717
12717
|
}, function (_a) {
|
|
@@ -12784,7 +12784,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5
|
|
|
12784
12784
|
return theme.component.input.lineHeight;
|
|
12785
12785
|
});
|
|
12786
12786
|
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"])));
|
|
12787
|
-
var templateObject_1$11, templateObject_2$J, templateObject_3$
|
|
12787
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$C, templateObject_4$s, templateObject_5$h, templateObject_6$f;
|
|
12788
12788
|
|
|
12789
12789
|
var BaseInput = function (_a) {
|
|
12790
12790
|
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"]);
|
|
@@ -12854,12 +12854,12 @@ var SuccessContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ =
|
|
|
12854
12854
|
return (size === 'small' ? '36px' : '');
|
|
12855
12855
|
});
|
|
12856
12856
|
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"])));
|
|
12857
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12857
|
+
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"])));
|
|
12858
12858
|
var Success = function (_a) {
|
|
12859
12859
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12860
12860
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12861
12861
|
};
|
|
12862
|
-
var templateObject_1$$, templateObject_2$H, templateObject_3$
|
|
12862
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$B;
|
|
12863
12863
|
|
|
12864
12864
|
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) {
|
|
12865
12865
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -12937,7 +12937,7 @@ var templateObject_1$X;
|
|
|
12937
12937
|
|
|
12938
12938
|
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"])));
|
|
12939
12939
|
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; });
|
|
12940
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12940
|
+
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) {
|
|
12941
12941
|
var theme = _a.theme;
|
|
12942
12942
|
return theme.component.total.basicTotal.currency.color;
|
|
12943
12943
|
}, function (_a) {
|
|
@@ -12973,14 +12973,14 @@ var Total = function (_a) {
|
|
|
12973
12973
|
var theme = useTheme();
|
|
12974
12974
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12975
12975
|
};
|
|
12976
|
-
var templateObject_1$W, templateObject_2$F, templateObject_3$
|
|
12976
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r, templateObject_5$g, templateObject_6$e;
|
|
12977
12977
|
|
|
12978
12978
|
var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12979
12979
|
var color = _a.color;
|
|
12980
12980
|
return color;
|
|
12981
12981
|
});
|
|
12982
12982
|
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"])));
|
|
12983
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12983
|
+
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) {
|
|
12984
12984
|
var theme = _a.theme;
|
|
12985
12985
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12986
12986
|
}, function (_a) {
|
|
@@ -13000,7 +13000,7 @@ var Subtotal = function (_a) {
|
|
|
13000
13000
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
13001
13001
|
})] }), void 0));
|
|
13002
13002
|
};
|
|
13003
|
-
var templateObject_1$V, templateObject_2$E, templateObject_3$
|
|
13003
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$z, templateObject_4$q;
|
|
13004
13004
|
|
|
13005
13005
|
var Totals = {
|
|
13006
13006
|
Total: Total,
|
|
@@ -13009,21 +13009,21 @@ var Totals = {
|
|
|
13009
13009
|
|
|
13010
13010
|
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; });
|
|
13011
13011
|
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"])));
|
|
13012
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13012
|
+
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; });
|
|
13013
13013
|
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; });
|
|
13014
13014
|
var Note = function (_a) {
|
|
13015
13015
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13016
13016
|
var theme = useTheme();
|
|
13017
13017
|
return (jsxRuntime.jsxs(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13018
13018
|
};
|
|
13019
|
-
var templateObject_1$U, templateObject_2$D, templateObject_3$
|
|
13019
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$y, templateObject_4$p;
|
|
13020
13020
|
|
|
13021
13021
|
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) {
|
|
13022
13022
|
var theme = _a.theme;
|
|
13023
|
-
return "\n font-size: ".concat(theme.component.deliveryDetails.
|
|
13023
|
+
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 ");
|
|
13024
13024
|
});
|
|
13025
|
-
var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin:
|
|
13026
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13025
|
+
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; });
|
|
13026
|
+
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({
|
|
13027
13027
|
flexDirection: ['column', 'row'],
|
|
13028
13028
|
}));
|
|
13029
13029
|
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({
|
|
@@ -13061,7 +13061,7 @@ var DeliveryDetails = function (_a) {
|
|
|
13061
13061
|
var theme = useTheme();
|
|
13062
13062
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13063
13063
|
};
|
|
13064
|
-
var templateObject_1$T, templateObject_2$C, templateObject_3$
|
|
13064
|
+
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;
|
|
13065
13065
|
|
|
13066
13066
|
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"])));
|
|
13067
13067
|
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; });
|
|
@@ -13087,18 +13087,18 @@ var templateObject_1$R, templateObject_2$A;
|
|
|
13087
13087
|
|
|
13088
13088
|
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; });
|
|
13089
13089
|
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; });
|
|
13090
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13090
|
+
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; });
|
|
13091
13091
|
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; });
|
|
13092
13092
|
var SizeTable = function (_a) {
|
|
13093
13093
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13094
13094
|
var theme = useTheme();
|
|
13095
13095
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
13096
13096
|
};
|
|
13097
|
-
var templateObject_1$Q, templateObject_2$z, templateObject_3$
|
|
13097
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$w, templateObject_4$n;
|
|
13098
13098
|
|
|
13099
13099
|
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; });
|
|
13100
13100
|
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; });
|
|
13101
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13101
|
+
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; });
|
|
13102
13102
|
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; });
|
|
13103
13103
|
var SizeChartTable = function (_a) {
|
|
13104
13104
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -13130,7 +13130,7 @@ var SizeChartTable = function (_a) {
|
|
|
13130
13130
|
backgroundColor: getCellColor(index, cell),
|
|
13131
13131
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13132
13132
|
};
|
|
13133
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$
|
|
13133
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$v, templateObject_4$m;
|
|
13134
13134
|
|
|
13135
13135
|
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; });
|
|
13136
13136
|
var Image = function (_a) {
|
|
@@ -13142,15 +13142,15 @@ var templateObject_1$O;
|
|
|
13142
13142
|
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"])));
|
|
13143
13143
|
var IMAGE_WIDTH = '63px';
|
|
13144
13144
|
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);
|
|
13145
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13145
|
+
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({
|
|
13146
13146
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13147
13147
|
}), IMAGE_WIDTH);
|
|
13148
13148
|
var Title$4 = newStyled.h2(function (_a) {
|
|
13149
13149
|
var color = _a.color;
|
|
13150
13150
|
return ({
|
|
13151
13151
|
fontWeight: 600,
|
|
13152
|
-
fontSize: '
|
|
13153
|
-
lineHeight: '1.
|
|
13152
|
+
fontSize: '1rem',
|
|
13153
|
+
lineHeight: '1.5rem',
|
|
13154
13154
|
color: color,
|
|
13155
13155
|
margin: '0.063rem 0',
|
|
13156
13156
|
});
|
|
@@ -13180,7 +13180,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
13180
13180
|
var theme = useTheme();
|
|
13181
13181
|
return (jsxRuntime.jsxs(Container$B, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13182
13182
|
};
|
|
13183
|
-
var templateObject_1$N, templateObject_2$x, templateObject_3$
|
|
13183
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e;
|
|
13184
13184
|
|
|
13185
13185
|
function formatDate(date) {
|
|
13186
13186
|
var day = date.getDate();
|
|
@@ -13191,7 +13191,7 @@ function formatDate(date) {
|
|
|
13191
13191
|
|
|
13192
13192
|
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"])));
|
|
13193
13193
|
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"])));
|
|
13194
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13194
|
+
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"])));
|
|
13195
13195
|
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"])));
|
|
13196
13196
|
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"])));
|
|
13197
13197
|
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"])));
|
|
@@ -13212,15 +13212,15 @@ var Review$1 = function (_a) {
|
|
|
13212
13212
|
var theme = useTheme();
|
|
13213
13213
|
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$2, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13214
13214
|
};
|
|
13215
|
-
var templateObject_1$M, templateObject_2$w, templateObject_3$
|
|
13215
|
+
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;
|
|
13216
13216
|
|
|
13217
13217
|
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"])));
|
|
13218
13218
|
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"])));
|
|
13219
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13219
|
+
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"])));
|
|
13220
13220
|
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"])));
|
|
13221
13221
|
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; });
|
|
13222
13222
|
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; });
|
|
13223
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$
|
|
13223
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13224
13224
|
|
|
13225
13225
|
var DropdownListIcons = function (_a) {
|
|
13226
13226
|
var items = _a.items;
|
|
@@ -13246,7 +13246,7 @@ var templateObject_1$K;
|
|
|
13246
13246
|
|
|
13247
13247
|
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'); });
|
|
13248
13248
|
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"])));
|
|
13249
|
-
var Row = newStyled.div(templateObject_3$
|
|
13249
|
+
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) {
|
|
13250
13250
|
return props.rightToLeft &&
|
|
13251
13251
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13252
13252
|
});
|
|
@@ -13258,7 +13258,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
13258
13258
|
var theme = useTheme();
|
|
13259
13259
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13260
13260
|
};
|
|
13261
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$
|
|
13261
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13262
13262
|
|
|
13263
13263
|
var index = /*#__PURE__*/Object.freeze({
|
|
13264
13264
|
__proto__: null,
|
|
@@ -13304,7 +13304,8 @@ var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
13304
13304
|
var displayBNPL = _a.displayBNPL;
|
|
13305
13305
|
return (displayBNPL ? 'flex' : 'none');
|
|
13306
13306
|
});
|
|
13307
|
-
var
|
|
13307
|
+
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"])));
|
|
13308
|
+
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"])));
|
|
13308
13309
|
var BuyNowPayLater = function (_a) {
|
|
13309
13310
|
var _b;
|
|
13310
13311
|
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;
|
|
@@ -13314,9 +13315,9 @@ var BuyNowPayLater = function (_a) {
|
|
|
13314
13315
|
console.error('Icon', iconName, 'not found');
|
|
13315
13316
|
return null;
|
|
13316
13317
|
}
|
|
13317
|
-
return (jsxRuntime.jsx(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(
|
|
13318
|
+
return (jsxRuntime.jsx(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13318
13319
|
};
|
|
13319
|
-
var templateObject_1$H, templateObject_2$t;
|
|
13320
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q;
|
|
13320
13321
|
|
|
13321
13322
|
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"])));
|
|
13322
13323
|
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"])));
|