@trafilea/afrodita-components 5.0.0-beta.105 → 5.0.0-beta.107
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 +14 -2
- package/build/index.esm.js +421 -376
- package/build/index.esm.js.map +1 -1
- package/build/index.js +421 -375
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
|
|
|
4042
4042
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4043
4043
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4044
4044
|
|
|
4045
|
-
var Section = newStyled.div(templateObject_1$
|
|
4045
|
+
var Section = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
4046
4046
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4047
4047
|
});
|
|
4048
4048
|
var CardHeader = function (_a) {
|
|
@@ -4053,14 +4053,14 @@ var CardFooter = function (_a) {
|
|
|
4053
4053
|
var children = _a.children;
|
|
4054
4054
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4055
4055
|
};
|
|
4056
|
-
var templateObject_1$
|
|
4056
|
+
var templateObject_1$1k;
|
|
4057
4057
|
|
|
4058
|
-
var Body = newStyled.div(templateObject_1$
|
|
4058
|
+
var Body = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
4059
4059
|
var CardBody = function (_a) {
|
|
4060
4060
|
var children = _a.children;
|
|
4061
4061
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4062
4062
|
};
|
|
4063
|
-
var templateObject_1$
|
|
4063
|
+
var templateObject_1$1j;
|
|
4064
4064
|
|
|
4065
4065
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4066
4066
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4207
4207
|
|
|
4208
|
-
var Container$
|
|
4208
|
+
var Container$P = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4209
4209
|
var flex = _a.flex;
|
|
4210
4210
|
return flex &&
|
|
4211
4211
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4218,14 +4218,14 @@ var Container$O = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
4218
4218
|
var Card$1 = function (_a) {
|
|
4219
4219
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4220
4220
|
var theme = useTheme();
|
|
4221
|
-
return (jsxRuntime.jsx(Container$
|
|
4221
|
+
return (jsxRuntime.jsx(Container$P, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4222
4222
|
};
|
|
4223
4223
|
var Card$2 = Object.assign(Card$1, {
|
|
4224
4224
|
Header: CardHeader,
|
|
4225
4225
|
Footer: CardFooter,
|
|
4226
4226
|
Body: CardBody,
|
|
4227
4227
|
});
|
|
4228
|
-
var templateObject_1$
|
|
4228
|
+
var templateObject_1$1i;
|
|
4229
4229
|
|
|
4230
4230
|
var Fragment = jsxRuntime.Fragment;
|
|
4231
4231
|
function jsx(type, props, key) {
|
|
@@ -4367,7 +4367,7 @@ function BaseSelectOption(_a) {
|
|
|
4367
4367
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4368
4368
|
}
|
|
4369
4369
|
|
|
4370
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4370
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4371
4371
|
function BaseSelect(_a) {
|
|
4372
4372
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4373
4373
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4377,7 +4377,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4377
4377
|
Options: BaseSelectOptions,
|
|
4378
4378
|
Option: BaseSelectOption,
|
|
4379
4379
|
});
|
|
4380
|
-
var templateObject_1$
|
|
4380
|
+
var templateObject_1$1h;
|
|
4381
4381
|
|
|
4382
4382
|
var CustomButton = newStyled.button(function (_a) {
|
|
4383
4383
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4590,12 +4590,12 @@ var CustomCheckboxStyles = {
|
|
|
4590
4590
|
},
|
|
4591
4591
|
};
|
|
4592
4592
|
|
|
4593
|
-
var Container$
|
|
4593
|
+
var Container$O = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
4594
4594
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4595
4595
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4596
4596
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4597
4597
|
]; });
|
|
4598
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4598
|
+
var Input$3 = newStyled.input(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
4599
4599
|
var disabled = _a.disabled;
|
|
4600
4600
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4601
4601
|
});
|
|
@@ -4624,9 +4624,9 @@ var Checkbox = function (_a) {
|
|
|
4624
4624
|
React$2.useEffect(function () {
|
|
4625
4625
|
mounted.current = true;
|
|
4626
4626
|
}, []);
|
|
4627
|
-
return (jsxRuntime.jsxs(Container$
|
|
4627
|
+
return (jsxRuntime.jsxs(Container$O, { 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));
|
|
4628
4628
|
};
|
|
4629
|
-
var templateObject_1$
|
|
4629
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
4630
4630
|
|
|
4631
4631
|
var CustomOption = newStyled.li(function (_a) {
|
|
4632
4632
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4705,10 +4705,10 @@ function SimpleDropdown(_a) {
|
|
|
4705
4705
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4706
4706
|
}
|
|
4707
4707
|
|
|
4708
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4709
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4710
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4711
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4708
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4709
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4710
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4711
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4712
4712
|
var DropdownDialog = function (_a) {
|
|
4713
4713
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4714
4714
|
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4716,7 +4716,7 @@ var DropdownDialog = function (_a) {
|
|
|
4716
4716
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4717
4717
|
}) }), void 0) }), void 0));
|
|
4718
4718
|
};
|
|
4719
|
-
var templateObject_1$
|
|
4719
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$C, templateObject_4$p;
|
|
4720
4720
|
|
|
4721
4721
|
var getStylesBySize$8 = function (size, theme) {
|
|
4722
4722
|
switch (size) {
|
|
@@ -4776,14 +4776,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4776
4776
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4777
4777
|
// `variants` styles that are consistent through all themes.
|
|
4778
4778
|
var TAGS = {
|
|
4779
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4780
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4781
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4782
|
-
display1: newStyled.h1(templateObject_4$
|
|
4783
|
-
display2: newStyled.h2(templateObject_5$
|
|
4784
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4785
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4786
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4779
|
+
hero1: newStyled.h1(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
hero2: newStyled.h2(templateObject_2$O || (templateObject_2$O = __makeTemplateObject([""], [""]))),
|
|
4781
|
+
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4782
|
+
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
4783
|
+
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4784
|
+
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4785
|
+
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
4786
|
+
heading3: newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject([""], [""]))),
|
|
4787
4787
|
heading4: newStyled.h4(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject([""], [""]))),
|
|
4788
4788
|
heading5: newStyled.h5(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject([""], [""]))),
|
|
4789
4789
|
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4899,9 +4899,9 @@ var DEFAULTS = {
|
|
|
4899
4899
|
size: 'regular',
|
|
4900
4900
|
},
|
|
4901
4901
|
};
|
|
4902
|
-
var templateObject_1$
|
|
4902
|
+
var templateObject_1$1e, templateObject_2$O, templateObject_3$B, templateObject_4$o, templateObject_5$f, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4903
4903
|
|
|
4904
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4904
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
4905
4905
|
var inline = _a.inline;
|
|
4906
4906
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4907
4907
|
});
|
|
@@ -4919,7 +4919,7 @@ var SizeSelector = function (_a) {
|
|
|
4919
4919
|
}, 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));
|
|
4920
4920
|
}) }), void 0)] }), void 0));
|
|
4921
4921
|
};
|
|
4922
|
-
var templateObject_1$
|
|
4922
|
+
var templateObject_1$1d;
|
|
4923
4923
|
|
|
4924
4924
|
var getStylesBySize$7 = function (size) {
|
|
4925
4925
|
switch (size) {
|
|
@@ -4946,7 +4946,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4946
4946
|
} });
|
|
4947
4947
|
};
|
|
4948
4948
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4949
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4949
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1c || (templateObject_1$1c = __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));
|
|
4950
4950
|
};
|
|
4951
4951
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4952
4952
|
if (disabled)
|
|
@@ -4962,16 +4962,16 @@ var TextButton = function (_a) {
|
|
|
4962
4962
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4963
4963
|
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), uppercase: uppercase }, { children: text }), void 0));
|
|
4964
4964
|
};
|
|
4965
|
-
var templateObject_1$
|
|
4965
|
+
var templateObject_1$1c;
|
|
4966
4966
|
|
|
4967
|
-
var Container$
|
|
4968
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4969
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4967
|
+
var Container$N = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4968
|
+
var P$3 = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4969
|
+
var PercentageSpan = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4970
4970
|
var SizeFitGuide = function (_a) {
|
|
4971
4971
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4972
|
-
return (jsxRuntime.jsxs(Container$
|
|
4972
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4973
4973
|
};
|
|
4974
|
-
var templateObject_1$
|
|
4974
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$A;
|
|
4975
4975
|
|
|
4976
4976
|
var getStylesBySize$6 = function (size) {
|
|
4977
4977
|
switch (size) {
|
|
@@ -5001,7 +5001,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5001
5001
|
};
|
|
5002
5002
|
}
|
|
5003
5003
|
};
|
|
5004
|
-
var Container$
|
|
5004
|
+
var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
5005
5005
|
var backgroundColor = _a.backgroundColor;
|
|
5006
5006
|
return backgroundColor;
|
|
5007
5007
|
}, function (_a) {
|
|
@@ -5023,7 +5023,7 @@ var Container$L = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __
|
|
|
5023
5023
|
var size = _a.size;
|
|
5024
5024
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5025
5025
|
});
|
|
5026
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5026
|
+
var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __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) {
|
|
5027
5027
|
var textColor = _a.textColor;
|
|
5028
5028
|
return textColor;
|
|
5029
5029
|
}, function (_a) {
|
|
@@ -5038,9 +5038,9 @@ var H3$2 = newStyled.h3(templateObject_2$L || (templateObject_2$L = __makeTempla
|
|
|
5038
5038
|
var DiscountTag = function (_a) {
|
|
5039
5039
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5040
5040
|
var theme = useTheme();
|
|
5041
|
-
return (jsxRuntime.jsx(Container$
|
|
5041
|
+
return (jsxRuntime.jsx(Container$M, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5042
5042
|
};
|
|
5043
|
-
var templateObject_1$
|
|
5043
|
+
var templateObject_1$1a, templateObject_2$M;
|
|
5044
5044
|
|
|
5045
5045
|
var getStylesBySize$5 = function (size) {
|
|
5046
5046
|
switch (size) {
|
|
@@ -5070,8 +5070,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
5070
5070
|
};
|
|
5071
5071
|
}
|
|
5072
5072
|
};
|
|
5073
|
-
var Container$
|
|
5074
|
-
var Price = newStyled.p(templateObject_2$
|
|
5073
|
+
var Container$L = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5074
|
+
var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5075
5075
|
var weight = _a.weight;
|
|
5076
5076
|
return (weight ? weight : '400');
|
|
5077
5077
|
}, function (_a) {
|
|
@@ -5100,7 +5100,7 @@ var Price = newStyled.p(templateObject_2$K || (templateObject_2$K = __makeTempla
|
|
|
5100
5100
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5101
5101
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5102
5102
|
});
|
|
5103
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5103
|
+
var TagContainer = newStyled.p(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5104
5104
|
var _b;
|
|
5105
5105
|
var size = _a.size;
|
|
5106
5106
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5121,11 +5121,11 @@ var PriceLabel = function (_a) {
|
|
|
5121
5121
|
weight: 700,
|
|
5122
5122
|
};
|
|
5123
5123
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5124
|
-
return (jsxRuntime.jsxs(Container$
|
|
5124
|
+
return (jsxRuntime.jsxs(Container$L, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5125
5125
|
};
|
|
5126
|
-
var templateObject_1$
|
|
5126
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$z;
|
|
5127
5127
|
|
|
5128
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5128
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5129
5129
|
var PriceLabelV2 = function (_a) {
|
|
5130
5130
|
var _b;
|
|
5131
5131
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5153,9 +5153,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5153
5153
|
weight: 700,
|
|
5154
5154
|
};
|
|
5155
5155
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5156
|
-
return (jsxRuntime.jsxs(Container$
|
|
5156
|
+
return (jsxRuntime.jsxs(Container$L, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5157
5157
|
};
|
|
5158
|
-
var templateObject_1$
|
|
5158
|
+
var templateObject_1$18;
|
|
5159
5159
|
|
|
5160
5160
|
var OneColorSelector = function (_a) {
|
|
5161
5161
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5196,11 +5196,11 @@ var OutOfStock = function (_a) {
|
|
|
5196
5196
|
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));
|
|
5197
5197
|
};
|
|
5198
5198
|
|
|
5199
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5200
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5201
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5202
|
-
var Span = newStyled.span(templateObject_4$
|
|
5203
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5199
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5200
|
+
newStyled(lt.Label)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5201
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5202
|
+
var Span = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5203
|
+
var OptionsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
5204
5204
|
var Label$2 = function (_a) {
|
|
5205
5205
|
var label = _a.label, values = _a.values;
|
|
5206
5206
|
return (jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5218,20 +5218,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5218
5218
|
Option: Option,
|
|
5219
5219
|
OptionsContainer: OptionsContainer,
|
|
5220
5220
|
});
|
|
5221
|
-
var templateObject_1$
|
|
5221
|
+
var templateObject_1$17, templateObject_2$K, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5222
5222
|
|
|
5223
|
-
var Container$
|
|
5223
|
+
var Container$K = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
5224
5224
|
var borderColor = _a.borderColor;
|
|
5225
5225
|
return borderColor;
|
|
5226
5226
|
});
|
|
5227
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5227
|
+
var Image$3 = newStyled.img(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5228
5228
|
var PatternSelector = function (_a) {
|
|
5229
5229
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5230
5230
|
var theme = useTheme();
|
|
5231
5231
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5232
|
-
return (jsxRuntime.jsx(Container$
|
|
5232
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5233
5233
|
};
|
|
5234
|
-
var templateObject_1$
|
|
5234
|
+
var templateObject_1$16, templateObject_2$J;
|
|
5235
5235
|
|
|
5236
5236
|
var renderOptions$1 = function (options) {
|
|
5237
5237
|
if (options.length === 0) {
|
|
@@ -5289,7 +5289,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5289
5289
|
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));
|
|
5290
5290
|
};
|
|
5291
5291
|
|
|
5292
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5292
|
+
var Image$2 = newStyled.img(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5293
5293
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5294
5294
|
return borderRadiusVariant &&
|
|
5295
5295
|
"\nborder-radius: 20px;\n";
|
|
@@ -5304,7 +5304,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5304
5304
|
var theme = useTheme();
|
|
5305
5305
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5306
5306
|
};
|
|
5307
|
-
var templateObject_1$
|
|
5307
|
+
var templateObject_1$15;
|
|
5308
5308
|
|
|
5309
5309
|
var Button$4 = newStyled.button(function () { return ({
|
|
5310
5310
|
background: 'transparent',
|
|
@@ -9547,14 +9547,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9547
9547
|
return Slider;
|
|
9548
9548
|
}(React__default["default"].Component);
|
|
9549
9549
|
|
|
9550
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9550
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
9551
9551
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9552
9552
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9553
9553
|
}, function (_a) {
|
|
9554
9554
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9555
9555
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9556
9556
|
});
|
|
9557
|
-
var templateObject_1$
|
|
9557
|
+
var templateObject_1$14;
|
|
9558
9558
|
|
|
9559
9559
|
var getStylesBySize$4 = function (size) {
|
|
9560
9560
|
// rem units
|
|
@@ -9613,22 +9613,22 @@ var SliderNavigation = function (_a) {
|
|
|
9613
9613
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9614
9614
|
};
|
|
9615
9615
|
|
|
9616
|
-
var horizontalStyles = css(templateObject_1$
|
|
9617
|
-
var verticalStyles = css(templateObject_2$
|
|
9618
|
-
var Container$
|
|
9616
|
+
var horizontalStyles = css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9617
|
+
var verticalStyles = css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
9618
|
+
var Container$J = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9619
9619
|
var position = _a.position;
|
|
9620
9620
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9621
9621
|
});
|
|
9622
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9622
|
+
var Button$3 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9623
9623
|
var ImagePreviewList = function (_a) {
|
|
9624
9624
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9625
|
-
return (jsxRuntime.jsx(Container$
|
|
9625
|
+
return (jsxRuntime.jsx(Container$J, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9626
9626
|
arrowWidth: 0.75,
|
|
9627
9627
|
arrowHeight: 1.25,
|
|
9628
9628
|
arrowPadding: 1.625,
|
|
9629
9629
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9630
9630
|
};
|
|
9631
|
-
var templateObject_1$
|
|
9631
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$x, templateObject_4$m;
|
|
9632
9632
|
|
|
9633
9633
|
var propTypes = {exports: {}};
|
|
9634
9634
|
|
|
@@ -11214,23 +11214,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11214
11214
|
afterZoomOut: PropTypes.func
|
|
11215
11215
|
} : {};
|
|
11216
11216
|
|
|
11217
|
-
var Container$
|
|
11217
|
+
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11218
11218
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11219
11219
|
return borderRadiusVariant &&
|
|
11220
11220
|
"\n border-radius: 40px;\n ";
|
|
11221
11221
|
});
|
|
11222
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11223
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11222
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11223
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11224
11224
|
var ImageProductWithTags$1 = function (_a) {
|
|
11225
11225
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11226
|
-
return (jsxRuntime.jsxs(Container$
|
|
11226
|
+
return (jsxRuntime.jsxs(Container$I, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11227
11227
|
alt: image.alt,
|
|
11228
11228
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11229
11229
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11230
11230
|
};
|
|
11231
|
-
var templateObject_1$
|
|
11231
|
+
var templateObject_1$12, templateObject_2$H, templateObject_3$w;
|
|
11232
11232
|
|
|
11233
|
-
var Container$
|
|
11233
|
+
var Container$H = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11234
11234
|
var ProductGallery = function (_a) {
|
|
11235
11235
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11236
11236
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11238,11 +11238,11 @@ var ProductGallery = function (_a) {
|
|
|
11238
11238
|
React$2.useEffect(function () {
|
|
11239
11239
|
setSelectedImage(initialValue);
|
|
11240
11240
|
}, [initialValue]);
|
|
11241
|
-
return (jsxRuntime.jsxs(Container$
|
|
11241
|
+
return (jsxRuntime.jsxs(Container$H, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11242
11242
|
setSelectedImage(value);
|
|
11243
11243
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11244
11244
|
};
|
|
11245
|
-
var templateObject_1$
|
|
11245
|
+
var templateObject_1$11;
|
|
11246
11246
|
|
|
11247
11247
|
/* base styles & size variants */
|
|
11248
11248
|
var StarStyles = {
|
|
@@ -11288,8 +11288,8 @@ var StarStyles = {
|
|
|
11288
11288
|
});
|
|
11289
11289
|
},
|
|
11290
11290
|
};
|
|
11291
|
-
var Container$
|
|
11292
|
-
var templateObject_1
|
|
11291
|
+
var Container$G = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11292
|
+
var templateObject_1$10;
|
|
11293
11293
|
|
|
11294
11294
|
var StarContainer = newStyled.div(function (_a) {
|
|
11295
11295
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11307,7 +11307,7 @@ var sizes = {
|
|
|
11307
11307
|
var StarList = function (_a) {
|
|
11308
11308
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11309
11309
|
var theme = useTheme();
|
|
11310
|
-
return (jsxRuntime.jsx(Container$
|
|
11310
|
+
return (jsxRuntime.jsx(Container$G, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11311
11311
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11312
11312
|
}) }, void 0));
|
|
11313
11313
|
};
|
|
@@ -11351,8 +11351,8 @@ var LabelStyles = {
|
|
|
11351
11351
|
});
|
|
11352
11352
|
},
|
|
11353
11353
|
};
|
|
11354
|
-
var Container$
|
|
11355
|
-
var templateObject_1
|
|
11354
|
+
var Container$F = newStyled.a(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11355
|
+
var templateObject_1$$;
|
|
11356
11356
|
|
|
11357
11357
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11358
11358
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11390,11 +11390,11 @@ var Rating = function (_a) {
|
|
|
11390
11390
|
href: reviewsContainerId,
|
|
11391
11391
|
}
|
|
11392
11392
|
: {};
|
|
11393
|
-
return (jsxRuntime.jsxs(Container$
|
|
11393
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11394
11394
|
};
|
|
11395
11395
|
|
|
11396
|
-
var Container$
|
|
11397
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11396
|
+
var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
11397
|
+
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
11398
11398
|
var textButtonStyles = function (theme) { return ({
|
|
11399
11399
|
border: 'none',
|
|
11400
11400
|
background: 'transparent',
|
|
@@ -11407,9 +11407,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11407
11407
|
var FitPredictor = function (_a) {
|
|
11408
11408
|
var onClick = _a.onClick;
|
|
11409
11409
|
var theme = useTheme();
|
|
11410
|
-
return (jsxs(Container$
|
|
11410
|
+
return (jsxs(Container$E, __assign$1({ theme: theme }, { children: [jsx(Container$E, { 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));
|
|
11411
11411
|
};
|
|
11412
|
-
var templateObject_1$
|
|
11412
|
+
var templateObject_1$_, templateObject_2$G;
|
|
11413
11413
|
|
|
11414
11414
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11415
11415
|
var color = _a.color;
|
|
@@ -11423,7 +11423,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11423
11423
|
margin: '0.938rem 4.188rem',
|
|
11424
11424
|
});
|
|
11425
11425
|
});
|
|
11426
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11426
|
+
var Bar = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
11427
11427
|
var backgroundColor = _a.backgroundColor;
|
|
11428
11428
|
return backgroundColor;
|
|
11429
11429
|
}, function (_a) {
|
|
@@ -11446,7 +11446,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11446
11446
|
position: 'absolute',
|
|
11447
11447
|
});
|
|
11448
11448
|
});
|
|
11449
|
-
var Container$
|
|
11449
|
+
var Container$D = newStyled.div(function (_a) {
|
|
11450
11450
|
var widthAuto = _a.widthAuto;
|
|
11451
11451
|
return ({
|
|
11452
11452
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11460,9 +11460,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11460
11460
|
var ProgressBar = function (_a) {
|
|
11461
11461
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11462
11462
|
var theme = useTheme();
|
|
11463
|
-
return (jsxRuntime.jsxs(Container$
|
|
11463
|
+
return (jsxRuntime.jsxs(Container$D, __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));
|
|
11464
11464
|
};
|
|
11465
|
-
var templateObject_1$
|
|
11465
|
+
var templateObject_1$Z;
|
|
11466
11466
|
|
|
11467
11467
|
var getStylesBySize$3 = function (size) {
|
|
11468
11468
|
switch (size) {
|
|
@@ -11483,7 +11483,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11483
11483
|
};
|
|
11484
11484
|
}
|
|
11485
11485
|
};
|
|
11486
|
-
var Container$
|
|
11486
|
+
var Container$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
11487
11487
|
var backgroundColor = _a.backgroundColor;
|
|
11488
11488
|
return backgroundColor;
|
|
11489
11489
|
}, function (_a) {
|
|
@@ -11511,9 +11511,9 @@ var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __ma
|
|
|
11511
11511
|
var IconButton = function (_a) {
|
|
11512
11512
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11513
11513
|
var theme = useTheme();
|
|
11514
|
-
return (jsxRuntime.jsx(Container$
|
|
11514
|
+
return (jsxRuntime.jsx(Container$C, __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));
|
|
11515
11515
|
};
|
|
11516
|
-
var templateObject_1$
|
|
11516
|
+
var templateObject_1$Y;
|
|
11517
11517
|
|
|
11518
11518
|
var TooltipArrow = function (_a) {
|
|
11519
11519
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11593,7 +11593,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11593
11593
|
}
|
|
11594
11594
|
};
|
|
11595
11595
|
|
|
11596
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11596
|
+
var Wrapper$5 = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
11597
11597
|
var position = _a.position;
|
|
11598
11598
|
return getWrapperFlexDirection(position);
|
|
11599
11599
|
});
|
|
@@ -11617,11 +11617,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11617
11617
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11618
11618
|
return actual === expected ? margin : '0';
|
|
11619
11619
|
};
|
|
11620
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11620
|
+
var ContentWrapper = newStyled.div(templateObject_2$F || (templateObject_2$F = __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) {
|
|
11621
11621
|
var borderColor = _a.borderColor;
|
|
11622
11622
|
return borderColor;
|
|
11623
11623
|
});
|
|
11624
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11624
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __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) {
|
|
11625
11625
|
var position = _a.position;
|
|
11626
11626
|
return getArrowRotation(position);
|
|
11627
11627
|
}, function (_a) {
|
|
@@ -11631,17 +11631,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$u || (templateObject_
|
|
|
11631
11631
|
var position = _a.position;
|
|
11632
11632
|
return getArrowContainerMargin(position);
|
|
11633
11633
|
});
|
|
11634
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11634
|
+
var TooltipText = newStyled.div(templateObject_4$l || (templateObject_4$l = __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) {
|
|
11635
11635
|
var color = _a.color;
|
|
11636
11636
|
return color;
|
|
11637
11637
|
});
|
|
11638
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11639
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11638
|
+
var TopSection = newStyled.div(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
11639
|
+
var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __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) {
|
|
11640
11640
|
var color = _a.color;
|
|
11641
11641
|
return color;
|
|
11642
11642
|
});
|
|
11643
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
11644
|
-
var templateObject_1$
|
|
11643
|
+
var IconContainer$5 = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11644
|
+
var templateObject_1$X, templateObject_2$F, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11645
11645
|
|
|
11646
11646
|
var Tooltip = function (_a) {
|
|
11647
11647
|
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;
|
|
@@ -11799,9 +11799,9 @@ var ContainerStyles = {
|
|
|
11799
11799
|
},
|
|
11800
11800
|
};
|
|
11801
11801
|
|
|
11802
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11803
|
-
var Container$
|
|
11804
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11802
|
+
var Wrapper$4 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11803
|
+
var Container$B = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11804
|
+
var Input$2 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
11805
11805
|
var disabled = _a.disabled;
|
|
11806
11806
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11807
11807
|
});
|
|
@@ -11816,9 +11816,9 @@ var RadioInput = function (_a) {
|
|
|
11816
11816
|
var value = event.currentTarget.value;
|
|
11817
11817
|
onChange({ value: value, label: label });
|
|
11818
11818
|
};
|
|
11819
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11819
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$B, __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));
|
|
11820
11820
|
};
|
|
11821
|
-
var templateObject_1$
|
|
11821
|
+
var templateObject_1$W, templateObject_2$E;
|
|
11822
11822
|
|
|
11823
11823
|
var RadioGroupInput = function (_a) {
|
|
11824
11824
|
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;
|
|
@@ -11832,37 +11832,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11832
11832
|
}) }), void 0));
|
|
11833
11833
|
};
|
|
11834
11834
|
|
|
11835
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11836
|
-
var Container$
|
|
11835
|
+
var Wrapper$3 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11836
|
+
var Container$A = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11837
11837
|
var Minimalistic = function (_a) {
|
|
11838
11838
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11839
11839
|
var theme = useTheme();
|
|
11840
|
-
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$
|
|
11840
|
+
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$A, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$A, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11841
11841
|
};
|
|
11842
|
-
var templateObject_1$
|
|
11842
|
+
var templateObject_1$V, templateObject_2$D;
|
|
11843
11843
|
|
|
11844
|
-
var Container$
|
|
11845
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11846
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11847
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11844
|
+
var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11845
|
+
var Title$5 = newStyled.h1(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11846
|
+
var Details$1 = newStyled.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
11847
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
11848
11848
|
var Simple = function (_a) {
|
|
11849
11849
|
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;
|
|
11850
11850
|
var theme = useTheme();
|
|
11851
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11851
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$z, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11852
11852
|
};
|
|
11853
|
-
var templateObject_1$
|
|
11853
|
+
var templateObject_1$U, templateObject_2$C, templateObject_3$u, templateObject_4$k;
|
|
11854
11854
|
|
|
11855
11855
|
var Bundle = {
|
|
11856
11856
|
Minimalistic: Minimalistic,
|
|
11857
11857
|
Simple: Simple,
|
|
11858
11858
|
};
|
|
11859
11859
|
|
|
11860
|
-
var Container$
|
|
11860
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
11861
11861
|
var Tag$1 = function (_a) {
|
|
11862
11862
|
var text = _a.text, className = _a.className;
|
|
11863
|
-
return jsxRuntime.jsx(Container$
|
|
11863
|
+
return jsxRuntime.jsx(Container$y, __assign$1({ className: className }, { children: text }), void 0);
|
|
11864
11864
|
};
|
|
11865
|
-
var templateObject_1$
|
|
11865
|
+
var templateObject_1$T;
|
|
11866
11866
|
|
|
11867
11867
|
var getStylesBySize$2 = function (size, styledBorder) {
|
|
11868
11868
|
switch (size) {
|
|
@@ -11965,11 +11965,11 @@ var Timer = function (_a) {
|
|
|
11965
11965
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11966
11966
|
};
|
|
11967
11967
|
|
|
11968
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11968
|
+
var Label$1 = newStyled.span(templateObject_1$S || (templateObject_1$S = __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) {
|
|
11969
11969
|
var color = _a.color;
|
|
11970
11970
|
return color;
|
|
11971
11971
|
});
|
|
11972
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11972
|
+
var MandatoryIcon = newStyled.span(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
11973
11973
|
var color = _a.color;
|
|
11974
11974
|
return color;
|
|
11975
11975
|
});
|
|
@@ -11978,7 +11978,7 @@ var InputLabel = function (_a) {
|
|
|
11978
11978
|
var theme = useTheme();
|
|
11979
11979
|
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));
|
|
11980
11980
|
};
|
|
11981
|
-
var templateObject_1$
|
|
11981
|
+
var templateObject_1$S, templateObject_2$B;
|
|
11982
11982
|
|
|
11983
11983
|
/**
|
|
11984
11984
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12032,14 +12032,14 @@ var formatPrice = function (value, _a) {
|
|
|
12032
12032
|
}).format(valueToFormat);
|
|
12033
12033
|
};
|
|
12034
12034
|
|
|
12035
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12036
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12035
|
+
var ErrorText = newStyled.h3(templateObject_1$R || (templateObject_1$R = __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; });
|
|
12036
|
+
var ErrorContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
12037
12037
|
var Error$1 = function (_a) {
|
|
12038
12038
|
var error = _a.error;
|
|
12039
12039
|
var theme = useTheme();
|
|
12040
12040
|
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));
|
|
12041
12041
|
};
|
|
12042
|
-
var templateObject_1$
|
|
12042
|
+
var templateObject_1$R, templateObject_2$A;
|
|
12043
12043
|
|
|
12044
12044
|
var containerByStatus = function (theme, status) {
|
|
12045
12045
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12048,11 +12048,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12048
12048
|
return theme.colors.semantic.urgent.color;
|
|
12049
12049
|
return '';
|
|
12050
12050
|
};
|
|
12051
|
-
var Container$
|
|
12051
|
+
var Container$x = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12052
12052
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12053
12053
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12054
12054
|
});
|
|
12055
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12055
|
+
var StyledInput = newStyled.input(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12056
12056
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12057
12057
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12058
12058
|
}, function (_a) {
|
|
@@ -12107,13 +12107,13 @@ var StyledInput = newStyled.input(templateObject_2$y || (templateObject_2$y = __
|
|
|
12107
12107
|
return hasValue &&
|
|
12108
12108
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12109
12109
|
});
|
|
12110
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12110
|
+
var InputWrapper = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12111
12111
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12112
12112
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12113
12113
|
});
|
|
12114
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12115
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12116
|
-
var templateObject_1$
|
|
12114
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12115
|
+
var ClearInput = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12116
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c;
|
|
12117
12117
|
|
|
12118
12118
|
var BaseInput = function (_a) {
|
|
12119
12119
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
@@ -12136,7 +12136,7 @@ var BaseInput = function (_a) {
|
|
|
12136
12136
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12137
12137
|
}, [status]);
|
|
12138
12138
|
var hasValue = Boolean(value);
|
|
12139
|
-
return (jsxRuntime.jsxs(Container$
|
|
12139
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12140
12140
|
onChange(event.target.value, event);
|
|
12141
12141
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12142
12142
|
onChange('', { target: { value: '' } });
|
|
@@ -12157,11 +12157,11 @@ var Button$2 = function (_a) {
|
|
|
12157
12157
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12158
12158
|
};
|
|
12159
12159
|
|
|
12160
|
-
var Container$
|
|
12160
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
12161
12161
|
var theme = _a.theme;
|
|
12162
12162
|
return theme.component.inputCustom.input.borderRadius;
|
|
12163
12163
|
});
|
|
12164
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12164
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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) {
|
|
12165
12165
|
var theme = _a.theme;
|
|
12166
12166
|
return theme.component.inputCustom.button.borderRadius;
|
|
12167
12167
|
});
|
|
@@ -12174,23 +12174,23 @@ var Custom = function (_a) {
|
|
|
12174
12174
|
text: text,
|
|
12175
12175
|
disabled: rest.disabled,
|
|
12176
12176
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12177
|
-
return (jsxRuntime.jsx(Container$
|
|
12177
|
+
return (jsxRuntime.jsx(Container$w, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12178
12178
|
};
|
|
12179
|
-
var templateObject_1$
|
|
12179
|
+
var templateObject_1$P, templateObject_2$y;
|
|
12180
12180
|
|
|
12181
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12181
|
+
var SuccessContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12182
12182
|
var size = _a.size;
|
|
12183
12183
|
return (size === 'small' ? '36px' : '');
|
|
12184
12184
|
});
|
|
12185
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12186
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12185
|
+
var SuccessMessage = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
12186
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
12187
12187
|
var Success = function (_a) {
|
|
12188
12188
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12189
12189
|
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));
|
|
12190
12190
|
};
|
|
12191
|
-
var templateObject_1$
|
|
12191
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
12192
12192
|
|
|
12193
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12193
|
+
var ButtonContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
12194
12194
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12195
12195
|
return status === exports.InputValidationType.Empty &&
|
|
12196
12196
|
type === 'primary' &&
|
|
@@ -12207,21 +12207,21 @@ var BasePlusButton = function (_a) {
|
|
|
12207
12207
|
}
|
|
12208
12208
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { 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));
|
|
12209
12209
|
};
|
|
12210
|
-
var templateObject_1$
|
|
12210
|
+
var templateObject_1$N;
|
|
12211
12211
|
|
|
12212
|
-
var Container$
|
|
12213
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12212
|
+
var Container$v = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12213
|
+
var IconContainer$4 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12214
12214
|
var BasePlusIcon = function (_a) {
|
|
12215
12215
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12216
12216
|
var theme = useTheme();
|
|
12217
12217
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12218
|
-
return (jsxRuntime.jsx(Container$
|
|
12218
|
+
return (jsxRuntime.jsx(Container$v, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12219
12219
|
? theme.colors.shades['700'].color
|
|
12220
12220
|
: status === exports.InputValidationType.Error
|
|
12221
12221
|
? theme.colors.semantic.urgent.color
|
|
12222
12222
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12223
12223
|
};
|
|
12224
|
-
var templateObject_1$
|
|
12224
|
+
var templateObject_1$M, templateObject_2$w;
|
|
12225
12225
|
|
|
12226
12226
|
var Input$1 = {
|
|
12227
12227
|
Simple: BaseInput,
|
|
@@ -12230,7 +12230,7 @@ var Input$1 = {
|
|
|
12230
12230
|
SimplePlusIcon: BasePlusIcon,
|
|
12231
12231
|
};
|
|
12232
12232
|
|
|
12233
|
-
var Container$
|
|
12233
|
+
var Container$u = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
12234
12234
|
var width = _a.width;
|
|
12235
12235
|
return width;
|
|
12236
12236
|
}, function (_a) {
|
|
@@ -12246,11 +12246,11 @@ var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
12246
12246
|
var PaymentMethod = function (_a) {
|
|
12247
12247
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12248
12248
|
var theme = useTheme();
|
|
12249
|
-
return (jsxRuntime.jsx(Container$
|
|
12249
|
+
return (jsxRuntime.jsx(Container$u, __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));
|
|
12250
12250
|
};
|
|
12251
|
-
var templateObject_1$
|
|
12251
|
+
var templateObject_1$L;
|
|
12252
12252
|
|
|
12253
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12253
|
+
var Text$5 = newStyled.h3(templateObject_1$K || (templateObject_1$K = __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) {
|
|
12254
12254
|
var backgroundColor = _a.backgroundColor;
|
|
12255
12255
|
return backgroundColor;
|
|
12256
12256
|
}, function (_a) {
|
|
@@ -12262,27 +12262,27 @@ var OfferBanner = function (_a) {
|
|
|
12262
12262
|
var theme = useTheme();
|
|
12263
12263
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12264
12264
|
};
|
|
12265
|
-
var templateObject_1$
|
|
12265
|
+
var templateObject_1$K;
|
|
12266
12266
|
|
|
12267
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12268
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12269
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12270
|
-
var Container$
|
|
12271
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
12267
|
+
var Wrapper$2 = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
12268
|
+
var GrandTotal = newStyled.h1(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12269
|
+
var Currency = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12270
|
+
var Container$t = newStyled.div(templateObject_4$i || (templateObject_4$i = __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; });
|
|
12271
|
+
var Discount = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
12272
12272
|
var Total = function (_a) {
|
|
12273
12273
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12274
12274
|
var theme = useTheme();
|
|
12275
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12275
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$t, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12276
12276
|
};
|
|
12277
|
-
var templateObject_1$
|
|
12277
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
12278
12278
|
|
|
12279
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12279
|
+
var Wrapper$1 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12280
12280
|
var color = _a.color;
|
|
12281
12281
|
return color;
|
|
12282
12282
|
});
|
|
12283
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12284
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12285
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12283
|
+
var ItemContainer = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12284
|
+
var Item$2 = newStyled.h4(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12285
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12286
12286
|
var color = _a.color;
|
|
12287
12287
|
return color;
|
|
12288
12288
|
});
|
|
@@ -12295,22 +12295,22 @@ var Subtotal = function (_a) {
|
|
|
12295
12295
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12296
12296
|
})] }), void 0));
|
|
12297
12297
|
};
|
|
12298
|
-
var templateObject_1$
|
|
12298
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h;
|
|
12299
12299
|
|
|
12300
12300
|
var Totals = {
|
|
12301
12301
|
Total: Total,
|
|
12302
12302
|
Subtotal: Subtotal,
|
|
12303
12303
|
};
|
|
12304
12304
|
|
|
12305
|
-
var Container$
|
|
12306
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12307
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12308
|
-
var Details = newStyled.span(templateObject_4$
|
|
12305
|
+
var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __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; });
|
|
12306
|
+
var IconContainer$3 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
12307
|
+
var Text$4 = newStyled.p(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12308
|
+
var Details = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12309
12309
|
var Note = function (_a) {
|
|
12310
12310
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12311
|
-
return (jsxRuntime.jsxs(Container$
|
|
12311
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12312
12312
|
};
|
|
12313
|
-
var templateObject_1$
|
|
12313
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p, templateObject_4$g;
|
|
12314
12314
|
|
|
12315
12315
|
/* eslint-disable no-param-reassign */
|
|
12316
12316
|
var index$1 = function (breakpoints) {
|
|
@@ -12396,77 +12396,77 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12396
12396
|
literal: true,
|
|
12397
12397
|
});
|
|
12398
12398
|
|
|
12399
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12400
|
-
var Line = newStyled.div(templateObject_2$
|
|
12401
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12399
|
+
var Title$4 = newStyled.h1(templateObject_1$G || (templateObject_1$G = __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; });
|
|
12400
|
+
var Line = newStyled.div(templateObject_2$s || (templateObject_2$s = __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; });
|
|
12401
|
+
var Row$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12402
12402
|
flexDirection: ['column', 'row'],
|
|
12403
12403
|
}));
|
|
12404
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12404
|
+
var Col$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
12405
12405
|
margin: ['0', '0 1.25rem'],
|
|
12406
12406
|
marginBottom: ['1.875rem', '0'],
|
|
12407
12407
|
alignItems: ['center', 'flex-start'],
|
|
12408
12408
|
textAlign: ['center', 'inherit'],
|
|
12409
12409
|
width: ['100%', 'inherit'],
|
|
12410
12410
|
}));
|
|
12411
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12411
|
+
var IconContainer$2 = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
|
|
12412
12412
|
marginBottom: ['1.875rem', '0'],
|
|
12413
12413
|
width: ['auto', '1.375rem'],
|
|
12414
12414
|
}));
|
|
12415
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12415
|
+
var SectionTitle = newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
12416
12416
|
display: ['block', 'flex'],
|
|
12417
12417
|
}), function (_a) {
|
|
12418
12418
|
var theme = _a.theme;
|
|
12419
12419
|
return theme.colors.shades['700'].color;
|
|
12420
12420
|
});
|
|
12421
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12422
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
12421
|
+
var SectionDetails = newStyled.p(templateObject_7$4 || (templateObject_7$4 = __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; });
|
|
12422
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$3 || (templateObject_8$3 = __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; });
|
|
12423
12423
|
var DeliveryDetails = function (_a) {
|
|
12424
12424
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12425
12425
|
var theme = useTheme();
|
|
12426
12426
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), 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));
|
|
12427
12427
|
};
|
|
12428
|
-
var templateObject_1$
|
|
12428
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
12429
12429
|
|
|
12430
|
-
var Container$
|
|
12431
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12430
|
+
var Container$r = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
12431
|
+
var Text$3 = newStyled.p(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12432
12432
|
var ScrollToTop = function (_a) {
|
|
12433
12433
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12434
12434
|
var theme = useTheme();
|
|
12435
12435
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12436
|
-
return (jsxRuntime.jsxs(Container$
|
|
12436
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12437
12437
|
};
|
|
12438
|
-
var templateObject_1$
|
|
12438
|
+
var templateObject_1$F, templateObject_2$r;
|
|
12439
12439
|
|
|
12440
|
-
var Container$
|
|
12441
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12440
|
+
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
12441
|
+
var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __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; });
|
|
12442
12442
|
var OrderBar = function (_a) {
|
|
12443
12443
|
var message = _a.message;
|
|
12444
12444
|
var theme = useTheme();
|
|
12445
|
-
return (jsxRuntime.jsxs(Container$
|
|
12445
|
+
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
12446
12446
|
};
|
|
12447
|
-
var templateObject_1$
|
|
12447
|
+
var templateObject_1$E, templateObject_2$q;
|
|
12448
12448
|
|
|
12449
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12450
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12451
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12452
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12449
|
+
var TableElement = newStyled.table(templateObject_1$D || (templateObject_1$D = __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; });
|
|
12450
|
+
var TableCell = newStyled.td(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12451
|
+
var TableHead = newStyled.th(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12452
|
+
var TableRow = newStyled.tr(templateObject_4$e || (templateObject_4$e = __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; });
|
|
12453
12453
|
var SizeTable = function (_a) {
|
|
12454
12454
|
var headers = _a.headers, data = _a.data;
|
|
12455
12455
|
var theme = useTheme();
|
|
12456
12456
|
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));
|
|
12457
12457
|
};
|
|
12458
|
-
var templateObject_1$
|
|
12458
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$n, templateObject_4$e;
|
|
12459
12459
|
|
|
12460
|
-
var Img = newStyled.img(templateObject_1$
|
|
12460
|
+
var Img = newStyled.img(templateObject_1$C || (templateObject_1$C = __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; });
|
|
12461
12461
|
var Image = function (_a) {
|
|
12462
12462
|
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;
|
|
12463
12463
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12464
12464
|
};
|
|
12465
|
-
var templateObject_1$
|
|
12465
|
+
var templateObject_1$C;
|
|
12466
12466
|
|
|
12467
|
-
var Container$
|
|
12468
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
12469
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
12467
|
+
var Container$p = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12468
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12469
|
+
var DescriptionContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12470
12470
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12471
12471
|
}));
|
|
12472
12472
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12489,7 +12489,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12489
12489
|
margin: '0.063rem 0',
|
|
12490
12490
|
});
|
|
12491
12491
|
});
|
|
12492
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12492
|
+
var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __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) {
|
|
12493
12493
|
var withTag = _a.withTag; _a.theme;
|
|
12494
12494
|
return withTag
|
|
12495
12495
|
? mediaQueries({
|
|
@@ -12498,13 +12498,13 @@ var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = _
|
|
|
12498
12498
|
})
|
|
12499
12499
|
: 'justify-content: end';
|
|
12500
12500
|
});
|
|
12501
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12501
|
+
var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
12502
12502
|
var SimpleOrderItem = function (_a) {
|
|
12503
12503
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12504
12504
|
var theme = useTheme();
|
|
12505
|
-
return (jsxRuntime.jsxs(Container$
|
|
12505
|
+
return (jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12506
12506
|
};
|
|
12507
|
-
var templateObject_1$
|
|
12507
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$9;
|
|
12508
12508
|
|
|
12509
12509
|
function formatDate(date) {
|
|
12510
12510
|
var day = date.getDate();
|
|
@@ -12513,40 +12513,40 @@ function formatDate(date) {
|
|
|
12513
12513
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12514
12514
|
}
|
|
12515
12515
|
|
|
12516
|
-
var Container$
|
|
12517
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12516
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
12517
|
+
var Heading = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
12518
12518
|
fontSize: ['14px', '16px'],
|
|
12519
12519
|
lineHeight: ['22px', '24px'],
|
|
12520
12520
|
}));
|
|
12521
|
-
var Content = newStyled.div(templateObject_3$
|
|
12521
|
+
var Content = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
|
|
12522
12522
|
flexDirection: ['column', 'row'],
|
|
12523
12523
|
}));
|
|
12524
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12524
|
+
var ReviewContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
12525
12525
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12526
12526
|
}));
|
|
12527
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
12527
|
+
var H2$1 = newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
12528
12528
|
fontSize: ['16px', '18px'],
|
|
12529
12529
|
lineHeight: ['24px', '28px'],
|
|
12530
12530
|
}));
|
|
12531
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
12531
|
+
var H3$1 = newStyled.h3(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
|
|
12532
12532
|
fontSize: ['14px', '16px'],
|
|
12533
12533
|
lineHeight: ['22px', '24px'],
|
|
12534
12534
|
}));
|
|
12535
|
-
var P$1 = newStyled.p(templateObject_7$
|
|
12535
|
+
var P$1 = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __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"])));
|
|
12536
12536
|
var Review = function (_a) {
|
|
12537
12537
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12538
12538
|
var theme = useTheme();
|
|
12539
|
-
return (jsxRuntime.jsxs(Container$
|
|
12539
|
+
return (jsxRuntime.jsxs(Container$o, { 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));
|
|
12540
12540
|
};
|
|
12541
|
-
var templateObject_1$
|
|
12541
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12542
12542
|
|
|
12543
|
-
var List = newStyled.ul(templateObject_1$
|
|
12544
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12545
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12546
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12547
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12548
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12549
|
-
var templateObject_1$
|
|
12543
|
+
var List = newStyled.ul(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12544
|
+
var Item$1 = newStyled.li(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
12545
|
+
var DropdownWrapper = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
12546
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
12547
|
+
var StyledDropdown = newStyled.ul(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
12548
|
+
var DropdownItem = newStyled.li(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
12549
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
12550
12550
|
|
|
12551
12551
|
var DropdownListIcons = function (_a) {
|
|
12552
12552
|
var items = _a.items;
|
|
@@ -12559,7 +12559,7 @@ var Dropdown = function (_a) {
|
|
|
12559
12559
|
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));
|
|
12560
12560
|
};
|
|
12561
12561
|
|
|
12562
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12562
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$y || (templateObject_1$y = __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; });
|
|
12563
12563
|
var AmazonButton = function (_a) {
|
|
12564
12564
|
var onClick = _a.onClick;
|
|
12565
12565
|
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));
|
|
@@ -12568,23 +12568,23 @@ var PaypalButton = function (_a) {
|
|
|
12568
12568
|
var onClick = _a.onClick;
|
|
12569
12569
|
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));
|
|
12570
12570
|
};
|
|
12571
|
-
var templateObject_1$
|
|
12571
|
+
var templateObject_1$y;
|
|
12572
12572
|
|
|
12573
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12574
|
-
var Col = newStyled.div(templateObject_2$
|
|
12575
|
-
var Row = newStyled.div(templateObject_3$
|
|
12573
|
+
var Wrapper = newStyled.div(templateObject_1$x || (templateObject_1$x = __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'); });
|
|
12574
|
+
var Col = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12575
|
+
var Row = newStyled.div(templateObject_3$j || (templateObject_3$j = __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) {
|
|
12576
12576
|
return props.rightToLeft &&
|
|
12577
12577
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12578
12578
|
});
|
|
12579
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12580
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12581
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
12579
|
+
var H5 = newStyled.h5(templateObject_4$a || (templateObject_4$a = __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; });
|
|
12580
|
+
var H3 = newStyled.h3(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12581
|
+
var FreeShipping = newStyled.span(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12582
12582
|
var CrossSellCheckbox = function (_a) {
|
|
12583
12583
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12584
12584
|
var theme = useTheme();
|
|
12585
12585
|
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));
|
|
12586
12586
|
};
|
|
12587
|
-
var templateObject_1$
|
|
12587
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
12588
12588
|
|
|
12589
12589
|
var index = /*#__PURE__*/Object.freeze({
|
|
12590
12590
|
__proto__: null,
|
|
@@ -12605,9 +12605,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12605
12605
|
height: height,
|
|
12606
12606
|
});
|
|
12607
12607
|
});
|
|
12608
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12609
|
-
var Container$
|
|
12610
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12608
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12609
|
+
var Container$n = newStyled.a(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12610
|
+
var Title$2 = newStyled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12611
12611
|
var getStylesBySize = function (size) {
|
|
12612
12612
|
switch (size) {
|
|
12613
12613
|
case exports.ComponentSize.Medium:
|
|
@@ -12633,10 +12633,11 @@ var getStylesBySize = function (size) {
|
|
|
12633
12633
|
};
|
|
12634
12634
|
}
|
|
12635
12635
|
};
|
|
12636
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12637
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_5$
|
|
12636
|
+
var TopTagContainer$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12637
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12638
|
+
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12638
12639
|
var ProductItemMobile = function (_a) {
|
|
12639
|
-
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c;
|
|
12640
|
+
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom;
|
|
12640
12641
|
var theme = useTheme();
|
|
12641
12642
|
var styles = getStylesBySize(size);
|
|
12642
12643
|
var space = React$2.useMemo(function () {
|
|
@@ -12647,32 +12648,36 @@ var ProductItemMobile = function (_a) {
|
|
|
12647
12648
|
_a[exports.ComponentSize.Small] = 2,
|
|
12648
12649
|
_a)[size];
|
|
12649
12650
|
}, [size]);
|
|
12650
|
-
|
|
12651
|
+
var PriceLabelDisplay = function () {
|
|
12652
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12653
|
+
};
|
|
12654
|
+
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12655
|
+
return (jsxs(Container$n, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
|
|
12651
12656
|
};
|
|
12652
|
-
var templateObject_1$
|
|
12657
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
12653
12658
|
|
|
12654
|
-
var Container$
|
|
12659
|
+
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12655
12660
|
function withProductGrid(ProductItemComponent, data) {
|
|
12656
12661
|
function WithProductGrid(props) {
|
|
12657
|
-
return (jsxRuntime.jsx(Container$
|
|
12662
|
+
return (jsxRuntime.jsx(Container$m, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12658
12663
|
}
|
|
12659
12664
|
/* istanbul ignore next */
|
|
12660
12665
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12661
12666
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12662
12667
|
return WithProductGrid;
|
|
12663
12668
|
}
|
|
12664
|
-
var templateObject_1$
|
|
12669
|
+
var templateObject_1$v;
|
|
12665
12670
|
|
|
12666
12671
|
var Collection = {
|
|
12667
12672
|
ProductItemMobile: ProductItemMobile,
|
|
12668
12673
|
withProductGrid: withProductGrid,
|
|
12669
12674
|
};
|
|
12670
12675
|
|
|
12671
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12676
|
+
var Backdrop = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
12672
12677
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12673
12678
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12674
12679
|
});
|
|
12675
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12680
|
+
var Sidebar = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\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: 30;\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) {
|
|
12676
12681
|
var width = _a.width;
|
|
12677
12682
|
return width;
|
|
12678
12683
|
}, function (_a) {
|
|
@@ -12713,28 +12718,28 @@ var Drawer = function (_a) {
|
|
|
12713
12718
|
}, [isOpen, onClose, onOpen]);
|
|
12714
12719
|
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;
|
|
12715
12720
|
};
|
|
12716
|
-
var templateObject_1$
|
|
12721
|
+
var templateObject_1$u, templateObject_2$j;
|
|
12717
12722
|
|
|
12718
|
-
var Container$
|
|
12723
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12719
12724
|
var size = _a.size;
|
|
12720
12725
|
return (size ? size : '100%');
|
|
12721
12726
|
}, function (_a) {
|
|
12722
12727
|
var size = _a.size;
|
|
12723
12728
|
return (size ? size : '100%');
|
|
12724
12729
|
});
|
|
12725
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12730
|
+
var Animation = newStyled.div(templateObject_2$i || (templateObject_2$i = __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) {
|
|
12726
12731
|
var animationDuration = _a.animationDuration;
|
|
12727
12732
|
return animationDuration;
|
|
12728
12733
|
});
|
|
12729
12734
|
var Spinner = function (_a) {
|
|
12730
12735
|
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;
|
|
12731
|
-
return (jsxRuntime.jsx(Container$
|
|
12736
|
+
return (jsxRuntime.jsx(Container$l, __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));
|
|
12732
12737
|
};
|
|
12733
|
-
var templateObject_1$
|
|
12738
|
+
var templateObject_1$t, templateObject_2$i;
|
|
12734
12739
|
|
|
12735
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12736
|
-
var LI = newStyled.li(templateObject_2$
|
|
12737
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12740
|
+
var UL = newStyled.ul(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
12741
|
+
var LI = newStyled.li(templateObject_2$h || (templateObject_2$h = __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; });
|
|
12742
|
+
var CloseIconContainer = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
12738
12743
|
var Tags = function (_a) {
|
|
12739
12744
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12740
12745
|
var theme = useTheme();
|
|
@@ -12742,7 +12747,7 @@ var Tags = function (_a) {
|
|
|
12742
12747
|
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));
|
|
12743
12748
|
}) }), void 0));
|
|
12744
12749
|
};
|
|
12745
|
-
var templateObject_1$
|
|
12750
|
+
var templateObject_1$s, templateObject_2$h, templateObject_3$h;
|
|
12746
12751
|
|
|
12747
12752
|
function FilteringDropdown(_a) {
|
|
12748
12753
|
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;
|
|
@@ -12775,12 +12780,12 @@ function FilteringDropdown(_a) {
|
|
|
12775
12780
|
}) }, void 0)] }), void 0));
|
|
12776
12781
|
}
|
|
12777
12782
|
|
|
12778
|
-
var Container$
|
|
12779
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12780
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12783
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
12784
|
+
var IconContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12785
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12781
12786
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12782
12787
|
}));
|
|
12783
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12788
|
+
var PageNumber = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
12784
12789
|
var bold = _a.bold;
|
|
12785
12790
|
return (bold ? '700' : '500');
|
|
12786
12791
|
}, function (_a) {
|
|
@@ -12797,7 +12802,7 @@ var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
12797
12802
|
var background = _a.background;
|
|
12798
12803
|
return background || 'unset';
|
|
12799
12804
|
});
|
|
12800
|
-
var templateObject_1$
|
|
12805
|
+
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$8;
|
|
12801
12806
|
|
|
12802
12807
|
var Pagination = function (_a) {
|
|
12803
12808
|
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;
|
|
@@ -12810,7 +12815,7 @@ var Pagination = function (_a) {
|
|
|
12810
12815
|
setPage(page);
|
|
12811
12816
|
onChange(page);
|
|
12812
12817
|
};
|
|
12813
|
-
return (jsxRuntime.jsxs(Container$
|
|
12818
|
+
return (jsxRuntime.jsxs(Container$k, __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));
|
|
12814
12819
|
};
|
|
12815
12820
|
|
|
12816
12821
|
var PaginatorBlog = function (_a) {
|
|
@@ -12824,12 +12829,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12824
12829
|
setPage(page);
|
|
12825
12830
|
onChange(page);
|
|
12826
12831
|
};
|
|
12827
|
-
return (jsxRuntime.jsxs(Container$
|
|
12832
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
12828
12833
|
? theme.colors.shades['white'].color
|
|
12829
12834
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12830
12835
|
};
|
|
12831
12836
|
|
|
12832
|
-
var Container$
|
|
12837
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
12833
12838
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12834
12839
|
}));
|
|
12835
12840
|
var Description$1 = newStyled.div({
|
|
@@ -12846,25 +12851,25 @@ var Description$1 = newStyled.div({
|
|
|
12846
12851
|
var ProductItem = function (_a) {
|
|
12847
12852
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12848
12853
|
var theme = useTheme();
|
|
12849
|
-
return (jsxRuntime.jsxs(Container$
|
|
12854
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12850
12855
|
};
|
|
12851
|
-
var templateObject_1$
|
|
12856
|
+
var templateObject_1$q;
|
|
12852
12857
|
|
|
12853
|
-
var Container$
|
|
12858
|
+
var Container$i = newStyled.div({
|
|
12854
12859
|
display: 'flex',
|
|
12855
12860
|
justifyContent: 'center',
|
|
12856
12861
|
padding: '1rem',
|
|
12857
12862
|
});
|
|
12858
12863
|
var Footer = function (_a) {
|
|
12859
12864
|
var text = _a.text, onClick = _a.onClick;
|
|
12860
|
-
return (jsxRuntime.jsx(Container$
|
|
12865
|
+
return (jsxRuntime.jsx(Container$i, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12861
12866
|
};
|
|
12862
12867
|
|
|
12863
12868
|
var Ul = newStyled.ul({
|
|
12864
12869
|
margin: '0px',
|
|
12865
12870
|
padding: '0px',
|
|
12866
12871
|
});
|
|
12867
|
-
var Li = newStyled.li(templateObject_1$
|
|
12872
|
+
var Li = newStyled.li(templateObject_1$p || (templateObject_1$p = __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; }, mediaQueries({
|
|
12868
12873
|
padding: [0, '0rem 1rem'],
|
|
12869
12874
|
borderRadius: [0, '0.5rem'],
|
|
12870
12875
|
}));
|
|
@@ -12876,20 +12881,20 @@ var Anchor = newStyled.a({
|
|
|
12876
12881
|
padding: 0,
|
|
12877
12882
|
textDecoration: 'none',
|
|
12878
12883
|
});
|
|
12879
|
-
var Container$
|
|
12884
|
+
var Container$h = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
12880
12885
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12881
12886
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12882
12887
|
borderRadius: ['0', '0.5rem'],
|
|
12883
12888
|
}));
|
|
12884
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12889
|
+
var Header$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12885
12890
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12886
12891
|
}));
|
|
12887
12892
|
var ResultsPanel = function (_a) {
|
|
12888
12893
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12889
12894
|
var theme = useTheme();
|
|
12890
|
-
return (jsxRuntime.jsxs(Container$
|
|
12895
|
+
return (jsxRuntime.jsxs(Container$h, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12891
12896
|
};
|
|
12892
|
-
var templateObject_1$
|
|
12897
|
+
var templateObject_1$p, templateObject_2$f, templateObject_3$f;
|
|
12893
12898
|
|
|
12894
12899
|
var Input = newStyled.input(function (props) { return ({
|
|
12895
12900
|
padding: props.theme.component.input.padding,
|
|
@@ -12920,7 +12925,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12920
12925
|
},
|
|
12921
12926
|
}); });
|
|
12922
12927
|
|
|
12923
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12928
|
+
var Button$1 = newStyled.button(templateObject_1$o || (templateObject_1$o = __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"])), mediaQueries({
|
|
12924
12929
|
right: ['1rem', '7.75rem'],
|
|
12925
12930
|
top: ['0.75rem', '0.75rem'],
|
|
12926
12931
|
}));
|
|
@@ -12929,7 +12934,7 @@ var ClearButton = function (_a) {
|
|
|
12929
12934
|
var theme = useTheme();
|
|
12930
12935
|
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));
|
|
12931
12936
|
};
|
|
12932
|
-
var templateObject_1$
|
|
12937
|
+
var templateObject_1$o;
|
|
12933
12938
|
|
|
12934
12939
|
var useOnClickOutside = function (ref, handler) {
|
|
12935
12940
|
React$2.useEffect(function () {
|
|
@@ -13018,7 +13023,7 @@ var reducer = function (state, action) {
|
|
|
13018
13023
|
}
|
|
13019
13024
|
}
|
|
13020
13025
|
};
|
|
13021
|
-
var Container$
|
|
13026
|
+
var Container$g = newStyled.div({
|
|
13022
13027
|
position: 'relative',
|
|
13023
13028
|
display: 'flex',
|
|
13024
13029
|
});
|
|
@@ -13054,7 +13059,7 @@ var SearchBar = function (_a) {
|
|
|
13054
13059
|
onClose();
|
|
13055
13060
|
}
|
|
13056
13061
|
};
|
|
13057
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13062
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$g, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13058
13063
|
if (e.key === 'Enter') {
|
|
13059
13064
|
e.preventDefault();
|
|
13060
13065
|
e.stopPropagation();
|
|
@@ -13328,40 +13333,40 @@ function useSwipeable(options) {
|
|
|
13328
13333
|
return handlers;
|
|
13329
13334
|
}
|
|
13330
13335
|
|
|
13331
|
-
var Container$
|
|
13336
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13332
13337
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13333
13338
|
return borderRadiusVariant &&
|
|
13334
13339
|
"\n border-radius: 40px;\n ";
|
|
13335
13340
|
});
|
|
13336
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13337
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13341
|
+
var TopTagContainer = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13342
|
+
var BottomTagContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13338
13343
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13339
13344
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13340
|
-
return (jsxRuntime.jsxs(Container$
|
|
13345
|
+
return (jsxRuntime.jsxs(Container$f, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
13341
13346
|
});
|
|
13342
|
-
var templateObject_1$
|
|
13347
|
+
var templateObject_1$n, templateObject_2$e, templateObject_3$e;
|
|
13343
13348
|
|
|
13344
|
-
var Button = newStyled.button(templateObject_1$
|
|
13349
|
+
var Button = newStyled.button(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13345
13350
|
var ArrowButton = function (_a) {
|
|
13346
13351
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13347
13352
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13348
13353
|
};
|
|
13349
|
-
var templateObject_1$
|
|
13354
|
+
var templateObject_1$m;
|
|
13350
13355
|
|
|
13351
|
-
var Container$
|
|
13356
|
+
var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13352
13357
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13353
13358
|
var SlideDots = function (_a) {
|
|
13354
13359
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13355
13360
|
var theme = useTheme();
|
|
13356
|
-
return (jsxRuntime.jsx(Container$
|
|
13361
|
+
return (jsxRuntime.jsx(Container$e, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13357
13362
|
? theme.colors.shades.white.color
|
|
13358
13363
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13359
13364
|
};
|
|
13360
|
-
var templateObject_1$
|
|
13365
|
+
var templateObject_1$l;
|
|
13361
13366
|
|
|
13362
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13363
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13364
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13367
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
13368
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13369
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13365
13370
|
var SlideNavigation = function (_a) {
|
|
13366
13371
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13367
13372
|
var theme = useTheme();
|
|
@@ -13373,9 +13378,9 @@ var SlideNavigation = function (_a) {
|
|
|
13373
13378
|
onNavigate(selectedIndex + 1);
|
|
13374
13379
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13375
13380
|
};
|
|
13376
|
-
var templateObject_1$
|
|
13381
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$d;
|
|
13377
13382
|
|
|
13378
|
-
var Container$
|
|
13383
|
+
var Container$d = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13379
13384
|
var ProductGalleryMobile = function (_a) {
|
|
13380
13385
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13381
13386
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13397,9 +13402,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13397
13402
|
React$2.useEffect(function () {
|
|
13398
13403
|
setSelectedImage(images[index]);
|
|
13399
13404
|
}, [index, images]);
|
|
13400
|
-
return (jsxRuntime.jsxs(Container$
|
|
13405
|
+
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13401
13406
|
};
|
|
13402
|
-
var templateObject_1$
|
|
13407
|
+
var templateObject_1$j;
|
|
13403
13408
|
|
|
13404
13409
|
var Portal = function (_a) {
|
|
13405
13410
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13532,17 +13537,17 @@ var react = __toCommonJS(react_exports);
|
|
|
13532
13537
|
var visibleStyle = function (_a) {
|
|
13533
13538
|
var opened = _a.opened;
|
|
13534
13539
|
return opened
|
|
13535
|
-
? css(templateObject_1$
|
|
13540
|
+
? css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13536
13541
|
};
|
|
13537
13542
|
var transformStyle = function (_a) {
|
|
13538
13543
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13539
13544
|
return opened
|
|
13540
|
-
? css(templateObject_3$
|
|
13545
|
+
? css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13541
13546
|
};
|
|
13542
|
-
var Container$
|
|
13547
|
+
var Container$c = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13543
13548
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13544
13549
|
}), visibleStyle, transformStyle);
|
|
13545
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
13550
|
+
var Overlay = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
13546
13551
|
var Modal = function (_a) {
|
|
13547
13552
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c;
|
|
13548
13553
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -13552,7 +13557,7 @@ var Modal = function (_a) {
|
|
|
13552
13557
|
}
|
|
13553
13558
|
close();
|
|
13554
13559
|
};
|
|
13555
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13560
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$c, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13556
13561
|
};
|
|
13557
13562
|
var modalEvent = function (id, detail) {
|
|
13558
13563
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13580,39 +13585,39 @@ var useModal = function (id) {
|
|
|
13580
13585
|
close: close,
|
|
13581
13586
|
}); }, [close, open, opened]);
|
|
13582
13587
|
};
|
|
13583
|
-
var templateObject_1$
|
|
13588
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
|
|
13584
13589
|
|
|
13585
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13590
|
+
var Text$2 = newStyled.span(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13586
13591
|
var Title$1 = function (_a) {
|
|
13587
13592
|
var title = _a.title;
|
|
13588
13593
|
var theme = useTheme();
|
|
13589
13594
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13590
13595
|
};
|
|
13591
|
-
var templateObject_1$
|
|
13596
|
+
var templateObject_1$h;
|
|
13592
13597
|
|
|
13593
|
-
var P = newStyled.p(templateObject_1$
|
|
13598
|
+
var P = newStyled.p(templateObject_1$g || (templateObject_1$g = __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; });
|
|
13594
13599
|
var Promo = function (_a) {
|
|
13595
13600
|
var text = _a.text;
|
|
13596
13601
|
var theme = useTheme();
|
|
13597
13602
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13598
13603
|
};
|
|
13599
|
-
var templateObject_1$
|
|
13604
|
+
var templateObject_1$g;
|
|
13600
13605
|
|
|
13601
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13606
|
+
var Text$1 = newStyled.span(templateObject_1$f || (templateObject_1$f = __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; });
|
|
13602
13607
|
var Description = function (_a) {
|
|
13603
13608
|
var text = _a.text;
|
|
13604
13609
|
var theme = useTheme();
|
|
13605
13610
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13606
13611
|
};
|
|
13607
|
-
var templateObject_1$
|
|
13612
|
+
var templateObject_1$f;
|
|
13608
13613
|
|
|
13609
|
-
var Container$
|
|
13614
|
+
var Container$b = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13610
13615
|
var CloseButton = function (_a) {
|
|
13611
13616
|
var onClick = _a.onClick, size = _a.size;
|
|
13612
13617
|
var theme = useTheme();
|
|
13613
|
-
return (jsxRuntime.jsx(Container$
|
|
13618
|
+
return (jsxRuntime.jsx(Container$b, __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));
|
|
13614
13619
|
};
|
|
13615
|
-
var templateObject_1$
|
|
13620
|
+
var templateObject_1$e;
|
|
13616
13621
|
|
|
13617
13622
|
var CartProductItem = {
|
|
13618
13623
|
Title: Title$1,
|
|
@@ -13622,10 +13627,10 @@ var CartProductItem = {
|
|
|
13622
13627
|
CloseButton: CloseButton,
|
|
13623
13628
|
};
|
|
13624
13629
|
|
|
13625
|
-
var Container$
|
|
13626
|
-
var Item = newStyled.span(templateObject_2$
|
|
13627
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13628
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13630
|
+
var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13631
|
+
var Item = newStyled.span(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13632
|
+
var Number$1 = newStyled(Item)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13633
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
13629
13634
|
var QuantityPicker = function (_a) {
|
|
13630
13635
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
13631
13636
|
var theme = useTheme();
|
|
@@ -13648,9 +13653,9 @@ var QuantityPicker = function (_a) {
|
|
|
13648
13653
|
return clamp(value);
|
|
13649
13654
|
});
|
|
13650
13655
|
}, [value, clamp]);
|
|
13651
|
-
return (jsxRuntime.jsxs(Container$
|
|
13656
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13652
13657
|
};
|
|
13653
|
-
var templateObject_1$
|
|
13658
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6;
|
|
13654
13659
|
|
|
13655
13660
|
var htmlReactParser = {exports: {}};
|
|
13656
13661
|
|
|
@@ -17431,17 +17436,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17431
17436
|
HTMLReactParser$1.attributesToProps;
|
|
17432
17437
|
HTMLReactParser$1.Element;
|
|
17433
17438
|
|
|
17434
|
-
var Container$
|
|
17435
|
-
var Card = newStyled.div(templateObject_2$
|
|
17436
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17437
|
-
var Label = newStyled.div(templateObject_4$
|
|
17438
|
-
var Check = newStyled.div(templateObject_5$
|
|
17439
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
17440
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17441
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17439
|
+
var Container$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17440
|
+
var Card = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17441
|
+
var Tag = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17442
|
+
var Label = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
17443
|
+
var Check = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
17444
|
+
var IconContainer = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
17445
|
+
var IconPlaceholder = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17446
|
+
var DiscountContainer = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17442
17447
|
var PackSelector = function (_a) {
|
|
17443
17448
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
17444
|
-
return (jsxRuntime.jsx(Container$
|
|
17449
|
+
return (jsxRuntime.jsx(Container$9, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17445
17450
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
17446
17451
|
}) }), void 0));
|
|
17447
17452
|
};
|
|
@@ -17458,30 +17463,30 @@ var PackCard = function (_a) {
|
|
|
17458
17463
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17459
17464
|
} }, { 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(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
17460
17465
|
};
|
|
17461
|
-
var templateObject_1$
|
|
17466
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
17462
17467
|
|
|
17463
|
-
var Title = newStyled.div(templateObject_1$
|
|
17464
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17465
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17468
|
+
var Title = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
17469
|
+
var H2 = newStyled.h2(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17470
|
+
var ArrowContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17466
17471
|
var Accordion = function (_a) {
|
|
17467
17472
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
17468
17473
|
var theme = useTheme();
|
|
17469
17474
|
var _c = React__default["default"].useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
17470
17475
|
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));
|
|
17471
17476
|
};
|
|
17472
|
-
var templateObject_1$
|
|
17473
|
-
|
|
17474
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17475
|
-
var Header = newStyled.div(templateObject_2$
|
|
17476
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17477
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17478
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
17479
|
-
var FilterLink = newStyled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
17480
|
-
var OptionContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
17481
|
-
var ClearAll = newStyled.span(templateObject_8 || (templateObject_8 = __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; });
|
|
17477
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9;
|
|
17478
|
+
|
|
17479
|
+
var SectionContent = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17480
|
+
var Header = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
17481
|
+
var MobileHeader = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
17482
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
17483
|
+
var H4 = newStyled.h4(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
17484
|
+
var FilterLink = newStyled.a(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
17485
|
+
var OptionContainer = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
17486
|
+
var ClearAll = newStyled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
17482
17487
|
var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17483
17488
|
var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
17484
|
-
var templateObject_1$
|
|
17489
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10;
|
|
17485
17490
|
|
|
17486
17491
|
var Filters = function (_a) {
|
|
17487
17492
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17582,20 +17587,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17582
17587
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
|
|
17583
17588
|
};
|
|
17584
17589
|
|
|
17585
|
-
var Container$
|
|
17586
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17587
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17588
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17589
|
-
var SearchNavigationParents = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17590
|
+
var Container$8 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17591
|
+
var BackArrow = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17592
|
+
var BoldSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17593
|
+
var NormalSpan = newStyled.span(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
17594
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17590
17595
|
var SearchNavigation = function (_a) {
|
|
17591
17596
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17592
|
-
return (jsxRuntime.jsxs(Container$
|
|
17597
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17593
17598
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17594
17599
|
}) }, void 0)] }, void 0));
|
|
17595
17600
|
};
|
|
17596
|
-
var templateObject_1$
|
|
17601
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7, templateObject_4$3, templateObject_5$1;
|
|
17597
17602
|
|
|
17598
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17603
|
+
var TabContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17599
17604
|
var titleSize = _a.titleSize;
|
|
17600
17605
|
return titleSize;
|
|
17601
17606
|
}, function (_a) {
|
|
@@ -17612,15 +17617,15 @@ var Tab = function (_a) {
|
|
|
17612
17617
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17613
17618
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17614
17619
|
};
|
|
17615
|
-
var templateObject_1$
|
|
17620
|
+
var templateObject_1$8;
|
|
17616
17621
|
|
|
17617
|
-
var Container$
|
|
17618
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17622
|
+
var Container$7 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17623
|
+
var TabList = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17619
17624
|
var backgroundColor = _a.backgroundColor;
|
|
17620
17625
|
return backgroundColor;
|
|
17621
17626
|
});
|
|
17622
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17623
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17627
|
+
var TabContent = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17628
|
+
var TabSeparator = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17624
17629
|
var Tabs = function (_a) {
|
|
17625
17630
|
var _b;
|
|
17626
17631
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17629,11 +17634,11 @@ var Tabs = function (_a) {
|
|
|
17629
17634
|
return null;
|
|
17630
17635
|
}
|
|
17631
17636
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17632
|
-
return (jsxRuntime.jsxs(Container$
|
|
17637
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17633
17638
|
};
|
|
17634
|
-
var templateObject_1$
|
|
17639
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$2;
|
|
17635
17640
|
|
|
17636
|
-
var Container$
|
|
17641
|
+
var Container$6 = newStyled.div(function (props) { return ({
|
|
17637
17642
|
height: 'auto',
|
|
17638
17643
|
textAlign: 'center',
|
|
17639
17644
|
justifyContent: 'center',
|
|
@@ -17683,12 +17688,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17683
17688
|
textAlign: 'center',
|
|
17684
17689
|
lineHeight: '18px',
|
|
17685
17690
|
};
|
|
17686
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17691
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$6, __assign$1({ textPosition: iconTitlePosition }, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
17687
17692
|
};
|
|
17688
17693
|
|
|
17689
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17690
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17691
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17694
|
+
var ImageWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17695
|
+
var VideoOverlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17696
|
+
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17692
17697
|
var ImageVideo = function (_a) {
|
|
17693
17698
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17694
17699
|
var video = React$2.useRef(null);
|
|
@@ -17708,12 +17713,12 @@ var ImageVideo = function (_a) {
|
|
|
17708
17713
|
height: '100%',
|
|
17709
17714
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17710
17715
|
};
|
|
17711
|
-
var templateObject_1$
|
|
17716
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5;
|
|
17712
17717
|
|
|
17713
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17714
|
-
var ContainerMobile = css(templateObject_2$
|
|
17715
|
-
var Container$
|
|
17716
|
-
var TextContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17718
|
+
var ContainerDesktop = css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17719
|
+
var ContainerMobile = css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
17720
|
+
var Container$5 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17721
|
+
var TextContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17717
17722
|
var TextWithImage = function (_a) {
|
|
17718
17723
|
var _b, _c, _d, _e;
|
|
17719
17724
|
var title = _a.title, text = _a.text, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -17733,7 +17738,7 @@ var TextWithImage = function (_a) {
|
|
|
17733
17738
|
// @ts-ignore
|
|
17734
17739
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17735
17740
|
};
|
|
17736
|
-
return (jsxs(Container$
|
|
17741
|
+
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17737
17742
|
backgroundColor: props.btnBGColor,
|
|
17738
17743
|
color: '#ffffff',
|
|
17739
17744
|
border: props.btnBGColor,
|
|
@@ -17743,9 +17748,9 @@ var TextWithImage = function (_a) {
|
|
|
17743
17748
|
},
|
|
17744
17749
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17745
17750
|
};
|
|
17746
|
-
var templateObject_1$
|
|
17751
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$1;
|
|
17747
17752
|
|
|
17748
|
-
var Container$
|
|
17753
|
+
var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17749
17754
|
var AccordionOptions = function (_a) {
|
|
17750
17755
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17751
17756
|
var _b = React$2.useState({
|
|
@@ -17758,7 +17763,7 @@ var AccordionOptions = function (_a) {
|
|
|
17758
17763
|
}
|
|
17759
17764
|
return false;
|
|
17760
17765
|
};
|
|
17761
|
-
return (jsxRuntime.jsx(Container$
|
|
17766
|
+
return (jsxRuntime.jsx(Container$4, { children: accordions.map(function (accordion, index) {
|
|
17762
17767
|
var forceOpenValue = getForceOpen(index);
|
|
17763
17768
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17764
17769
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17769,9 +17774,9 @@ var AccordionOptions = function (_a) {
|
|
|
17769
17774
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17770
17775
|
}) }, void 0));
|
|
17771
17776
|
};
|
|
17772
|
-
var templateObject_1$
|
|
17777
|
+
var templateObject_1$4;
|
|
17773
17778
|
|
|
17774
|
-
var Container$
|
|
17779
|
+
var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
17775
17780
|
var alignCenter = _a.alignCenter;
|
|
17776
17781
|
return alignCenter &&
|
|
17777
17782
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17781,14 +17786,14 @@ var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __ma
|
|
|
17781
17786
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17782
17787
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17783
17788
|
});
|
|
17784
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17785
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17789
|
+
var TitleText = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
17790
|
+
var BannerText = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
17786
17791
|
var ShortBanner = function (_a) {
|
|
17787
17792
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
17788
17793
|
var theme = useTheme();
|
|
17789
|
-
return (jsxRuntime.jsxs(Container$
|
|
17794
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17790
17795
|
};
|
|
17791
|
-
var templateObject_1$
|
|
17796
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
17792
17797
|
|
|
17793
17798
|
/* base styles & size variants */
|
|
17794
17799
|
var UserInfoTextStyles = {
|
|
@@ -17804,9 +17809,9 @@ var UserInfoTextStyles = {
|
|
|
17804
17809
|
},
|
|
17805
17810
|
};
|
|
17806
17811
|
|
|
17807
|
-
var Container$
|
|
17808
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17809
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17812
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) { return (props.isMobile ? '241px' : '378px'); }, function (props) { return (props.isMobile ? '20px 20px 18px;' : '35px 35px 25px;'); });
|
|
17813
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: ", ";\n max-width: ", ";\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n max-height: ", ";\n max-width: ", ";\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])), function (props) { return (props.isMobile ? '120px' : '180px'); }, function (props) { return (props.isMobile ? '200px' : '320px'); });
|
|
17814
|
+
var ImageCard = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n width: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n min-height: ", ";\n width: ", ";\n flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '120px' : '180px'); }, function (props) { return (props.isMobile ? '100px' : '160px'); });
|
|
17810
17815
|
var UserInfoText = newStyled.div(function (_a) {
|
|
17811
17816
|
var theme = _a.theme, isMobile = _a.isMobile, alignCenter = _a.alignCenter;
|
|
17812
17817
|
return [
|
|
@@ -17817,13 +17822,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17817
17822
|
var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b;
|
|
17818
17823
|
var theme = useTheme();
|
|
17819
17824
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17820
|
-
return (jsxRuntime.jsxs(Container$
|
|
17825
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsxs(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { borderRadius: "20px", src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { borderRadius: "20px", src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, isMobile: isMobile, alignCenter: alignCenter }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17821
17826
|
};
|
|
17822
|
-
var templateObject_1$
|
|
17827
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
17823
17828
|
|
|
17824
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17825
|
-
var ImageContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17826
|
-
var StyledTitle = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17829
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17830
|
+
var ImageContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17831
|
+
var StyledTitle = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17827
17832
|
var titlePosition = _a.titlePosition;
|
|
17828
17833
|
return titlePosition == 'center' &&
|
|
17829
17834
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17831,9 +17836,49 @@ var StyledTitle = newStyled.div(templateObject_3 || (templateObject_3 = __makeTe
|
|
|
17831
17836
|
var ImageCardWithDescription = function (_a) {
|
|
17832
17837
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17833
17838
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17834
|
-
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17839
|
+
return (jsxRuntime.jsxs(Container$1, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17840
|
+
};
|
|
17841
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
17842
|
+
|
|
17843
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17844
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17845
|
+
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
17846
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
17847
|
+
var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
17848
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
17849
|
+
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
17850
|
+
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
17851
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
17852
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
17853
|
+
var TrackingProgress = function (_a) {
|
|
17854
|
+
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
17855
|
+
var theme = useTheme();
|
|
17856
|
+
var fillSpaces = amountOfCheckPoints - checkPoints.length;
|
|
17857
|
+
if (fillSpaces < 0) {
|
|
17858
|
+
console.error('Invalid amount of total checkpoints', amountOfCheckPoints, checkPoints.length);
|
|
17859
|
+
fillSpaces = 0;
|
|
17860
|
+
}
|
|
17861
|
+
var statusSpaces = [47, 39, 31, 30];
|
|
17862
|
+
var emptySpaces = !fillSpaces ? [] : new Array(fillSpaces).fill({});
|
|
17863
|
+
var getCurrentSpace = function (index) {
|
|
17864
|
+
if (!fillSpaces && index + 1 === checkPoints.length) {
|
|
17865
|
+
return '0';
|
|
17866
|
+
}
|
|
17867
|
+
if (statusSpaces[index]) {
|
|
17868
|
+
return "".concat(statusSpaces[index], "px");
|
|
17869
|
+
}
|
|
17870
|
+
return '30px';
|
|
17871
|
+
};
|
|
17872
|
+
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17873
|
+
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17874
|
+
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
17875
|
+
? theme.colors.semantic.informative.color
|
|
17876
|
+
: theme.colors.semantic.positive.color, firstElement: index === 0 }, { children: jsxRuntime.jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), index + 1 === checkPoints.length && !fillSpaces && (jsxRuntime.jsx(LastCheckpointTrack, { backgroundColor: theme.colors.semantic.positive.color }, void 0)), index + 1 === checkPoints.length && !!fillSpaces && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color, firstElement: index === 0, lastElement: fillSpaces === 1 }, { children: jsxRuntime.jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus, __assign$1({ finishedTrack: !fillSpaces && index + 1 === checkPoints.length, finishedTrackColor: theme.colors.semantic.positive.color }, { children: statusMessage }), void 0)] }), statusMessage));
|
|
17877
|
+
}), emptySpaces.map(function (element, index) {
|
|
17878
|
+
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
17879
|
+
})] }), void 0));
|
|
17835
17880
|
};
|
|
17836
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
17881
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
17837
17882
|
|
|
17838
17883
|
exports.Accordion = Accordion$1;
|
|
17839
17884
|
exports.AccordionOptions = AccordionOptions;
|
|
@@ -17912,6 +17957,7 @@ exports.ThemeVariables = ThemeVariables;
|
|
|
17912
17957
|
exports.Timer = Timer;
|
|
17913
17958
|
exports.Tooltip = Tooltip;
|
|
17914
17959
|
exports.Totals = Totals;
|
|
17960
|
+
exports.TrackingProgress = TrackingProgress;
|
|
17915
17961
|
exports.decimalFormat = decimalFormat;
|
|
17916
17962
|
exports.formatPrice = formatPrice;
|
|
17917
17963
|
exports.isEmail = isEmail;
|