@trafilea/afrodita-components 5.0.0-beta.16 → 5.0.0-beta.19
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 +20 -11
- package/build/index.esm.js +66 -52
- package/build/index.esm.js.map +1 -1
- package/build/index.js +66 -52
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -83,8 +83,8 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
var IconWrapper = function (_a) {
|
|
86
|
-
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children,
|
|
87
|
-
return (jsxRuntime.jsxs("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
86
|
+
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testId = _a.testId, fill = _a.fill;
|
|
87
|
+
return (jsxRuntime.jsxs("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testId ? testId : 'IconWrapper', fill: fill }, { children: [jsxRuntime.jsxs("title", { children: [title, " icon"] }, void 0), children] }), void 0));
|
|
88
88
|
};
|
|
89
89
|
|
|
90
90
|
var SixtyDaysGuarantee = function (_a) {
|
|
@@ -120,7 +120,7 @@ var LightExclamation = function (_a) {
|
|
|
120
120
|
|
|
121
121
|
var LightCheck = function (_a) {
|
|
122
122
|
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 5 : _b;
|
|
123
|
-
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none",
|
|
123
|
+
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none", testId: "LightCheck" }, { children: [jsxRuntime.jsx("circle", { cx: "54.9999", cy: "55", r: "47.9167", stroke: fill, strokeWidth: strokeWidth }, void 0), jsxRuntime.jsx("path", { d: "M72.2976 42.0884L46.957 67.5762L37.9226 58.186C36.6005 57.0681 34.397 57.0681 33.0748 58.186C31.7527 59.3039 31.7527 61.5396 33.0748 62.8811L44.7535 74.7307C45.4146 75.4014 46.296 75.625 47.1774 75.625C48.0588 75.625 48.9402 75.4014 49.3809 74.7307L76.925 46.7835C78.2471 45.4421 78.2471 43.4299 76.925 42.0884C75.6029 40.9705 73.6197 40.9705 72.2976 42.0884Z", fill: fill }, void 0)] }), void 0));
|
|
124
124
|
};
|
|
125
125
|
|
|
126
126
|
var Question = function (_a) {
|
|
@@ -156,7 +156,7 @@ var FitPredictor$1 = function (_a) {
|
|
|
156
156
|
|
|
157
157
|
var Loading = function (_a) {
|
|
158
158
|
var height = _a.height, width = _a.width, fill = _a.fill, backgroundColor = _a.backgroundColor;
|
|
159
|
-
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading",
|
|
159
|
+
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading", testId: "Loading" }, { children: [jsxRuntime.jsx("mask", __assign$1({ id: "loading-mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95Z" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign$1({ mask: "url(#loading-mask0)" }, { children: [jsxRuntime.jsx("rect", { width: "100", height: "100", fill: backgroundColor }, void 0), jsxRuntime.jsx("rect", { x: "50", width: "50", height: "50", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
162
|
var Shapermint = function (_a) {
|
|
@@ -183,13 +183,13 @@ var ChevronDown = function (_a) {
|
|
|
183
183
|
};
|
|
184
184
|
|
|
185
185
|
var ChevronLeft = function (_a) {
|
|
186
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
187
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
186
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
187
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left", testId: testId }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
var ChevronRight = function (_a) {
|
|
191
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
192
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
191
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
192
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right", testId: testId }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
193
193
|
};
|
|
194
194
|
|
|
195
195
|
var ChevronRightVariant = function (_a) {
|
|
@@ -250,17 +250,17 @@ var Rule = function (_a) {
|
|
|
250
250
|
|
|
251
251
|
var Star = function (_a) {
|
|
252
252
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
253
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star",
|
|
253
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star", testId: "star" }, { children: jsxRuntime.jsx("path", { d: "M16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523Z", fill: fill }, void 0) }), void 0));
|
|
254
254
|
};
|
|
255
255
|
|
|
256
256
|
var StarEmpty = function (_a) {
|
|
257
257
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
258
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty",
|
|
258
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty", testId: "star-empty" }, { children: jsxRuntime.jsx("path", { d: "M36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058ZM26.1454 21.9568L27.8288 31.6868L19 27.096L10.1712 31.6868L11.8546 21.9568L4.70918 15.067L14.5821 13.6469L19 4.78858L23.4179 13.6469L33.2908 15.067L26.1454 21.9568Z", fill: fill }, void 0) }), void 0));
|
|
259
259
|
};
|
|
260
260
|
|
|
261
261
|
var StarHalf = function (_a) {
|
|
262
262
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
263
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half",
|
|
263
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half", testId: "star-half" }, { children: jsxRuntime.jsx("path", { d: "M36.0538 12.0593L25.677 10.5609L21.0397 1.25227C20.6229 0.420469 19.8097 0 18.9966 0C18.1884 0 17.3809 0.414844 16.9626 1.25227L12.3239 10.5602L1.94638 12.0572C0.0853893 12.3244 -0.660423 14.5948 0.688703 15.8955L8.19574 23.1377L6.41912 33.3668C6.16674 34.8279 7.34288 36 8.6601 36C9.00961 36 9.36905 35.9177 9.71431 35.7363L18.998 30.9073L28.2809 35.7377C28.6255 35.917 28.9842 35.9986 29.3323 35.9986C30.6509 35.9986 31.8292 34.8307 31.5768 33.3689L29.8023 23.1391L37.3108 15.8984C38.6606 14.5976 37.9148 12.3265 36.0538 12.0593ZM27.4231 20.7218L26.1385 21.9607L26.4419 23.7101L27.8258 31.687L20.5853 27.919L18.9987 27.0935L19.0008 4.79109L22.6186 12.0537L23.4112 13.6448L25.1842 13.9008L33.2825 15.0701L27.4231 20.7218Z", fill: fill }, void 0) }), void 0));
|
|
264
264
|
};
|
|
265
265
|
|
|
266
266
|
var Stopwatch = function (_a) {
|
|
@@ -465,7 +465,7 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
465
465
|
|
|
466
466
|
var SlideDot = function (_a) {
|
|
467
467
|
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
468
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot",
|
|
468
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
469
469
|
};
|
|
470
470
|
|
|
471
471
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -4093,8 +4093,8 @@ var TAGS = {
|
|
|
4093
4093
|
hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
|
|
4094
4094
|
hero3: newStyled.h3(templateObject_3$s || (templateObject_3$s = __makeTemplateObject([""], [""]))),
|
|
4095
4095
|
display1: newStyled.h1(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""]))),
|
|
4096
|
-
display2: newStyled.h2(templateObject_5$
|
|
4097
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4096
|
+
display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
|
|
4097
|
+
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4098
4098
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4099
4099
|
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
4100
4100
|
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
@@ -4108,7 +4108,7 @@ var TAGS = {
|
|
|
4108
4108
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4109
4109
|
};
|
|
4110
4110
|
var Text$5 = function (_a) {
|
|
4111
|
-
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4111
|
+
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
4112
4112
|
var theme = useTheme();
|
|
4113
4113
|
var Tag = React$2.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
4114
4114
|
var _b = React$2.useMemo(function () {
|
|
@@ -4152,7 +4152,7 @@ var Text$5 = function (_a) {
|
|
|
4152
4152
|
}
|
|
4153
4153
|
return propsHref;
|
|
4154
4154
|
}, [props.disabled, propsHref]);
|
|
4155
|
-
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
4155
|
+
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
|
|
4156
4156
|
};
|
|
4157
4157
|
var DEFAULTS = {
|
|
4158
4158
|
heading1: {
|
|
@@ -4212,7 +4212,7 @@ var DEFAULTS = {
|
|
|
4212
4212
|
size: 'regular',
|
|
4213
4213
|
},
|
|
4214
4214
|
};
|
|
4215
|
-
var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$
|
|
4215
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4216
4216
|
|
|
4217
4217
|
var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
4218
4218
|
var inline = _a.inline;
|
|
@@ -4407,10 +4407,17 @@ var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __ma
|
|
|
4407
4407
|
var size = _a.size;
|
|
4408
4408
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4409
4409
|
});
|
|
4410
|
+
function getTestId() {
|
|
4411
|
+
var args = [];
|
|
4412
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
4413
|
+
args[_i] = arguments[_i];
|
|
4414
|
+
}
|
|
4415
|
+
return args.filter(Boolean).join('-');
|
|
4416
|
+
}
|
|
4410
4417
|
var PriceLabel = function (_a) {
|
|
4411
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
4418
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
4412
4419
|
var theme = useTheme();
|
|
4413
|
-
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid":
|
|
4420
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: 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));
|
|
4414
4421
|
};
|
|
4415
4422
|
var templateObject_1$$, templateObject_2$E, templateObject_3$q;
|
|
4416
4423
|
|
|
@@ -4455,7 +4462,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ =
|
|
|
4455
4462
|
newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4456
4463
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
4457
4464
|
var Span = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4458
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4465
|
+
var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
4459
4466
|
var Label$2 = function (_a) {
|
|
4460
4467
|
var label = _a.label, values = _a.values;
|
|
4461
4468
|
return (jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -4473,7 +4480,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4473
4480
|
Option: Option,
|
|
4474
4481
|
OptionsContainer: OptionsContainer,
|
|
4475
4482
|
});
|
|
4476
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$
|
|
4483
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$b;
|
|
4477
4484
|
|
|
4478
4485
|
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"], ["\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"])), function (_a) {
|
|
4479
4486
|
var borderColor = _a.borderColor;
|
|
@@ -4969,13 +4976,13 @@ var TooltipText = newStyled.div(templateObject_4$g || (templateObject_4$g = __ma
|
|
|
4969
4976
|
var color = _a.color;
|
|
4970
4977
|
return color;
|
|
4971
4978
|
});
|
|
4972
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
4973
|
-
var Title$5 = newStyled.h1(templateObject_6$
|
|
4979
|
+
var TopSection = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
4980
|
+
var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
4974
4981
|
var color = _a.color;
|
|
4975
4982
|
return color;
|
|
4976
4983
|
});
|
|
4977
4984
|
var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
|
|
4978
|
-
var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$
|
|
4985
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$a, templateObject_6$7, templateObject_7$4;
|
|
4979
4986
|
|
|
4980
4987
|
var Tooltip = function (_a) {
|
|
4981
4988
|
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;
|
|
@@ -5163,9 +5170,9 @@ var RadioGroupInput = function (_a) {
|
|
|
5163
5170
|
var Wrapper$3 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5164
5171
|
var Container$s = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
5165
5172
|
var Minimalistic = function (_a) {
|
|
5166
|
-
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;
|
|
5173
|
+
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;
|
|
5167
5174
|
var theme = useTheme();
|
|
5168
|
-
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$s, __assign$1({ "data-testid": "
|
|
5175
|
+
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$s, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$5, __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$s, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$5, __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$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5169
5176
|
};
|
|
5170
5177
|
var templateObject_1$M, templateObject_2$w;
|
|
5171
5178
|
|
|
@@ -5605,13 +5612,13 @@ var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __make
|
|
|
5605
5612
|
var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __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; });
|
|
5606
5613
|
var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
5607
5614
|
var Container$l = newStyled.div(templateObject_4$e || (templateObject_4$e = __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; });
|
|
5608
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
5615
|
+
var Discount = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
5609
5616
|
var Total = function (_a) {
|
|
5610
5617
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
5611
5618
|
var theme = useTheme();
|
|
5612
5619
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
5613
5620
|
};
|
|
5614
|
-
var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$
|
|
5621
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$9;
|
|
5615
5622
|
|
|
5616
5623
|
var Wrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5617
5624
|
var color = _a.color;
|
|
@@ -5744,11 +5751,11 @@ var Col$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemp
|
|
|
5744
5751
|
textAlign: ['center', 'inherit'],
|
|
5745
5752
|
width: ['100%', 'inherit'],
|
|
5746
5753
|
}));
|
|
5747
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
5754
|
+
var IconContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
|
|
5748
5755
|
marginBottom: ['1.875rem', '0'],
|
|
5749
5756
|
width: ['auto', '1.375rem'],
|
|
5750
5757
|
}));
|
|
5751
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
5758
|
+
var SectionTitle = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
5752
5759
|
display: ['block', 'flex'],
|
|
5753
5760
|
}), function (_a) {
|
|
5754
5761
|
var theme = _a.theme;
|
|
@@ -5761,7 +5768,7 @@ var DeliveryDetails = function (_a) {
|
|
|
5761
5768
|
var theme = useTheme();
|
|
5762
5769
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$3, __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), 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));
|
|
5763
5770
|
};
|
|
5764
|
-
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$
|
|
5771
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
5765
5772
|
|
|
5766
5773
|
var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
5767
5774
|
var H1$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __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; });
|
|
@@ -5826,13 +5833,13 @@ var PriceContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = _
|
|
|
5826
5833
|
})
|
|
5827
5834
|
: 'justify-content: end';
|
|
5828
5835
|
});
|
|
5829
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
5836
|
+
var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
5830
5837
|
var SimpleOrderItem = function (_a) {
|
|
5831
5838
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
5832
5839
|
var theme = useTheme();
|
|
5833
5840
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsxs(ImageContainer$1, { 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$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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 }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
5834
5841
|
};
|
|
5835
|
-
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$
|
|
5842
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$7;
|
|
5836
5843
|
|
|
5837
5844
|
function formatDate(date) {
|
|
5838
5845
|
var day = date.getDate();
|
|
@@ -5852,11 +5859,11 @@ var Content = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTe
|
|
|
5852
5859
|
var ReviewContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
5853
5860
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
5854
5861
|
}));
|
|
5855
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
5862
|
+
var H2$1 = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
5856
5863
|
fontSize: ['16px', '18px'],
|
|
5857
5864
|
lineHeight: ['24px', '28px'],
|
|
5858
5865
|
}));
|
|
5859
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
5866
|
+
var H3$1 = newStyled.h3(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
|
|
5860
5867
|
fontSize: ['14px', '16px'],
|
|
5861
5868
|
lineHeight: ['22px', '24px'],
|
|
5862
5869
|
}));
|
|
@@ -5866,7 +5873,7 @@ var Review = function (_a) {
|
|
|
5866
5873
|
var theme = useTheme();
|
|
5867
5874
|
return (jsxRuntime.jsxs(Container$g, { 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));
|
|
5868
5875
|
};
|
|
5869
|
-
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$
|
|
5876
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
5870
5877
|
|
|
5871
5878
|
var Button$3 = newStyled.button(function () { return ({
|
|
5872
5879
|
background: 'transparent',
|
|
@@ -10179,9 +10186,9 @@ var List = newStyled.ul(templateObject_1$q || (templateObject_1$q = __makeTempla
|
|
|
10179
10186
|
var Item$1 = newStyled.li(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
10180
10187
|
var DropdownWrapper = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
10181
10188
|
var ArrowContainer$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
10182
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
10183
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
10184
|
-
var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$
|
|
10189
|
+
var StyledDropdown = newStyled.ul(templateObject_5$5 || (templateObject_5$5 = __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; });
|
|
10190
|
+
var DropdownItem = newStyled.li(templateObject_6$4 || (templateObject_6$4 = __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; });
|
|
10191
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4;
|
|
10185
10192
|
|
|
10186
10193
|
var DropdownListIcons = function (_a) {
|
|
10187
10194
|
var items = _a.items;
|
|
@@ -10212,14 +10219,14 @@ var Row = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTempla
|
|
|
10212
10219
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
10213
10220
|
});
|
|
10214
10221
|
var H5 = newStyled.h5(templateObject_4$6 || (templateObject_4$6 = __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; });
|
|
10215
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
10216
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
10222
|
+
var H3 = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
10223
|
+
var FreeShipping = newStyled.span(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
10217
10224
|
var CrossSellCheckbox = function (_a) {
|
|
10218
10225
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
10219
10226
|
var theme = useTheme();
|
|
10220
10227
|
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));
|
|
10221
10228
|
};
|
|
10222
|
-
var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$
|
|
10229
|
+
var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3;
|
|
10223
10230
|
|
|
10224
10231
|
var index = /*#__PURE__*/Object.freeze({
|
|
10225
10232
|
__proto__: null,
|
|
@@ -10279,7 +10286,7 @@ var ProductItemMobile = function (_a) {
|
|
|
10279
10286
|
_a[exports.ComponentSize.Small] = 2,
|
|
10280
10287
|
_a)[size];
|
|
10281
10288
|
}, [size]);
|
|
10282
|
-
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10289
|
+
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10283
10290
|
};
|
|
10284
10291
|
var templateObject_1$n, templateObject_2$d;
|
|
10285
10292
|
|
|
@@ -11016,6 +11023,7 @@ var Portal = function (_a) {
|
|
|
11016
11023
|
throw new Error("Unable to find/create container (".concat(id, ")"));
|
|
11017
11024
|
}
|
|
11018
11025
|
element.dataset.testId = id;
|
|
11026
|
+
element.style.overflow = 'hidden';
|
|
11019
11027
|
setMounted(true);
|
|
11020
11028
|
container.current = element;
|
|
11021
11029
|
}, [id]);
|
|
@@ -11122,12 +11130,17 @@ var react = __toCommonJS(react_exports);
|
|
|
11122
11130
|
var visibleStyle = function (_a) {
|
|
11123
11131
|
var opened = _a.opened;
|
|
11124
11132
|
return opened
|
|
11125
|
-
? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n
|
|
11133
|
+
? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
11134
|
+
};
|
|
11135
|
+
var transformStyle = function (_a) {
|
|
11136
|
+
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
11137
|
+
return opened
|
|
11138
|
+
? css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
11126
11139
|
};
|
|
11127
|
-
var Container$4 = newStyled.div(
|
|
11140
|
+
var Container$4 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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({
|
|
11128
11141
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
11129
|
-
}), visibleStyle);
|
|
11130
|
-
var Overlay = newStyled.div(
|
|
11142
|
+
}), visibleStyle, transformStyle);
|
|
11143
|
+
var Overlay = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __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);
|
|
11131
11144
|
var Modal = function (_a) {
|
|
11132
11145
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c;
|
|
11133
11146
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -11165,7 +11178,7 @@ var useModal = function (id) {
|
|
|
11165
11178
|
close: close,
|
|
11166
11179
|
}); }, [close, open, opened]);
|
|
11167
11180
|
};
|
|
11168
|
-
var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
11181
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$2;
|
|
11169
11182
|
|
|
11170
11183
|
var Text$2 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __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; });
|
|
11171
11184
|
var Title$1 = function (_a) {
|
|
@@ -11212,9 +11225,9 @@ var Item = newStyled.span(templateObject_2$4 || (templateObject_2$4 = __makeTemp
|
|
|
11212
11225
|
var Number$1 = newStyled(Item)(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
11213
11226
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
11214
11227
|
var QuantityPicker = function (_a) {
|
|
11215
|
-
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, onChange = _a.onChange;
|
|
11228
|
+
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;
|
|
11216
11229
|
var theme = useTheme();
|
|
11217
|
-
var
|
|
11230
|
+
var _e = React$2.useState(value !== null && value !== void 0 ? value : initialValue), internal = _e[0], setInternal = _e[1];
|
|
11218
11231
|
React$2.useEffect(function () {
|
|
11219
11232
|
if (onChange) {
|
|
11220
11233
|
onChange(internal);
|
|
@@ -11233,7 +11246,7 @@ var QuantityPicker = function (_a) {
|
|
|
11233
11246
|
return clamp(value);
|
|
11234
11247
|
});
|
|
11235
11248
|
}, [value, clamp]);
|
|
11236
|
-
return (jsxRuntime.jsxs(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid":
|
|
11249
|
+
return (jsxRuntime.jsxs(Container$2, __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));
|
|
11237
11250
|
};
|
|
11238
11251
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11239
11252
|
|
|
@@ -15066,7 +15079,7 @@ var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 =
|
|
|
15066
15079
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
15067
15080
|
|
|
15068
15081
|
var Filters = function (_a) {
|
|
15069
|
-
var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick;
|
|
15082
|
+
var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
15070
15083
|
var theme = useTheme();
|
|
15071
15084
|
var _c = React__default["default"].useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
|
|
15072
15085
|
var handleCheckboxClick = React$2.useCallback(function (_a) {
|
|
@@ -15087,6 +15100,7 @@ var Filters = function (_a) {
|
|
|
15087
15100
|
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
15088
15101
|
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
15089
15102
|
});
|
|
15103
|
+
onResetValues();
|
|
15090
15104
|
};
|
|
15091
15105
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, 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), jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { 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, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), 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));
|
|
15092
15106
|
};
|