@trafilea/afrodita-components 5.0.0-beta.131 → 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 +1 -0
- package/build/index.esm.js +139 -138
- package/build/index.esm.js.map +1 -1
- package/build/index.js +139 -138
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4207
4207
|
|
|
4208
|
-
var Container$
|
|
4208
|
+
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) {
|
|
4209
4209
|
var flex = _a.flex;
|
|
4210
4210
|
return flex &&
|
|
4211
4211
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4218,7 +4218,7 @@ var Container$Q = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4218
4218
|
var Card$1 = function (_a) {
|
|
4219
4219
|
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;
|
|
4220
4220
|
var theme = useTheme();
|
|
4221
|
-
return (jsxRuntime.jsx(Container$
|
|
4221
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4222
4222
|
};
|
|
4223
4223
|
var Card$2 = Object.assign(Card$1, {
|
|
4224
4224
|
Header: CardHeader,
|
|
@@ -4592,7 +4592,7 @@ var CustomCheckboxStyles = {
|
|
|
4592
4592
|
},
|
|
4593
4593
|
};
|
|
4594
4594
|
|
|
4595
|
-
var Container$
|
|
4595
|
+
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"])));
|
|
4596
4596
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4597
4597
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4598
4598
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4626,7 +4626,7 @@ var Checkbox = function (_a) {
|
|
|
4626
4626
|
React$2.useEffect(function () {
|
|
4627
4627
|
mounted.current = true;
|
|
4628
4628
|
}, []);
|
|
4629
|
-
return (jsxRuntime.jsxs(Container$
|
|
4629
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4630
4630
|
};
|
|
4631
4631
|
var templateObject_1$1h, templateObject_2$Q;
|
|
4632
4632
|
|
|
@@ -4710,7 +4710,7 @@ function SimpleDropdown(_a) {
|
|
|
4710
4710
|
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; });
|
|
4711
4711
|
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; });
|
|
4712
4712
|
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"])));
|
|
4713
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4713
|
+
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"])));
|
|
4714
4714
|
var DropdownDialog = function (_a) {
|
|
4715
4715
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4716
4716
|
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4718,7 +4718,7 @@ var DropdownDialog = function (_a) {
|
|
|
4718
4718
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4719
4719
|
}) }), void 0) }), void 0));
|
|
4720
4720
|
};
|
|
4721
|
-
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$
|
|
4721
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$q;
|
|
4722
4722
|
|
|
4723
4723
|
var getStylesBySize$8 = function (size, theme) {
|
|
4724
4724
|
switch (size) {
|
|
@@ -4789,7 +4789,7 @@ var TAGS = {
|
|
|
4789
4789
|
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
4790
4790
|
hero2: newStyled.h2(templateObject_2$O || (templateObject_2$O = __makeTemplateObject([""], [""]))),
|
|
4791
4791
|
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4792
|
-
display1: newStyled.h1(templateObject_4$
|
|
4792
|
+
display1: newStyled.h1(templateObject_4$p || (templateObject_4$p = __makeTemplateObject([""], [""]))),
|
|
4793
4793
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4794
4794
|
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4795
4795
|
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4909,7 +4909,7 @@ var DEFAULTS = {
|
|
|
4909
4909
|
size: 'regular',
|
|
4910
4910
|
},
|
|
4911
4911
|
};
|
|
4912
|
-
var templateObject_1$1f, templateObject_2$O, templateObject_3$B, templateObject_4$
|
|
4912
|
+
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;
|
|
4913
4913
|
|
|
4914
4914
|
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) {
|
|
4915
4915
|
var inline = _a.inline;
|
|
@@ -4975,12 +4975,12 @@ var TextButton = function (_a) {
|
|
|
4975
4975
|
};
|
|
4976
4976
|
var templateObject_1$1d;
|
|
4977
4977
|
|
|
4978
|
-
var Container$
|
|
4978
|
+
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"])));
|
|
4979
4979
|
var P$3 = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4980
4980
|
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"])));
|
|
4981
4981
|
var SizeFitGuide = function (_a) {
|
|
4982
4982
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4983
|
-
return (jsxRuntime.jsxs(Container$
|
|
4983
|
+
return (jsxRuntime.jsxs(Container$P, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4984
4984
|
};
|
|
4985
4985
|
var templateObject_1$1c, templateObject_2$N, templateObject_3$A;
|
|
4986
4986
|
|
|
@@ -5012,7 +5012,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5012
5012
|
};
|
|
5013
5013
|
}
|
|
5014
5014
|
};
|
|
5015
|
-
var Container$
|
|
5015
|
+
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) {
|
|
5016
5016
|
var backgroundColor = _a.backgroundColor;
|
|
5017
5017
|
return backgroundColor;
|
|
5018
5018
|
}, function (_a) {
|
|
@@ -5049,7 +5049,7 @@ var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __makeTempla
|
|
|
5049
5049
|
var DiscountTag = function (_a) {
|
|
5050
5050
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5051
5051
|
var theme = useTheme();
|
|
5052
|
-
return (jsxRuntime.jsx(Container$
|
|
5052
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5053
5053
|
};
|
|
5054
5054
|
var templateObject_1$1b, templateObject_2$M;
|
|
5055
5055
|
|
|
@@ -5081,7 +5081,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
5081
5081
|
};
|
|
5082
5082
|
}
|
|
5083
5083
|
};
|
|
5084
|
-
var Container$
|
|
5084
|
+
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"])));
|
|
5085
5085
|
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) {
|
|
5086
5086
|
var weight = _a.weight;
|
|
5087
5087
|
return (weight ? weight : '400');
|
|
@@ -5132,7 +5132,7 @@ var PriceLabel = function (_a) {
|
|
|
5132
5132
|
weight: 700,
|
|
5133
5133
|
};
|
|
5134
5134
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5135
|
-
return (jsxRuntime.jsxs(Container$
|
|
5135
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5136
5136
|
};
|
|
5137
5137
|
var templateObject_1$1a, templateObject_2$L, templateObject_3$z;
|
|
5138
5138
|
|
|
@@ -5164,7 +5164,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5164
5164
|
weight: 700,
|
|
5165
5165
|
};
|
|
5166
5166
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5167
|
-
return (jsxRuntime.jsxs(Container$
|
|
5167
|
+
return (jsxRuntime.jsxs(Container$N, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5168
5168
|
};
|
|
5169
5169
|
var templateObject_1$19;
|
|
5170
5170
|
|
|
@@ -5210,7 +5210,7 @@ var OutOfStock = function (_a) {
|
|
|
5210
5210
|
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"])));
|
|
5211
5211
|
newStyled(lt.Label)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5212
5212
|
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"])));
|
|
5213
|
-
var Span = newStyled.span(templateObject_4$
|
|
5213
|
+
var Span = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5214
5214
|
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"])));
|
|
5215
5215
|
var Label$2 = function (_a) {
|
|
5216
5216
|
var label = _a.label, values = _a.values;
|
|
@@ -5229,9 +5229,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5229
5229
|
Option: Option,
|
|
5230
5230
|
OptionsContainer: OptionsContainer,
|
|
5231
5231
|
});
|
|
5232
|
-
var templateObject_1$18, templateObject_2$K, templateObject_3$y, templateObject_4$
|
|
5232
|
+
var templateObject_1$18, templateObject_2$K, templateObject_3$y, templateObject_4$o, templateObject_5$e;
|
|
5233
5233
|
|
|
5234
|
-
var Container$
|
|
5234
|
+
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) {
|
|
5235
5235
|
var borderColor = _a.borderColor;
|
|
5236
5236
|
return borderColor;
|
|
5237
5237
|
}, function (_a) {
|
|
@@ -5243,7 +5243,7 @@ var PatternSelector = function (_a) {
|
|
|
5243
5243
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5244
5244
|
var theme = useTheme();
|
|
5245
5245
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5246
|
-
return (jsxRuntime.jsx(Container$
|
|
5246
|
+
return (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5247
5247
|
};
|
|
5248
5248
|
var templateObject_1$17, templateObject_2$J;
|
|
5249
5249
|
|
|
@@ -9629,20 +9629,20 @@ var SliderNavigation = function (_a) {
|
|
|
9629
9629
|
|
|
9630
9630
|
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"])));
|
|
9631
9631
|
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"])));
|
|
9632
|
-
var Container$
|
|
9632
|
+
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) {
|
|
9633
9633
|
var position = _a.position;
|
|
9634
9634
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9635
9635
|
});
|
|
9636
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9636
|
+
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"])));
|
|
9637
9637
|
var ImagePreviewList = function (_a) {
|
|
9638
9638
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9639
|
-
return (jsxRuntime.jsx(Container$
|
|
9639
|
+
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9640
9640
|
arrowWidth: 0.75,
|
|
9641
9641
|
arrowHeight: 1.25,
|
|
9642
9642
|
arrowPadding: 1.625,
|
|
9643
9643
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9644
9644
|
};
|
|
9645
|
-
var templateObject_1$14, templateObject_2$I, templateObject_3$x, templateObject_4$
|
|
9645
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$x, templateObject_4$n;
|
|
9646
9646
|
|
|
9647
9647
|
var propTypes = {exports: {}};
|
|
9648
9648
|
|
|
@@ -11235,7 +11235,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11235
11235
|
afterZoomOut: PropTypes.func
|
|
11236
11236
|
} : {};
|
|
11237
11237
|
|
|
11238
|
-
var Container$
|
|
11238
|
+
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) {
|
|
11239
11239
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11240
11240
|
return borderRadiusVariant &&
|
|
11241
11241
|
"\n border-radius: 40px;\n ";
|
|
@@ -11244,14 +11244,14 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H
|
|
|
11244
11244
|
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"])));
|
|
11245
11245
|
var ImageProductWithTags$1 = function (_a) {
|
|
11246
11246
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11247
|
-
return (jsxRuntime.jsxs(Container$
|
|
11247
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11248
11248
|
alt: image.alt,
|
|
11249
11249
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11250
11250
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11251
11251
|
};
|
|
11252
11252
|
var templateObject_1$13, templateObject_2$H, templateObject_3$w;
|
|
11253
11253
|
|
|
11254
|
-
var Container$
|
|
11254
|
+
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"])));
|
|
11255
11255
|
var ProductGallery = function (_a) {
|
|
11256
11256
|
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;
|
|
11257
11257
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11259,7 +11259,7 @@ var ProductGallery = function (_a) {
|
|
|
11259
11259
|
React$2.useEffect(function () {
|
|
11260
11260
|
setSelectedImage(initialValue);
|
|
11261
11261
|
}, [initialValue]);
|
|
11262
|
-
return (jsxRuntime.jsxs(Container$
|
|
11262
|
+
return (jsxRuntime.jsxs(Container$J, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11263
11263
|
setSelectedImage(value);
|
|
11264
11264
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11265
11265
|
};
|
|
@@ -11309,7 +11309,7 @@ var StarStyles = {
|
|
|
11309
11309
|
});
|
|
11310
11310
|
},
|
|
11311
11311
|
};
|
|
11312
|
-
var Container$
|
|
11312
|
+
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"])));
|
|
11313
11313
|
var templateObject_1$11;
|
|
11314
11314
|
|
|
11315
11315
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -11328,7 +11328,7 @@ var sizes = {
|
|
|
11328
11328
|
var StarList = function (_a) {
|
|
11329
11329
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11330
11330
|
var theme = useTheme();
|
|
11331
|
-
return (jsxRuntime.jsx(Container$
|
|
11331
|
+
return (jsxRuntime.jsx(Container$I, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11332
11332
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11333
11333
|
}) }, void 0));
|
|
11334
11334
|
};
|
|
@@ -11372,7 +11372,7 @@ var LabelStyles = {
|
|
|
11372
11372
|
});
|
|
11373
11373
|
},
|
|
11374
11374
|
};
|
|
11375
|
-
var Container$
|
|
11375
|
+
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"])));
|
|
11376
11376
|
var templateObject_1$10;
|
|
11377
11377
|
|
|
11378
11378
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -11411,10 +11411,10 @@ var Rating = function (_a) {
|
|
|
11411
11411
|
href: reviewsContainerId,
|
|
11412
11412
|
}
|
|
11413
11413
|
: {};
|
|
11414
|
-
return (jsxRuntime.jsxs(Container$
|
|
11414
|
+
return (jsxRuntime.jsxs(Container$H, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11415
11415
|
};
|
|
11416
11416
|
|
|
11417
|
-
var Container$
|
|
11417
|
+
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"])));
|
|
11418
11418
|
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; });
|
|
11419
11419
|
var textButtonStyles = function (theme) { return ({
|
|
11420
11420
|
border: 'none',
|
|
@@ -11428,7 +11428,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11428
11428
|
var FitPredictor = function (_a) {
|
|
11429
11429
|
var onClick = _a.onClick;
|
|
11430
11430
|
var theme = useTheme();
|
|
11431
|
-
return (jsxs(Container$
|
|
11431
|
+
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));
|
|
11432
11432
|
};
|
|
11433
11433
|
var templateObject_1$$, templateObject_2$G;
|
|
11434
11434
|
|
|
@@ -11467,7 +11467,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11467
11467
|
position: 'absolute',
|
|
11468
11468
|
});
|
|
11469
11469
|
});
|
|
11470
|
-
var Container$
|
|
11470
|
+
var Container$F = newStyled.div(function (_a) {
|
|
11471
11471
|
var widthAuto = _a.widthAuto;
|
|
11472
11472
|
return ({
|
|
11473
11473
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11481,7 +11481,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11481
11481
|
var ProgressBar = function (_a) {
|
|
11482
11482
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11483
11483
|
var theme = useTheme();
|
|
11484
|
-
return (jsxRuntime.jsxs(Container$
|
|
11484
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11485
11485
|
};
|
|
11486
11486
|
var templateObject_1$_;
|
|
11487
11487
|
|
|
@@ -11504,7 +11504,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11504
11504
|
};
|
|
11505
11505
|
}
|
|
11506
11506
|
};
|
|
11507
|
-
var Container$
|
|
11507
|
+
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) {
|
|
11508
11508
|
var backgroundColor = _a.backgroundColor;
|
|
11509
11509
|
return backgroundColor;
|
|
11510
11510
|
}, function (_a) {
|
|
@@ -11532,7 +11532,7 @@ var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
11532
11532
|
var IconButton = function (_a) {
|
|
11533
11533
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11534
11534
|
var theme = useTheme();
|
|
11535
|
-
return (jsxRuntime.jsx(Container$
|
|
11535
|
+
return (jsxRuntime.jsx(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));
|
|
11536
11536
|
};
|
|
11537
11537
|
var templateObject_1$Z;
|
|
11538
11538
|
|
|
@@ -11652,7 +11652,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_
|
|
|
11652
11652
|
var position = _a.position;
|
|
11653
11653
|
return getArrowContainerMargin(position);
|
|
11654
11654
|
});
|
|
11655
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11655
|
+
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) {
|
|
11656
11656
|
var color = _a.color;
|
|
11657
11657
|
return color;
|
|
11658
11658
|
});
|
|
@@ -11662,7 +11662,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11662
11662
|
return color;
|
|
11663
11663
|
});
|
|
11664
11664
|
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"])));
|
|
11665
|
-
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$
|
|
11665
|
+
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11666
11666
|
|
|
11667
11667
|
var Tooltip = function (_a) {
|
|
11668
11668
|
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;
|
|
@@ -11821,7 +11821,7 @@ var ContainerStyles = {
|
|
|
11821
11821
|
};
|
|
11822
11822
|
|
|
11823
11823
|
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"])));
|
|
11824
|
-
var Container$
|
|
11824
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11825
11825
|
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) {
|
|
11826
11826
|
var disabled = _a.disabled;
|
|
11827
11827
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11837,7 +11837,7 @@ var RadioInput = function (_a) {
|
|
|
11837
11837
|
var value = event.currentTarget.value;
|
|
11838
11838
|
onChange({ value: value, label: label });
|
|
11839
11839
|
};
|
|
11840
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11840
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11841
11841
|
};
|
|
11842
11842
|
var templateObject_1$X, templateObject_2$E;
|
|
11843
11843
|
|
|
@@ -11854,34 +11854,34 @@ var RadioGroupInput = function (_a) {
|
|
|
11854
11854
|
};
|
|
11855
11855
|
|
|
11856
11856
|
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"])));
|
|
11857
|
-
var Container$
|
|
11857
|
+
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"])));
|
|
11858
11858
|
var Minimalistic = function (_a) {
|
|
11859
11859
|
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;
|
|
11860
11860
|
var theme = useTheme();
|
|
11861
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11861
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(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), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11862
11862
|
};
|
|
11863
11863
|
var templateObject_1$W, templateObject_2$D;
|
|
11864
11864
|
|
|
11865
|
-
var Container$
|
|
11865
|
+
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"])));
|
|
11866
11866
|
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; });
|
|
11867
11867
|
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; });
|
|
11868
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11868
|
+
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"])));
|
|
11869
11869
|
var Simple = function (_a) {
|
|
11870
11870
|
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;
|
|
11871
11871
|
var theme = useTheme();
|
|
11872
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11872
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11873
11873
|
};
|
|
11874
|
-
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$
|
|
11874
|
+
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$l;
|
|
11875
11875
|
|
|
11876
11876
|
var Bundle = {
|
|
11877
11877
|
Minimalistic: Minimalistic,
|
|
11878
11878
|
Simple: Simple,
|
|
11879
11879
|
};
|
|
11880
11880
|
|
|
11881
|
-
var Container$
|
|
11881
|
+
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"])));
|
|
11882
11882
|
var Tag$1 = function (_a) {
|
|
11883
11883
|
var text = _a.text, className = _a.className;
|
|
11884
|
-
return jsxRuntime.jsx(Container$
|
|
11884
|
+
return jsxRuntime.jsx(Container$A, __assign$1({ className: className }, { children: text }), void 0);
|
|
11885
11885
|
};
|
|
11886
11886
|
var templateObject_1$U;
|
|
11887
11887
|
|
|
@@ -12069,7 +12069,7 @@ var containerByStatus = function (theme, status) {
|
|
|
12069
12069
|
return theme.colors.semantic.urgent.color;
|
|
12070
12070
|
return '';
|
|
12071
12071
|
};
|
|
12072
|
-
var Container$
|
|
12072
|
+
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) {
|
|
12073
12073
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12074
12074
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12075
12075
|
});
|
|
@@ -12132,9 +12132,9 @@ var InputWrapper = newStyled.div(templateObject_3$t || (templateObject_3$t = __m
|
|
|
12132
12132
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12133
12133
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12134
12134
|
});
|
|
12135
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12135
|
+
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"])));
|
|
12136
12136
|
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"])));
|
|
12137
|
-
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$
|
|
12137
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$c;
|
|
12138
12138
|
|
|
12139
12139
|
var BaseInput = function (_a) {
|
|
12140
12140
|
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"]);
|
|
@@ -12157,7 +12157,7 @@ var BaseInput = function (_a) {
|
|
|
12157
12157
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12158
12158
|
}, [status]);
|
|
12159
12159
|
var hasValue = Boolean(value);
|
|
12160
|
-
return (jsxRuntime.jsxs(Container$
|
|
12160
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12161
12161
|
onChange(event.target.value, event);
|
|
12162
12162
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12163
12163
|
onChange('', { target: { value: '' } });
|
|
@@ -12178,7 +12178,7 @@ var Button$2 = function (_a) {
|
|
|
12178
12178
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12179
12179
|
};
|
|
12180
12180
|
|
|
12181
|
-
var Container$
|
|
12181
|
+
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) {
|
|
12182
12182
|
var theme = _a.theme;
|
|
12183
12183
|
return theme.component.inputCustom.input.borderRadius;
|
|
12184
12184
|
});
|
|
@@ -12195,7 +12195,7 @@ var Custom = function (_a) {
|
|
|
12195
12195
|
text: text,
|
|
12196
12196
|
disabled: rest.disabled,
|
|
12197
12197
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12198
|
-
return (jsxRuntime.jsx(Container$
|
|
12198
|
+
return (jsxRuntime.jsx(Container$y, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12199
12199
|
};
|
|
12200
12200
|
var templateObject_1$Q, templateObject_2$y;
|
|
12201
12201
|
|
|
@@ -12230,13 +12230,13 @@ var BasePlusButton = function (_a) {
|
|
|
12230
12230
|
};
|
|
12231
12231
|
var templateObject_1$O;
|
|
12232
12232
|
|
|
12233
|
-
var Container$
|
|
12233
|
+
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"])));
|
|
12234
12234
|
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; });
|
|
12235
12235
|
var BasePlusIcon = function (_a) {
|
|
12236
12236
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12237
12237
|
var theme = useTheme();
|
|
12238
12238
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12239
|
-
return (jsxRuntime.jsx(Container$
|
|
12239
|
+
return (jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12240
12240
|
? theme.colors.shades['700'].color
|
|
12241
12241
|
: status === exports.InputValidationType.Error
|
|
12242
12242
|
? theme.colors.semantic.urgent.color
|
|
@@ -12251,7 +12251,7 @@ var Input$1 = {
|
|
|
12251
12251
|
SimplePlusIcon: BasePlusIcon,
|
|
12252
12252
|
};
|
|
12253
12253
|
|
|
12254
|
-
var Container$
|
|
12254
|
+
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) {
|
|
12255
12255
|
var width = _a.width;
|
|
12256
12256
|
return width;
|
|
12257
12257
|
}, function (_a) {
|
|
@@ -12267,7 +12267,7 @@ var Container$v = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
12267
12267
|
var PaymentMethod = function (_a) {
|
|
12268
12268
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12269
12269
|
var theme = useTheme();
|
|
12270
|
-
return (jsxRuntime.jsx(Container$
|
|
12270
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
12271
12271
|
};
|
|
12272
12272
|
var templateObject_1$M;
|
|
12273
12273
|
|
|
@@ -12288,14 +12288,14 @@ var templateObject_1$L;
|
|
|
12288
12288
|
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"])));
|
|
12289
12289
|
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; });
|
|
12290
12290
|
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"])));
|
|
12291
|
-
var Container$
|
|
12291
|
+
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; });
|
|
12292
12292
|
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"])));
|
|
12293
12293
|
var Total = function (_a) {
|
|
12294
12294
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12295
12295
|
var theme = useTheme();
|
|
12296
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12296
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12297
12297
|
};
|
|
12298
|
-
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$
|
|
12298
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$b;
|
|
12299
12299
|
|
|
12300
12300
|
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12301
12301
|
var color = _a.color;
|
|
@@ -12303,7 +12303,7 @@ var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __make
|
|
|
12303
12303
|
});
|
|
12304
12304
|
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"])));
|
|
12305
12305
|
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"])));
|
|
12306
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12306
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12307
12307
|
var color = _a.color;
|
|
12308
12308
|
return color;
|
|
12309
12309
|
});
|
|
@@ -12316,22 +12316,22 @@ var Subtotal = function (_a) {
|
|
|
12316
12316
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12317
12317
|
})] }), void 0));
|
|
12318
12318
|
};
|
|
12319
|
-
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$
|
|
12319
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;
|
|
12320
12320
|
|
|
12321
12321
|
var Totals = {
|
|
12322
12322
|
Total: Total,
|
|
12323
12323
|
Subtotal: Subtotal,
|
|
12324
12324
|
};
|
|
12325
12325
|
|
|
12326
|
-
var Container$
|
|
12326
|
+
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; });
|
|
12327
12327
|
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"])));
|
|
12328
12328
|
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; });
|
|
12329
|
-
var Details = newStyled.span(templateObject_4$
|
|
12329
|
+
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; });
|
|
12330
12330
|
var Note = function (_a) {
|
|
12331
12331
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12332
|
-
return (jsxRuntime.jsxs(Container$
|
|
12332
|
+
return (jsxRuntime.jsxs(Container$u, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12333
12333
|
};
|
|
12334
|
-
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$
|
|
12334
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$h;
|
|
12335
12335
|
|
|
12336
12336
|
/* eslint-disable no-param-reassign */
|
|
12337
12337
|
var index$1 = function (breakpoints) {
|
|
@@ -12422,7 +12422,7 @@ var Line = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTempl
|
|
|
12422
12422
|
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({
|
|
12423
12423
|
flexDirection: ['column', 'row'],
|
|
12424
12424
|
}));
|
|
12425
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12425
|
+
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({
|
|
12426
12426
|
margin: ['0', '0 1.25rem'],
|
|
12427
12427
|
marginBottom: ['1.875rem', '0'],
|
|
12428
12428
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12446,20 +12446,20 @@ var DeliveryDetails = function (_a) {
|
|
|
12446
12446
|
var theme = useTheme();
|
|
12447
12447
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12448
12448
|
};
|
|
12449
|
-
var templateObject_1$H, templateObject_2$s, templateObject_3$o, templateObject_4$
|
|
12449
|
+
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;
|
|
12450
12450
|
|
|
12451
|
-
var Container$
|
|
12451
|
+
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"])));
|
|
12452
12452
|
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; });
|
|
12453
12453
|
var ScrollToTop = function (_a) {
|
|
12454
12454
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12455
12455
|
var theme = useTheme();
|
|
12456
12456
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12457
|
-
return (jsxRuntime.jsxs(Container$
|
|
12457
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12458
12458
|
};
|
|
12459
12459
|
var templateObject_1$G, templateObject_2$r;
|
|
12460
12460
|
|
|
12461
12461
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12462
|
-
var Container$
|
|
12462
|
+
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) {
|
|
12463
12463
|
var color = _a.color;
|
|
12464
12464
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12465
12465
|
});
|
|
@@ -12467,20 +12467,20 @@ var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplate
|
|
|
12467
12467
|
var OrderBar = function (_a) {
|
|
12468
12468
|
var message = _a.message, color = _a.color;
|
|
12469
12469
|
var theme = useTheme();
|
|
12470
|
-
return (jsxRuntime.jsxs(Container$
|
|
12470
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12471
12471
|
};
|
|
12472
12472
|
var templateObject_1$F, templateObject_2$q;
|
|
12473
12473
|
|
|
12474
12474
|
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; });
|
|
12475
12475
|
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; });
|
|
12476
12476
|
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; });
|
|
12477
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12477
|
+
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; });
|
|
12478
12478
|
var SizeTable = function (_a) {
|
|
12479
12479
|
var headers = _a.headers, data = _a.data;
|
|
12480
12480
|
var theme = useTheme();
|
|
12481
12481
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12482
12482
|
};
|
|
12483
|
-
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$
|
|
12483
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$f;
|
|
12484
12484
|
|
|
12485
12485
|
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; });
|
|
12486
12486
|
var Image = function (_a) {
|
|
@@ -12489,7 +12489,7 @@ var Image = function (_a) {
|
|
|
12489
12489
|
};
|
|
12490
12490
|
var templateObject_1$D;
|
|
12491
12491
|
|
|
12492
|
-
var Container$
|
|
12492
|
+
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"])));
|
|
12493
12493
|
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12494
12494
|
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({
|
|
12495
12495
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12514,7 +12514,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12514
12514
|
margin: '0.063rem 0',
|
|
12515
12515
|
});
|
|
12516
12516
|
});
|
|
12517
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12517
|
+
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) {
|
|
12518
12518
|
var withTag = _a.withTag; _a.theme;
|
|
12519
12519
|
return withTag
|
|
12520
12520
|
? mediaQueries({
|
|
@@ -12527,9 +12527,9 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
|
|
|
12527
12527
|
var SimpleOrderItem = function (_a) {
|
|
12528
12528
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12529
12529
|
var theme = useTheme();
|
|
12530
|
-
return (jsxRuntime.jsxs(Container$
|
|
12530
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12531
12531
|
};
|
|
12532
|
-
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$
|
|
12532
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$e, templateObject_5$9;
|
|
12533
12533
|
|
|
12534
12534
|
function formatDate(date) {
|
|
12535
12535
|
var day = date.getDate();
|
|
@@ -12538,7 +12538,7 @@ function formatDate(date) {
|
|
|
12538
12538
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12539
12539
|
}
|
|
12540
12540
|
|
|
12541
|
-
var Container$
|
|
12541
|
+
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"])));
|
|
12542
12542
|
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({
|
|
12543
12543
|
fontSize: ['14px', '16px'],
|
|
12544
12544
|
lineHeight: ['22px', '24px'],
|
|
@@ -12546,7 +12546,7 @@ var Heading = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTe
|
|
|
12546
12546
|
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({
|
|
12547
12547
|
flexDirection: ['column', 'row'],
|
|
12548
12548
|
}));
|
|
12549
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12549
|
+
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({
|
|
12550
12550
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12551
12551
|
}));
|
|
12552
12552
|
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({
|
|
@@ -12561,17 +12561,17 @@ var P$1 = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplate
|
|
|
12561
12561
|
var Review = function (_a) {
|
|
12562
12562
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12563
12563
|
var theme = useTheme();
|
|
12564
|
-
return (jsxRuntime.jsxs(Container$
|
|
12564
|
+
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12565
12565
|
};
|
|
12566
|
-
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$
|
|
12566
|
+
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12567
12567
|
|
|
12568
12568
|
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"])));
|
|
12569
12569
|
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"])));
|
|
12570
12570
|
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"])));
|
|
12571
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12571
|
+
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"])));
|
|
12572
12572
|
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; });
|
|
12573
12573
|
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; });
|
|
12574
|
-
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$
|
|
12574
|
+
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12575
12575
|
|
|
12576
12576
|
var DropdownListIcons = function (_a) {
|
|
12577
12577
|
var items = _a.items;
|
|
@@ -12601,7 +12601,7 @@ var Row = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTempla
|
|
|
12601
12601
|
return props.rightToLeft &&
|
|
12602
12602
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12603
12603
|
});
|
|
12604
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12604
|
+
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; });
|
|
12605
12605
|
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; });
|
|
12606
12606
|
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; });
|
|
12607
12607
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12609,7 +12609,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12609
12609
|
var theme = useTheme();
|
|
12610
12610
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12611
12611
|
};
|
|
12612
|
-
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$
|
|
12612
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$b, templateObject_5$6, templateObject_6$5;
|
|
12613
12613
|
|
|
12614
12614
|
var index = /*#__PURE__*/Object.freeze({
|
|
12615
12615
|
__proto__: null,
|
|
@@ -12622,7 +12622,7 @@ var Spacing = function (_a) {
|
|
|
12622
12622
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12623
12623
|
};
|
|
12624
12624
|
|
|
12625
|
-
var Container$
|
|
12625
|
+
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) {
|
|
12626
12626
|
var height = _a.height;
|
|
12627
12627
|
return (height ? height : '1.5em');
|
|
12628
12628
|
}, function (_a) {
|
|
@@ -12647,7 +12647,7 @@ var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
12647
12647
|
var SkeletonBox = function (_a) {
|
|
12648
12648
|
var width = _a.width, height = _a.height;
|
|
12649
12649
|
var theme = useTheme();
|
|
12650
|
-
return jsxRuntime.jsx(Container$
|
|
12650
|
+
return jsxRuntime.jsx(Container$p, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12651
12651
|
};
|
|
12652
12652
|
var templateObject_1$x;
|
|
12653
12653
|
|
|
@@ -12660,7 +12660,7 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12660
12660
|
});
|
|
12661
12661
|
});
|
|
12662
12662
|
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"])));
|
|
12663
|
-
var Container$
|
|
12663
|
+
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"])));
|
|
12664
12664
|
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; });
|
|
12665
12665
|
var getStylesBySize = function (size) {
|
|
12666
12666
|
switch (size) {
|
|
@@ -12687,7 +12687,7 @@ var getStylesBySize = function (size) {
|
|
|
12687
12687
|
};
|
|
12688
12688
|
}
|
|
12689
12689
|
};
|
|
12690
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12690
|
+
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"])));
|
|
12691
12691
|
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"])));
|
|
12692
12692
|
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12693
12693
|
var ProductItemMobile = function (_a) {
|
|
@@ -12706,14 +12706,14 @@ var ProductItemMobile = function (_a) {
|
|
|
12706
12706
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12707
12707
|
};
|
|
12708
12708
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12709
|
-
return (jsxs(Container$
|
|
12709
|
+
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));
|
|
12710
12710
|
};
|
|
12711
|
-
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$
|
|
12711
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12712
12712
|
|
|
12713
|
-
var Container$
|
|
12713
|
+
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"])));
|
|
12714
12714
|
function withProductGrid(ProductItemComponent, data) {
|
|
12715
12715
|
function WithProductGrid(props) {
|
|
12716
|
-
return (jsxRuntime.jsx(Container$
|
|
12716
|
+
return (jsxRuntime.jsx(Container$n, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12717
12717
|
}
|
|
12718
12718
|
/* istanbul ignore next */
|
|
12719
12719
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -12774,7 +12774,7 @@ var Drawer = function (_a) {
|
|
|
12774
12774
|
};
|
|
12775
12775
|
var templateObject_1$u, templateObject_2$j;
|
|
12776
12776
|
|
|
12777
|
-
var Container$
|
|
12777
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12778
12778
|
var size = _a.size;
|
|
12779
12779
|
return (size ? size : '100%');
|
|
12780
12780
|
}, function (_a) {
|
|
@@ -12787,7 +12787,7 @@ var Animation = newStyled.div(templateObject_2$i || (templateObject_2$i = __make
|
|
|
12787
12787
|
});
|
|
12788
12788
|
var Spinner = function (_a) {
|
|
12789
12789
|
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;
|
|
12790
|
-
return (jsxRuntime.jsx(Container$
|
|
12790
|
+
return (jsxRuntime.jsx(Container$m, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12791
12791
|
};
|
|
12792
12792
|
var templateObject_1$t, templateObject_2$i;
|
|
12793
12793
|
|
|
@@ -12834,12 +12834,12 @@ function FilteringDropdown(_a) {
|
|
|
12834
12834
|
}) }, void 0)] }), void 0));
|
|
12835
12835
|
}
|
|
12836
12836
|
|
|
12837
|
-
var Container$
|
|
12837
|
+
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"])));
|
|
12838
12838
|
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"])));
|
|
12839
12839
|
var PageNumbersContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12840
12840
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12841
12841
|
}));
|
|
12842
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12842
|
+
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) {
|
|
12843
12843
|
var bold = _a.bold;
|
|
12844
12844
|
return (bold ? '700' : '500');
|
|
12845
12845
|
}, function (_a) {
|
|
@@ -12856,7 +12856,7 @@ var PageNumber = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
12856
12856
|
var background = _a.background;
|
|
12857
12857
|
return background || 'unset';
|
|
12858
12858
|
});
|
|
12859
|
-
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$
|
|
12859
|
+
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$9;
|
|
12860
12860
|
|
|
12861
12861
|
var Pagination = function (_a) {
|
|
12862
12862
|
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;
|
|
@@ -12902,7 +12902,7 @@ var Pagination = function (_a) {
|
|
|
12902
12902
|
}
|
|
12903
12903
|
return pages;
|
|
12904
12904
|
}, [from, page, showReducedPages, to]);
|
|
12905
|
-
return (jsxRuntime.jsxs(Container$
|
|
12905
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(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 && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(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)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12906
12906
|
};
|
|
12907
12907
|
|
|
12908
12908
|
var PaginatorBlog = function (_a) {
|
|
@@ -12916,12 +12916,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12916
12916
|
setPage(page);
|
|
12917
12917
|
onChange(page);
|
|
12918
12918
|
};
|
|
12919
|
-
return (jsxRuntime.jsxs(Container$
|
|
12919
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
12920
12920
|
? theme.colors.shades['white'].color
|
|
12921
12921
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12922
12922
|
};
|
|
12923
12923
|
|
|
12924
|
-
var Container$
|
|
12924
|
+
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({
|
|
12925
12925
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12926
12926
|
}));
|
|
12927
12927
|
var Description$1 = newStyled.div({
|
|
@@ -12938,18 +12938,18 @@ var Description$1 = newStyled.div({
|
|
|
12938
12938
|
var ProductItem = function (_a) {
|
|
12939
12939
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12940
12940
|
var theme = useTheme();
|
|
12941
|
-
return (jsxRuntime.jsxs(Container$
|
|
12941
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12942
12942
|
};
|
|
12943
12943
|
var templateObject_1$q;
|
|
12944
12944
|
|
|
12945
|
-
var Container$
|
|
12945
|
+
var Container$j = newStyled.div({
|
|
12946
12946
|
display: 'flex',
|
|
12947
12947
|
justifyContent: 'center',
|
|
12948
12948
|
padding: '1rem',
|
|
12949
12949
|
});
|
|
12950
12950
|
var Footer = function (_a) {
|
|
12951
12951
|
var text = _a.text, onClick = _a.onClick;
|
|
12952
|
-
return (jsxRuntime.jsx(Container$
|
|
12952
|
+
return (jsxRuntime.jsx(Container$j, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12953
12953
|
};
|
|
12954
12954
|
|
|
12955
12955
|
var Ul = newStyled.ul({
|
|
@@ -12968,7 +12968,7 @@ var Anchor = newStyled.a({
|
|
|
12968
12968
|
padding: 0,
|
|
12969
12969
|
textDecoration: 'none',
|
|
12970
12970
|
});
|
|
12971
|
-
var Container$
|
|
12971
|
+
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({
|
|
12972
12972
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12973
12973
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12974
12974
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -12979,7 +12979,7 @@ var Header$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeT
|
|
|
12979
12979
|
var ResultsPanel = function (_a) {
|
|
12980
12980
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12981
12981
|
var theme = useTheme();
|
|
12982
|
-
return (jsxRuntime.jsxs(Container$
|
|
12982
|
+
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12983
12983
|
};
|
|
12984
12984
|
var templateObject_1$p, templateObject_2$f, templateObject_3$f;
|
|
12985
12985
|
|
|
@@ -13110,7 +13110,7 @@ var reducer = function (state, action) {
|
|
|
13110
13110
|
}
|
|
13111
13111
|
}
|
|
13112
13112
|
};
|
|
13113
|
-
var Container$
|
|
13113
|
+
var Container$h = newStyled.div({
|
|
13114
13114
|
position: 'relative',
|
|
13115
13115
|
display: 'flex',
|
|
13116
13116
|
});
|
|
@@ -13146,7 +13146,7 @@ var SearchBar = function (_a) {
|
|
|
13146
13146
|
onClose();
|
|
13147
13147
|
}
|
|
13148
13148
|
};
|
|
13149
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13149
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$h, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(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) {
|
|
13150
13150
|
if (e.key === 'Enter') {
|
|
13151
13151
|
e.preventDefault();
|
|
13152
13152
|
e.stopPropagation();
|
|
@@ -13420,7 +13420,7 @@ function useSwipeable(options) {
|
|
|
13420
13420
|
return handlers;
|
|
13421
13421
|
}
|
|
13422
13422
|
|
|
13423
|
-
var Container$
|
|
13423
|
+
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) {
|
|
13424
13424
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13425
13425
|
return borderRadiusVariant &&
|
|
13426
13426
|
"\n border-radius: 40px;\n ";
|
|
@@ -13429,7 +13429,7 @@ var TopTagContainer = newStyled.div(templateObject_2$e || (templateObject_2$e =
|
|
|
13429
13429
|
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"])));
|
|
13430
13430
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13431
13431
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13432
|
-
return (jsxRuntime.jsxs(Container$
|
|
13432
|
+
return (jsxRuntime.jsxs(Container$g, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
13433
13433
|
});
|
|
13434
13434
|
var templateObject_1$n, templateObject_2$e, templateObject_3$e;
|
|
13435
13435
|
|
|
@@ -13440,12 +13440,12 @@ var ArrowButton = function (_a) {
|
|
|
13440
13440
|
};
|
|
13441
13441
|
var templateObject_1$m;
|
|
13442
13442
|
|
|
13443
|
-
var Container$
|
|
13443
|
+
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"])));
|
|
13444
13444
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13445
13445
|
var SlideDots = function (_a) {
|
|
13446
13446
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13447
13447
|
var theme = useTheme();
|
|
13448
|
-
return (jsxRuntime.jsx(Container$
|
|
13448
|
+
return (jsxRuntime.jsx(Container$f, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13449
13449
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13450
13450
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13451
13451
|
};
|
|
@@ -13467,7 +13467,7 @@ var SlideNavigation = function (_a) {
|
|
|
13467
13467
|
};
|
|
13468
13468
|
var templateObject_1$k, templateObject_2$d, templateObject_3$d;
|
|
13469
13469
|
|
|
13470
|
-
var Container$
|
|
13470
|
+
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"])));
|
|
13471
13471
|
var ProductGalleryMobile = function (_a) {
|
|
13472
13472
|
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;
|
|
13473
13473
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13489,7 +13489,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13489
13489
|
React$2.useEffect(function () {
|
|
13490
13490
|
setSelectedImage(images[index]);
|
|
13491
13491
|
}, [index, images]);
|
|
13492
|
-
return (jsxRuntime.jsxs(Container$
|
|
13492
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13493
13493
|
};
|
|
13494
13494
|
var templateObject_1$j;
|
|
13495
13495
|
|
|
@@ -13629,9 +13629,9 @@ var visibleStyle = function (_a) {
|
|
|
13629
13629
|
var transformStyle = function (_a) {
|
|
13630
13630
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13631
13631
|
return opened
|
|
13632
|
-
? css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$
|
|
13632
|
+
? 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%)');
|
|
13633
13633
|
};
|
|
13634
|
-
var Container$
|
|
13634
|
+
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({
|
|
13635
13635
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13636
13636
|
}), visibleStyle, transformStyle);
|
|
13637
13637
|
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);
|
|
@@ -13644,7 +13644,7 @@ var Modal = function (_a) {
|
|
|
13644
13644
|
}
|
|
13645
13645
|
close();
|
|
13646
13646
|
};
|
|
13647
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13647
|
+
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));
|
|
13648
13648
|
};
|
|
13649
13649
|
var modalEvent = function (id, detail) {
|
|
13650
13650
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13672,7 +13672,7 @@ var useModal = function (id) {
|
|
|
13672
13672
|
close: close,
|
|
13673
13673
|
}); }, [close, open, opened]);
|
|
13674
13674
|
};
|
|
13675
|
-
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$
|
|
13675
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
13676
13676
|
|
|
13677
13677
|
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; });
|
|
13678
13678
|
var Title$1 = function (_a) {
|
|
@@ -13698,11 +13698,11 @@ var Description = function (_a) {
|
|
|
13698
13698
|
};
|
|
13699
13699
|
var templateObject_1$f;
|
|
13700
13700
|
|
|
13701
|
-
var Container$
|
|
13701
|
+
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"); });
|
|
13702
13702
|
var CloseButton = function (_a) {
|
|
13703
13703
|
var onClick = _a.onClick, size = _a.size;
|
|
13704
13704
|
var theme = useTheme();
|
|
13705
|
-
return (jsxRuntime.jsx(Container$
|
|
13705
|
+
return (jsxRuntime.jsx(Container$c, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13706
13706
|
};
|
|
13707
13707
|
var templateObject_1$e;
|
|
13708
13708
|
|
|
@@ -13714,10 +13714,10 @@ var CartProductItem = {
|
|
|
13714
13714
|
CloseButton: CloseButton,
|
|
13715
13715
|
};
|
|
13716
13716
|
|
|
13717
|
-
var Container$
|
|
13717
|
+
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; });
|
|
13718
13718
|
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"])));
|
|
13719
13719
|
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"])));
|
|
13720
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13720
|
+
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"])));
|
|
13721
13721
|
var QuantityPicker = function (_a) {
|
|
13722
13722
|
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;
|
|
13723
13723
|
var theme = useTheme();
|
|
@@ -13740,9 +13740,9 @@ var QuantityPicker = function (_a) {
|
|
|
13740
13740
|
return clamp(value);
|
|
13741
13741
|
});
|
|
13742
13742
|
}, [value, clamp]);
|
|
13743
|
-
return (jsxRuntime.jsxs(Container$
|
|
13743
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13744
13744
|
};
|
|
13745
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$
|
|
13745
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$7;
|
|
13746
13746
|
|
|
13747
13747
|
var htmlReactParser = {exports: {}};
|
|
13748
13748
|
|
|
@@ -17523,17 +17523,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17523
17523
|
HTMLReactParser$1.attributesToProps;
|
|
17524
17524
|
HTMLReactParser$1.Element;
|
|
17525
17525
|
|
|
17526
|
-
var Container$
|
|
17526
|
+
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"])));
|
|
17527
17527
|
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"])));
|
|
17528
17528
|
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"])));
|
|
17529
|
-
var Label = newStyled.div(templateObject_4$
|
|
17529
|
+
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"])));
|
|
17530
17530
|
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"])));
|
|
17531
17531
|
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"])));
|
|
17532
17532
|
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"])));
|
|
17533
17533
|
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"])));
|
|
17534
17534
|
var PackSelector = function (_a) {
|
|
17535
17535
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17536
|
-
return (jsxRuntime.jsx(Container$
|
|
17536
|
+
return (jsxRuntime.jsx(Container$a, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17537
17537
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17538
17538
|
}) }), void 0));
|
|
17539
17539
|
};
|
|
@@ -17559,18 +17559,19 @@ var PackCard = function (_a) {
|
|
|
17559
17559
|
currency: currencyCode || 'USD',
|
|
17560
17560
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17561
17561
|
};
|
|
17562
|
-
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$
|
|
17562
|
+
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;
|
|
17563
17563
|
|
|
17564
17564
|
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; });
|
|
17565
17565
|
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; });
|
|
17566
17566
|
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"])));
|
|
17567
|
+
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'); });
|
|
17567
17568
|
var Accordion = function (_a) {
|
|
17568
|
-
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
17569
|
+
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;
|
|
17569
17570
|
var theme = useTheme();
|
|
17570
|
-
var
|
|
17571
|
-
return (jsxRuntime.jsxs(
|
|
17571
|
+
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17572
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17572
17573
|
};
|
|
17573
|
-
var templateObject_1$b, templateObject_2$9, templateObject_3$9;
|
|
17574
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$5;
|
|
17574
17575
|
|
|
17575
17576
|
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; });
|
|
17576
17577
|
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"])));
|
|
@@ -17578,7 +17579,7 @@ var MobileHeader = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __m
|
|
|
17578
17579
|
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"])));
|
|
17579
17580
|
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; });
|
|
17580
17581
|
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; });
|
|
17581
|
-
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"])));
|
|
17582
|
+
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'); });
|
|
17582
17583
|
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; });
|
|
17583
17584
|
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"])));
|
|
17584
17585
|
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"])));
|
|
@@ -17668,9 +17669,9 @@ var Filters = function (_a) {
|
|
|
17668
17669
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
17669
17670
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
17670
17671
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
17671
|
-
.map(function (option, index) { return (jsxRuntime.jsx(OptionContainer, { children: jsxRuntime.jsx(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }, index)); }), filters
|
|
17672
|
+
.map(function (option, index) { return (jsxRuntime.jsx(OptionContainer, __assign$1({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsxRuntime.jsx(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
|
|
17672
17673
|
.filter(function (filter) { return !filter.isLinkOption; })
|
|
17673
|
-
.map(function (filter) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(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 && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
17674
|
+
.map(function (filter) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(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 && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
17674
17675
|
};
|
|
17675
17676
|
var FilterCheckbox = function (_a) {
|
|
17676
17677
|
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
|