@trafilea/afrodita-components 5.0.0-beta.4 → 5.0.0-beta.7
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 +19 -5
- package/build/index.esm.js +329 -273
- package/build/index.esm.js.map +1 -1
- package/build/index.js +330 -273
- package/build/index.js.map +1 -1
- package/package.json +2 -1
package/build/index.js
CHANGED
|
@@ -3371,7 +3371,7 @@ exports.InputValidationType = void 0;
|
|
|
3371
3371
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3372
3372
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3373
3373
|
|
|
3374
|
-
var Section = newStyled.div(templateObject_1$
|
|
3374
|
+
var Section = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
3375
3375
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3376
3376
|
});
|
|
3377
3377
|
var CardHeader = function (_a) {
|
|
@@ -3382,14 +3382,14 @@ var CardFooter = function (_a) {
|
|
|
3382
3382
|
var children = _a.children;
|
|
3383
3383
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3384
3384
|
};
|
|
3385
|
-
var templateObject_1$
|
|
3385
|
+
var templateObject_1$18;
|
|
3386
3386
|
|
|
3387
|
-
var Body = newStyled.div(templateObject_1$
|
|
3387
|
+
var Body = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
3388
3388
|
var CardBody = function (_a) {
|
|
3389
3389
|
var children = _a.children;
|
|
3390
3390
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3391
3391
|
};
|
|
3392
|
-
var templateObject_1$
|
|
3392
|
+
var templateObject_1$17;
|
|
3393
3393
|
|
|
3394
3394
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3395
3395
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3534,7 +3534,7 @@ var AssetsProvider = function (_a) {
|
|
|
3534
3534
|
};
|
|
3535
3535
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
3536
3536
|
|
|
3537
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
3537
|
+
var Container$G = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
3538
3538
|
var flex = _a.flex;
|
|
3539
3539
|
return flex &&
|
|
3540
3540
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3554,7 +3554,7 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
3554
3554
|
Footer: CardFooter,
|
|
3555
3555
|
Body: CardBody,
|
|
3556
3556
|
});
|
|
3557
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$16;
|
|
3558
3558
|
|
|
3559
3559
|
var Fragment = jsxRuntime.Fragment;
|
|
3560
3560
|
function jsx(type, props, key) {
|
|
@@ -3693,7 +3693,7 @@ function BaseSelectOption(_a) {
|
|
|
3693
3693
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3694
3694
|
}
|
|
3695
3695
|
|
|
3696
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3696
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3697
3697
|
function BaseSelect(_a) {
|
|
3698
3698
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3699
3699
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3703,7 +3703,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3703
3703
|
Options: BaseSelectOptions,
|
|
3704
3704
|
Option: BaseSelectOption,
|
|
3705
3705
|
});
|
|
3706
|
-
var templateObject_1$
|
|
3706
|
+
var templateObject_1$15;
|
|
3707
3707
|
|
|
3708
3708
|
var CustomButton = newStyled.button(function (_a) {
|
|
3709
3709
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -3916,12 +3916,12 @@ var CustomCheckboxStyles = {
|
|
|
3916
3916
|
},
|
|
3917
3917
|
};
|
|
3918
3918
|
|
|
3919
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
3919
|
+
var Container$F = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
3920
3920
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
3921
3921
|
CustomCheckboxStyles[props.size](props.theme),
|
|
3922
3922
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
3923
3923
|
]; });
|
|
3924
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
3924
|
+
var Input$3 = newStyled.input(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
3925
3925
|
var disabled = _a.disabled;
|
|
3926
3926
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
3927
3927
|
});
|
|
@@ -3947,7 +3947,7 @@ var Checkbox = function (_a) {
|
|
|
3947
3947
|
}, []);
|
|
3948
3948
|
return (jsxRuntime.jsxs(Container$F, { 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));
|
|
3949
3949
|
};
|
|
3950
|
-
var templateObject_1$
|
|
3950
|
+
var templateObject_1$14, templateObject_2$H;
|
|
3951
3951
|
|
|
3952
3952
|
var CustomOption = newStyled.li(function (_a) {
|
|
3953
3953
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4034,13 +4034,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
4034
4034
|
}
|
|
4035
4035
|
};
|
|
4036
4036
|
var SimpleSelector = function (_a) {
|
|
4037
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
4037
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
|
|
4038
4038
|
var theme = useTheme();
|
|
4039
4039
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
4040
4040
|
var activeStyles = active
|
|
4041
4041
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4042
4042
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
4043
|
-
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4043
|
+
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4044
4044
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
4045
4045
|
}, '&:disabled': {
|
|
4046
4046
|
color: theme.colors.shades['250'].color,
|
|
@@ -4049,7 +4049,7 @@ var SimpleSelector = function (_a) {
|
|
|
4049
4049
|
};
|
|
4050
4050
|
|
|
4051
4051
|
var SelectorSecondary = function (_a) {
|
|
4052
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
4052
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
|
|
4053
4053
|
var theme = useTheme();
|
|
4054
4054
|
var stylesByActive = active
|
|
4055
4055
|
? {
|
|
@@ -4064,7 +4064,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4064
4064
|
border: theme.component.selector.default.border,
|
|
4065
4065
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
4066
4066
|
};
|
|
4067
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4067
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4068
4068
|
background: theme.component.selector.hover.background,
|
|
4069
4069
|
color: theme.component.selector.hover.color,
|
|
4070
4070
|
}, '&:disabled': {
|
|
@@ -4077,14 +4077,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4077
4077
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4078
4078
|
// `variants` styles that are consistent through all themes.
|
|
4079
4079
|
var TAGS = {
|
|
4080
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4081
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4082
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4083
|
-
display1: newStyled.h1(templateObject_4$
|
|
4084
|
-
display2: newStyled.h2(templateObject_5$
|
|
4085
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4086
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4087
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4080
|
+
hero1: newStyled.h1(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject([""], [""]))),
|
|
4081
|
+
hero2: newStyled.h2(templateObject_2$G || (templateObject_2$G = __makeTemplateObject([""], [""]))),
|
|
4082
|
+
hero3: newStyled.h3(templateObject_3$r || (templateObject_3$r = __makeTemplateObject([""], [""]))),
|
|
4083
|
+
display1: newStyled.h1(templateObject_4$h || (templateObject_4$h = __makeTemplateObject([""], [""]))),
|
|
4084
|
+
display2: newStyled.h2(templateObject_5$a || (templateObject_5$a = __makeTemplateObject([""], [""]))),
|
|
4085
|
+
heading1: newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject([""], [""]))),
|
|
4086
|
+
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4087
|
+
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
4088
4088
|
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
4089
4089
|
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
4090
4090
|
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4200,14 +4200,14 @@ var DEFAULTS = {
|
|
|
4200
4200
|
size: 'regular',
|
|
4201
4201
|
},
|
|
4202
4202
|
};
|
|
4203
|
-
var templateObject_1$
|
|
4203
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$r, templateObject_4$h, templateObject_5$a, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4204
4204
|
|
|
4205
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4205
|
+
var ButtonsContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
4206
4206
|
var inline = _a.inline;
|
|
4207
4207
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4208
4208
|
});
|
|
4209
4209
|
var SizeSelector = function (_a) {
|
|
4210
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
4210
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
|
|
4211
4211
|
return (jsxs("div", __assign$1({ css: {
|
|
4212
4212
|
display: 'flex',
|
|
4213
4213
|
flexDirection: inline ? 'row' : 'column',
|
|
@@ -4217,10 +4217,10 @@ var SizeSelector = function (_a) {
|
|
|
4217
4217
|
return (jsx(SelectorSecondary, { css: {
|
|
4218
4218
|
padding: '0.75rem 1rem 0.625rem',
|
|
4219
4219
|
margin: '0 0.5rem 0.625rem 0',
|
|
4220
|
-
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
4220
|
+
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4221
4221
|
}) }), void 0)] }), void 0));
|
|
4222
4222
|
};
|
|
4223
|
-
var templateObject_1$
|
|
4223
|
+
var templateObject_1$12;
|
|
4224
4224
|
|
|
4225
4225
|
var getStylesBySize$7 = function (size) {
|
|
4226
4226
|
switch (size) {
|
|
@@ -4249,7 +4249,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4249
4249
|
} });
|
|
4250
4250
|
};
|
|
4251
4251
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4252
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1
|
|
4252
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
4253
4253
|
};
|
|
4254
4254
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4255
4255
|
if (disabled)
|
|
@@ -4265,16 +4265,16 @@ var TextButton = function (_a) {
|
|
|
4265
4265
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4266
4266
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
|
|
4267
4267
|
};
|
|
4268
|
-
var templateObject_1
|
|
4268
|
+
var templateObject_1$11;
|
|
4269
4269
|
|
|
4270
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
4271
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4272
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4270
|
+
var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4271
|
+
var P$3 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4272
|
+
var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
4273
4273
|
var SizeFitGuide = function (_a) {
|
|
4274
|
-
var title = _a.title,
|
|
4275
|
-
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [
|
|
4274
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
4275
|
+
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected: ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
|
|
4276
4276
|
};
|
|
4277
|
-
var templateObject_1$
|
|
4277
|
+
var templateObject_1$10, templateObject_2$F, templateObject_3$q;
|
|
4278
4278
|
|
|
4279
4279
|
var getStylesBySize$6 = function (size) {
|
|
4280
4280
|
switch (size) {
|
|
@@ -4304,7 +4304,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4304
4304
|
};
|
|
4305
4305
|
}
|
|
4306
4306
|
};
|
|
4307
|
-
var Container$D = newStyled.div(templateObject_1
|
|
4307
|
+
var Container$D = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
4308
4308
|
var backgroundColor = _a.backgroundColor;
|
|
4309
4309
|
return backgroundColor;
|
|
4310
4310
|
}, function (_a) {
|
|
@@ -4326,7 +4326,7 @@ var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
4326
4326
|
var size = _a.size;
|
|
4327
4327
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4328
4328
|
});
|
|
4329
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4329
|
+
var H3$2 = newStyled.h3(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
4330
4330
|
var textColor = _a.textColor;
|
|
4331
4331
|
return textColor;
|
|
4332
4332
|
}, function (_a) {
|
|
@@ -4343,7 +4343,7 @@ var DiscountTag = function (_a) {
|
|
|
4343
4343
|
var theme = useTheme();
|
|
4344
4344
|
return (jsxRuntime.jsx(Container$D, __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 }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4345
4345
|
};
|
|
4346
|
-
var templateObject_1
|
|
4346
|
+
var templateObject_1$$, templateObject_2$E;
|
|
4347
4347
|
|
|
4348
4348
|
var getStylesBySize$5 = function (size) {
|
|
4349
4349
|
switch (size) {
|
|
@@ -4367,8 +4367,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4367
4367
|
};
|
|
4368
4368
|
}
|
|
4369
4369
|
};
|
|
4370
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
4371
|
-
var Price = newStyled.h1(templateObject_2$
|
|
4370
|
+
var Container$C = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4371
|
+
var Price = newStyled.h1(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
4372
4372
|
var weight = _a.weight;
|
|
4373
4373
|
return (weight ? weight : '400');
|
|
4374
4374
|
}, function (_a) {
|
|
@@ -4390,7 +4390,7 @@ var Price = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTempl
|
|
|
4390
4390
|
var margin = _a.margin, size = _a.size;
|
|
4391
4391
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4392
4392
|
});
|
|
4393
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4393
|
+
var TagContainer = newStyled.h1(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4394
4394
|
var _b;
|
|
4395
4395
|
var size = _a.size;
|
|
4396
4396
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4400,7 +4400,7 @@ var PriceLabel = function (_a) {
|
|
|
4400
4400
|
var theme = useTheme();
|
|
4401
4401
|
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-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": "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));
|
|
4402
4402
|
};
|
|
4403
|
-
var templateObject_1$
|
|
4403
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$p;
|
|
4404
4404
|
|
|
4405
4405
|
var OneColorSelector = function (_a) {
|
|
4406
4406
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4439,11 +4439,11 @@ var OutOfStock = function (_a) {
|
|
|
4439
4439
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4440
4440
|
};
|
|
4441
4441
|
|
|
4442
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4443
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4444
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4445
|
-
var Span = newStyled.span(templateObject_4$
|
|
4446
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4442
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4443
|
+
newStyled(lt.Label)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4444
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
4445
|
+
var Span = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4446
|
+
var OptionsContainer = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
4447
4447
|
var Label$2 = function (_a) {
|
|
4448
4448
|
var label = _a.label, values = _a.values;
|
|
4449
4449
|
return (jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -4461,20 +4461,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4461
4461
|
Option: Option,
|
|
4462
4462
|
OptionsContainer: OptionsContainer,
|
|
4463
4463
|
});
|
|
4464
|
-
var templateObject_1$
|
|
4464
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$o, templateObject_4$g, templateObject_5$9;
|
|
4465
4465
|
|
|
4466
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
4466
|
+
var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
4467
4467
|
var borderColor = _a.borderColor;
|
|
4468
4468
|
return borderColor;
|
|
4469
4469
|
});
|
|
4470
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
4470
|
+
var Image$2 = newStyled.img(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
4471
4471
|
var PatternSelector = function (_a) {
|
|
4472
4472
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4473
4473
|
var theme = useTheme();
|
|
4474
4474
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4475
4475
|
return (jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4476
4476
|
};
|
|
4477
|
-
var templateObject_1$
|
|
4477
|
+
var templateObject_1$Y, templateObject_2$B;
|
|
4478
4478
|
|
|
4479
4479
|
var renderOptions$1 = function (options) {
|
|
4480
4480
|
if (options.length === 0) {
|
|
@@ -4532,7 +4532,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4532
4532
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4533
4533
|
};
|
|
4534
4534
|
|
|
4535
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
4535
|
+
var Image$1 = newStyled.img(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
4536
4536
|
var selected = _a.selected, theme = _a.theme;
|
|
4537
4537
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4538
4538
|
});
|
|
@@ -4541,35 +4541,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
4541
4541
|
var theme = useTheme();
|
|
4542
4542
|
return jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4543
4543
|
};
|
|
4544
|
-
var templateObject_1$
|
|
4544
|
+
var templateObject_1$X;
|
|
4545
4545
|
|
|
4546
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
4547
|
-
var Button$5 = newStyled.button(templateObject_2$
|
|
4546
|
+
var Container$A = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
4547
|
+
var Button$5 = newStyled.button(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
4548
4548
|
var ImagePreviewList = function (_a) {
|
|
4549
4549
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
4550
4550
|
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": testId }, { children: images.map(function (item) {
|
|
4551
4551
|
return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
4552
4552
|
}) }), void 0));
|
|
4553
4553
|
};
|
|
4554
|
-
var templateObject_1$
|
|
4554
|
+
var templateObject_1$W, templateObject_2$A;
|
|
4555
4555
|
|
|
4556
|
-
var Img = newStyled.img(templateObject_1$
|
|
4556
|
+
var Img = newStyled.img(templateObject_1$V || (templateObject_1$V = __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; });
|
|
4557
4557
|
var Image = function (_a) {
|
|
4558
4558
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
4559
4559
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
4560
4560
|
};
|
|
4561
|
-
var templateObject_1$
|
|
4561
|
+
var templateObject_1$V;
|
|
4562
4562
|
|
|
4563
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
4564
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
4565
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4563
|
+
var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
4564
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
4565
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
4566
4566
|
var ImageProductWithTags$1 = function (_a) {
|
|
4567
4567
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4568
4568
|
return (jsxRuntime.jsxs(Container$z, __assign$1({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
4569
4569
|
};
|
|
4570
|
-
var templateObject_1$
|
|
4570
|
+
var templateObject_1$U, templateObject_2$z, templateObject_3$n;
|
|
4571
4571
|
|
|
4572
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
4572
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
4573
4573
|
var ProductGallery = function (_a) {
|
|
4574
4574
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
4575
4575
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -4581,7 +4581,7 @@ var ProductGallery = function (_a) {
|
|
|
4581
4581
|
setSelectedImage(value);
|
|
4582
4582
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
4583
4583
|
};
|
|
4584
|
-
var templateObject_1$
|
|
4584
|
+
var templateObject_1$T;
|
|
4585
4585
|
|
|
4586
4586
|
/* base styles & size variants */
|
|
4587
4587
|
var StarStyles = {
|
|
@@ -4627,8 +4627,8 @@ var StarStyles = {
|
|
|
4627
4627
|
});
|
|
4628
4628
|
},
|
|
4629
4629
|
};
|
|
4630
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
4631
|
-
var templateObject_1$
|
|
4630
|
+
var Container$x = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4631
|
+
var templateObject_1$S;
|
|
4632
4632
|
|
|
4633
4633
|
var StarContainer = newStyled.div(function (_a) {
|
|
4634
4634
|
var size = _a.size, theme = _a.theme;
|
|
@@ -4690,8 +4690,8 @@ var LabelStyles = {
|
|
|
4690
4690
|
});
|
|
4691
4691
|
},
|
|
4692
4692
|
};
|
|
4693
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
4694
|
-
var templateObject_1$
|
|
4693
|
+
var Container$w = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4694
|
+
var templateObject_1$R;
|
|
4695
4695
|
|
|
4696
4696
|
var CustomLabel = newStyled.div(function (_a) {
|
|
4697
4697
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis;
|
|
@@ -4715,8 +4715,8 @@ var Rating = function (_a) {
|
|
|
4715
4715
|
return (jsxRuntime.jsxs(Container$w, { 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, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
4716
4716
|
};
|
|
4717
4717
|
|
|
4718
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
4719
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4718
|
+
var Container$v = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
4719
|
+
var P$2 = newStyled.p(templateObject_2$y || (templateObject_2$y = __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; });
|
|
4720
4720
|
var textButtonStyles = function (theme) { return ({
|
|
4721
4721
|
border: 'none',
|
|
4722
4722
|
background: 'transparent',
|
|
@@ -4731,9 +4731,9 @@ var FitPredictor = function (_a) {
|
|
|
4731
4731
|
var theme = useTheme();
|
|
4732
4732
|
return (jsxs(Container$v, __assign$1({ theme: theme }, { children: [jsx(Container$v, { 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));
|
|
4733
4733
|
};
|
|
4734
|
-
var templateObject_1$
|
|
4734
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
4735
4735
|
|
|
4736
|
-
var H2$
|
|
4736
|
+
var H2$2 = newStyled.h2(function (_a) {
|
|
4737
4737
|
var color = _a.color;
|
|
4738
4738
|
return ({
|
|
4739
4739
|
textAlign: 'center',
|
|
@@ -4745,7 +4745,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
4745
4745
|
margin: '0.938rem 4.188rem',
|
|
4746
4746
|
});
|
|
4747
4747
|
});
|
|
4748
|
-
var Bar = newStyled.div(templateObject_1$
|
|
4748
|
+
var Bar = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
4749
4749
|
var backgroundColor = _a.backgroundColor;
|
|
4750
4750
|
return backgroundColor;
|
|
4751
4751
|
}, function (_a) {
|
|
@@ -4782,9 +4782,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
4782
4782
|
var ProgressBar = function (_a) {
|
|
4783
4783
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
4784
4784
|
var theme = useTheme();
|
|
4785
|
-
return (jsxRuntime.jsxs(Container$u, __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$
|
|
4785
|
+
return (jsxRuntime.jsxs(Container$u, __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));
|
|
4786
4786
|
};
|
|
4787
|
-
var templateObject_1$
|
|
4787
|
+
var templateObject_1$P;
|
|
4788
4788
|
|
|
4789
4789
|
var getStylesBySize$4 = function (size) {
|
|
4790
4790
|
switch (size) {
|
|
@@ -4805,7 +4805,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
4805
4805
|
};
|
|
4806
4806
|
}
|
|
4807
4807
|
};
|
|
4808
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
4808
|
+
var Container$t = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
4809
4809
|
var backgroundColor = _a.backgroundColor;
|
|
4810
4810
|
return backgroundColor;
|
|
4811
4811
|
}, function (_a) {
|
|
@@ -4835,7 +4835,7 @@ var IconButton = function (_a) {
|
|
|
4835
4835
|
var theme = useTheme();
|
|
4836
4836
|
return (jsxRuntime.jsx(Container$t, __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));
|
|
4837
4837
|
};
|
|
4838
|
-
var templateObject_1$
|
|
4838
|
+
var templateObject_1$O;
|
|
4839
4839
|
|
|
4840
4840
|
var TooltipArrow = function (_a) {
|
|
4841
4841
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -4915,7 +4915,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
4915
4915
|
}
|
|
4916
4916
|
};
|
|
4917
4917
|
|
|
4918
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
4918
|
+
var Wrapper$5 = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
4919
4919
|
var position = _a.position;
|
|
4920
4920
|
return getWrapperFlexDirection(position);
|
|
4921
4921
|
});
|
|
@@ -4939,11 +4939,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
4939
4939
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
4940
4940
|
return actual === expected ? margin : '0';
|
|
4941
4941
|
};
|
|
4942
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
4942
|
+
var ContentWrapper = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
4943
4943
|
var borderColor = _a.borderColor;
|
|
4944
4944
|
return borderColor;
|
|
4945
4945
|
});
|
|
4946
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4946
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
4947
4947
|
var position = _a.position;
|
|
4948
4948
|
return getArrowRotation(position);
|
|
4949
4949
|
}, function (_a) {
|
|
@@ -4953,17 +4953,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$k || (templateObject_
|
|
|
4953
4953
|
var position = _a.position;
|
|
4954
4954
|
return getArrowContainerMargin(position);
|
|
4955
4955
|
});
|
|
4956
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
4956
|
+
var TooltipText = newStyled.div(templateObject_4$f || (templateObject_4$f = __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) {
|
|
4957
4957
|
var color = _a.color;
|
|
4958
4958
|
return color;
|
|
4959
4959
|
});
|
|
4960
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
4961
|
-
var Title$
|
|
4960
|
+
var TopSection = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
4961
|
+
var Title$5 = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __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) {
|
|
4962
4962
|
var color = _a.color;
|
|
4963
4963
|
return color;
|
|
4964
4964
|
});
|
|
4965
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
4966
|
-
var templateObject_1$
|
|
4965
|
+
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"])));
|
|
4966
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$m, templateObject_4$f, templateObject_5$8, templateObject_6$6, templateObject_7$4;
|
|
4967
4967
|
|
|
4968
4968
|
var Tooltip = function (_a) {
|
|
4969
4969
|
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;
|
|
@@ -4980,7 +4980,7 @@ var Tooltip = function (_a) {
|
|
|
4980
4980
|
var ref = tooltipRef.current;
|
|
4981
4981
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
4982
4982
|
}, [tooltipRef]);
|
|
4983
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$
|
|
4983
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
4984
4984
|
};
|
|
4985
4985
|
|
|
4986
4986
|
/* base styles & variants */
|
|
@@ -5041,7 +5041,7 @@ var AccordionDetailsStyles = {
|
|
|
5041
5041
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
5042
5042
|
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
|
|
5043
5043
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5044
|
-
var Accordion = function (_a) {
|
|
5044
|
+
var Accordion$1 = function (_a) {
|
|
5045
5045
|
var header = _a.header, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
|
|
5046
5046
|
var theme = useTheme();
|
|
5047
5047
|
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled }, { children: function (_a) {
|
|
@@ -5115,9 +5115,9 @@ var ContainerStyles = {
|
|
|
5115
5115
|
},
|
|
5116
5116
|
};
|
|
5117
5117
|
|
|
5118
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
5118
|
+
var Wrapper$4 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5119
5119
|
var Container$s = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
5120
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
5120
|
+
var Input$2 = newStyled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
5121
5121
|
var disabled = _a.disabled;
|
|
5122
5122
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5123
5123
|
});
|
|
@@ -5134,7 +5134,7 @@ var RadioInput = function (_a) {
|
|
|
5134
5134
|
};
|
|
5135
5135
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$s, __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));
|
|
5136
5136
|
};
|
|
5137
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$M, templateObject_2$w;
|
|
5138
5138
|
|
|
5139
5139
|
var RadioGroupInput = function (_a) {
|
|
5140
5140
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -5148,37 +5148,37 @@ var RadioGroupInput = function (_a) {
|
|
|
5148
5148
|
}) }), void 0));
|
|
5149
5149
|
};
|
|
5150
5150
|
|
|
5151
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
5152
|
-
var Container$r = newStyled.div(templateObject_2$
|
|
5151
|
+
var Wrapper$3 = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5152
|
+
var Container$r = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
5153
5153
|
var Minimalistic = function (_a) {
|
|
5154
5154
|
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;
|
|
5155
5155
|
var theme = useTheme();
|
|
5156
5156
|
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$r, __assign$1({ "data-testid": "TopSection" }, { 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 }, void 0)] }), void 0), jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "BottomSection" }, { 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));
|
|
5157
5157
|
};
|
|
5158
|
-
var templateObject_1$
|
|
5158
|
+
var templateObject_1$L, templateObject_2$v;
|
|
5159
5159
|
|
|
5160
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
5161
|
-
var Title$
|
|
5162
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5163
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
5160
|
+
var Container$q = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5161
|
+
var Title$4 = newStyled.h1(templateObject_2$u || (templateObject_2$u = __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; });
|
|
5162
|
+
var Details$1 = newStyled.span(templateObject_3$l || (templateObject_3$l = __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; });
|
|
5163
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
5164
5164
|
var Simple = function (_a) {
|
|
5165
5165
|
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;
|
|
5166
5166
|
var theme = useTheme();
|
|
5167
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(Title$
|
|
5167
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(Title$4, __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));
|
|
5168
5168
|
};
|
|
5169
|
-
var templateObject_1$
|
|
5169
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$l, templateObject_4$e;
|
|
5170
5170
|
|
|
5171
5171
|
var Bundle = {
|
|
5172
5172
|
Minimalistic: Minimalistic,
|
|
5173
5173
|
Simple: Simple,
|
|
5174
5174
|
};
|
|
5175
5175
|
|
|
5176
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
5176
|
+
var Container$p = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
5177
5177
|
var Tag$1 = function (_a) {
|
|
5178
5178
|
var text = _a.text, className = _a.className;
|
|
5179
5179
|
return jsxRuntime.jsx(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
5180
5180
|
};
|
|
5181
|
-
var templateObject_1$
|
|
5181
|
+
var templateObject_1$J;
|
|
5182
5182
|
|
|
5183
5183
|
var getStylesBySize$3 = function (size) {
|
|
5184
5184
|
switch (size) {
|
|
@@ -5273,17 +5273,19 @@ var Timer = function (_a) {
|
|
|
5273
5273
|
return seconds - 1;
|
|
5274
5274
|
});
|
|
5275
5275
|
}, 1000);
|
|
5276
|
+
if (secs <= 0)
|
|
5277
|
+
clearInterval(timer);
|
|
5276
5278
|
return function () { return clearInterval(timer); };
|
|
5277
|
-
}, [onTimeUp]);
|
|
5279
|
+
}, [onTimeUp, secs]);
|
|
5278
5280
|
var _d = secondsToTime(secs), hours = _d.hours, minutes = _d.minutes, seconds = _d.seconds;
|
|
5279
5281
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
5280
5282
|
};
|
|
5281
5283
|
|
|
5282
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
5284
|
+
var Label$1 = newStyled.span(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
5283
5285
|
var color = _a.color;
|
|
5284
5286
|
return color;
|
|
5285
5287
|
});
|
|
5286
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
5288
|
+
var MandatoryIcon = newStyled.span(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
5287
5289
|
var color = _a.color;
|
|
5288
5290
|
return color;
|
|
5289
5291
|
});
|
|
@@ -5292,7 +5294,7 @@ var InputLabel = function (_a) {
|
|
|
5292
5294
|
var theme = useTheme();
|
|
5293
5295
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
5294
5296
|
};
|
|
5295
|
-
var templateObject_1$
|
|
5297
|
+
var templateObject_1$I, templateObject_2$t;
|
|
5296
5298
|
|
|
5297
5299
|
/**
|
|
5298
5300
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5346,20 +5348,20 @@ var formatPrice = function (value, _a) {
|
|
|
5346
5348
|
}).format(valueToFormat);
|
|
5347
5349
|
};
|
|
5348
5350
|
|
|
5349
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5350
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5351
|
+
var ErrorText = newStyled.h3(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5352
|
+
var ErrorContainer = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
5351
5353
|
var Error$1 = function (_a) {
|
|
5352
5354
|
var error = _a.error;
|
|
5353
5355
|
var theme = useTheme();
|
|
5354
5356
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5355
5357
|
};
|
|
5356
|
-
var templateObject_1$
|
|
5358
|
+
var templateObject_1$H, templateObject_2$s;
|
|
5357
5359
|
|
|
5358
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
5360
|
+
var Container$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5359
5361
|
var color = _a.color;
|
|
5360
5362
|
return color;
|
|
5361
5363
|
});
|
|
5362
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
5364
|
+
var StyledInput = newStyled.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
5363
5365
|
var padding = _a.padding;
|
|
5364
5366
|
return padding;
|
|
5365
5367
|
}, function (_a) {
|
|
@@ -5402,11 +5404,11 @@ var StyledInput = newStyled.input(templateObject_2$p || (templateObject_2$p = __
|
|
|
5402
5404
|
var disabledColor = _a.disabledColor;
|
|
5403
5405
|
return disabledColor;
|
|
5404
5406
|
});
|
|
5405
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
5407
|
+
var InputWrapper = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
5406
5408
|
var size = _a.size;
|
|
5407
5409
|
return (size === 'small' ? '36px' : '44px');
|
|
5408
5410
|
});
|
|
5409
|
-
var templateObject_1$
|
|
5411
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$k;
|
|
5410
5412
|
|
|
5411
5413
|
var BaseInput = function (_a) {
|
|
5412
5414
|
var _b;
|
|
@@ -5480,11 +5482,11 @@ var Button$4 = function (_a) {
|
|
|
5480
5482
|
throw new Error("Invalid button variant ".concat(variant));
|
|
5481
5483
|
};
|
|
5482
5484
|
|
|
5483
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
5485
|
+
var Container$n = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
5484
5486
|
var theme = _a.theme;
|
|
5485
5487
|
return theme.component.inputCustom.input.borderRadius;
|
|
5486
5488
|
});
|
|
5487
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
5489
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
5488
5490
|
var theme = _a.theme;
|
|
5489
5491
|
return theme.component.inputCustom.button.borderRadius;
|
|
5490
5492
|
});
|
|
@@ -5499,21 +5501,21 @@ var Custom = function (_a) {
|
|
|
5499
5501
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
5500
5502
|
return (jsxRuntime.jsx(Container$n, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
5501
5503
|
};
|
|
5502
|
-
var templateObject_1$
|
|
5504
|
+
var templateObject_1$F, templateObject_2$q;
|
|
5503
5505
|
|
|
5504
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
5506
|
+
var SuccessContainer = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
5505
5507
|
var size = _a.size;
|
|
5506
5508
|
return (size === 'small' ? '36px' : '');
|
|
5507
5509
|
});
|
|
5508
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
5509
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
5510
|
+
var SuccessMessage = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
5511
|
+
var SuccessText = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
5510
5512
|
var Success = function (_a) {
|
|
5511
5513
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
5512
5514
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
5513
5515
|
};
|
|
5514
|
-
var templateObject_1$
|
|
5516
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$j;
|
|
5515
5517
|
|
|
5516
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
5518
|
+
var ButtonContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
5517
5519
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
5518
5520
|
return status === exports.InputValidationType.Empty &&
|
|
5519
5521
|
type === 'primary' &&
|
|
@@ -5530,10 +5532,10 @@ var BasePlusButton = function (_a) {
|
|
|
5530
5532
|
}
|
|
5531
5533
|
return (jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
5532
5534
|
};
|
|
5533
|
-
var templateObject_1$
|
|
5535
|
+
var templateObject_1$D;
|
|
5534
5536
|
|
|
5535
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
5536
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
5537
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
5538
|
+
var IconContainer$4 = newStyled.div(templateObject_2$o || (templateObject_2$o = __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; });
|
|
5537
5539
|
var BasePlusIcon = function (_a) {
|
|
5538
5540
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
5539
5541
|
var theme = useTheme();
|
|
@@ -5544,7 +5546,7 @@ var BasePlusIcon = function (_a) {
|
|
|
5544
5546
|
? theme.colors.semantic.urgent.color
|
|
5545
5547
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
5546
5548
|
};
|
|
5547
|
-
var templateObject_1$
|
|
5549
|
+
var templateObject_1$C, templateObject_2$o;
|
|
5548
5550
|
|
|
5549
5551
|
var Input$1 = {
|
|
5550
5552
|
Simple: BaseInput,
|
|
@@ -5553,7 +5555,7 @@ var Input$1 = {
|
|
|
5553
5555
|
SimplePlusIcon: BasePlusIcon,
|
|
5554
5556
|
};
|
|
5555
5557
|
|
|
5556
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
5558
|
+
var Container$l = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
5557
5559
|
var width = _a.width;
|
|
5558
5560
|
return width;
|
|
5559
5561
|
}, function (_a) {
|
|
@@ -5571,9 +5573,9 @@ var PaymentMethod = function (_a) {
|
|
|
5571
5573
|
var theme = useTheme();
|
|
5572
5574
|
return (jsxRuntime.jsx(Container$l, __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));
|
|
5573
5575
|
};
|
|
5574
|
-
var templateObject_1$
|
|
5576
|
+
var templateObject_1$B;
|
|
5575
5577
|
|
|
5576
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
5578
|
+
var Text$4 = newStyled.h3(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
5577
5579
|
var backgroundColor = _a.backgroundColor;
|
|
5578
5580
|
return backgroundColor;
|
|
5579
5581
|
}, function (_a) {
|
|
@@ -5585,27 +5587,27 @@ var OfferBanner = function (_a) {
|
|
|
5585
5587
|
var theme = useTheme();
|
|
5586
5588
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5587
5589
|
};
|
|
5588
|
-
var templateObject_1$
|
|
5590
|
+
var templateObject_1$A;
|
|
5589
5591
|
|
|
5590
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
5591
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
5592
|
-
var Currency = newStyled.span(templateObject_3$
|
|
5593
|
-
var Container$k = newStyled.div(templateObject_4$
|
|
5594
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
5592
|
+
var Wrapper$2 = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
5593
|
+
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __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; });
|
|
5594
|
+
var Currency = newStyled.span(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
5595
|
+
var Container$k = newStyled.div(templateObject_4$d || (templateObject_4$d = __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; });
|
|
5596
|
+
var Discount = newStyled.h3(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
5595
5597
|
var Total = function (_a) {
|
|
5596
5598
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
5597
5599
|
var theme = useTheme();
|
|
5598
5600
|
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$k, __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));
|
|
5599
5601
|
};
|
|
5600
|
-
var templateObject_1$
|
|
5602
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$i, templateObject_4$d, templateObject_5$7;
|
|
5601
5603
|
|
|
5602
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
5604
|
+
var Wrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5603
5605
|
var color = _a.color;
|
|
5604
5606
|
return color;
|
|
5605
5607
|
});
|
|
5606
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
5607
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
5608
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
5608
|
+
var ItemContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
5609
|
+
var Item$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
5610
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5609
5611
|
var color = _a.color;
|
|
5610
5612
|
return color;
|
|
5611
5613
|
});
|
|
@@ -5617,22 +5619,22 @@ var Subtotal = function (_a) {
|
|
|
5617
5619
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
5618
5620
|
})] }), void 0));
|
|
5619
5621
|
};
|
|
5620
|
-
var templateObject_1$
|
|
5622
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$h, templateObject_4$c;
|
|
5621
5623
|
|
|
5622
5624
|
var Totals = {
|
|
5623
5625
|
Total: Total,
|
|
5624
5626
|
Subtotal: Subtotal,
|
|
5625
5627
|
};
|
|
5626
5628
|
|
|
5627
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
5628
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
5629
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
5630
|
-
var Details = newStyled.span(templateObject_4$
|
|
5629
|
+
var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __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; });
|
|
5630
|
+
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
5631
|
+
var Text$3 = newStyled.p(templateObject_3$g || (templateObject_3$g = __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; });
|
|
5632
|
+
var Details = newStyled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
5631
5633
|
var Note = function (_a) {
|
|
5632
5634
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
5633
5635
|
return (jsxRuntime.jsxs(Container$j, __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$3, __assign$1({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
5634
5636
|
};
|
|
5635
|
-
var templateObject_1$
|
|
5637
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b;
|
|
5636
5638
|
|
|
5637
5639
|
/* eslint-disable no-param-reassign */
|
|
5638
5640
|
var index$2 = function (breakpoints) {
|
|
@@ -5722,14 +5724,14 @@ var mediaQueries = function (_a) {
|
|
|
5722
5724
|
], { literal: true });
|
|
5723
5725
|
};
|
|
5724
5726
|
|
|
5725
|
-
var Title$
|
|
5726
|
-
var Line = newStyled.div(templateObject_2$
|
|
5727
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
5727
|
+
var Title$3 = newStyled.h1(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5728
|
+
var Line = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
5729
|
+
var Row$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])), function (props) {
|
|
5728
5730
|
return mediaQueries(props)({
|
|
5729
5731
|
flexDirection: ['column', 'row'],
|
|
5730
5732
|
});
|
|
5731
5733
|
});
|
|
5732
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
5734
|
+
var Col$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])), function (props) {
|
|
5733
5735
|
return mediaQueries(props)({
|
|
5734
5736
|
margin: ['0', '0 1.25rem'],
|
|
5735
5737
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -5738,13 +5740,13 @@ var Col$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemp
|
|
|
5738
5740
|
width: ['100%', 'inherit'],
|
|
5739
5741
|
});
|
|
5740
5742
|
});
|
|
5741
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
5743
|
+
var IconContainer$2 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])), function (props) {
|
|
5742
5744
|
return mediaQueries(props)({
|
|
5743
5745
|
marginBottom: ['1.875rem', '0'],
|
|
5744
5746
|
width: ['auto', '1.375rem'],
|
|
5745
5747
|
});
|
|
5746
5748
|
});
|
|
5747
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
5749
|
+
var SectionTitle = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __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"])), function (props) {
|
|
5748
5750
|
return mediaQueries(props)({
|
|
5749
5751
|
display: ['block', 'flex'],
|
|
5750
5752
|
});
|
|
@@ -5752,53 +5754,53 @@ var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __ma
|
|
|
5752
5754
|
var theme = _a.theme;
|
|
5753
5755
|
return theme.colors.shades['700'].color;
|
|
5754
5756
|
});
|
|
5755
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
5756
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
5757
|
+
var SectionDetails = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"])), function (props) { return props.color; });
|
|
5758
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
5757
5759
|
var DeliveryDetails = function (_a) {
|
|
5758
5760
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
5759
5761
|
var theme = useTheme();
|
|
5760
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
5762
|
+
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));
|
|
5761
5763
|
};
|
|
5762
|
-
var templateObject_1$
|
|
5764
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1;
|
|
5763
5765
|
|
|
5764
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
5765
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
5766
|
+
var Container$i = newStyled.div(templateObject_1$v || (templateObject_1$v = __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
|
+
var H1$2 = newStyled.h1(templateObject_2$j || (templateObject_2$j = __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; });
|
|
5766
5768
|
var ScrollToTop = function (_a) {
|
|
5767
5769
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
5768
5770
|
var theme = useTheme();
|
|
5769
5771
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
5770
5772
|
};
|
|
5771
|
-
var templateObject_1$
|
|
5773
|
+
var templateObject_1$v, templateObject_2$j;
|
|
5772
5774
|
|
|
5773
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
5774
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
5775
|
+
var Container$h = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
5776
|
+
var H1$1 = newStyled.h1(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
5775
5777
|
var OrderBar = function (_a) {
|
|
5776
5778
|
var message = _a.message;
|
|
5777
5779
|
var theme = useTheme();
|
|
5778
5780
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
5779
5781
|
};
|
|
5780
|
-
var templateObject_1$
|
|
5782
|
+
var templateObject_1$u, templateObject_2$i;
|
|
5781
5783
|
|
|
5782
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
5783
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
5784
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
5785
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
5784
|
+
var TableElement = newStyled.table(templateObject_1$t || (templateObject_1$t = __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; });
|
|
5785
|
+
var TableCell = newStyled.td(templateObject_2$h || (templateObject_2$h = __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; });
|
|
5786
|
+
var TableHead = newStyled.th(templateObject_3$e || (templateObject_3$e = __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; });
|
|
5787
|
+
var TableRow = newStyled.tr(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
5786
5788
|
var SizeTable = function (_a) {
|
|
5787
5789
|
var headers = _a.headers, data = _a.data;
|
|
5788
5790
|
var theme = useTheme();
|
|
5789
5791
|
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));
|
|
5790
5792
|
};
|
|
5791
|
-
var templateObject_1$
|
|
5793
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9;
|
|
5792
5794
|
|
|
5793
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
5794
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
5795
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
5795
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
5796
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5797
|
+
var DescriptionContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])), function (_a) {
|
|
5796
5798
|
var theme = _a.theme;
|
|
5797
5799
|
return mediaQueries({ theme: theme })({
|
|
5798
5800
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
5799
5801
|
});
|
|
5800
5802
|
});
|
|
5801
|
-
var Title$
|
|
5803
|
+
var Title$2 = newStyled.h2(function (_a) {
|
|
5802
5804
|
var color = _a.color;
|
|
5803
5805
|
return ({
|
|
5804
5806
|
fontWeight: 600,
|
|
@@ -5818,7 +5820,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
5818
5820
|
margin: '0.063rem 0',
|
|
5819
5821
|
});
|
|
5820
5822
|
});
|
|
5821
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
5823
|
+
var PriceContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
5822
5824
|
var withTag = _a.withTag, theme = _a.theme;
|
|
5823
5825
|
return withTag
|
|
5824
5826
|
? mediaQueries({ theme: theme })({
|
|
@@ -5827,13 +5829,13 @@ var PriceContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = _
|
|
|
5827
5829
|
})
|
|
5828
5830
|
: 'justify-content: end';
|
|
5829
5831
|
});
|
|
5830
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
5832
|
+
var Quantity = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
5831
5833
|
var SimpleOrderItem = function (_a) {
|
|
5832
5834
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
5833
5835
|
var theme = useTheme();
|
|
5834
|
-
return (jsxRuntime.jsxs(Container$g, { 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$
|
|
5836
|
+
return (jsxRuntime.jsxs(Container$g, { 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));
|
|
5835
5837
|
};
|
|
5836
|
-
var templateObject_1$
|
|
5838
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$5;
|
|
5837
5839
|
|
|
5838
5840
|
function formatDate(date) {
|
|
5839
5841
|
var day = date.getDate();
|
|
@@ -5842,47 +5844,47 @@ function formatDate(date) {
|
|
|
5842
5844
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
5843
5845
|
}
|
|
5844
5846
|
|
|
5845
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
5846
|
-
var Heading = newStyled.div(templateObject_2$
|
|
5847
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
5848
|
+
var Heading = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])), function (_a) {
|
|
5847
5849
|
var theme = _a.theme;
|
|
5848
5850
|
return mediaQueries({ theme: theme })({
|
|
5849
5851
|
fontSize: ['14px', '16px'],
|
|
5850
5852
|
lineHeight: ['22px', '24px'],
|
|
5851
5853
|
});
|
|
5852
5854
|
});
|
|
5853
|
-
var Content = newStyled.div(templateObject_3$
|
|
5855
|
+
var Content = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), function (_a) {
|
|
5854
5856
|
var theme = _a.theme;
|
|
5855
5857
|
return mediaQueries({ theme: theme })({
|
|
5856
5858
|
flexDirection: ['column', 'row'],
|
|
5857
5859
|
});
|
|
5858
5860
|
});
|
|
5859
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
5861
|
+
var ReviewContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), function (_a) {
|
|
5860
5862
|
var theme = _a.theme;
|
|
5861
5863
|
return mediaQueries({ theme: theme })({
|
|
5862
5864
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
5863
5865
|
});
|
|
5864
5866
|
});
|
|
5865
|
-
var H2 = newStyled.h2(templateObject_5$
|
|
5867
|
+
var H2$1 = newStyled.h2(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), function (_a) {
|
|
5866
5868
|
var theme = _a.theme;
|
|
5867
5869
|
return mediaQueries({ theme: theme })({
|
|
5868
5870
|
fontSize: ['16px', '18px'],
|
|
5869
5871
|
lineHeight: ['24px', '28px'],
|
|
5870
5872
|
});
|
|
5871
5873
|
});
|
|
5872
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
5874
|
+
var H3$1 = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __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"])), function (_a) {
|
|
5873
5875
|
var theme = _a.theme;
|
|
5874
5876
|
return mediaQueries({ theme: theme })({
|
|
5875
5877
|
fontSize: ['14px', '16px'],
|
|
5876
5878
|
lineHeight: ['22px', '24px'],
|
|
5877
5879
|
});
|
|
5878
5880
|
});
|
|
5879
|
-
var P$1 = newStyled.p(templateObject_7$
|
|
5881
|
+
var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
5880
5882
|
var Review = function (_a) {
|
|
5881
5883
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
5882
5884
|
var theme = useTheme();
|
|
5883
|
-
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H2, __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));
|
|
5885
|
+
return (jsxRuntime.jsxs(Container$f, { 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));
|
|
5884
5886
|
};
|
|
5885
|
-
var templateObject_1$
|
|
5887
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$4, templateObject_7$2;
|
|
5886
5888
|
|
|
5887
5889
|
var Button$3 = newStyled.button(function () { return ({
|
|
5888
5890
|
background: 'transparent',
|
|
@@ -10125,14 +10127,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10125
10127
|
return Slider;
|
|
10126
10128
|
}(React__default["default"].Component);
|
|
10127
10129
|
|
|
10128
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10130
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
10129
10131
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10130
10132
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10131
10133
|
}, function (_a) {
|
|
10132
10134
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10133
10135
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10134
10136
|
});
|
|
10135
|
-
var templateObject_1$
|
|
10137
|
+
var templateObject_1$q;
|
|
10136
10138
|
|
|
10137
10139
|
var getStylesBySize$1 = function (size) {
|
|
10138
10140
|
// rem units
|
|
@@ -10191,13 +10193,13 @@ var SliderNavigation = function (_a) {
|
|
|
10191
10193
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
10192
10194
|
};
|
|
10193
10195
|
|
|
10194
|
-
var List = newStyled.ul(templateObject_1$
|
|
10195
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
10196
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
10197
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
10198
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
10199
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
10200
|
-
var templateObject_1$
|
|
10196
|
+
var List = newStyled.ul(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
10197
|
+
var Item$1 = newStyled.li(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
10198
|
+
var DropdownWrapper = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
10199
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
10200
|
+
var StyledDropdown = newStyled.ul(templateObject_5$3 || (templateObject_5$3 = __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; });
|
|
10201
|
+
var DropdownItem = newStyled.li(templateObject_6$3 || (templateObject_6$3 = __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; });
|
|
10202
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3;
|
|
10201
10203
|
|
|
10202
10204
|
var DropdownListIcons = function (_a) {
|
|
10203
10205
|
var items = _a.items;
|
|
@@ -10207,10 +10209,10 @@ var DropdownListIcons = function (_a) {
|
|
|
10207
10209
|
var Dropdown = function (_a) {
|
|
10208
10210
|
var items = _a.items;
|
|
10209
10211
|
var theme = useTheme();
|
|
10210
|
-
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
10212
|
+
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
10211
10213
|
};
|
|
10212
10214
|
|
|
10213
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
10215
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
10214
10216
|
var AmazonButton = function (_a) {
|
|
10215
10217
|
var onClick = _a.onClick;
|
|
10216
10218
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -10219,23 +10221,23 @@ var PaypalButton = function (_a) {
|
|
|
10219
10221
|
var onClick = _a.onClick;
|
|
10220
10222
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
10221
10223
|
};
|
|
10222
|
-
var templateObject_1$
|
|
10224
|
+
var templateObject_1$o;
|
|
10223
10225
|
|
|
10224
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
10225
|
-
var Col = newStyled.div(templateObject_2$
|
|
10226
|
-
var Row = newStyled.div(templateObject_3$
|
|
10226
|
+
var Wrapper = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
10227
|
+
var Col = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
10228
|
+
var Row = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
10227
10229
|
return props.rightToLeft &&
|
|
10228
10230
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
10229
10231
|
});
|
|
10230
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
10231
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
10232
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
10232
|
+
var H5 = newStyled.h5(templateObject_4$5 || (templateObject_4$5 = __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; });
|
|
10233
|
+
var H3 = newStyled.h3(templateObject_5$2 || (templateObject_5$2 = __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; });
|
|
10234
|
+
var FreeShipping = newStyled.span(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
10233
10235
|
var CrossSellCheckbox = function (_a) {
|
|
10234
10236
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
10235
10237
|
var theme = useTheme();
|
|
10236
10238
|
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));
|
|
10237
10239
|
};
|
|
10238
|
-
var templateObject_1$
|
|
10240
|
+
var templateObject_1$n, templateObject_2$d, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2;
|
|
10239
10241
|
|
|
10240
10242
|
var index = /*#__PURE__*/Object.freeze({
|
|
10241
10243
|
__proto__: null,
|
|
@@ -10256,8 +10258,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
10256
10258
|
height: height,
|
|
10257
10259
|
});
|
|
10258
10260
|
});
|
|
10259
|
-
var Container$e = newStyled.a(templateObject_1$
|
|
10260
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
10261
|
+
var Container$e = newStyled.a(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
10262
|
+
var H1 = newStyled.h1(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-size: 0.875rem;\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.875rem;\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; });
|
|
10261
10263
|
var getStylesBySize = function (size) {
|
|
10262
10264
|
switch (size) {
|
|
10263
10265
|
case exports.ComponentSize.Medium:
|
|
@@ -10297,9 +10299,9 @@ var ProductItemMobile = function (_a) {
|
|
|
10297
10299
|
}, [size]);
|
|
10298
10300
|
return (jsxs(Container$e, __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));
|
|
10299
10301
|
};
|
|
10300
|
-
var templateObject_1$
|
|
10302
|
+
var templateObject_1$m, templateObject_2$c;
|
|
10301
10303
|
|
|
10302
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
10304
|
+
var Container$d = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
10303
10305
|
function withProductGrid(ProductItemComponent, data) {
|
|
10304
10306
|
function WithProductGrid(props) {
|
|
10305
10307
|
return (jsxRuntime.jsx(Container$d, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -10309,18 +10311,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
10309
10311
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
10310
10312
|
return WithProductGrid;
|
|
10311
10313
|
}
|
|
10312
|
-
var templateObject_1$
|
|
10314
|
+
var templateObject_1$l;
|
|
10313
10315
|
|
|
10314
10316
|
var Collection = {
|
|
10315
10317
|
ProductItemMobile: ProductItemMobile,
|
|
10316
10318
|
withProductGrid: withProductGrid,
|
|
10317
10319
|
};
|
|
10318
10320
|
|
|
10319
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
10321
|
+
var Backdrop = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
10320
10322
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
10321
10323
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
10322
10324
|
});
|
|
10323
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
10325
|
+
var Sidebar = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
10324
10326
|
var width = _a.width;
|
|
10325
10327
|
return width;
|
|
10326
10328
|
}, function (_a) {
|
|
@@ -10361,16 +10363,16 @@ var Drawer = function (_a) {
|
|
|
10361
10363
|
}, [isOpen, onClose, onOpen]);
|
|
10362
10364
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
10363
10365
|
};
|
|
10364
|
-
var templateObject_1$
|
|
10366
|
+
var templateObject_1$k, templateObject_2$b;
|
|
10365
10367
|
|
|
10366
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
10368
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
10367
10369
|
var size = _a.size;
|
|
10368
10370
|
return (size ? size : '100%');
|
|
10369
10371
|
}, function (_a) {
|
|
10370
10372
|
var size = _a.size;
|
|
10371
10373
|
return (size ? size : '100%');
|
|
10372
10374
|
});
|
|
10373
|
-
var Animation = newStyled.div(templateObject_2$
|
|
10375
|
+
var Animation = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
10374
10376
|
var animationDuration = _a.animationDuration;
|
|
10375
10377
|
return animationDuration;
|
|
10376
10378
|
});
|
|
@@ -10378,11 +10380,11 @@ var Spinner = function (_a) {
|
|
|
10378
10380
|
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;
|
|
10379
10381
|
return (jsxRuntime.jsx(Container$c, __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));
|
|
10380
10382
|
};
|
|
10381
|
-
var templateObject_1$
|
|
10383
|
+
var templateObject_1$j, templateObject_2$a;
|
|
10382
10384
|
|
|
10383
|
-
var UL = newStyled.ul(templateObject_1$
|
|
10384
|
-
var LI = newStyled.li(templateObject_2$
|
|
10385
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
10385
|
+
var UL = newStyled.ul(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
10386
|
+
var LI = newStyled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
10387
|
+
var CloseIconContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
10386
10388
|
var Tags = function (_a) {
|
|
10387
10389
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
10388
10390
|
var theme = useTheme();
|
|
@@ -10390,7 +10392,7 @@ var Tags = function (_a) {
|
|
|
10390
10392
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
10391
10393
|
}) }), void 0));
|
|
10392
10394
|
};
|
|
10393
|
-
var templateObject_1$
|
|
10395
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$9;
|
|
10394
10396
|
|
|
10395
10397
|
function FilteringDropdown(_a) {
|
|
10396
10398
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -10423,15 +10425,15 @@ function FilteringDropdown(_a) {
|
|
|
10423
10425
|
}) }, void 0)] }), void 0));
|
|
10424
10426
|
}
|
|
10425
10427
|
|
|
10426
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
10427
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
10428
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
10428
|
+
var Container$b = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
10429
|
+
var IconContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
10430
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
10429
10431
|
var theme = _a.theme;
|
|
10430
10432
|
return mediaQueries({ theme: theme })({
|
|
10431
10433
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
10432
10434
|
});
|
|
10433
10435
|
});
|
|
10434
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
10436
|
+
var PageNumber = newStyled.span(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
10435
10437
|
var bold = _a.bold;
|
|
10436
10438
|
return (bold ? '700' : '500');
|
|
10437
10439
|
}, function (_a) {
|
|
@@ -10448,7 +10450,7 @@ var PageNumber = newStyled.span(templateObject_4$3 || (templateObject_4$3 = __ma
|
|
|
10448
10450
|
width: ['1.25rem', '1.875rem'],
|
|
10449
10451
|
});
|
|
10450
10452
|
});
|
|
10451
|
-
var templateObject_1$
|
|
10453
|
+
var templateObject_1$h, templateObject_2$8, templateObject_3$8, templateObject_4$4;
|
|
10452
10454
|
|
|
10453
10455
|
var Pagination = function (_a) {
|
|
10454
10456
|
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;
|
|
@@ -10464,7 +10466,7 @@ var Pagination = function (_a) {
|
|
|
10464
10466
|
return (jsxRuntime.jsxs(Container$b, __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), 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), 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));
|
|
10465
10467
|
};
|
|
10466
10468
|
|
|
10467
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
10469
|
+
var Container$a = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"])), function (props) {
|
|
10468
10470
|
return mediaQueries(props)({
|
|
10469
10471
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
10470
10472
|
});
|
|
@@ -10485,7 +10487,7 @@ var ProductItem = function (_a) {
|
|
|
10485
10487
|
var theme = useTheme();
|
|
10486
10488
|
return (jsxRuntime.jsxs(Container$a, __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$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
10487
10489
|
};
|
|
10488
|
-
var templateObject_1$
|
|
10490
|
+
var templateObject_1$g;
|
|
10489
10491
|
|
|
10490
10492
|
var Container$9 = newStyled.div({
|
|
10491
10493
|
display: 'flex',
|
|
@@ -10501,7 +10503,7 @@ var Ul = newStyled.ul({
|
|
|
10501
10503
|
margin: '0px',
|
|
10502
10504
|
padding: '0px',
|
|
10503
10505
|
});
|
|
10504
|
-
var Li = newStyled.li(templateObject_1$
|
|
10506
|
+
var Li = newStyled.li(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, function (props) {
|
|
10505
10507
|
return mediaQueries(props)({
|
|
10506
10508
|
padding: [0, '0rem 1rem'],
|
|
10507
10509
|
borderRadius: [0, '0.5rem'],
|
|
@@ -10514,13 +10516,13 @@ var Button$2 = newStyled.button({
|
|
|
10514
10516
|
cursor: 'pointer',
|
|
10515
10517
|
padding: 0,
|
|
10516
10518
|
});
|
|
10517
|
-
var Container$8 = newStyled.div(templateObject_2$
|
|
10519
|
+
var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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 border-radius: 0.5rem;\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 border-radius: 0.5rem;\n ", ",\n"])), function (props) {
|
|
10518
10520
|
return mediaQueries(props)({
|
|
10519
10521
|
border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
|
|
10520
10522
|
marginTop: ['1.25rem', '0.125rem'],
|
|
10521
10523
|
});
|
|
10522
10524
|
});
|
|
10523
|
-
var Header = newStyled.div(templateObject_3$
|
|
10525
|
+
var Header$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), function (props) {
|
|
10524
10526
|
return mediaQueries(props)({
|
|
10525
10527
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
10526
10528
|
});
|
|
@@ -10528,9 +10530,9 @@ var Header = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTem
|
|
|
10528
10530
|
var ResultsPanel = function (_a) {
|
|
10529
10531
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10530
10532
|
var theme = useTheme();
|
|
10531
|
-
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __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(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { 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));
|
|
10533
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __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(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { 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));
|
|
10532
10534
|
};
|
|
10533
|
-
var templateObject_1$
|
|
10535
|
+
var templateObject_1$f, templateObject_2$7, templateObject_3$7;
|
|
10534
10536
|
|
|
10535
10537
|
var Input = newStyled.input(function (props) { return ({
|
|
10536
10538
|
padding: props.theme.component.input.padding,
|
|
@@ -10561,7 +10563,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
10561
10563
|
},
|
|
10562
10564
|
}); });
|
|
10563
10565
|
|
|
10564
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
10566
|
+
var Button$1 = newStyled.button(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), function (props) {
|
|
10565
10567
|
return mediaQueries(props)({
|
|
10566
10568
|
right: ['1rem', '-3.75rem'],
|
|
10567
10569
|
});
|
|
@@ -10571,7 +10573,7 @@ var ClearButton = function (_a) {
|
|
|
10571
10573
|
var theme = useTheme();
|
|
10572
10574
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
10573
10575
|
};
|
|
10574
|
-
var templateObject_1$
|
|
10576
|
+
var templateObject_1$e;
|
|
10575
10577
|
|
|
10576
10578
|
var useOnClickOutside = function (ref, handler) {
|
|
10577
10579
|
React$2.useEffect(function () {
|
|
@@ -10949,23 +10951,23 @@ function useSwipeable(options) {
|
|
|
10949
10951
|
return handlers;
|
|
10950
10952
|
}
|
|
10951
10953
|
|
|
10952
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
10953
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
10954
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
10954
|
+
var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n"], ["\n position: relative;\n max-height: 31.875rem;\n"])));
|
|
10955
|
+
var TopTagContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10956
|
+
var BottomTagContainer = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10955
10957
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
10956
10958
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
10957
10959
|
return (jsxRuntime.jsxs(Container$6, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
10958
10960
|
});
|
|
10959
|
-
var templateObject_1$
|
|
10961
|
+
var templateObject_1$d, templateObject_2$6, templateObject_3$6;
|
|
10960
10962
|
|
|
10961
|
-
var Button = newStyled.button(templateObject_1$
|
|
10963
|
+
var Button = newStyled.button(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"])));
|
|
10962
10964
|
var ArrowButton = function (_a) {
|
|
10963
10965
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
10964
10966
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
10965
10967
|
};
|
|
10966
|
-
var templateObject_1$
|
|
10968
|
+
var templateObject_1$c;
|
|
10967
10969
|
|
|
10968
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
10970
|
+
var Container$5 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
10969
10971
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
10970
10972
|
var SlideDots = function (_a) {
|
|
10971
10973
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -10974,11 +10976,11 @@ var SlideDots = function (_a) {
|
|
|
10974
10976
|
? theme.colors.shades.white.color
|
|
10975
10977
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
10976
10978
|
};
|
|
10977
|
-
var templateObject_1$
|
|
10979
|
+
var templateObject_1$b;
|
|
10978
10980
|
|
|
10979
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
10980
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
10981
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
10981
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
10982
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
10983
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
10982
10984
|
var SlideNavigation = function (_a) {
|
|
10983
10985
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
10984
10986
|
var theme = useTheme();
|
|
@@ -10990,9 +10992,9 @@ var SlideNavigation = function (_a) {
|
|
|
10990
10992
|
onNavigate(selectedIndex + 1);
|
|
10991
10993
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
10992
10994
|
};
|
|
10993
|
-
var templateObject_1$
|
|
10995
|
+
var templateObject_1$a, templateObject_2$5, templateObject_3$5;
|
|
10994
10996
|
|
|
10995
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
10997
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
10996
10998
|
var ProductGalleryMobile = function (_a) {
|
|
10997
10999
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
10998
11000
|
var _b = React$2.useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -11022,7 +11024,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
11022
11024
|
}, [index, images]);
|
|
11023
11025
|
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
11024
11026
|
};
|
|
11025
|
-
var templateObject_1$
|
|
11027
|
+
var templateObject_1$9;
|
|
11026
11028
|
|
|
11027
11029
|
var Portal = function (_a) {
|
|
11028
11030
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -11145,10 +11147,10 @@ var react = __toCommonJS(react_exports);
|
|
|
11145
11147
|
var visibleStyle = function (_a) {
|
|
11146
11148
|
var opened = _a.opened;
|
|
11147
11149
|
return opened
|
|
11148
|
-
? css(templateObject_1$
|
|
11150
|
+
? css(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "], ["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "]))) : css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "], ["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "])));
|
|
11149
11151
|
};
|
|
11150
|
-
var Container$3 = newStyled.div(templateObject_3$
|
|
11151
|
-
var Overlay = newStyled.div(templateObject_4$
|
|
11152
|
+
var Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n max-width: 90vw;\n max-height: 90vh;\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n max-width: 90vw;\n max-height: 90vh;\n\n ", ";\n"])), visibleStyle);
|
|
11153
|
+
var Overlay = newStyled.div(templateObject_4$3 || (templateObject_4$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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\n"])), visibleStyle);
|
|
11152
11154
|
var Modal = function (_a) {
|
|
11153
11155
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
11154
11156
|
var _c = React$2.useState(false), opened = _c[0], setOpened = _c[1];
|
|
@@ -11174,52 +11176,52 @@ var useModalEvent = function (id, cb) {
|
|
|
11174
11176
|
cb(event);
|
|
11175
11177
|
}, [id, cb]));
|
|
11176
11178
|
};
|
|
11177
|
-
var templateObject_1$
|
|
11179
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11178
11180
|
|
|
11179
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
11180
|
-
var Title = function (_a) {
|
|
11181
|
+
var Text$2 = newStyled.span(templateObject_1$7 || (templateObject_1$7 = __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; });
|
|
11182
|
+
var Title$1 = function (_a) {
|
|
11181
11183
|
var title = _a.title;
|
|
11182
11184
|
var theme = useTheme();
|
|
11183
11185
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
11184
11186
|
};
|
|
11185
|
-
var templateObject_1$
|
|
11187
|
+
var templateObject_1$7;
|
|
11186
11188
|
|
|
11187
|
-
var P = newStyled.p(templateObject_1$
|
|
11189
|
+
var P = newStyled.p(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
11188
11190
|
var Promo = function (_a) {
|
|
11189
11191
|
var text = _a.text;
|
|
11190
11192
|
var theme = useTheme();
|
|
11191
11193
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
11192
11194
|
};
|
|
11193
|
-
var templateObject_1$
|
|
11195
|
+
var templateObject_1$6;
|
|
11194
11196
|
|
|
11195
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
11197
|
+
var Text$1 = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
11196
11198
|
var Description = function (_a) {
|
|
11197
11199
|
var text = _a.text;
|
|
11198
11200
|
var theme = useTheme();
|
|
11199
11201
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
11200
11202
|
};
|
|
11201
|
-
var templateObject_1$
|
|
11203
|
+
var templateObject_1$5;
|
|
11202
11204
|
|
|
11203
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
11205
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"); });
|
|
11204
11206
|
var CloseButton = function (_a) {
|
|
11205
11207
|
var onClick = _a.onClick, size = _a.size;
|
|
11206
11208
|
var theme = useTheme();
|
|
11207
11209
|
return (jsxRuntime.jsx(Container$2, __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));
|
|
11208
11210
|
};
|
|
11209
|
-
var templateObject_1$
|
|
11211
|
+
var templateObject_1$4;
|
|
11210
11212
|
|
|
11211
11213
|
var CartProductItem = {
|
|
11212
|
-
Title: Title,
|
|
11214
|
+
Title: Title$1,
|
|
11213
11215
|
Tag: OfferBanner,
|
|
11214
11216
|
Promo: Promo,
|
|
11215
11217
|
Description: Description,
|
|
11216
11218
|
CloseButton: CloseButton,
|
|
11217
11219
|
};
|
|
11218
11220
|
|
|
11219
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
11220
|
-
var Item = newStyled.span(templateObject_2$
|
|
11221
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
11222
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
11221
|
+
var Container$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
11222
|
+
var Item = newStyled.span(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
11223
|
+
var Number$1 = newStyled(Item)(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
11224
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
11223
11225
|
var QuantityPicker = function (_a) {
|
|
11224
11226
|
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;
|
|
11225
11227
|
var theme = useTheme();
|
|
@@ -11244,7 +11246,7 @@ var QuantityPicker = function (_a) {
|
|
|
11244
11246
|
}, [value, clamp]);
|
|
11245
11247
|
return (jsxRuntime.jsxs(Container$1, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ 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({ onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
11246
11248
|
};
|
|
11247
|
-
var templateObject_1$
|
|
11249
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2;
|
|
11248
11250
|
|
|
11249
11251
|
var htmlReactParser = {exports: {}};
|
|
11250
11252
|
|
|
@@ -15025,13 +15027,13 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
15025
15027
|
HTMLReactParser$1.attributesToProps;
|
|
15026
15028
|
HTMLReactParser$1.Element;
|
|
15027
15029
|
|
|
15028
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n"])));
|
|
15029
|
-
var Card = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --radius: var(--component-packSelector-borderRadius);\n --background: var(--colors-background-color);\n\n flex: 1;\n cursor: pointer;\n border: 1px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n\n &:first-of-type {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n &:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n &[data-highlight='true'] {\n --background: var(--component-packSelector-highlight);\n }\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selected);\n\n border-color: var(--color);\n\n & * {\n color: var(--color) !important;\n }\n }\n"], ["\n --radius: var(--component-packSelector-borderRadius);\n --background: var(--colors-background-color);\n\n flex: 1;\n cursor: pointer;\n border: 1px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n\n &:first-of-type {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n &:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n &[data-highlight='true'] {\n --background: var(--component-packSelector-highlight);\n }\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selected);\n\n border-color: var(--color);\n\n & * {\n color: var(--color) !important;\n }\n }\n"])));
|
|
15030
|
-
var Tag = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 2px;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 2px;\n transform: translateX(-50%);\n"])));
|
|
15031
|
-
var Label = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
15032
|
-
var Check = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n width: 24px;\n height: 24px;\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: 24px;\n height: 24px;\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"])));
|
|
15033
|
-
var IconContainer = newStyled.div(templateObject_6 || (templateObject_6 = __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"])));
|
|
15034
|
-
var IconPlaceholder = newStyled.div(templateObject_7 || (templateObject_7 = __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"])));
|
|
15030
|
+
var Container = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n"])));
|
|
15031
|
+
var Card = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n --radius: var(--component-packSelector-borderRadius);\n --background: var(--colors-background-color);\n\n flex: 1;\n cursor: pointer;\n border: 1px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n\n &:first-of-type {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n &:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n &[data-highlight='true'] {\n --background: var(--component-packSelector-highlight);\n }\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selected);\n\n border-color: var(--color);\n\n & * {\n color: var(--color) !important;\n }\n }\n"], ["\n --radius: var(--component-packSelector-borderRadius);\n --background: var(--colors-background-color);\n\n flex: 1;\n cursor: pointer;\n border: 1px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n\n &:first-of-type {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n &:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n &[data-highlight='true'] {\n --background: var(--component-packSelector-highlight);\n }\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selected);\n\n border-color: var(--color);\n\n & * {\n color: var(--color) !important;\n }\n }\n"])));
|
|
15032
|
+
var Tag = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 2px;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 2px;\n transform: translateX(-50%);\n"])));
|
|
15033
|
+
var Label = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
15034
|
+
var Check = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n width: 24px;\n height: 24px;\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: 24px;\n height: 24px;\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"])));
|
|
15035
|
+
var IconContainer = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
15036
|
+
var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __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"])));
|
|
15035
15037
|
var PackSelector = function (_a) {
|
|
15036
15038
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
15037
15039
|
return (jsxRuntime.jsx(Container, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -15049,9 +15051,63 @@ var PackCard = function (_a) {
|
|
|
15049
15051
|
}, [pack.meta.icon]);
|
|
15050
15052
|
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small" }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.7, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", size: "small" }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", size: "small", "data-testid": "pack-selector-prices" }, { children: [jsxRuntime.jsx("del", { children: formatPrice(pack.meta.originalPrice) }, void 0), " - ", formatPrice(pack.meta.price)] }), void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15051
15053
|
};
|
|
15052
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
15054
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
15055
|
+
|
|
15056
|
+
var Title = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __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; });
|
|
15057
|
+
var H2 = newStyled.h2(templateObject_2$1 || (templateObject_2$1 = __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; });
|
|
15058
|
+
var ArrowContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
15059
|
+
var Accordion = function (_a) {
|
|
15060
|
+
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
15061
|
+
var theme = useTheme();
|
|
15062
|
+
var _c = React__default["default"].useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
15063
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "FiltersAccordion" }, { 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));
|
|
15064
|
+
};
|
|
15065
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
15066
|
+
|
|
15067
|
+
var SectionContent = newStyled.div(templateObject_1 || (templateObject_1 = __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; });
|
|
15068
|
+
var Header = newStyled.div(templateObject_2 || (templateObject_2 = __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"])));
|
|
15069
|
+
var MobileHeader = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
15070
|
+
var MobileIconsContainer = newStyled.div(templateObject_4 || (templateObject_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"])));
|
|
15071
|
+
var H4 = newStyled.h4(templateObject_5 || (templateObject_5 = __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; });
|
|
15072
|
+
var ClearAll = newStyled.span(templateObject_6 || (templateObject_6 = __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; });
|
|
15073
|
+
var MobileFooter = newStyled.div(templateObject_7 || (templateObject_7 = __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"])));
|
|
15074
|
+
var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 = __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"])));
|
|
15075
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
15076
|
+
|
|
15077
|
+
var Filters = function (_a) {
|
|
15078
|
+
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;
|
|
15079
|
+
var theme = useTheme();
|
|
15080
|
+
var _c = React__default["default"].useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
|
|
15081
|
+
var handleCheckboxClick = React$2.useCallback(function (_a) {
|
|
15082
|
+
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
|
|
15083
|
+
onChange({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15084
|
+
setCheckedItems(function (prev) {
|
|
15085
|
+
return checked
|
|
15086
|
+
? __spreadArray(__spreadArray([], prev, true), [{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex] }], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
15087
|
+
});
|
|
15088
|
+
}, [filters, onChange]);
|
|
15089
|
+
var handleCloseClick = function (_a) {
|
|
15090
|
+
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
|
|
15091
|
+
var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
|
|
15092
|
+
simulateMouseClick(element);
|
|
15093
|
+
};
|
|
15094
|
+
var handleClearAllClick = function () {
|
|
15095
|
+
checkedItems.forEach(function (item) {
|
|
15096
|
+
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
15097
|
+
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
15098
|
+
});
|
|
15099
|
+
};
|
|
15100
|
+
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));
|
|
15101
|
+
};
|
|
15102
|
+
var FilterCheckbox = function (_a) {
|
|
15103
|
+
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange;
|
|
15104
|
+
var onChange = React$2.useCallback(function (checked) {
|
|
15105
|
+
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15106
|
+
}, [sectionIndex, itemIndex, onChangeProp]);
|
|
15107
|
+
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
15108
|
+
};
|
|
15053
15109
|
|
|
15054
|
-
exports.Accordion = Accordion;
|
|
15110
|
+
exports.Accordion = Accordion$1;
|
|
15055
15111
|
exports.AmazonButton = AmazonButton;
|
|
15056
15112
|
exports.AssetsProvider = AssetsProvider;
|
|
15057
15113
|
exports.Bundle = Bundle;
|
|
@@ -15070,6 +15126,7 @@ exports.Drawer = Drawer;
|
|
|
15070
15126
|
exports.DropdownListIcons = DropdownListIcons;
|
|
15071
15127
|
exports.FilteringDropdown = FilteringDropdown;
|
|
15072
15128
|
exports.FilteringTags = Tags;
|
|
15129
|
+
exports.Filters = Filters;
|
|
15073
15130
|
exports.FitPredictor = FitPredictor;
|
|
15074
15131
|
exports.Icon = Icon;
|
|
15075
15132
|
exports.IconButton = IconButton;
|