@trafilea/afrodita-components 5.0.0-beta.130 → 5.0.0-beta.132
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +3 -1
- package/build/index.esm.js +175 -141
- package/build/index.esm.js.map +1 -1
- package/build/index.js +175 -141
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4179,7 +4179,7 @@ var AssetsProvider = function (_a) {
|
|
|
4179
4179
|
};
|
|
4180
4180
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4181
4181
|
|
|
4182
|
-
var Container$
|
|
4182
|
+
var Container$R = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4183
4183
|
var flex = _a.flex;
|
|
4184
4184
|
return flex &&
|
|
4185
4185
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4192,7 +4192,7 @@ var Container$Q = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4192
4192
|
var Card$1 = function (_a) {
|
|
4193
4193
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4194
4194
|
var theme = useTheme();
|
|
4195
|
-
return (jsx$1(Container$
|
|
4195
|
+
return (jsx$1(Container$R, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var Card$2 = Object.assign(Card$1, {
|
|
4198
4198
|
Header: CardHeader,
|
|
@@ -4566,7 +4566,7 @@ var CustomCheckboxStyles = {
|
|
|
4566
4566
|
},
|
|
4567
4567
|
};
|
|
4568
4568
|
|
|
4569
|
-
var Container$
|
|
4569
|
+
var Container$Q = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4570
4570
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4571
4571
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4572
4572
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4600,7 +4600,7 @@ var Checkbox = function (_a) {
|
|
|
4600
4600
|
useEffect(function () {
|
|
4601
4601
|
mounted.current = true;
|
|
4602
4602
|
}, []);
|
|
4603
|
-
return (jsxs$1(Container$
|
|
4603
|
+
return (jsxs$1(Container$Q, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4604
4604
|
};
|
|
4605
4605
|
var templateObject_1$1h, templateObject_2$Q;
|
|
4606
4606
|
|
|
@@ -4684,7 +4684,7 @@ function SimpleDropdown(_a) {
|
|
|
4684
4684
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
4685
4685
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$P || (templateObject_2$P = __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; });
|
|
4686
4686
|
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
4687
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4687
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
4688
4688
|
var DropdownDialog = function (_a) {
|
|
4689
4689
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4690
4690
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4692,7 +4692,7 @@ var DropdownDialog = function (_a) {
|
|
|
4692
4692
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4693
4693
|
}) }), void 0) }), void 0));
|
|
4694
4694
|
};
|
|
4695
|
-
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$
|
|
4695
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$q;
|
|
4696
4696
|
|
|
4697
4697
|
var getStylesBySize$8 = function (size, theme) {
|
|
4698
4698
|
switch (size) {
|
|
@@ -4763,7 +4763,7 @@ var TAGS = {
|
|
|
4763
4763
|
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
4764
4764
|
hero2: newStyled.h2(templateObject_2$O || (templateObject_2$O = __makeTemplateObject([""], [""]))),
|
|
4765
4765
|
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4766
|
-
display1: newStyled.h1(templateObject_4$
|
|
4766
|
+
display1: newStyled.h1(templateObject_4$p || (templateObject_4$p = __makeTemplateObject([""], [""]))),
|
|
4767
4767
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4768
4768
|
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4769
4769
|
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4883,7 +4883,7 @@ var DEFAULTS = {
|
|
|
4883
4883
|
size: 'regular',
|
|
4884
4884
|
},
|
|
4885
4885
|
};
|
|
4886
|
-
var templateObject_1$1f, templateObject_2$O, templateObject_3$B, templateObject_4$
|
|
4886
|
+
var templateObject_1$1f, templateObject_2$O, templateObject_3$B, templateObject_4$p, templateObject_5$f, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4887
4887
|
|
|
4888
4888
|
var ButtonsContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
4889
4889
|
var inline = _a.inline;
|
|
@@ -4949,12 +4949,12 @@ var TextButton = function (_a) {
|
|
|
4949
4949
|
};
|
|
4950
4950
|
var templateObject_1$1d;
|
|
4951
4951
|
|
|
4952
|
-
var Container$
|
|
4952
|
+
var Container$P = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
4953
4953
|
var P$3 = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4954
4954
|
var PercentageSpan = newStyled.span(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
4955
4955
|
var SizeFitGuide = function (_a) {
|
|
4956
4956
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4957
|
-
return (jsxs$1(Container$
|
|
4957
|
+
return (jsxs$1(Container$P, { 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));
|
|
4958
4958
|
};
|
|
4959
4959
|
var templateObject_1$1c, templateObject_2$N, templateObject_3$A;
|
|
4960
4960
|
|
|
@@ -4986,7 +4986,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4986
4986
|
};
|
|
4987
4987
|
}
|
|
4988
4988
|
};
|
|
4989
|
-
var Container$
|
|
4989
|
+
var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
4990
4990
|
var backgroundColor = _a.backgroundColor;
|
|
4991
4991
|
return backgroundColor;
|
|
4992
4992
|
}, function (_a) {
|
|
@@ -5023,7 +5023,7 @@ var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __makeTempla
|
|
|
5023
5023
|
var DiscountTag = function (_a) {
|
|
5024
5024
|
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;
|
|
5025
5025
|
var theme = useTheme();
|
|
5026
|
-
return (jsx$1(Container$
|
|
5026
|
+
return (jsx$1(Container$O, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5027
5027
|
};
|
|
5028
5028
|
var templateObject_1$1b, templateObject_2$M;
|
|
5029
5029
|
|
|
@@ -5055,7 +5055,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
5055
5055
|
};
|
|
5056
5056
|
}
|
|
5057
5057
|
};
|
|
5058
|
-
var Container$
|
|
5058
|
+
var Container$N = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5059
5059
|
var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5060
5060
|
var weight = _a.weight;
|
|
5061
5061
|
return (weight ? weight : '400');
|
|
@@ -5106,7 +5106,7 @@ var PriceLabel = function (_a) {
|
|
|
5106
5106
|
weight: 700,
|
|
5107
5107
|
};
|
|
5108
5108
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5109
|
-
return (jsxs$1(Container$
|
|
5109
|
+
return (jsxs$1(Container$N, { 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));
|
|
5110
5110
|
};
|
|
5111
5111
|
var templateObject_1$1a, templateObject_2$L, templateObject_3$z;
|
|
5112
5112
|
|
|
@@ -5138,7 +5138,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5138
5138
|
weight: 700,
|
|
5139
5139
|
};
|
|
5140
5140
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5141
|
-
return (jsxs$1(Container$
|
|
5141
|
+
return (jsxs$1(Container$N, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5142
5142
|
};
|
|
5143
5143
|
var templateObject_1$19;
|
|
5144
5144
|
|
|
@@ -5184,7 +5184,7 @@ var OutOfStock = function (_a) {
|
|
|
5184
5184
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5185
5185
|
newStyled(lt.Label)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5186
5186
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
5187
|
-
var Span = newStyled.span(templateObject_4$
|
|
5187
|
+
var Span = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5188
5188
|
var OptionsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
5189
5189
|
var Label$2 = function (_a) {
|
|
5190
5190
|
var label = _a.label, values = _a.values;
|
|
@@ -5203,9 +5203,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5203
5203
|
Option: Option,
|
|
5204
5204
|
OptionsContainer: OptionsContainer,
|
|
5205
5205
|
});
|
|
5206
|
-
var templateObject_1$18, templateObject_2$K, templateObject_3$y, templateObject_4$
|
|
5206
|
+
var templateObject_1$18, templateObject_2$K, templateObject_3$y, templateObject_4$o, templateObject_5$e;
|
|
5207
5207
|
|
|
5208
|
-
var Container$
|
|
5208
|
+
var Container$M = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
5209
5209
|
var borderColor = _a.borderColor;
|
|
5210
5210
|
return borderColor;
|
|
5211
5211
|
}, function (_a) {
|
|
@@ -5217,7 +5217,7 @@ var PatternSelector = function (_a) {
|
|
|
5217
5217
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5218
5218
|
var theme = useTheme();
|
|
5219
5219
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5220
|
-
return (jsx$1(Container$
|
|
5220
|
+
return (jsx$1(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5221
5221
|
};
|
|
5222
5222
|
var templateObject_1$17, templateObject_2$J;
|
|
5223
5223
|
|
|
@@ -9603,20 +9603,20 @@ var SliderNavigation = function (_a) {
|
|
|
9603
9603
|
|
|
9604
9604
|
var horizontalStyles = css(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
9605
9605
|
var verticalStyles = css(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
9606
|
-
var Container$
|
|
9606
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __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) {
|
|
9607
9607
|
var position = _a.position;
|
|
9608
9608
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9609
9609
|
});
|
|
9610
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9610
|
+
var Button$3 = newStyled.button(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9611
9611
|
var ImagePreviewList = function (_a) {
|
|
9612
9612
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9613
|
-
return (jsx$1(Container$
|
|
9613
|
+
return (jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9614
9614
|
arrowWidth: 0.75,
|
|
9615
9615
|
arrowHeight: 1.25,
|
|
9616
9616
|
arrowPadding: 1.625,
|
|
9617
9617
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9618
9618
|
};
|
|
9619
|
-
var templateObject_1$14, templateObject_2$I, templateObject_3$x, templateObject_4$
|
|
9619
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$x, templateObject_4$n;
|
|
9620
9620
|
|
|
9621
9621
|
var propTypes = {exports: {}};
|
|
9622
9622
|
|
|
@@ -11209,7 +11209,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11209
11209
|
afterZoomOut: PropTypes.func
|
|
11210
11210
|
} : {};
|
|
11211
11211
|
|
|
11212
|
-
var Container$
|
|
11212
|
+
var Container$K = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11213
11213
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11214
11214
|
return borderRadiusVariant &&
|
|
11215
11215
|
"\n border-radius: 40px;\n ";
|
|
@@ -11218,14 +11218,14 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H
|
|
|
11218
11218
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11219
11219
|
var ImageProductWithTags$1 = function (_a) {
|
|
11220
11220
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11221
|
-
return (jsxs$1(Container$
|
|
11221
|
+
return (jsxs$1(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11222
11222
|
alt: image.alt,
|
|
11223
11223
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11224
11224
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11225
11225
|
};
|
|
11226
11226
|
var templateObject_1$13, templateObject_2$H, templateObject_3$w;
|
|
11227
11227
|
|
|
11228
|
-
var Container$
|
|
11228
|
+
var Container$J = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
11229
11229
|
var ProductGallery = function (_a) {
|
|
11230
11230
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11231
11231
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11233,7 +11233,7 @@ var ProductGallery = function (_a) {
|
|
|
11233
11233
|
useEffect(function () {
|
|
11234
11234
|
setSelectedImage(initialValue);
|
|
11235
11235
|
}, [initialValue]);
|
|
11236
|
-
return (jsxs$1(Container$
|
|
11236
|
+
return (jsxs$1(Container$J, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11237
11237
|
setSelectedImage(value);
|
|
11238
11238
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11239
11239
|
};
|
|
@@ -11283,7 +11283,7 @@ var StarStyles = {
|
|
|
11283
11283
|
});
|
|
11284
11284
|
},
|
|
11285
11285
|
};
|
|
11286
|
-
var Container$
|
|
11286
|
+
var Container$I = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11287
11287
|
var templateObject_1$11;
|
|
11288
11288
|
|
|
11289
11289
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -11302,7 +11302,7 @@ var sizes = {
|
|
|
11302
11302
|
var StarList = function (_a) {
|
|
11303
11303
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11304
11304
|
var theme = useTheme();
|
|
11305
|
-
return (jsx$1(Container$
|
|
11305
|
+
return (jsx$1(Container$I, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11306
11306
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11307
11307
|
}) }, void 0));
|
|
11308
11308
|
};
|
|
@@ -11346,7 +11346,7 @@ var LabelStyles = {
|
|
|
11346
11346
|
});
|
|
11347
11347
|
},
|
|
11348
11348
|
};
|
|
11349
|
-
var Container$
|
|
11349
|
+
var Container$H = newStyled.a(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11350
11350
|
var templateObject_1$10;
|
|
11351
11351
|
|
|
11352
11352
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -11385,10 +11385,10 @@ var Rating = function (_a) {
|
|
|
11385
11385
|
href: reviewsContainerId,
|
|
11386
11386
|
}
|
|
11387
11387
|
: {};
|
|
11388
|
-
return (jsxs$1(Container$
|
|
11388
|
+
return (jsxs$1(Container$H, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11389
11389
|
};
|
|
11390
11390
|
|
|
11391
|
-
var Container$
|
|
11391
|
+
var Container$G = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
11392
11392
|
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
11393
11393
|
var textButtonStyles = function (theme) { return ({
|
|
11394
11394
|
border: 'none',
|
|
@@ -11402,7 +11402,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11402
11402
|
var FitPredictor = function (_a) {
|
|
11403
11403
|
var onClick = _a.onClick;
|
|
11404
11404
|
var theme = useTheme();
|
|
11405
|
-
return (jsxs(Container$
|
|
11405
|
+
return (jsxs(Container$G, __assign$1({ theme: theme }, { children: [jsx(Container$G, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11406
11406
|
};
|
|
11407
11407
|
var templateObject_1$$, templateObject_2$G;
|
|
11408
11408
|
|
|
@@ -11441,7 +11441,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11441
11441
|
position: 'absolute',
|
|
11442
11442
|
});
|
|
11443
11443
|
});
|
|
11444
|
-
var Container$
|
|
11444
|
+
var Container$F = newStyled.div(function (_a) {
|
|
11445
11445
|
var widthAuto = _a.widthAuto;
|
|
11446
11446
|
return ({
|
|
11447
11447
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11455,7 +11455,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11455
11455
|
var ProgressBar = function (_a) {
|
|
11456
11456
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11457
11457
|
var theme = useTheme();
|
|
11458
|
-
return (jsxs$1(Container$
|
|
11458
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11459
11459
|
};
|
|
11460
11460
|
var templateObject_1$_;
|
|
11461
11461
|
|
|
@@ -11478,7 +11478,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11478
11478
|
};
|
|
11479
11479
|
}
|
|
11480
11480
|
};
|
|
11481
|
-
var Container$
|
|
11481
|
+
var Container$E = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
11482
11482
|
var backgroundColor = _a.backgroundColor;
|
|
11483
11483
|
return backgroundColor;
|
|
11484
11484
|
}, function (_a) {
|
|
@@ -11506,7 +11506,7 @@ var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
11506
11506
|
var IconButton = function (_a) {
|
|
11507
11507
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11508
11508
|
var theme = useTheme();
|
|
11509
|
-
return (jsx$1(Container$
|
|
11509
|
+
return (jsx$1(Container$E, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
11510
11510
|
};
|
|
11511
11511
|
var templateObject_1$Z;
|
|
11512
11512
|
|
|
@@ -11626,7 +11626,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_
|
|
|
11626
11626
|
var position = _a.position;
|
|
11627
11627
|
return getArrowContainerMargin(position);
|
|
11628
11628
|
});
|
|
11629
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11629
|
+
var TooltipText = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11630
11630
|
var color = _a.color;
|
|
11631
11631
|
return color;
|
|
11632
11632
|
});
|
|
@@ -11636,7 +11636,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11636
11636
|
return color;
|
|
11637
11637
|
});
|
|
11638
11638
|
var IconContainer$5 = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __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"])));
|
|
11639
|
-
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$
|
|
11639
|
+
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11640
11640
|
|
|
11641
11641
|
var Tooltip = function (_a) {
|
|
11642
11642
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -11795,7 +11795,7 @@ var ContainerStyles = {
|
|
|
11795
11795
|
};
|
|
11796
11796
|
|
|
11797
11797
|
var Wrapper$4 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11798
|
-
var Container$
|
|
11798
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11799
11799
|
var Input$2 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
11800
11800
|
var disabled = _a.disabled;
|
|
11801
11801
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11811,7 +11811,7 @@ var RadioInput = function (_a) {
|
|
|
11811
11811
|
var value = event.currentTarget.value;
|
|
11812
11812
|
onChange({ value: value, label: label });
|
|
11813
11813
|
};
|
|
11814
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11814
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, "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 }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11815
11815
|
};
|
|
11816
11816
|
var templateObject_1$X, templateObject_2$E;
|
|
11817
11817
|
|
|
@@ -11828,34 +11828,34 @@ var RadioGroupInput = function (_a) {
|
|
|
11828
11828
|
};
|
|
11829
11829
|
|
|
11830
11830
|
var Wrapper$3 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11831
|
-
var Container$
|
|
11831
|
+
var Container$C = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11832
11832
|
var Minimalistic = function (_a) {
|
|
11833
11833
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11834
11834
|
var theme = useTheme();
|
|
11835
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11835
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11836
11836
|
};
|
|
11837
11837
|
var templateObject_1$W, templateObject_2$D;
|
|
11838
11838
|
|
|
11839
|
-
var Container$
|
|
11839
|
+
var Container$B = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11840
11840
|
var Title$5 = newStyled.h1(templateObject_2$C || (templateObject_2$C = __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; });
|
|
11841
11841
|
var Details$1 = newStyled.span(templateObject_3$u || (templateObject_3$u = __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; });
|
|
11842
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11842
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
11843
11843
|
var Simple = function (_a) {
|
|
11844
11844
|
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;
|
|
11845
11845
|
var theme = useTheme();
|
|
11846
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11846
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$B, { children: [jsx$1(Title$5, __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));
|
|
11847
11847
|
};
|
|
11848
|
-
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$
|
|
11848
|
+
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$l;
|
|
11849
11849
|
|
|
11850
11850
|
var Bundle = {
|
|
11851
11851
|
Minimalistic: Minimalistic,
|
|
11852
11852
|
Simple: Simple,
|
|
11853
11853
|
};
|
|
11854
11854
|
|
|
11855
|
-
var Container$
|
|
11855
|
+
var Container$A = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
11856
11856
|
var Tag$1 = function (_a) {
|
|
11857
11857
|
var text = _a.text, className = _a.className;
|
|
11858
|
-
return jsx$1(Container$
|
|
11858
|
+
return jsx$1(Container$A, __assign$1({ className: className }, { children: text }), void 0);
|
|
11859
11859
|
};
|
|
11860
11860
|
var templateObject_1$U;
|
|
11861
11861
|
|
|
@@ -12043,7 +12043,7 @@ var containerByStatus = function (theme, status) {
|
|
|
12043
12043
|
return theme.colors.semantic.urgent.color;
|
|
12044
12044
|
return '';
|
|
12045
12045
|
};
|
|
12046
|
-
var Container$
|
|
12046
|
+
var Container$z = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12047
12047
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12048
12048
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12049
12049
|
});
|
|
@@ -12106,9 +12106,9 @@ var InputWrapper = newStyled.div(templateObject_3$t || (templateObject_3$t = __m
|
|
|
12106
12106
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12107
12107
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12108
12108
|
});
|
|
12109
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12109
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12110
12110
|
var ClearInput = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
12111
|
-
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$
|
|
12111
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$c;
|
|
12112
12112
|
|
|
12113
12113
|
var BaseInput = function (_a) {
|
|
12114
12114
|
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, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
@@ -12131,7 +12131,7 @@ var BaseInput = function (_a) {
|
|
|
12131
12131
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12132
12132
|
}, [status]);
|
|
12133
12133
|
var hasValue = Boolean(value);
|
|
12134
|
-
return (jsxs$1(Container$
|
|
12134
|
+
return (jsxs$1(Container$z, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12135
12135
|
onChange(event.target.value, event);
|
|
12136
12136
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12137
12137
|
onChange('', { target: { value: '' } });
|
|
@@ -12152,7 +12152,7 @@ var Button$2 = function (_a) {
|
|
|
12152
12152
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12153
12153
|
};
|
|
12154
12154
|
|
|
12155
|
-
var Container$
|
|
12155
|
+
var Container$y = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
12156
12156
|
var theme = _a.theme;
|
|
12157
12157
|
return theme.component.inputCustom.input.borderRadius;
|
|
12158
12158
|
});
|
|
@@ -12169,7 +12169,7 @@ var Custom = function (_a) {
|
|
|
12169
12169
|
text: text,
|
|
12170
12170
|
disabled: rest.disabled,
|
|
12171
12171
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12172
|
-
return (jsx$1(Container$
|
|
12172
|
+
return (jsx$1(Container$y, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12173
12173
|
};
|
|
12174
12174
|
var templateObject_1$Q, templateObject_2$y;
|
|
12175
12175
|
|
|
@@ -12204,13 +12204,13 @@ var BasePlusButton = function (_a) {
|
|
|
12204
12204
|
};
|
|
12205
12205
|
var templateObject_1$O;
|
|
12206
12206
|
|
|
12207
|
-
var Container$
|
|
12207
|
+
var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12208
12208
|
var IconContainer$4 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12209
12209
|
var BasePlusIcon = function (_a) {
|
|
12210
12210
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12211
12211
|
var theme = useTheme();
|
|
12212
12212
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12213
|
-
return (jsx$1(Container$
|
|
12213
|
+
return (jsx$1(Container$x, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12214
12214
|
? theme.colors.shades['700'].color
|
|
12215
12215
|
: status === InputValidationType.Error
|
|
12216
12216
|
? theme.colors.semantic.urgent.color
|
|
@@ -12225,7 +12225,7 @@ var Input$1 = {
|
|
|
12225
12225
|
SimplePlusIcon: BasePlusIcon,
|
|
12226
12226
|
};
|
|
12227
12227
|
|
|
12228
|
-
var Container$
|
|
12228
|
+
var Container$w = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
12229
12229
|
var width = _a.width;
|
|
12230
12230
|
return width;
|
|
12231
12231
|
}, function (_a) {
|
|
@@ -12241,7 +12241,7 @@ var Container$v = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
12241
12241
|
var PaymentMethod = function (_a) {
|
|
12242
12242
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12243
12243
|
var theme = useTheme();
|
|
12244
|
-
return (jsx$1(Container$
|
|
12244
|
+
return (jsx$1(Container$w, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
12245
12245
|
};
|
|
12246
12246
|
var templateObject_1$M;
|
|
12247
12247
|
|
|
@@ -12262,14 +12262,14 @@ var templateObject_1$L;
|
|
|
12262
12262
|
var Wrapper$2 = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
12263
12263
|
var GrandTotal = newStyled.h1(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\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: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12264
12264
|
var Currency = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12265
|
-
var Container$
|
|
12265
|
+
var Container$v = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12266
12266
|
var Discount = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
12267
12267
|
var Total = function (_a) {
|
|
12268
12268
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12269
12269
|
var theme = useTheme();
|
|
12270
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12270
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12271
12271
|
};
|
|
12272
|
-
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$
|
|
12272
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$b;
|
|
12273
12273
|
|
|
12274
12274
|
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12275
12275
|
var color = _a.color;
|
|
@@ -12277,7 +12277,7 @@ var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __make
|
|
|
12277
12277
|
});
|
|
12278
12278
|
var ItemContainer = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
12279
12279
|
var Item$2 = newStyled.h4(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12280
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12280
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12281
12281
|
var color = _a.color;
|
|
12282
12282
|
return color;
|
|
12283
12283
|
});
|
|
@@ -12290,22 +12290,22 @@ var Subtotal = function (_a) {
|
|
|
12290
12290
|
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));
|
|
12291
12291
|
})] }), void 0));
|
|
12292
12292
|
};
|
|
12293
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$
|
|
12293
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;
|
|
12294
12294
|
|
|
12295
12295
|
var Totals = {
|
|
12296
12296
|
Total: Total,
|
|
12297
12297
|
Subtotal: Subtotal,
|
|
12298
12298
|
};
|
|
12299
12299
|
|
|
12300
|
-
var Container$
|
|
12300
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __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; });
|
|
12301
12301
|
var IconContainer$3 = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
12302
12302
|
var Text$4 = newStyled.p(templateObject_3$p || (templateObject_3$p = __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; });
|
|
12303
|
-
var Details = newStyled.span(templateObject_4$
|
|
12303
|
+
var Details = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12304
12304
|
var Note = function (_a) {
|
|
12305
12305
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12306
|
-
return (jsxs$1(Container$
|
|
12306
|
+
return (jsxs$1(Container$u, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12307
12307
|
};
|
|
12308
|
-
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$
|
|
12308
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$h;
|
|
12309
12309
|
|
|
12310
12310
|
/* eslint-disable no-param-reassign */
|
|
12311
12311
|
var index$1 = function (breakpoints) {
|
|
@@ -12396,7 +12396,7 @@ var Line = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTempl
|
|
|
12396
12396
|
var Row$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __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({
|
|
12397
12397
|
flexDirection: ['column', 'row'],
|
|
12398
12398
|
}));
|
|
12399
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12399
|
+
var Col$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __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({
|
|
12400
12400
|
margin: ['0', '0 1.25rem'],
|
|
12401
12401
|
marginBottom: ['1.875rem', '0'],
|
|
12402
12402
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12420,20 +12420,20 @@ var DeliveryDetails = function (_a) {
|
|
|
12420
12420
|
var theme = useTheme();
|
|
12421
12421
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.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));
|
|
12422
12422
|
};
|
|
12423
|
-
var templateObject_1$H, templateObject_2$s, templateObject_3$o, templateObject_4$
|
|
12423
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$o, templateObject_4$g, templateObject_5$a, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
12424
12424
|
|
|
12425
|
-
var Container$
|
|
12425
|
+
var Container$t = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
12426
12426
|
var Text$3 = newStyled.p(templateObject_2$r || (templateObject_2$r = __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; });
|
|
12427
12427
|
var ScrollToTop = function (_a) {
|
|
12428
12428
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12429
12429
|
var theme = useTheme();
|
|
12430
12430
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12431
|
-
return (jsxs$1(Container$
|
|
12431
|
+
return (jsxs$1(Container$t, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12432
12432
|
};
|
|
12433
12433
|
var templateObject_1$G, templateObject_2$r;
|
|
12434
12434
|
|
|
12435
12435
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12436
|
-
var Container$
|
|
12436
|
+
var Container$s = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
12437
12437
|
var color = _a.color;
|
|
12438
12438
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12439
12439
|
});
|
|
@@ -12441,20 +12441,20 @@ var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplate
|
|
|
12441
12441
|
var OrderBar = function (_a) {
|
|
12442
12442
|
var message = _a.message, color = _a.color;
|
|
12443
12443
|
var theme = useTheme();
|
|
12444
|
-
return (jsxs$1(Container$
|
|
12444
|
+
return (jsxs$1(Container$s, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12445
12445
|
};
|
|
12446
12446
|
var templateObject_1$F, templateObject_2$q;
|
|
12447
12447
|
|
|
12448
12448
|
var TableElement = newStyled.table(templateObject_1$E || (templateObject_1$E = __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; });
|
|
12449
12449
|
var TableCell = newStyled.td(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\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: 0 1.25rem;\n text-align: center;\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; });
|
|
12450
12450
|
var TableHead = newStyled.th(templateObject_3$n || (templateObject_3$n = __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; });
|
|
12451
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12451
|
+
var TableRow = newStyled.tr(templateObject_4$f || (templateObject_4$f = __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; });
|
|
12452
12452
|
var SizeTable = function (_a) {
|
|
12453
12453
|
var headers = _a.headers, data = _a.data;
|
|
12454
12454
|
var theme = useTheme();
|
|
12455
12455
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __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, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: 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));
|
|
12456
12456
|
};
|
|
12457
|
-
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$
|
|
12457
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$f;
|
|
12458
12458
|
|
|
12459
12459
|
var Img = newStyled.img(templateObject_1$D || (templateObject_1$D = __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; });
|
|
12460
12460
|
var Image = function (_a) {
|
|
@@ -12463,7 +12463,7 @@ var Image = function (_a) {
|
|
|
12463
12463
|
};
|
|
12464
12464
|
var templateObject_1$D;
|
|
12465
12465
|
|
|
12466
|
-
var Container$
|
|
12466
|
+
var Container$r = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12467
12467
|
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12468
12468
|
var DescriptionContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12469
12469
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12488,7 +12488,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12488
12488
|
margin: '0.063rem 0',
|
|
12489
12489
|
});
|
|
12490
12490
|
});
|
|
12491
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12491
|
+
var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
12492
12492
|
var withTag = _a.withTag; _a.theme;
|
|
12493
12493
|
return withTag
|
|
12494
12494
|
? mediaQueries({
|
|
@@ -12501,9 +12501,9 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
|
|
|
12501
12501
|
var SimpleOrderItem = function (_a) {
|
|
12502
12502
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12503
12503
|
var theme = useTheme();
|
|
12504
|
-
return (jsxs$1(Container$
|
|
12504
|
+
return (jsxs$1(Container$r, { children: [jsxs$1(ImageContainer$3, { 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, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __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: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12505
12505
|
};
|
|
12506
|
-
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$
|
|
12506
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$e, templateObject_5$9;
|
|
12507
12507
|
|
|
12508
12508
|
function formatDate(date) {
|
|
12509
12509
|
var day = date.getDate();
|
|
@@ -12512,7 +12512,7 @@ function formatDate(date) {
|
|
|
12512
12512
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12513
12513
|
}
|
|
12514
12514
|
|
|
12515
|
-
var Container$
|
|
12515
|
+
var Container$q = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
12516
12516
|
var Heading = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
12517
12517
|
fontSize: ['14px', '16px'],
|
|
12518
12518
|
lineHeight: ['22px', '24px'],
|
|
@@ -12520,7 +12520,7 @@ var Heading = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTe
|
|
|
12520
12520
|
var Content = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
|
|
12521
12521
|
flexDirection: ['column', 'row'],
|
|
12522
12522
|
}));
|
|
12523
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12523
|
+
var ReviewContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
12524
12524
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12525
12525
|
}));
|
|
12526
12526
|
var H2$1 = newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
@@ -12535,17 +12535,17 @@ var P$1 = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplate
|
|
|
12535
12535
|
var Review = function (_a) {
|
|
12536
12536
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12537
12537
|
var theme = useTheme();
|
|
12538
|
-
return (jsxs$1(Container$
|
|
12538
|
+
return (jsxs$1(Container$q, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12539
12539
|
};
|
|
12540
|
-
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$
|
|
12540
|
+
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12541
12541
|
|
|
12542
12542
|
var List = newStyled.ul(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12543
12543
|
var Item$1 = newStyled.li(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
12544
12544
|
var DropdownWrapper = newStyled.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
12545
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12545
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
12546
12546
|
var StyledDropdown = newStyled.ul(templateObject_5$7 || (templateObject_5$7 = __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; });
|
|
12547
12547
|
var DropdownItem = newStyled.li(templateObject_6$6 || (templateObject_6$6 = __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; });
|
|
12548
|
-
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$
|
|
12548
|
+
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12549
12549
|
|
|
12550
12550
|
var DropdownListIcons = function (_a) {
|
|
12551
12551
|
var items = _a.items;
|
|
@@ -12575,7 +12575,7 @@ var Row = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTempla
|
|
|
12575
12575
|
return props.rightToLeft &&
|
|
12576
12576
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12577
12577
|
});
|
|
12578
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12578
|
+
var H5 = newStyled.h5(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12579
12579
|
var H3 = newStyled.h3(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12580
12580
|
var FreeShipping = newStyled.span(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12581
12581
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12583,7 +12583,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12583
12583
|
var theme = useTheme();
|
|
12584
12584
|
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, __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));
|
|
12585
12585
|
};
|
|
12586
|
-
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$
|
|
12586
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$b, templateObject_5$6, templateObject_6$5;
|
|
12587
12587
|
|
|
12588
12588
|
var index = /*#__PURE__*/Object.freeze({
|
|
12589
12589
|
__proto__: null,
|
|
@@ -12596,7 +12596,7 @@ var Spacing = function (_a) {
|
|
|
12596
12596
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12597
12597
|
};
|
|
12598
12598
|
|
|
12599
|
-
var Container$
|
|
12599
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
12600
12600
|
var height = _a.height;
|
|
12601
12601
|
return (height ? height : '1.5em');
|
|
12602
12602
|
}, function (_a) {
|
|
@@ -12621,7 +12621,7 @@ var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
12621
12621
|
var SkeletonBox = function (_a) {
|
|
12622
12622
|
var width = _a.width, height = _a.height;
|
|
12623
12623
|
var theme = useTheme();
|
|
12624
|
-
return jsx$1(Container$
|
|
12624
|
+
return jsx$1(Container$p, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12625
12625
|
};
|
|
12626
12626
|
var templateObject_1$x;
|
|
12627
12627
|
|
|
@@ -12634,7 +12634,7 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12634
12634
|
});
|
|
12635
12635
|
});
|
|
12636
12636
|
var ImageHoverContainer = newStyled.img(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12637
|
-
var Container$
|
|
12637
|
+
var Container$o = newStyled.a(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12638
12638
|
var Title$2 = newStyled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12639
12639
|
var getStylesBySize = function (size) {
|
|
12640
12640
|
switch (size) {
|
|
@@ -12661,7 +12661,7 @@ var getStylesBySize = function (size) {
|
|
|
12661
12661
|
};
|
|
12662
12662
|
}
|
|
12663
12663
|
};
|
|
12664
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12664
|
+
var TopTagContainer$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12665
12665
|
var BottomTagContainer$1 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12666
12666
|
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12667
12667
|
var ProductItemMobile = function (_a) {
|
|
@@ -12680,14 +12680,14 @@ var ProductItemMobile = function (_a) {
|
|
|
12680
12680
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12681
12681
|
};
|
|
12682
12682
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12683
|
-
return (jsxs(Container$
|
|
12683
|
+
return (jsxs(Container$o, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
|
|
12684
12684
|
};
|
|
12685
|
-
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$
|
|
12685
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12686
12686
|
|
|
12687
|
-
var Container$
|
|
12687
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12688
12688
|
function withProductGrid(ProductItemComponent, data) {
|
|
12689
12689
|
function WithProductGrid(props) {
|
|
12690
|
-
return (jsx$1(Container$
|
|
12690
|
+
return (jsx$1(Container$n, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12691
12691
|
}
|
|
12692
12692
|
/* istanbul ignore next */
|
|
12693
12693
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -12748,7 +12748,7 @@ var Drawer = function (_a) {
|
|
|
12748
12748
|
};
|
|
12749
12749
|
var templateObject_1$u, templateObject_2$j;
|
|
12750
12750
|
|
|
12751
|
-
var Container$
|
|
12751
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12752
12752
|
var size = _a.size;
|
|
12753
12753
|
return (size ? size : '100%');
|
|
12754
12754
|
}, function (_a) {
|
|
@@ -12761,7 +12761,7 @@ var Animation = newStyled.div(templateObject_2$i || (templateObject_2$i = __make
|
|
|
12761
12761
|
});
|
|
12762
12762
|
var Spinner = function (_a) {
|
|
12763
12763
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12764
|
-
return (jsx$1(Container$
|
|
12764
|
+
return (jsx$1(Container$m, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12765
12765
|
};
|
|
12766
12766
|
var templateObject_1$t, templateObject_2$i;
|
|
12767
12767
|
|
|
@@ -12808,12 +12808,12 @@ function FilteringDropdown(_a) {
|
|
|
12808
12808
|
}) }, void 0)] }), void 0));
|
|
12809
12809
|
}
|
|
12810
12810
|
|
|
12811
|
-
var Container$
|
|
12811
|
+
var Container$l = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
12812
12812
|
var IconContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12813
12813
|
var PageNumbersContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12814
12814
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12815
12815
|
}));
|
|
12816
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12816
|
+
var PageNumber = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
12817
12817
|
var bold = _a.bold;
|
|
12818
12818
|
return (bold ? '700' : '500');
|
|
12819
12819
|
}, function (_a) {
|
|
@@ -12825,17 +12825,18 @@ var PageNumber = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
12825
12825
|
}, mediaQueries({
|
|
12826
12826
|
fontSize: ['1rem', '1.25rem'],
|
|
12827
12827
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12828
|
-
width: ['1.
|
|
12828
|
+
width: ['1.5rem', '1.875rem'],
|
|
12829
12829
|
}), function (_a) {
|
|
12830
12830
|
var background = _a.background;
|
|
12831
12831
|
return background || 'unset';
|
|
12832
12832
|
});
|
|
12833
|
-
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$
|
|
12833
|
+
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$9;
|
|
12834
12834
|
|
|
12835
12835
|
var Pagination = function (_a) {
|
|
12836
|
-
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
12836
|
+
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
12837
|
+
var RANGE_OF_PAGES = 3;
|
|
12837
12838
|
var theme = useTheme();
|
|
12838
|
-
var
|
|
12839
|
+
var _g = useState(currentPage), page = _g[0], setPage = _g[1];
|
|
12839
12840
|
var handlePageChange = function (page) {
|
|
12840
12841
|
if (disabled || page < from || page > to) {
|
|
12841
12842
|
return;
|
|
@@ -12843,7 +12844,39 @@ var Pagination = function (_a) {
|
|
|
12843
12844
|
setPage(page);
|
|
12844
12845
|
onChange(page);
|
|
12845
12846
|
};
|
|
12846
|
-
|
|
12847
|
+
var reducedPages = useMemo(function () {
|
|
12848
|
+
if (!showReducedPages) {
|
|
12849
|
+
return [];
|
|
12850
|
+
}
|
|
12851
|
+
var pages = [];
|
|
12852
|
+
new Array(to - from + 1).fill(0).map(function (_, i) {
|
|
12853
|
+
var initialRange = page - RANGE_OF_PAGES;
|
|
12854
|
+
var finalRange = page + RANGE_OF_PAGES;
|
|
12855
|
+
if (from + i > initialRange && from + i < finalRange) {
|
|
12856
|
+
pages.push(from + i);
|
|
12857
|
+
}
|
|
12858
|
+
});
|
|
12859
|
+
if (pages[0] === from + RANGE_OF_PAGES - 1) {
|
|
12860
|
+
pages = [from, from + 1].concat(pages);
|
|
12861
|
+
}
|
|
12862
|
+
else if (pages[0] > from + RANGE_OF_PAGES - 1) {
|
|
12863
|
+
pages = [from, -2].concat(pages);
|
|
12864
|
+
}
|
|
12865
|
+
else if (pages[0] === from + 1) {
|
|
12866
|
+
pages = [from].concat(pages);
|
|
12867
|
+
}
|
|
12868
|
+
if (pages[pages.length - 1] === to - RANGE_OF_PAGES + 1) {
|
|
12869
|
+
pages = pages.concat([to - 1, to]);
|
|
12870
|
+
}
|
|
12871
|
+
else if (pages[pages.length - 1] < to - RANGE_OF_PAGES + 1) {
|
|
12872
|
+
pages = pages.concat([-2, to]);
|
|
12873
|
+
}
|
|
12874
|
+
else if (pages[pages.length - 1] === to - 1) {
|
|
12875
|
+
pages = pages.concat([to]);
|
|
12876
|
+
}
|
|
12877
|
+
return pages;
|
|
12878
|
+
}, [from, page, showReducedPages, to]);
|
|
12879
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12847
12880
|
};
|
|
12848
12881
|
|
|
12849
12882
|
var PaginatorBlog = function (_a) {
|
|
@@ -12857,12 +12890,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12857
12890
|
setPage(page);
|
|
12858
12891
|
onChange(page);
|
|
12859
12892
|
};
|
|
12860
|
-
return (jsxs$1(Container$
|
|
12893
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
12861
12894
|
? theme.colors.shades['white'].color
|
|
12862
12895
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12863
12896
|
};
|
|
12864
12897
|
|
|
12865
|
-
var Container$
|
|
12898
|
+
var Container$k = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
12866
12899
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12867
12900
|
}));
|
|
12868
12901
|
var Description$1 = newStyled.div({
|
|
@@ -12879,18 +12912,18 @@ var Description$1 = newStyled.div({
|
|
|
12879
12912
|
var ProductItem = function (_a) {
|
|
12880
12913
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12881
12914
|
var theme = useTheme();
|
|
12882
|
-
return (jsxs$1(Container$
|
|
12915
|
+
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12883
12916
|
};
|
|
12884
12917
|
var templateObject_1$q;
|
|
12885
12918
|
|
|
12886
|
-
var Container$
|
|
12919
|
+
var Container$j = newStyled.div({
|
|
12887
12920
|
display: 'flex',
|
|
12888
12921
|
justifyContent: 'center',
|
|
12889
12922
|
padding: '1rem',
|
|
12890
12923
|
});
|
|
12891
12924
|
var Footer = function (_a) {
|
|
12892
12925
|
var text = _a.text, onClick = _a.onClick;
|
|
12893
|
-
return (jsx$1(Container$
|
|
12926
|
+
return (jsx$1(Container$j, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12894
12927
|
};
|
|
12895
12928
|
|
|
12896
12929
|
var Ul = newStyled.ul({
|
|
@@ -12909,7 +12942,7 @@ var Anchor = newStyled.a({
|
|
|
12909
12942
|
padding: 0,
|
|
12910
12943
|
textDecoration: 'none',
|
|
12911
12944
|
});
|
|
12912
|
-
var Container$
|
|
12945
|
+
var Container$i = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
12913
12946
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12914
12947
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12915
12948
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -12920,7 +12953,7 @@ var Header$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeT
|
|
|
12920
12953
|
var ResultsPanel = function (_a) {
|
|
12921
12954
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12922
12955
|
var theme = useTheme();
|
|
12923
|
-
return (jsxs$1(Container$
|
|
12956
|
+
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12924
12957
|
};
|
|
12925
12958
|
var templateObject_1$p, templateObject_2$f, templateObject_3$f;
|
|
12926
12959
|
|
|
@@ -13051,7 +13084,7 @@ var reducer = function (state, action) {
|
|
|
13051
13084
|
}
|
|
13052
13085
|
}
|
|
13053
13086
|
};
|
|
13054
|
-
var Container$
|
|
13087
|
+
var Container$h = newStyled.div({
|
|
13055
13088
|
position: 'relative',
|
|
13056
13089
|
display: 'flex',
|
|
13057
13090
|
});
|
|
@@ -13087,7 +13120,7 @@ var SearchBar = function (_a) {
|
|
|
13087
13120
|
onClose();
|
|
13088
13121
|
}
|
|
13089
13122
|
};
|
|
13090
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13123
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$h, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13091
13124
|
if (e.key === 'Enter') {
|
|
13092
13125
|
e.preventDefault();
|
|
13093
13126
|
e.stopPropagation();
|
|
@@ -13361,7 +13394,7 @@ function useSwipeable(options) {
|
|
|
13361
13394
|
return handlers;
|
|
13362
13395
|
}
|
|
13363
13396
|
|
|
13364
|
-
var Container$
|
|
13397
|
+
var Container$g = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13365
13398
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13366
13399
|
return borderRadiusVariant &&
|
|
13367
13400
|
"\n border-radius: 40px;\n ";
|
|
@@ -13370,7 +13403,7 @@ var TopTagContainer = newStyled.div(templateObject_2$e || (templateObject_2$e =
|
|
|
13370
13403
|
var BottomTagContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13371
13404
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13372
13405
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13373
|
-
return (jsxs$1(Container$
|
|
13406
|
+
return (jsxs$1(Container$g, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
13374
13407
|
});
|
|
13375
13408
|
var templateObject_1$n, templateObject_2$e, templateObject_3$e;
|
|
13376
13409
|
|
|
@@ -13381,12 +13414,12 @@ var ArrowButton = function (_a) {
|
|
|
13381
13414
|
};
|
|
13382
13415
|
var templateObject_1$m;
|
|
13383
13416
|
|
|
13384
|
-
var Container$
|
|
13417
|
+
var Container$f = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13385
13418
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13386
13419
|
var SlideDots = function (_a) {
|
|
13387
13420
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13388
13421
|
var theme = useTheme();
|
|
13389
|
-
return (jsx$1(Container$
|
|
13422
|
+
return (jsx$1(Container$f, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13390
13423
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13391
13424
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13392
13425
|
};
|
|
@@ -13408,7 +13441,7 @@ var SlideNavigation = function (_a) {
|
|
|
13408
13441
|
};
|
|
13409
13442
|
var templateObject_1$k, templateObject_2$d, templateObject_3$d;
|
|
13410
13443
|
|
|
13411
|
-
var Container$
|
|
13444
|
+
var Container$e = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13412
13445
|
var ProductGalleryMobile = function (_a) {
|
|
13413
13446
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13414
13447
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13430,7 +13463,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13430
13463
|
useEffect(function () {
|
|
13431
13464
|
setSelectedImage(images[index]);
|
|
13432
13465
|
}, [index, images]);
|
|
13433
|
-
return (jsxs$1(Container$
|
|
13466
|
+
return (jsxs$1(Container$e, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13434
13467
|
};
|
|
13435
13468
|
var templateObject_1$j;
|
|
13436
13469
|
|
|
@@ -13570,9 +13603,9 @@ var visibleStyle = function (_a) {
|
|
|
13570
13603
|
var transformStyle = function (_a) {
|
|
13571
13604
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13572
13605
|
return opened
|
|
13573
|
-
? css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$
|
|
13606
|
+
? css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13574
13607
|
};
|
|
13575
|
-
var Container$
|
|
13608
|
+
var Container$d = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13576
13609
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13577
13610
|
}), visibleStyle, transformStyle);
|
|
13578
13611
|
var Overlay = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -13585,7 +13618,7 @@ var Modal = function (_a) {
|
|
|
13585
13618
|
}
|
|
13586
13619
|
close();
|
|
13587
13620
|
};
|
|
13588
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13621
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$d, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13589
13622
|
};
|
|
13590
13623
|
var modalEvent = function (id, detail) {
|
|
13591
13624
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13613,7 +13646,7 @@ var useModal = function (id) {
|
|
|
13613
13646
|
close: close,
|
|
13614
13647
|
}); }, [close, open, opened]);
|
|
13615
13648
|
};
|
|
13616
|
-
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$
|
|
13649
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
13617
13650
|
|
|
13618
13651
|
var Text$2 = newStyled.span(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13619
13652
|
var Title$1 = function (_a) {
|
|
@@ -13639,11 +13672,11 @@ var Description = function (_a) {
|
|
|
13639
13672
|
};
|
|
13640
13673
|
var templateObject_1$f;
|
|
13641
13674
|
|
|
13642
|
-
var Container$
|
|
13675
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13643
13676
|
var CloseButton = function (_a) {
|
|
13644
13677
|
var onClick = _a.onClick, size = _a.size;
|
|
13645
13678
|
var theme = useTheme();
|
|
13646
|
-
return (jsx$1(Container$
|
|
13679
|
+
return (jsx$1(Container$c, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13647
13680
|
};
|
|
13648
13681
|
var templateObject_1$e;
|
|
13649
13682
|
|
|
@@ -13655,10 +13688,10 @@ var CartProductItem = {
|
|
|
13655
13688
|
CloseButton: CloseButton,
|
|
13656
13689
|
};
|
|
13657
13690
|
|
|
13658
|
-
var Container$
|
|
13691
|
+
var Container$b = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13659
13692
|
var Item = newStyled.span(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13660
13693
|
var Number$1 = newStyled(Item)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13661
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13694
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
13662
13695
|
var QuantityPicker = function (_a) {
|
|
13663
13696
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
13664
13697
|
var theme = useTheme();
|
|
@@ -13681,9 +13714,9 @@ var QuantityPicker = function (_a) {
|
|
|
13681
13714
|
return clamp(value);
|
|
13682
13715
|
});
|
|
13683
13716
|
}, [value, clamp]);
|
|
13684
|
-
return (jsxs$1(Container$
|
|
13717
|
+
return (jsxs$1(Container$b, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13685
13718
|
};
|
|
13686
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$
|
|
13719
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$7;
|
|
13687
13720
|
|
|
13688
13721
|
var htmlReactParser = {exports: {}};
|
|
13689
13722
|
|
|
@@ -17464,17 +17497,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17464
17497
|
HTMLReactParser$1.attributesToProps;
|
|
17465
17498
|
HTMLReactParser$1.Element;
|
|
17466
17499
|
|
|
17467
|
-
var Container$
|
|
17500
|
+
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17468
17501
|
var Card = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17469
17502
|
var Tag = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17470
|
-
var Label = newStyled.div(templateObject_4$
|
|
17503
|
+
var Label = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
17471
17504
|
var Check = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
17472
17505
|
var IconContainer = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
17473
17506
|
var IconPlaceholder = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17474
17507
|
var DiscountContainer = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17475
17508
|
var PackSelector = function (_a) {
|
|
17476
17509
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17477
|
-
return (jsx$1(Container$
|
|
17510
|
+
return (jsx$1(Container$a, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17478
17511
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17479
17512
|
}) }), void 0));
|
|
17480
17513
|
};
|
|
@@ -17500,18 +17533,19 @@ var PackCard = function (_a) {
|
|
|
17500
17533
|
currency: currencyCode || 'USD',
|
|
17501
17534
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17502
17535
|
};
|
|
17503
|
-
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$
|
|
17536
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
17504
17537
|
|
|
17505
17538
|
var Title = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
17506
17539
|
var H2 = newStyled.h2(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17507
17540
|
var ArrowContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17541
|
+
var Container$9 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n @media (max-width: 480px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 480px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17508
17542
|
var Accordion = function (_a) {
|
|
17509
|
-
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
17543
|
+
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
17510
17544
|
var theme = useTheme();
|
|
17511
|
-
var
|
|
17512
|
-
return (jsxs$1(
|
|
17545
|
+
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17546
|
+
return (jsxs$1(Container$9, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17513
17547
|
};
|
|
17514
|
-
var templateObject_1$b, templateObject_2$9, templateObject_3$9;
|
|
17548
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$5;
|
|
17515
17549
|
|
|
17516
17550
|
var SectionContent = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17517
17551
|
var Header = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
@@ -17519,7 +17553,7 @@ var MobileHeader = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __m
|
|
|
17519
17553
|
var MobileIconsContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
17520
17554
|
var H4 = newStyled.h4(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
17521
17555
|
var FilterLink = newStyled.a(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
17522
|
-
var OptionContainer = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
17556
|
+
var OptionContainer = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 480px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 480px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17523
17557
|
var ClearAll = newStyled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
17524
17558
|
var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17525
17559
|
var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
@@ -17609,9 +17643,9 @@ var Filters = function (_a) {
|
|
|
17609
17643
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
17610
17644
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
17611
17645
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
17612
|
-
.map(function (option, index) { return (jsx$1(OptionContainer, { children: jsx$1(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }, index)); }), filters
|
|
17646
|
+
.map(function (option, index) { return (jsx$1(OptionContainer, __assign$1({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsx$1(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
|
|
17613
17647
|
.filter(function (filter) { return !filter.isLinkOption; })
|
|
17614
|
-
.map(function (filter) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label === '$75 And Above' ? '+$75' : item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck }, "".concat(item.checked, "-").concat(item.label))); }) }), void 0) }), filters.findIndex(function (filt) { return filt.title === filter.title; }))); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
17648
|
+
.map(function (filter) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label === '$75 And Above' ? '+$75' : item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck }, "".concat(item.checked, "-").concat(item.label))); }) }), void 0) }), filters.findIndex(function (filt) { return filt.title === filter.title; }))); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
17615
17649
|
};
|
|
17616
17650
|
var FilterCheckbox = function (_a) {
|
|
17617
17651
|
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
|