@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.esm.js
CHANGED
|
@@ -4016,7 +4016,7 @@ var InputValidationType;
|
|
|
4016
4016
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4017
4017
|
})(InputValidationType || (InputValidationType = {}));
|
|
4018
4018
|
|
|
4019
|
-
var Section = newStyled.div(templateObject_1$
|
|
4019
|
+
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) {
|
|
4020
4020
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4021
4021
|
});
|
|
4022
4022
|
var CardHeader = function (_a) {
|
|
@@ -4027,14 +4027,14 @@ var CardFooter = function (_a) {
|
|
|
4027
4027
|
var children = _a.children;
|
|
4028
4028
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4029
4029
|
};
|
|
4030
|
-
var templateObject_1$
|
|
4030
|
+
var templateObject_1$1k;
|
|
4031
4031
|
|
|
4032
|
-
var Body = newStyled.div(templateObject_1$
|
|
4032
|
+
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"])));
|
|
4033
4033
|
var CardBody = function (_a) {
|
|
4034
4034
|
var children = _a.children;
|
|
4035
4035
|
return jsx$1(Body, { children: children }, void 0);
|
|
4036
4036
|
};
|
|
4037
|
-
var templateObject_1$
|
|
4037
|
+
var templateObject_1$1j;
|
|
4038
4038
|
|
|
4039
4039
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4040
4040
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4179,7 +4179,7 @@ var AssetsProvider = function (_a) {
|
|
|
4179
4179
|
};
|
|
4180
4180
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4181
4181
|
|
|
4182
|
-
var Container$
|
|
4182
|
+
var Container$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) {
|
|
4183
4183
|
var flex = _a.flex;
|
|
4184
4184
|
return flex &&
|
|
4185
4185
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4192,14 +4192,14 @@ var Container$O = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
4192
4192
|
var Card$1 = function (_a) {
|
|
4193
4193
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4194
4194
|
var theme = useTheme();
|
|
4195
|
-
return (jsx$1(Container$
|
|
4195
|
+
return (jsx$1(Container$P, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var Card$2 = Object.assign(Card$1, {
|
|
4198
4198
|
Header: CardHeader,
|
|
4199
4199
|
Footer: CardFooter,
|
|
4200
4200
|
Body: CardBody,
|
|
4201
4201
|
});
|
|
4202
|
-
var templateObject_1$
|
|
4202
|
+
var templateObject_1$1i;
|
|
4203
4203
|
|
|
4204
4204
|
var Fragment = Fragment$1;
|
|
4205
4205
|
function jsx(type, props, key) {
|
|
@@ -4341,7 +4341,7 @@ function BaseSelectOption(_a) {
|
|
|
4341
4341
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4342
4342
|
}
|
|
4343
4343
|
|
|
4344
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4344
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4345
4345
|
function BaseSelect(_a) {
|
|
4346
4346
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4347
4347
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4351,7 +4351,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4351
4351
|
Options: BaseSelectOptions,
|
|
4352
4352
|
Option: BaseSelectOption,
|
|
4353
4353
|
});
|
|
4354
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$1h;
|
|
4355
4355
|
|
|
4356
4356
|
var CustomButton = newStyled.button(function (_a) {
|
|
4357
4357
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4564,12 +4564,12 @@ var CustomCheckboxStyles = {
|
|
|
4564
4564
|
},
|
|
4565
4565
|
};
|
|
4566
4566
|
|
|
4567
|
-
var Container$
|
|
4567
|
+
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"])));
|
|
4568
4568
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4569
4569
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4570
4570
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4571
4571
|
]; });
|
|
4572
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4572
|
+
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) {
|
|
4573
4573
|
var disabled = _a.disabled;
|
|
4574
4574
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4575
4575
|
});
|
|
@@ -4598,9 +4598,9 @@ var Checkbox = function (_a) {
|
|
|
4598
4598
|
useEffect(function () {
|
|
4599
4599
|
mounted.current = true;
|
|
4600
4600
|
}, []);
|
|
4601
|
-
return (jsxs$1(Container$
|
|
4601
|
+
return (jsxs$1(Container$O, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4602
4602
|
};
|
|
4603
|
-
var templateObject_1$
|
|
4603
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
4604
4604
|
|
|
4605
4605
|
var CustomOption = newStyled.li(function (_a) {
|
|
4606
4606
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4679,10 +4679,10 @@ function SimpleDropdown(_a) {
|
|
|
4679
4679
|
return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4680
4680
|
}
|
|
4681
4681
|
|
|
4682
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4683
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4684
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4685
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4682
|
+
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; });
|
|
4683
|
+
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; });
|
|
4684
|
+
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"])));
|
|
4685
|
+
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"])));
|
|
4686
4686
|
var DropdownDialog = function (_a) {
|
|
4687
4687
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4688
4688
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4690,7 +4690,7 @@ var DropdownDialog = function (_a) {
|
|
|
4690
4690
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4691
4691
|
}) }), void 0) }), void 0));
|
|
4692
4692
|
};
|
|
4693
|
-
var templateObject_1$
|
|
4693
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$C, templateObject_4$p;
|
|
4694
4694
|
|
|
4695
4695
|
var getStylesBySize$8 = function (size, theme) {
|
|
4696
4696
|
switch (size) {
|
|
@@ -4750,14 +4750,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4750
4750
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4751
4751
|
// `variants` styles that are consistent through all themes.
|
|
4752
4752
|
var TAGS = {
|
|
4753
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4754
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4755
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4756
|
-
display1: newStyled.h1(templateObject_4$
|
|
4757
|
-
display2: newStyled.h2(templateObject_5$
|
|
4758
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4759
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4760
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4753
|
+
hero1: newStyled.h1(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject([""], [""]))),
|
|
4754
|
+
hero2: newStyled.h2(templateObject_2$O || (templateObject_2$O = __makeTemplateObject([""], [""]))),
|
|
4755
|
+
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4756
|
+
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
4757
|
+
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4758
|
+
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4759
|
+
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
4760
|
+
heading3: newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject([""], [""]))),
|
|
4761
4761
|
heading4: newStyled.h4(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject([""], [""]))),
|
|
4762
4762
|
heading5: newStyled.h5(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject([""], [""]))),
|
|
4763
4763
|
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4873,9 +4873,9 @@ var DEFAULTS = {
|
|
|
4873
4873
|
size: 'regular',
|
|
4874
4874
|
},
|
|
4875
4875
|
};
|
|
4876
|
-
var templateObject_1$
|
|
4876
|
+
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;
|
|
4877
4877
|
|
|
4878
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4878
|
+
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) {
|
|
4879
4879
|
var inline = _a.inline;
|
|
4880
4880
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4881
4881
|
});
|
|
@@ -4893,7 +4893,7 @@ var SizeSelector = function (_a) {
|
|
|
4893
4893
|
}, size: 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));
|
|
4894
4894
|
}) }), void 0)] }), void 0));
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$
|
|
4896
|
+
var templateObject_1$1d;
|
|
4897
4897
|
|
|
4898
4898
|
var getStylesBySize$7 = function (size) {
|
|
4899
4899
|
switch (size) {
|
|
@@ -4920,7 +4920,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4920
4920
|
} });
|
|
4921
4921
|
};
|
|
4922
4922
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4923
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4923
|
+
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));
|
|
4924
4924
|
};
|
|
4925
4925
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4926
4926
|
if (disabled)
|
|
@@ -4936,16 +4936,16 @@ var TextButton = function (_a) {
|
|
|
4936
4936
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4937
4937
|
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));
|
|
4938
4938
|
};
|
|
4939
|
-
var templateObject_1$
|
|
4939
|
+
var templateObject_1$1c;
|
|
4940
4940
|
|
|
4941
|
-
var Container$
|
|
4942
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4943
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4941
|
+
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"])));
|
|
4942
|
+
var P$3 = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4943
|
+
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"])));
|
|
4944
4944
|
var SizeFitGuide = function (_a) {
|
|
4945
4945
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4946
|
-
return (jsxs$1(Container$
|
|
4946
|
+
return (jsxs$1(Container$N, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4947
4947
|
};
|
|
4948
|
-
var templateObject_1$
|
|
4948
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$A;
|
|
4949
4949
|
|
|
4950
4950
|
var getStylesBySize$6 = function (size) {
|
|
4951
4951
|
switch (size) {
|
|
@@ -4975,7 +4975,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4975
4975
|
};
|
|
4976
4976
|
}
|
|
4977
4977
|
};
|
|
4978
|
-
var Container$
|
|
4978
|
+
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) {
|
|
4979
4979
|
var backgroundColor = _a.backgroundColor;
|
|
4980
4980
|
return backgroundColor;
|
|
4981
4981
|
}, function (_a) {
|
|
@@ -4997,7 +4997,7 @@ var Container$L = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __
|
|
|
4997
4997
|
var size = _a.size;
|
|
4998
4998
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4999
4999
|
});
|
|
5000
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5000
|
+
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) {
|
|
5001
5001
|
var textColor = _a.textColor;
|
|
5002
5002
|
return textColor;
|
|
5003
5003
|
}, function (_a) {
|
|
@@ -5012,9 +5012,9 @@ var H3$2 = newStyled.h3(templateObject_2$L || (templateObject_2$L = __makeTempla
|
|
|
5012
5012
|
var DiscountTag = function (_a) {
|
|
5013
5013
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5014
5014
|
var theme = useTheme();
|
|
5015
|
-
return (jsx$1(Container$
|
|
5015
|
+
return (jsx$1(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: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5016
5016
|
};
|
|
5017
|
-
var templateObject_1$
|
|
5017
|
+
var templateObject_1$1a, templateObject_2$M;
|
|
5018
5018
|
|
|
5019
5019
|
var getStylesBySize$5 = function (size) {
|
|
5020
5020
|
switch (size) {
|
|
@@ -5044,8 +5044,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
5044
5044
|
};
|
|
5045
5045
|
}
|
|
5046
5046
|
};
|
|
5047
|
-
var Container$
|
|
5048
|
-
var Price = newStyled.p(templateObject_2$
|
|
5047
|
+
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"])));
|
|
5048
|
+
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) {
|
|
5049
5049
|
var weight = _a.weight;
|
|
5050
5050
|
return (weight ? weight : '400');
|
|
5051
5051
|
}, function (_a) {
|
|
@@ -5074,7 +5074,7 @@ var Price = newStyled.p(templateObject_2$K || (templateObject_2$K = __makeTempla
|
|
|
5074
5074
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5075
5075
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5076
5076
|
});
|
|
5077
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5077
|
+
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) {
|
|
5078
5078
|
var _b;
|
|
5079
5079
|
var size = _a.size;
|
|
5080
5080
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5095,11 +5095,11 @@ var PriceLabel = function (_a) {
|
|
|
5095
5095
|
weight: 700,
|
|
5096
5096
|
};
|
|
5097
5097
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5098
|
-
return (jsxs$1(Container$
|
|
5098
|
+
return (jsxs$1(Container$L, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5099
5099
|
};
|
|
5100
|
-
var templateObject_1$
|
|
5100
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$z;
|
|
5101
5101
|
|
|
5102
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5102
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5103
5103
|
var PriceLabelV2 = function (_a) {
|
|
5104
5104
|
var _b;
|
|
5105
5105
|
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 ? ComponentSize.Medium : _e;
|
|
@@ -5127,9 +5127,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5127
5127
|
weight: 700,
|
|
5128
5128
|
};
|
|
5129
5129
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5130
|
-
return (jsxs$1(Container$
|
|
5130
|
+
return (jsxs$1(Container$L, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5131
5131
|
};
|
|
5132
|
-
var templateObject_1$
|
|
5132
|
+
var templateObject_1$18;
|
|
5133
5133
|
|
|
5134
5134
|
var OneColorSelector = function (_a) {
|
|
5135
5135
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5170,11 +5170,11 @@ var OutOfStock = function (_a) {
|
|
|
5170
5170
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5171
5171
|
};
|
|
5172
5172
|
|
|
5173
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5174
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5175
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5176
|
-
var Span = newStyled.span(templateObject_4$
|
|
5177
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5173
|
+
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"])));
|
|
5174
|
+
newStyled(lt.Label)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5175
|
+
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"])));
|
|
5176
|
+
var Span = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5177
|
+
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"])));
|
|
5178
5178
|
var Label$2 = function (_a) {
|
|
5179
5179
|
var label = _a.label, values = _a.values;
|
|
5180
5180
|
return (jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5192,20 +5192,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5192
5192
|
Option: Option,
|
|
5193
5193
|
OptionsContainer: OptionsContainer,
|
|
5194
5194
|
});
|
|
5195
|
-
var templateObject_1$
|
|
5195
|
+
var templateObject_1$17, templateObject_2$K, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5196
5196
|
|
|
5197
|
-
var Container$
|
|
5197
|
+
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) {
|
|
5198
5198
|
var borderColor = _a.borderColor;
|
|
5199
5199
|
return borderColor;
|
|
5200
5200
|
});
|
|
5201
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5201
|
+
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"])));
|
|
5202
5202
|
var PatternSelector = function (_a) {
|
|
5203
5203
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5204
5204
|
var theme = useTheme();
|
|
5205
5205
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5206
|
-
return (jsx$1(Container$
|
|
5206
|
+
return (jsx$1(Container$K, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5207
5207
|
};
|
|
5208
|
-
var templateObject_1$
|
|
5208
|
+
var templateObject_1$16, templateObject_2$J;
|
|
5209
5209
|
|
|
5210
5210
|
var renderOptions$1 = function (options) {
|
|
5211
5211
|
if (options.length === 0) {
|
|
@@ -5263,7 +5263,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5263
5263
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5264
5264
|
};
|
|
5265
5265
|
|
|
5266
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5266
|
+
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) {
|
|
5267
5267
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5268
5268
|
return borderRadiusVariant &&
|
|
5269
5269
|
"\nborder-radius: 20px;\n";
|
|
@@ -5278,7 +5278,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5278
5278
|
var theme = useTheme();
|
|
5279
5279
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5280
5280
|
};
|
|
5281
|
-
var templateObject_1$
|
|
5281
|
+
var templateObject_1$15;
|
|
5282
5282
|
|
|
5283
5283
|
var Button$4 = newStyled.button(function () { return ({
|
|
5284
5284
|
background: 'transparent',
|
|
@@ -9521,14 +9521,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9521
9521
|
return Slider;
|
|
9522
9522
|
}(React__default.Component);
|
|
9523
9523
|
|
|
9524
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9524
|
+
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) {
|
|
9525
9525
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9526
9526
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9527
9527
|
}, function (_a) {
|
|
9528
9528
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9529
9529
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9530
9530
|
});
|
|
9531
|
-
var templateObject_1$
|
|
9531
|
+
var templateObject_1$14;
|
|
9532
9532
|
|
|
9533
9533
|
var getStylesBySize$4 = function (size) {
|
|
9534
9534
|
// rem units
|
|
@@ -9587,22 +9587,22 @@ var SliderNavigation = function (_a) {
|
|
|
9587
9587
|
} }, { 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));
|
|
9588
9588
|
};
|
|
9589
9589
|
|
|
9590
|
-
var horizontalStyles = css(templateObject_1$
|
|
9591
|
-
var verticalStyles = css(templateObject_2$
|
|
9592
|
-
var Container$
|
|
9590
|
+
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"])));
|
|
9591
|
+
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"])));
|
|
9592
|
+
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) {
|
|
9593
9593
|
var position = _a.position;
|
|
9594
9594
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9595
9595
|
});
|
|
9596
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9596
|
+
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"])));
|
|
9597
9597
|
var ImagePreviewList = function (_a) {
|
|
9598
9598
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9599
|
-
return (jsx$1(Container$
|
|
9599
|
+
return (jsx$1(Container$J, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9600
9600
|
arrowWidth: 0.75,
|
|
9601
9601
|
arrowHeight: 1.25,
|
|
9602
9602
|
arrowPadding: 1.625,
|
|
9603
9603
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9604
9604
|
};
|
|
9605
|
-
var templateObject_1$
|
|
9605
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$x, templateObject_4$m;
|
|
9606
9606
|
|
|
9607
9607
|
var propTypes = {exports: {}};
|
|
9608
9608
|
|
|
@@ -11188,23 +11188,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11188
11188
|
afterZoomOut: PropTypes.func
|
|
11189
11189
|
} : {};
|
|
11190
11190
|
|
|
11191
|
-
var Container$
|
|
11191
|
+
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) {
|
|
11192
11192
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11193
11193
|
return borderRadiusVariant &&
|
|
11194
11194
|
"\n border-radius: 40px;\n ";
|
|
11195
11195
|
});
|
|
11196
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11197
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11196
|
+
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'); });
|
|
11197
|
+
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"])));
|
|
11198
11198
|
var ImageProductWithTags$1 = function (_a) {
|
|
11199
11199
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11200
|
-
return (jsxs$1(Container$
|
|
11200
|
+
return (jsxs$1(Container$I, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11201
11201
|
alt: image.alt,
|
|
11202
11202
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11203
11203
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11204
11204
|
};
|
|
11205
|
-
var templateObject_1$
|
|
11205
|
+
var templateObject_1$12, templateObject_2$H, templateObject_3$w;
|
|
11206
11206
|
|
|
11207
|
-
var Container$
|
|
11207
|
+
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"])));
|
|
11208
11208
|
var ProductGallery = function (_a) {
|
|
11209
11209
|
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;
|
|
11210
11210
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11212,11 +11212,11 @@ var ProductGallery = function (_a) {
|
|
|
11212
11212
|
useEffect(function () {
|
|
11213
11213
|
setSelectedImage(initialValue);
|
|
11214
11214
|
}, [initialValue]);
|
|
11215
|
-
return (jsxs$1(Container$
|
|
11215
|
+
return (jsxs$1(Container$H, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11216
11216
|
setSelectedImage(value);
|
|
11217
11217
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11218
11218
|
};
|
|
11219
|
-
var templateObject_1$
|
|
11219
|
+
var templateObject_1$11;
|
|
11220
11220
|
|
|
11221
11221
|
/* base styles & size variants */
|
|
11222
11222
|
var StarStyles = {
|
|
@@ -11262,8 +11262,8 @@ var StarStyles = {
|
|
|
11262
11262
|
});
|
|
11263
11263
|
},
|
|
11264
11264
|
};
|
|
11265
|
-
var Container$
|
|
11266
|
-
var templateObject_1
|
|
11265
|
+
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"])));
|
|
11266
|
+
var templateObject_1$10;
|
|
11267
11267
|
|
|
11268
11268
|
var StarContainer = newStyled.div(function (_a) {
|
|
11269
11269
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11281,7 +11281,7 @@ var sizes = {
|
|
|
11281
11281
|
var StarList = function (_a) {
|
|
11282
11282
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11283
11283
|
var theme = useTheme();
|
|
11284
|
-
return (jsx$1(Container$
|
|
11284
|
+
return (jsx$1(Container$G, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11285
11285
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11286
11286
|
}) }, void 0));
|
|
11287
11287
|
};
|
|
@@ -11325,8 +11325,8 @@ var LabelStyles = {
|
|
|
11325
11325
|
});
|
|
11326
11326
|
},
|
|
11327
11327
|
};
|
|
11328
|
-
var Container$
|
|
11329
|
-
var templateObject_1
|
|
11328
|
+
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"])));
|
|
11329
|
+
var templateObject_1$$;
|
|
11330
11330
|
|
|
11331
11331
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11332
11332
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11364,11 +11364,11 @@ var Rating = function (_a) {
|
|
|
11364
11364
|
href: reviewsContainerId,
|
|
11365
11365
|
}
|
|
11366
11366
|
: {};
|
|
11367
|
-
return (jsxs$1(Container$
|
|
11367
|
+
return (jsxs$1(Container$F, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11368
11368
|
};
|
|
11369
11369
|
|
|
11370
|
-
var Container$
|
|
11371
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11370
|
+
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"])));
|
|
11371
|
+
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; });
|
|
11372
11372
|
var textButtonStyles = function (theme) { return ({
|
|
11373
11373
|
border: 'none',
|
|
11374
11374
|
background: 'transparent',
|
|
@@ -11381,9 +11381,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11381
11381
|
var FitPredictor = function (_a) {
|
|
11382
11382
|
var onClick = _a.onClick;
|
|
11383
11383
|
var theme = useTheme();
|
|
11384
|
-
return (jsxs(Container$
|
|
11384
|
+
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));
|
|
11385
11385
|
};
|
|
11386
|
-
var templateObject_1$
|
|
11386
|
+
var templateObject_1$_, templateObject_2$G;
|
|
11387
11387
|
|
|
11388
11388
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11389
11389
|
var color = _a.color;
|
|
@@ -11397,7 +11397,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11397
11397
|
margin: '0.938rem 4.188rem',
|
|
11398
11398
|
});
|
|
11399
11399
|
});
|
|
11400
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11400
|
+
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) {
|
|
11401
11401
|
var backgroundColor = _a.backgroundColor;
|
|
11402
11402
|
return backgroundColor;
|
|
11403
11403
|
}, function (_a) {
|
|
@@ -11420,7 +11420,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11420
11420
|
position: 'absolute',
|
|
11421
11421
|
});
|
|
11422
11422
|
});
|
|
11423
|
-
var Container$
|
|
11423
|
+
var Container$D = newStyled.div(function (_a) {
|
|
11424
11424
|
var widthAuto = _a.widthAuto;
|
|
11425
11425
|
return ({
|
|
11426
11426
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11434,9 +11434,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11434
11434
|
var ProgressBar = function (_a) {
|
|
11435
11435
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11436
11436
|
var theme = useTheme();
|
|
11437
|
-
return (jsxs$1(Container$
|
|
11437
|
+
return (jsxs$1(Container$D, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11438
11438
|
};
|
|
11439
|
-
var templateObject_1$
|
|
11439
|
+
var templateObject_1$Z;
|
|
11440
11440
|
|
|
11441
11441
|
var getStylesBySize$3 = function (size) {
|
|
11442
11442
|
switch (size) {
|
|
@@ -11457,7 +11457,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11457
11457
|
};
|
|
11458
11458
|
}
|
|
11459
11459
|
};
|
|
11460
|
-
var Container$
|
|
11460
|
+
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) {
|
|
11461
11461
|
var backgroundColor = _a.backgroundColor;
|
|
11462
11462
|
return backgroundColor;
|
|
11463
11463
|
}, function (_a) {
|
|
@@ -11485,9 +11485,9 @@ var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __ma
|
|
|
11485
11485
|
var IconButton = function (_a) {
|
|
11486
11486
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11487
11487
|
var theme = useTheme();
|
|
11488
|
-
return (jsx$1(Container$
|
|
11488
|
+
return (jsx$1(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));
|
|
11489
11489
|
};
|
|
11490
|
-
var templateObject_1$
|
|
11490
|
+
var templateObject_1$Y;
|
|
11491
11491
|
|
|
11492
11492
|
var TooltipArrow = function (_a) {
|
|
11493
11493
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11567,7 +11567,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11567
11567
|
}
|
|
11568
11568
|
};
|
|
11569
11569
|
|
|
11570
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11570
|
+
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) {
|
|
11571
11571
|
var position = _a.position;
|
|
11572
11572
|
return getWrapperFlexDirection(position);
|
|
11573
11573
|
});
|
|
@@ -11591,11 +11591,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11591
11591
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11592
11592
|
return actual === expected ? margin : '0';
|
|
11593
11593
|
};
|
|
11594
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11594
|
+
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) {
|
|
11595
11595
|
var borderColor = _a.borderColor;
|
|
11596
11596
|
return borderColor;
|
|
11597
11597
|
});
|
|
11598
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11598
|
+
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) {
|
|
11599
11599
|
var position = _a.position;
|
|
11600
11600
|
return getArrowRotation(position);
|
|
11601
11601
|
}, function (_a) {
|
|
@@ -11605,17 +11605,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$u || (templateObject_
|
|
|
11605
11605
|
var position = _a.position;
|
|
11606
11606
|
return getArrowContainerMargin(position);
|
|
11607
11607
|
});
|
|
11608
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11608
|
+
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) {
|
|
11609
11609
|
var color = _a.color;
|
|
11610
11610
|
return color;
|
|
11611
11611
|
});
|
|
11612
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11613
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11612
|
+
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"])));
|
|
11613
|
+
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) {
|
|
11614
11614
|
var color = _a.color;
|
|
11615
11615
|
return color;
|
|
11616
11616
|
});
|
|
11617
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
11618
|
-
var templateObject_1$
|
|
11617
|
+
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"])));
|
|
11618
|
+
var templateObject_1$X, templateObject_2$F, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11619
11619
|
|
|
11620
11620
|
var Tooltip = function (_a) {
|
|
11621
11621
|
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;
|
|
@@ -11773,9 +11773,9 @@ var ContainerStyles = {
|
|
|
11773
11773
|
},
|
|
11774
11774
|
};
|
|
11775
11775
|
|
|
11776
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11777
|
-
var Container$
|
|
11778
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11776
|
+
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"])));
|
|
11777
|
+
var Container$B = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11778
|
+
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) {
|
|
11779
11779
|
var disabled = _a.disabled;
|
|
11780
11780
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11781
11781
|
});
|
|
@@ -11790,9 +11790,9 @@ var RadioInput = function (_a) {
|
|
|
11790
11790
|
var value = event.currentTarget.value;
|
|
11791
11791
|
onChange({ value: value, label: label });
|
|
11792
11792
|
};
|
|
11793
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11793
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$B, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11794
11794
|
};
|
|
11795
|
-
var templateObject_1$
|
|
11795
|
+
var templateObject_1$W, templateObject_2$E;
|
|
11796
11796
|
|
|
11797
11797
|
var RadioGroupInput = function (_a) {
|
|
11798
11798
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11806,37 +11806,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11806
11806
|
}) }), void 0));
|
|
11807
11807
|
};
|
|
11808
11808
|
|
|
11809
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11810
|
-
var Container$
|
|
11809
|
+
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"])));
|
|
11810
|
+
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"])));
|
|
11811
11811
|
var Minimalistic = function (_a) {
|
|
11812
11812
|
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;
|
|
11813
11813
|
var theme = useTheme();
|
|
11814
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11814
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$A, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$A, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11815
11815
|
};
|
|
11816
|
-
var templateObject_1$
|
|
11816
|
+
var templateObject_1$V, templateObject_2$D;
|
|
11817
11817
|
|
|
11818
|
-
var Container$
|
|
11819
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11820
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11821
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11818
|
+
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"])));
|
|
11819
|
+
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; });
|
|
11820
|
+
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; });
|
|
11821
|
+
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"])));
|
|
11822
11822
|
var Simple = function (_a) {
|
|
11823
11823
|
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;
|
|
11824
11824
|
var theme = useTheme();
|
|
11825
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11825
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$z, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11826
11826
|
};
|
|
11827
|
-
var templateObject_1$
|
|
11827
|
+
var templateObject_1$U, templateObject_2$C, templateObject_3$u, templateObject_4$k;
|
|
11828
11828
|
|
|
11829
11829
|
var Bundle = {
|
|
11830
11830
|
Minimalistic: Minimalistic,
|
|
11831
11831
|
Simple: Simple,
|
|
11832
11832
|
};
|
|
11833
11833
|
|
|
11834
|
-
var Container$
|
|
11834
|
+
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"])));
|
|
11835
11835
|
var Tag$1 = function (_a) {
|
|
11836
11836
|
var text = _a.text, className = _a.className;
|
|
11837
|
-
return jsx$1(Container$
|
|
11837
|
+
return jsx$1(Container$y, __assign$1({ className: className }, { children: text }), void 0);
|
|
11838
11838
|
};
|
|
11839
|
-
var templateObject_1$
|
|
11839
|
+
var templateObject_1$T;
|
|
11840
11840
|
|
|
11841
11841
|
var getStylesBySize$2 = function (size, styledBorder) {
|
|
11842
11842
|
switch (size) {
|
|
@@ -11939,11 +11939,11 @@ var Timer = function (_a) {
|
|
|
11939
11939
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11940
11940
|
};
|
|
11941
11941
|
|
|
11942
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11942
|
+
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) {
|
|
11943
11943
|
var color = _a.color;
|
|
11944
11944
|
return color;
|
|
11945
11945
|
});
|
|
11946
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11946
|
+
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) {
|
|
11947
11947
|
var color = _a.color;
|
|
11948
11948
|
return color;
|
|
11949
11949
|
});
|
|
@@ -11952,7 +11952,7 @@ var InputLabel = function (_a) {
|
|
|
11952
11952
|
var theme = useTheme();
|
|
11953
11953
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11954
11954
|
};
|
|
11955
|
-
var templateObject_1$
|
|
11955
|
+
var templateObject_1$S, templateObject_2$B;
|
|
11956
11956
|
|
|
11957
11957
|
/**
|
|
11958
11958
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12006,14 +12006,14 @@ var formatPrice = function (value, _a) {
|
|
|
12006
12006
|
}).format(valueToFormat);
|
|
12007
12007
|
};
|
|
12008
12008
|
|
|
12009
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12010
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12009
|
+
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; });
|
|
12010
|
+
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"])));
|
|
12011
12011
|
var Error$1 = function (_a) {
|
|
12012
12012
|
var error = _a.error;
|
|
12013
12013
|
var theme = useTheme();
|
|
12014
12014
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12015
12015
|
};
|
|
12016
|
-
var templateObject_1$
|
|
12016
|
+
var templateObject_1$R, templateObject_2$A;
|
|
12017
12017
|
|
|
12018
12018
|
var containerByStatus = function (theme, status) {
|
|
12019
12019
|
if (status === InputValidationType.Valid)
|
|
@@ -12022,11 +12022,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12022
12022
|
return theme.colors.semantic.urgent.color;
|
|
12023
12023
|
return '';
|
|
12024
12024
|
};
|
|
12025
|
-
var Container$
|
|
12025
|
+
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) {
|
|
12026
12026
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12027
12027
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12028
12028
|
});
|
|
12029
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12029
|
+
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) {
|
|
12030
12030
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12031
12031
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12032
12032
|
}, function (_a) {
|
|
@@ -12081,13 +12081,13 @@ var StyledInput = newStyled.input(templateObject_2$y || (templateObject_2$y = __
|
|
|
12081
12081
|
return hasValue &&
|
|
12082
12082
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12083
12083
|
});
|
|
12084
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12084
|
+
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) {
|
|
12085
12085
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12086
12086
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12087
12087
|
});
|
|
12088
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12089
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12090
|
-
var templateObject_1$
|
|
12088
|
+
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"])));
|
|
12089
|
+
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"])));
|
|
12090
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c;
|
|
12091
12091
|
|
|
12092
12092
|
var BaseInput = function (_a) {
|
|
12093
12093
|
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"]);
|
|
@@ -12110,7 +12110,7 @@ var BaseInput = function (_a) {
|
|
|
12110
12110
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12111
12111
|
}, [status]);
|
|
12112
12112
|
var hasValue = Boolean(value);
|
|
12113
|
-
return (jsxs$1(Container$
|
|
12113
|
+
return (jsxs$1(Container$x, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12114
12114
|
onChange(event.target.value, event);
|
|
12115
12115
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12116
12116
|
onChange('', { target: { value: '' } });
|
|
@@ -12131,11 +12131,11 @@ var Button$2 = function (_a) {
|
|
|
12131
12131
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12132
12132
|
};
|
|
12133
12133
|
|
|
12134
|
-
var Container$
|
|
12134
|
+
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) {
|
|
12135
12135
|
var theme = _a.theme;
|
|
12136
12136
|
return theme.component.inputCustom.input.borderRadius;
|
|
12137
12137
|
});
|
|
12138
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12138
|
+
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) {
|
|
12139
12139
|
var theme = _a.theme;
|
|
12140
12140
|
return theme.component.inputCustom.button.borderRadius;
|
|
12141
12141
|
});
|
|
@@ -12148,23 +12148,23 @@ var Custom = function (_a) {
|
|
|
12148
12148
|
text: text,
|
|
12149
12149
|
disabled: rest.disabled,
|
|
12150
12150
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12151
|
-
return (jsx$1(Container$
|
|
12151
|
+
return (jsx$1(Container$w, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12152
12152
|
};
|
|
12153
|
-
var templateObject_1$
|
|
12153
|
+
var templateObject_1$P, templateObject_2$y;
|
|
12154
12154
|
|
|
12155
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12155
|
+
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) {
|
|
12156
12156
|
var size = _a.size;
|
|
12157
12157
|
return (size === 'small' ? '36px' : '');
|
|
12158
12158
|
});
|
|
12159
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12160
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12159
|
+
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"])));
|
|
12160
|
+
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"])));
|
|
12161
12161
|
var Success = function (_a) {
|
|
12162
12162
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12163
12163
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12164
12164
|
};
|
|
12165
|
-
var templateObject_1$
|
|
12165
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
12166
12166
|
|
|
12167
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12167
|
+
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) {
|
|
12168
12168
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12169
12169
|
return status === InputValidationType.Empty &&
|
|
12170
12170
|
type === 'primary' &&
|
|
@@ -12181,21 +12181,21 @@ var BasePlusButton = function (_a) {
|
|
|
12181
12181
|
}
|
|
12182
12182
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12183
12183
|
};
|
|
12184
|
-
var templateObject_1$
|
|
12184
|
+
var templateObject_1$N;
|
|
12185
12185
|
|
|
12186
|
-
var Container$
|
|
12187
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12186
|
+
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"])));
|
|
12187
|
+
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; });
|
|
12188
12188
|
var BasePlusIcon = function (_a) {
|
|
12189
12189
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12190
12190
|
var theme = useTheme();
|
|
12191
12191
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12192
|
-
return (jsx$1(Container$
|
|
12192
|
+
return (jsx$1(Container$v, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12193
12193
|
? theme.colors.shades['700'].color
|
|
12194
12194
|
: status === InputValidationType.Error
|
|
12195
12195
|
? theme.colors.semantic.urgent.color
|
|
12196
12196
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12197
12197
|
};
|
|
12198
|
-
var templateObject_1$
|
|
12198
|
+
var templateObject_1$M, templateObject_2$w;
|
|
12199
12199
|
|
|
12200
12200
|
var Input$1 = {
|
|
12201
12201
|
Simple: BaseInput,
|
|
@@ -12204,7 +12204,7 @@ var Input$1 = {
|
|
|
12204
12204
|
SimplePlusIcon: BasePlusIcon,
|
|
12205
12205
|
};
|
|
12206
12206
|
|
|
12207
|
-
var Container$
|
|
12207
|
+
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) {
|
|
12208
12208
|
var width = _a.width;
|
|
12209
12209
|
return width;
|
|
12210
12210
|
}, function (_a) {
|
|
@@ -12220,11 +12220,11 @@ var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
12220
12220
|
var PaymentMethod = function (_a) {
|
|
12221
12221
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12222
12222
|
var theme = useTheme();
|
|
12223
|
-
return (jsx$1(Container$
|
|
12223
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
12224
12224
|
};
|
|
12225
|
-
var templateObject_1$
|
|
12225
|
+
var templateObject_1$L;
|
|
12226
12226
|
|
|
12227
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12227
|
+
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) {
|
|
12228
12228
|
var backgroundColor = _a.backgroundColor;
|
|
12229
12229
|
return backgroundColor;
|
|
12230
12230
|
}, function (_a) {
|
|
@@ -12236,27 +12236,27 @@ var OfferBanner = function (_a) {
|
|
|
12236
12236
|
var theme = useTheme();
|
|
12237
12237
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12238
12238
|
};
|
|
12239
|
-
var templateObject_1$
|
|
12239
|
+
var templateObject_1$K;
|
|
12240
12240
|
|
|
12241
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12242
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12243
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12244
|
-
var Container$
|
|
12245
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
12241
|
+
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"])));
|
|
12242
|
+
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; });
|
|
12243
|
+
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"])));
|
|
12244
|
+
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; });
|
|
12245
|
+
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"])));
|
|
12246
12246
|
var Total = function (_a) {
|
|
12247
12247
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12248
12248
|
var theme = useTheme();
|
|
12249
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12249
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$t, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12250
12250
|
};
|
|
12251
|
-
var templateObject_1$
|
|
12251
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
12252
12252
|
|
|
12253
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12253
|
+
var Wrapper$1 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12254
12254
|
var color = _a.color;
|
|
12255
12255
|
return color;
|
|
12256
12256
|
});
|
|
12257
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12258
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12259
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12257
|
+
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"])));
|
|
12258
|
+
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"])));
|
|
12259
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12260
12260
|
var color = _a.color;
|
|
12261
12261
|
return color;
|
|
12262
12262
|
});
|
|
@@ -12269,22 +12269,22 @@ var Subtotal = function (_a) {
|
|
|
12269
12269
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12270
12270
|
})] }), void 0));
|
|
12271
12271
|
};
|
|
12272
|
-
var templateObject_1$
|
|
12272
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h;
|
|
12273
12273
|
|
|
12274
12274
|
var Totals = {
|
|
12275
12275
|
Total: Total,
|
|
12276
12276
|
Subtotal: Subtotal,
|
|
12277
12277
|
};
|
|
12278
12278
|
|
|
12279
|
-
var Container$
|
|
12280
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12281
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12282
|
-
var Details = newStyled.span(templateObject_4$
|
|
12279
|
+
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; });
|
|
12280
|
+
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"])));
|
|
12281
|
+
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; });
|
|
12282
|
+
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; });
|
|
12283
12283
|
var Note = function (_a) {
|
|
12284
12284
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12285
|
-
return (jsxs$1(Container$
|
|
12285
|
+
return (jsxs$1(Container$s, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12286
12286
|
};
|
|
12287
|
-
var templateObject_1$
|
|
12287
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p, templateObject_4$g;
|
|
12288
12288
|
|
|
12289
12289
|
/* eslint-disable no-param-reassign */
|
|
12290
12290
|
var index$1 = function (breakpoints) {
|
|
@@ -12370,77 +12370,77 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12370
12370
|
literal: true,
|
|
12371
12371
|
});
|
|
12372
12372
|
|
|
12373
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12374
|
-
var Line = newStyled.div(templateObject_2$
|
|
12375
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12373
|
+
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; });
|
|
12374
|
+
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; });
|
|
12375
|
+
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({
|
|
12376
12376
|
flexDirection: ['column', 'row'],
|
|
12377
12377
|
}));
|
|
12378
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12378
|
+
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({
|
|
12379
12379
|
margin: ['0', '0 1.25rem'],
|
|
12380
12380
|
marginBottom: ['1.875rem', '0'],
|
|
12381
12381
|
alignItems: ['center', 'flex-start'],
|
|
12382
12382
|
textAlign: ['center', 'inherit'],
|
|
12383
12383
|
width: ['100%', 'inherit'],
|
|
12384
12384
|
}));
|
|
12385
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12385
|
+
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({
|
|
12386
12386
|
marginBottom: ['1.875rem', '0'],
|
|
12387
12387
|
width: ['auto', '1.375rem'],
|
|
12388
12388
|
}));
|
|
12389
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12389
|
+
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({
|
|
12390
12390
|
display: ['block', 'flex'],
|
|
12391
12391
|
}), function (_a) {
|
|
12392
12392
|
var theme = _a.theme;
|
|
12393
12393
|
return theme.colors.shades['700'].color;
|
|
12394
12394
|
});
|
|
12395
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12396
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
12395
|
+
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; });
|
|
12396
|
+
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; });
|
|
12397
12397
|
var DeliveryDetails = function (_a) {
|
|
12398
12398
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12399
12399
|
var theme = useTheme();
|
|
12400
12400
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12401
12401
|
};
|
|
12402
|
-
var templateObject_1$
|
|
12402
|
+
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;
|
|
12403
12403
|
|
|
12404
|
-
var Container$
|
|
12405
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12404
|
+
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"])));
|
|
12405
|
+
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; });
|
|
12406
12406
|
var ScrollToTop = function (_a) {
|
|
12407
12407
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12408
12408
|
var theme = useTheme();
|
|
12409
12409
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12410
|
-
return (jsxs$1(Container$
|
|
12410
|
+
return (jsxs$1(Container$r, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12411
12411
|
};
|
|
12412
|
-
var templateObject_1$
|
|
12412
|
+
var templateObject_1$F, templateObject_2$r;
|
|
12413
12413
|
|
|
12414
|
-
var Container$
|
|
12415
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12414
|
+
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"])));
|
|
12415
|
+
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; });
|
|
12416
12416
|
var OrderBar = function (_a) {
|
|
12417
12417
|
var message = _a.message;
|
|
12418
12418
|
var theme = useTheme();
|
|
12419
|
-
return (jsxs$1(Container$
|
|
12419
|
+
return (jsxs$1(Container$q, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
12420
12420
|
};
|
|
12421
|
-
var templateObject_1$
|
|
12421
|
+
var templateObject_1$E, templateObject_2$q;
|
|
12422
12422
|
|
|
12423
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12424
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12425
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12426
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12423
|
+
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; });
|
|
12424
|
+
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; });
|
|
12425
|
+
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; });
|
|
12426
|
+
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; });
|
|
12427
12427
|
var SizeTable = function (_a) {
|
|
12428
12428
|
var headers = _a.headers, data = _a.data;
|
|
12429
12429
|
var theme = useTheme();
|
|
12430
12430
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12431
12431
|
};
|
|
12432
|
-
var templateObject_1$
|
|
12432
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$n, templateObject_4$e;
|
|
12433
12433
|
|
|
12434
|
-
var Img = newStyled.img(templateObject_1$
|
|
12434
|
+
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; });
|
|
12435
12435
|
var Image = function (_a) {
|
|
12436
12436
|
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;
|
|
12437
12437
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12438
12438
|
};
|
|
12439
|
-
var templateObject_1$
|
|
12439
|
+
var templateObject_1$C;
|
|
12440
12440
|
|
|
12441
|
-
var Container$
|
|
12442
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
12443
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
12441
|
+
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"])));
|
|
12442
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12443
|
+
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({
|
|
12444
12444
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12445
12445
|
}));
|
|
12446
12446
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12463,7 +12463,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12463
12463
|
margin: '0.063rem 0',
|
|
12464
12464
|
});
|
|
12465
12465
|
});
|
|
12466
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12466
|
+
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) {
|
|
12467
12467
|
var withTag = _a.withTag; _a.theme;
|
|
12468
12468
|
return withTag
|
|
12469
12469
|
? mediaQueries({
|
|
@@ -12472,13 +12472,13 @@ var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = _
|
|
|
12472
12472
|
})
|
|
12473
12473
|
: 'justify-content: end';
|
|
12474
12474
|
});
|
|
12475
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12475
|
+
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"])));
|
|
12476
12476
|
var SimpleOrderItem = function (_a) {
|
|
12477
12477
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12478
12478
|
var theme = useTheme();
|
|
12479
|
-
return (jsxs$1(Container$
|
|
12479
|
+
return (jsxs$1(Container$p, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12480
12480
|
};
|
|
12481
|
-
var templateObject_1$
|
|
12481
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$9;
|
|
12482
12482
|
|
|
12483
12483
|
function formatDate(date) {
|
|
12484
12484
|
var day = date.getDate();
|
|
@@ -12487,40 +12487,40 @@ function formatDate(date) {
|
|
|
12487
12487
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12488
12488
|
}
|
|
12489
12489
|
|
|
12490
|
-
var Container$
|
|
12491
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12490
|
+
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"])));
|
|
12491
|
+
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({
|
|
12492
12492
|
fontSize: ['14px', '16px'],
|
|
12493
12493
|
lineHeight: ['22px', '24px'],
|
|
12494
12494
|
}));
|
|
12495
|
-
var Content = newStyled.div(templateObject_3$
|
|
12495
|
+
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({
|
|
12496
12496
|
flexDirection: ['column', 'row'],
|
|
12497
12497
|
}));
|
|
12498
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12498
|
+
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({
|
|
12499
12499
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12500
12500
|
}));
|
|
12501
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
12501
|
+
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({
|
|
12502
12502
|
fontSize: ['16px', '18px'],
|
|
12503
12503
|
lineHeight: ['24px', '28px'],
|
|
12504
12504
|
}));
|
|
12505
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
12505
|
+
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({
|
|
12506
12506
|
fontSize: ['14px', '16px'],
|
|
12507
12507
|
lineHeight: ['22px', '24px'],
|
|
12508
12508
|
}));
|
|
12509
|
-
var P$1 = newStyled.p(templateObject_7$
|
|
12509
|
+
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"])));
|
|
12510
12510
|
var Review = function (_a) {
|
|
12511
12511
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12512
12512
|
var theme = useTheme();
|
|
12513
|
-
return (jsxs$1(Container$
|
|
12513
|
+
return (jsxs$1(Container$o, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12514
12514
|
};
|
|
12515
|
-
var templateObject_1$
|
|
12515
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12516
12516
|
|
|
12517
|
-
var List = newStyled.ul(templateObject_1$
|
|
12518
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12519
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12520
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12521
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12522
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12523
|
-
var templateObject_1$
|
|
12517
|
+
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"])));
|
|
12518
|
+
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"])));
|
|
12519
|
+
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"])));
|
|
12520
|
+
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"])));
|
|
12521
|
+
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; });
|
|
12522
|
+
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; });
|
|
12523
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
12524
12524
|
|
|
12525
12525
|
var DropdownListIcons = function (_a) {
|
|
12526
12526
|
var items = _a.items;
|
|
@@ -12533,7 +12533,7 @@ var Dropdown = function (_a) {
|
|
|
12533
12533
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
12534
12534
|
};
|
|
12535
12535
|
|
|
12536
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12536
|
+
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; });
|
|
12537
12537
|
var AmazonButton = function (_a) {
|
|
12538
12538
|
var onClick = _a.onClick;
|
|
12539
12539
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12542,23 +12542,23 @@ var PaypalButton = function (_a) {
|
|
|
12542
12542
|
var onClick = _a.onClick;
|
|
12543
12543
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12544
12544
|
};
|
|
12545
|
-
var templateObject_1$
|
|
12545
|
+
var templateObject_1$y;
|
|
12546
12546
|
|
|
12547
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12548
|
-
var Col = newStyled.div(templateObject_2$
|
|
12549
|
-
var Row = newStyled.div(templateObject_3$
|
|
12547
|
+
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'); });
|
|
12548
|
+
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"])));
|
|
12549
|
+
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) {
|
|
12550
12550
|
return props.rightToLeft &&
|
|
12551
12551
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12552
12552
|
});
|
|
12553
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12554
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12555
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
12553
|
+
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; });
|
|
12554
|
+
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; });
|
|
12555
|
+
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; });
|
|
12556
12556
|
var CrossSellCheckbox = function (_a) {
|
|
12557
12557
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12558
12558
|
var theme = useTheme();
|
|
12559
12559
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12560
12560
|
};
|
|
12561
|
-
var templateObject_1$
|
|
12561
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
12562
12562
|
|
|
12563
12563
|
var index = /*#__PURE__*/Object.freeze({
|
|
12564
12564
|
__proto__: null,
|
|
@@ -12579,9 +12579,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12579
12579
|
height: height,
|
|
12580
12580
|
});
|
|
12581
12581
|
});
|
|
12582
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12583
|
-
var Container$
|
|
12584
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12582
|
+
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"])));
|
|
12583
|
+
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"])));
|
|
12584
|
+
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; });
|
|
12585
12585
|
var getStylesBySize = function (size) {
|
|
12586
12586
|
switch (size) {
|
|
12587
12587
|
case ComponentSize.Medium:
|
|
@@ -12607,10 +12607,11 @@ var getStylesBySize = function (size) {
|
|
|
12607
12607
|
};
|
|
12608
12608
|
}
|
|
12609
12609
|
};
|
|
12610
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12611
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_5$
|
|
12610
|
+
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"])));
|
|
12611
|
+
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"])));
|
|
12612
|
+
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12612
12613
|
var ProductItemMobile = function (_a) {
|
|
12613
|
-
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;
|
|
12614
|
+
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;
|
|
12614
12615
|
var theme = useTheme();
|
|
12615
12616
|
var styles = getStylesBySize(size);
|
|
12616
12617
|
var space = useMemo(function () {
|
|
@@ -12621,32 +12622,36 @@ var ProductItemMobile = function (_a) {
|
|
|
12621
12622
|
_a[ComponentSize.Small] = 2,
|
|
12622
12623
|
_a)[size];
|
|
12623
12624
|
}, [size]);
|
|
12624
|
-
|
|
12625
|
+
var PriceLabelDisplay = function () {
|
|
12626
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12627
|
+
};
|
|
12628
|
+
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12629
|
+
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));
|
|
12625
12630
|
};
|
|
12626
|
-
var templateObject_1$
|
|
12631
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
12627
12632
|
|
|
12628
|
-
var Container$
|
|
12633
|
+
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"])));
|
|
12629
12634
|
function withProductGrid(ProductItemComponent, data) {
|
|
12630
12635
|
function WithProductGrid(props) {
|
|
12631
|
-
return (jsx$1(Container$
|
|
12636
|
+
return (jsx$1(Container$m, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12632
12637
|
}
|
|
12633
12638
|
/* istanbul ignore next */
|
|
12634
12639
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12635
12640
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12636
12641
|
return WithProductGrid;
|
|
12637
12642
|
}
|
|
12638
|
-
var templateObject_1$
|
|
12643
|
+
var templateObject_1$v;
|
|
12639
12644
|
|
|
12640
12645
|
var Collection = {
|
|
12641
12646
|
ProductItemMobile: ProductItemMobile,
|
|
12642
12647
|
withProductGrid: withProductGrid,
|
|
12643
12648
|
};
|
|
12644
12649
|
|
|
12645
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12650
|
+
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) {
|
|
12646
12651
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12647
12652
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12648
12653
|
});
|
|
12649
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12654
|
+
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) {
|
|
12650
12655
|
var width = _a.width;
|
|
12651
12656
|
return width;
|
|
12652
12657
|
}, function (_a) {
|
|
@@ -12687,28 +12692,28 @@ var Drawer = function (_a) {
|
|
|
12687
12692
|
}, [isOpen, onClose, onOpen]);
|
|
12688
12693
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12689
12694
|
};
|
|
12690
|
-
var templateObject_1$
|
|
12695
|
+
var templateObject_1$u, templateObject_2$j;
|
|
12691
12696
|
|
|
12692
|
-
var Container$
|
|
12697
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12693
12698
|
var size = _a.size;
|
|
12694
12699
|
return (size ? size : '100%');
|
|
12695
12700
|
}, function (_a) {
|
|
12696
12701
|
var size = _a.size;
|
|
12697
12702
|
return (size ? size : '100%');
|
|
12698
12703
|
});
|
|
12699
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12704
|
+
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) {
|
|
12700
12705
|
var animationDuration = _a.animationDuration;
|
|
12701
12706
|
return animationDuration;
|
|
12702
12707
|
});
|
|
12703
12708
|
var Spinner = function (_a) {
|
|
12704
12709
|
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;
|
|
12705
|
-
return (jsx$1(Container$
|
|
12710
|
+
return (jsx$1(Container$l, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12706
12711
|
};
|
|
12707
|
-
var templateObject_1$
|
|
12712
|
+
var templateObject_1$t, templateObject_2$i;
|
|
12708
12713
|
|
|
12709
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12710
|
-
var LI = newStyled.li(templateObject_2$
|
|
12711
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12714
|
+
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"])));
|
|
12715
|
+
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; });
|
|
12716
|
+
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"])));
|
|
12712
12717
|
var Tags = function (_a) {
|
|
12713
12718
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12714
12719
|
var theme = useTheme();
|
|
@@ -12716,7 +12721,7 @@ var Tags = function (_a) {
|
|
|
12716
12721
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12717
12722
|
}) }), void 0));
|
|
12718
12723
|
};
|
|
12719
|
-
var templateObject_1$
|
|
12724
|
+
var templateObject_1$s, templateObject_2$h, templateObject_3$h;
|
|
12720
12725
|
|
|
12721
12726
|
function FilteringDropdown(_a) {
|
|
12722
12727
|
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;
|
|
@@ -12749,12 +12754,12 @@ function FilteringDropdown(_a) {
|
|
|
12749
12754
|
}) }, void 0)] }), void 0));
|
|
12750
12755
|
}
|
|
12751
12756
|
|
|
12752
|
-
var Container$
|
|
12753
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12754
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12757
|
+
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"])));
|
|
12758
|
+
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"])));
|
|
12759
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12755
12760
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12756
12761
|
}));
|
|
12757
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12762
|
+
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) {
|
|
12758
12763
|
var bold = _a.bold;
|
|
12759
12764
|
return (bold ? '700' : '500');
|
|
12760
12765
|
}, function (_a) {
|
|
@@ -12771,7 +12776,7 @@ var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
12771
12776
|
var background = _a.background;
|
|
12772
12777
|
return background || 'unset';
|
|
12773
12778
|
});
|
|
12774
|
-
var templateObject_1$
|
|
12779
|
+
var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$8;
|
|
12775
12780
|
|
|
12776
12781
|
var Pagination = function (_a) {
|
|
12777
12782
|
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;
|
|
@@ -12784,7 +12789,7 @@ var Pagination = function (_a) {
|
|
|
12784
12789
|
setPage(page);
|
|
12785
12790
|
onChange(page);
|
|
12786
12791
|
};
|
|
12787
|
-
return (jsxs$1(Container$
|
|
12792
|
+
return (jsxs$1(Container$k, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12788
12793
|
};
|
|
12789
12794
|
|
|
12790
12795
|
var PaginatorBlog = function (_a) {
|
|
@@ -12798,12 +12803,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12798
12803
|
setPage(page);
|
|
12799
12804
|
onChange(page);
|
|
12800
12805
|
};
|
|
12801
|
-
return (jsxs$1(Container$
|
|
12806
|
+
return (jsxs$1(Container$k, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
12802
12807
|
? theme.colors.shades['white'].color
|
|
12803
12808
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12804
12809
|
};
|
|
12805
12810
|
|
|
12806
|
-
var Container$
|
|
12811
|
+
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({
|
|
12807
12812
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12808
12813
|
}));
|
|
12809
12814
|
var Description$1 = newStyled.div({
|
|
@@ -12820,25 +12825,25 @@ var Description$1 = newStyled.div({
|
|
|
12820
12825
|
var ProductItem = function (_a) {
|
|
12821
12826
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12822
12827
|
var theme = useTheme();
|
|
12823
|
-
return (jsxs$1(Container$
|
|
12828
|
+
return (jsxs$1(Container$j, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12824
12829
|
};
|
|
12825
|
-
var templateObject_1$
|
|
12830
|
+
var templateObject_1$q;
|
|
12826
12831
|
|
|
12827
|
-
var Container$
|
|
12832
|
+
var Container$i = newStyled.div({
|
|
12828
12833
|
display: 'flex',
|
|
12829
12834
|
justifyContent: 'center',
|
|
12830
12835
|
padding: '1rem',
|
|
12831
12836
|
});
|
|
12832
12837
|
var Footer = function (_a) {
|
|
12833
12838
|
var text = _a.text, onClick = _a.onClick;
|
|
12834
|
-
return (jsx$1(Container$
|
|
12839
|
+
return (jsx$1(Container$i, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12835
12840
|
};
|
|
12836
12841
|
|
|
12837
12842
|
var Ul = newStyled.ul({
|
|
12838
12843
|
margin: '0px',
|
|
12839
12844
|
padding: '0px',
|
|
12840
12845
|
});
|
|
12841
|
-
var Li = newStyled.li(templateObject_1$
|
|
12846
|
+
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({
|
|
12842
12847
|
padding: [0, '0rem 1rem'],
|
|
12843
12848
|
borderRadius: [0, '0.5rem'],
|
|
12844
12849
|
}));
|
|
@@ -12850,20 +12855,20 @@ var Anchor = newStyled.a({
|
|
|
12850
12855
|
padding: 0,
|
|
12851
12856
|
textDecoration: 'none',
|
|
12852
12857
|
});
|
|
12853
|
-
var Container$
|
|
12858
|
+
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({
|
|
12854
12859
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12855
12860
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12856
12861
|
borderRadius: ['0', '0.5rem'],
|
|
12857
12862
|
}));
|
|
12858
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12863
|
+
var Header$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12859
12864
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12860
12865
|
}));
|
|
12861
12866
|
var ResultsPanel = function (_a) {
|
|
12862
12867
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12863
12868
|
var theme = useTheme();
|
|
12864
|
-
return (jsxs$1(Container$
|
|
12869
|
+
return (jsxs$1(Container$h, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12865
12870
|
};
|
|
12866
|
-
var templateObject_1$
|
|
12871
|
+
var templateObject_1$p, templateObject_2$f, templateObject_3$f;
|
|
12867
12872
|
|
|
12868
12873
|
var Input = newStyled.input(function (props) { return ({
|
|
12869
12874
|
padding: props.theme.component.input.padding,
|
|
@@ -12894,7 +12899,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12894
12899
|
},
|
|
12895
12900
|
}); });
|
|
12896
12901
|
|
|
12897
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12902
|
+
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({
|
|
12898
12903
|
right: ['1rem', '7.75rem'],
|
|
12899
12904
|
top: ['0.75rem', '0.75rem'],
|
|
12900
12905
|
}));
|
|
@@ -12903,7 +12908,7 @@ var ClearButton = function (_a) {
|
|
|
12903
12908
|
var theme = useTheme();
|
|
12904
12909
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12905
12910
|
};
|
|
12906
|
-
var templateObject_1$
|
|
12911
|
+
var templateObject_1$o;
|
|
12907
12912
|
|
|
12908
12913
|
var useOnClickOutside = function (ref, handler) {
|
|
12909
12914
|
useEffect(function () {
|
|
@@ -12992,7 +12997,7 @@ var reducer = function (state, action) {
|
|
|
12992
12997
|
}
|
|
12993
12998
|
}
|
|
12994
12999
|
};
|
|
12995
|
-
var Container$
|
|
13000
|
+
var Container$g = newStyled.div({
|
|
12996
13001
|
position: 'relative',
|
|
12997
13002
|
display: 'flex',
|
|
12998
13003
|
});
|
|
@@ -13028,7 +13033,7 @@ var SearchBar = function (_a) {
|
|
|
13028
13033
|
onClose();
|
|
13029
13034
|
}
|
|
13030
13035
|
};
|
|
13031
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13036
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$g, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13032
13037
|
if (e.key === 'Enter') {
|
|
13033
13038
|
e.preventDefault();
|
|
13034
13039
|
e.stopPropagation();
|
|
@@ -13302,40 +13307,40 @@ function useSwipeable(options) {
|
|
|
13302
13307
|
return handlers;
|
|
13303
13308
|
}
|
|
13304
13309
|
|
|
13305
|
-
var Container$
|
|
13310
|
+
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) {
|
|
13306
13311
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13307
13312
|
return borderRadiusVariant &&
|
|
13308
13313
|
"\n border-radius: 40px;\n ";
|
|
13309
13314
|
});
|
|
13310
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13311
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13315
|
+
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'); });
|
|
13316
|
+
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"])));
|
|
13312
13317
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13313
13318
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13314
|
-
return (jsxs$1(Container$
|
|
13319
|
+
return (jsxs$1(Container$f, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
13315
13320
|
});
|
|
13316
|
-
var templateObject_1$
|
|
13321
|
+
var templateObject_1$n, templateObject_2$e, templateObject_3$e;
|
|
13317
13322
|
|
|
13318
|
-
var Button = newStyled.button(templateObject_1$
|
|
13323
|
+
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"])));
|
|
13319
13324
|
var ArrowButton = function (_a) {
|
|
13320
13325
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13321
13326
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13322
13327
|
};
|
|
13323
|
-
var templateObject_1$
|
|
13328
|
+
var templateObject_1$m;
|
|
13324
13329
|
|
|
13325
|
-
var Container$
|
|
13330
|
+
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"])));
|
|
13326
13331
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13327
13332
|
var SlideDots = function (_a) {
|
|
13328
13333
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13329
13334
|
var theme = useTheme();
|
|
13330
|
-
return (jsx$1(Container$
|
|
13335
|
+
return (jsx$1(Container$e, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13331
13336
|
? theme.colors.shades.white.color
|
|
13332
13337
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13333
13338
|
};
|
|
13334
|
-
var templateObject_1$
|
|
13339
|
+
var templateObject_1$l;
|
|
13335
13340
|
|
|
13336
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13337
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13338
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13341
|
+
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"])));
|
|
13342
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13343
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13339
13344
|
var SlideNavigation = function (_a) {
|
|
13340
13345
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13341
13346
|
var theme = useTheme();
|
|
@@ -13347,9 +13352,9 @@ var SlideNavigation = function (_a) {
|
|
|
13347
13352
|
onNavigate(selectedIndex + 1);
|
|
13348
13353
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13349
13354
|
};
|
|
13350
|
-
var templateObject_1$
|
|
13355
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$d;
|
|
13351
13356
|
|
|
13352
|
-
var Container$
|
|
13357
|
+
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"])));
|
|
13353
13358
|
var ProductGalleryMobile = function (_a) {
|
|
13354
13359
|
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;
|
|
13355
13360
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13371,9 +13376,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13371
13376
|
useEffect(function () {
|
|
13372
13377
|
setSelectedImage(images[index]);
|
|
13373
13378
|
}, [index, images]);
|
|
13374
|
-
return (jsxs$1(Container$
|
|
13379
|
+
return (jsxs$1(Container$d, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13375
13380
|
};
|
|
13376
|
-
var templateObject_1$
|
|
13381
|
+
var templateObject_1$j;
|
|
13377
13382
|
|
|
13378
13383
|
var Portal = function (_a) {
|
|
13379
13384
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13506,17 +13511,17 @@ var react = __toCommonJS(react_exports);
|
|
|
13506
13511
|
var visibleStyle = function (_a) {
|
|
13507
13512
|
var opened = _a.opened;
|
|
13508
13513
|
return opened
|
|
13509
|
-
? css(templateObject_1$
|
|
13514
|
+
? 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 "])));
|
|
13510
13515
|
};
|
|
13511
13516
|
var transformStyle = function (_a) {
|
|
13512
13517
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13513
13518
|
return opened
|
|
13514
|
-
? css(templateObject_3$
|
|
13519
|
+
? 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%)');
|
|
13515
13520
|
};
|
|
13516
|
-
var Container$
|
|
13521
|
+
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({
|
|
13517
13522
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13518
13523
|
}), visibleStyle, transformStyle);
|
|
13519
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
13524
|
+
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);
|
|
13520
13525
|
var Modal = function (_a) {
|
|
13521
13526
|
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;
|
|
13522
13527
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -13526,7 +13531,7 @@ var Modal = function (_a) {
|
|
|
13526
13531
|
}
|
|
13527
13532
|
close();
|
|
13528
13533
|
};
|
|
13529
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13534
|
+
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));
|
|
13530
13535
|
};
|
|
13531
13536
|
var modalEvent = function (id, detail) {
|
|
13532
13537
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13554,39 +13559,39 @@ var useModal = function (id) {
|
|
|
13554
13559
|
close: close,
|
|
13555
13560
|
}); }, [close, open, opened]);
|
|
13556
13561
|
};
|
|
13557
|
-
var templateObject_1$
|
|
13562
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
|
|
13558
13563
|
|
|
13559
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13564
|
+
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; });
|
|
13560
13565
|
var Title$1 = function (_a) {
|
|
13561
13566
|
var title = _a.title;
|
|
13562
13567
|
var theme = useTheme();
|
|
13563
13568
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13564
13569
|
};
|
|
13565
|
-
var templateObject_1$
|
|
13570
|
+
var templateObject_1$h;
|
|
13566
13571
|
|
|
13567
|
-
var P = newStyled.p(templateObject_1$
|
|
13572
|
+
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; });
|
|
13568
13573
|
var Promo = function (_a) {
|
|
13569
13574
|
var text = _a.text;
|
|
13570
13575
|
var theme = useTheme();
|
|
13571
13576
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13572
13577
|
};
|
|
13573
|
-
var templateObject_1$
|
|
13578
|
+
var templateObject_1$g;
|
|
13574
13579
|
|
|
13575
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13580
|
+
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; });
|
|
13576
13581
|
var Description = function (_a) {
|
|
13577
13582
|
var text = _a.text;
|
|
13578
13583
|
var theme = useTheme();
|
|
13579
13584
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13580
13585
|
};
|
|
13581
|
-
var templateObject_1$
|
|
13586
|
+
var templateObject_1$f;
|
|
13582
13587
|
|
|
13583
|
-
var Container$
|
|
13588
|
+
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"); });
|
|
13584
13589
|
var CloseButton = function (_a) {
|
|
13585
13590
|
var onClick = _a.onClick, size = _a.size;
|
|
13586
13591
|
var theme = useTheme();
|
|
13587
|
-
return (jsx$1(Container$
|
|
13592
|
+
return (jsx$1(Container$b, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13588
13593
|
};
|
|
13589
|
-
var templateObject_1$
|
|
13594
|
+
var templateObject_1$e;
|
|
13590
13595
|
|
|
13591
13596
|
var CartProductItem = {
|
|
13592
13597
|
Title: Title$1,
|
|
@@ -13596,10 +13601,10 @@ var CartProductItem = {
|
|
|
13596
13601
|
CloseButton: CloseButton,
|
|
13597
13602
|
};
|
|
13598
13603
|
|
|
13599
|
-
var Container$
|
|
13600
|
-
var Item = newStyled.span(templateObject_2$
|
|
13601
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13602
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13604
|
+
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; });
|
|
13605
|
+
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"])));
|
|
13606
|
+
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"])));
|
|
13607
|
+
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"])));
|
|
13603
13608
|
var QuantityPicker = function (_a) {
|
|
13604
13609
|
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;
|
|
13605
13610
|
var theme = useTheme();
|
|
@@ -13622,9 +13627,9 @@ var QuantityPicker = function (_a) {
|
|
|
13622
13627
|
return clamp(value);
|
|
13623
13628
|
});
|
|
13624
13629
|
}, [value, clamp]);
|
|
13625
|
-
return (jsxs$1(Container$
|
|
13630
|
+
return (jsxs$1(Container$a, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13626
13631
|
};
|
|
13627
|
-
var templateObject_1$
|
|
13632
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6;
|
|
13628
13633
|
|
|
13629
13634
|
var htmlReactParser = {exports: {}};
|
|
13630
13635
|
|
|
@@ -17405,17 +17410,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17405
17410
|
HTMLReactParser$1.attributesToProps;
|
|
17406
17411
|
HTMLReactParser$1.Element;
|
|
17407
17412
|
|
|
17408
|
-
var Container$
|
|
17409
|
-
var Card = newStyled.div(templateObject_2$
|
|
17410
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17411
|
-
var Label = newStyled.div(templateObject_4$
|
|
17412
|
-
var Check = newStyled.div(templateObject_5$
|
|
17413
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
17414
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17415
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17413
|
+
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"])));
|
|
17414
|
+
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"])));
|
|
17415
|
+
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"])));
|
|
17416
|
+
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"])));
|
|
17417
|
+
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"])));
|
|
17418
|
+
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"])));
|
|
17419
|
+
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"])));
|
|
17420
|
+
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"])));
|
|
17416
17421
|
var PackSelector = function (_a) {
|
|
17417
17422
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
17418
|
-
return (jsx$1(Container$
|
|
17423
|
+
return (jsx$1(Container$9, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17419
17424
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
17420
17425
|
}) }), void 0));
|
|
17421
17426
|
};
|
|
@@ -17432,30 +17437,30 @@ var PackCard = function (_a) {
|
|
|
17432
17437
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17433
17438
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxs$1(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
17434
17439
|
};
|
|
17435
|
-
var templateObject_1$
|
|
17440
|
+
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;
|
|
17436
17441
|
|
|
17437
|
-
var Title = newStyled.div(templateObject_1$
|
|
17438
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17439
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17442
|
+
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; });
|
|
17443
|
+
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; });
|
|
17444
|
+
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"])));
|
|
17440
17445
|
var Accordion = function (_a) {
|
|
17441
17446
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
17442
17447
|
var theme = useTheme();
|
|
17443
17448
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
17444
17449
|
return (jsxs$1("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17445
17450
|
};
|
|
17446
|
-
var templateObject_1$
|
|
17447
|
-
|
|
17448
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17449
|
-
var Header = newStyled.div(templateObject_2$
|
|
17450
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17451
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17452
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
17453
|
-
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; });
|
|
17454
|
-
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"])));
|
|
17455
|
-
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; });
|
|
17451
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9;
|
|
17452
|
+
|
|
17453
|
+
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; });
|
|
17454
|
+
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"])));
|
|
17455
|
+
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"])));
|
|
17456
|
+
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"])));
|
|
17457
|
+
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; });
|
|
17458
|
+
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; });
|
|
17459
|
+
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"])));
|
|
17460
|
+
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; });
|
|
17456
17461
|
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"])));
|
|
17457
17462
|
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"])));
|
|
17458
|
-
var templateObject_1$
|
|
17463
|
+
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;
|
|
17459
17464
|
|
|
17460
17465
|
var Filters = function (_a) {
|
|
17461
17466
|
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;
|
|
@@ -17556,20 +17561,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17556
17561
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
|
|
17557
17562
|
};
|
|
17558
17563
|
|
|
17559
|
-
var Container$
|
|
17560
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17561
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17562
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17563
|
-
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"])));
|
|
17564
|
+
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"])));
|
|
17565
|
+
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"])));
|
|
17566
|
+
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"])));
|
|
17567
|
+
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"])));
|
|
17568
|
+
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"])));
|
|
17564
17569
|
var SearchNavigation = function (_a) {
|
|
17565
17570
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17566
|
-
return (jsxs$1(Container$
|
|
17571
|
+
return (jsxs$1(Container$8, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17567
17572
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17568
17573
|
}) }, void 0)] }, void 0));
|
|
17569
17574
|
};
|
|
17570
|
-
var templateObject_1$
|
|
17575
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7, templateObject_4$3, templateObject_5$1;
|
|
17571
17576
|
|
|
17572
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17577
|
+
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) {
|
|
17573
17578
|
var titleSize = _a.titleSize;
|
|
17574
17579
|
return titleSize;
|
|
17575
17580
|
}, function (_a) {
|
|
@@ -17586,15 +17591,15 @@ var Tab = function (_a) {
|
|
|
17586
17591
|
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;
|
|
17587
17592
|
return (jsx$1(Fragment$1, { children: jsx$1(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));
|
|
17588
17593
|
};
|
|
17589
|
-
var templateObject_1$
|
|
17594
|
+
var templateObject_1$8;
|
|
17590
17595
|
|
|
17591
|
-
var Container$
|
|
17592
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17596
|
+
var Container$7 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17597
|
+
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) {
|
|
17593
17598
|
var backgroundColor = _a.backgroundColor;
|
|
17594
17599
|
return backgroundColor;
|
|
17595
17600
|
});
|
|
17596
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17597
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17601
|
+
var TabContent = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17602
|
+
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"])));
|
|
17598
17603
|
var Tabs = function (_a) {
|
|
17599
17604
|
var _b;
|
|
17600
17605
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17603,11 +17608,11 @@ var Tabs = function (_a) {
|
|
|
17603
17608
|
return null;
|
|
17604
17609
|
}
|
|
17605
17610
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17606
|
-
return (jsxs$1(Container$
|
|
17611
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17607
17612
|
};
|
|
17608
|
-
var templateObject_1$
|
|
17613
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$2;
|
|
17609
17614
|
|
|
17610
|
-
var Container$
|
|
17615
|
+
var Container$6 = newStyled.div(function (props) { return ({
|
|
17611
17616
|
height: 'auto',
|
|
17612
17617
|
textAlign: 'center',
|
|
17613
17618
|
justifyContent: 'center',
|
|
@@ -17657,12 +17662,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17657
17662
|
textAlign: 'center',
|
|
17658
17663
|
lineHeight: '18px',
|
|
17659
17664
|
};
|
|
17660
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
17665
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$6, __assign$1({ textPosition: iconTitlePosition }, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsx$1(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));
|
|
17661
17666
|
};
|
|
17662
17667
|
|
|
17663
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17664
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17665
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17668
|
+
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"])));
|
|
17669
|
+
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"])));
|
|
17670
|
+
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"])));
|
|
17666
17671
|
var ImageVideo = function (_a) {
|
|
17667
17672
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17668
17673
|
var video = useRef(null);
|
|
@@ -17682,12 +17687,12 @@ var ImageVideo = function (_a) {
|
|
|
17682
17687
|
height: '100%',
|
|
17683
17688
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17684
17689
|
};
|
|
17685
|
-
var templateObject_1$
|
|
17690
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5;
|
|
17686
17691
|
|
|
17687
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17688
|
-
var ContainerMobile = css(templateObject_2$
|
|
17689
|
-
var Container$
|
|
17690
|
-
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"])));
|
|
17692
|
+
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"])));
|
|
17693
|
+
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"])));
|
|
17694
|
+
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);
|
|
17695
|
+
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"])));
|
|
17691
17696
|
var TextWithImage = function (_a) {
|
|
17692
17697
|
var _b, _c, _d, _e;
|
|
17693
17698
|
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"]);
|
|
@@ -17707,7 +17712,7 @@ var TextWithImage = function (_a) {
|
|
|
17707
17712
|
// @ts-ignore
|
|
17708
17713
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17709
17714
|
};
|
|
17710
|
-
return (jsxs(Container$
|
|
17715
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17711
17716
|
backgroundColor: props.btnBGColor,
|
|
17712
17717
|
color: '#ffffff',
|
|
17713
17718
|
border: props.btnBGColor,
|
|
@@ -17717,9 +17722,9 @@ var TextWithImage = function (_a) {
|
|
|
17717
17722
|
},
|
|
17718
17723
|
} }, 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));
|
|
17719
17724
|
};
|
|
17720
|
-
var templateObject_1$
|
|
17725
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$1;
|
|
17721
17726
|
|
|
17722
|
-
var Container$
|
|
17727
|
+
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"])));
|
|
17723
17728
|
var AccordionOptions = function (_a) {
|
|
17724
17729
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17725
17730
|
var _b = useState({
|
|
@@ -17732,7 +17737,7 @@ var AccordionOptions = function (_a) {
|
|
|
17732
17737
|
}
|
|
17733
17738
|
return false;
|
|
17734
17739
|
};
|
|
17735
|
-
return (jsx$1(Container$
|
|
17740
|
+
return (jsx$1(Container$4, { children: accordions.map(function (accordion, index) {
|
|
17736
17741
|
var forceOpenValue = getForceOpen(index);
|
|
17737
17742
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17738
17743
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17743,9 +17748,9 @@ var AccordionOptions = function (_a) {
|
|
|
17743
17748
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17744
17749
|
}) }, void 0));
|
|
17745
17750
|
};
|
|
17746
|
-
var templateObject_1$
|
|
17751
|
+
var templateObject_1$4;
|
|
17747
17752
|
|
|
17748
|
-
var Container$
|
|
17753
|
+
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) {
|
|
17749
17754
|
var alignCenter = _a.alignCenter;
|
|
17750
17755
|
return alignCenter &&
|
|
17751
17756
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17755,14 +17760,14 @@ var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __ma
|
|
|
17755
17760
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17756
17761
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17757
17762
|
});
|
|
17758
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17759
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17763
|
+
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"])));
|
|
17764
|
+
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"])));
|
|
17760
17765
|
var ShortBanner = function (_a) {
|
|
17761
17766
|
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;
|
|
17762
17767
|
var theme = useTheme();
|
|
17763
|
-
return (jsxs$1(Container$
|
|
17768
|
+
return (jsxs$1(Container$3, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17764
17769
|
};
|
|
17765
|
-
var templateObject_1$
|
|
17770
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
17766
17771
|
|
|
17767
17772
|
/* base styles & size variants */
|
|
17768
17773
|
var UserInfoTextStyles = {
|
|
@@ -17778,9 +17783,9 @@ var UserInfoTextStyles = {
|
|
|
17778
17783
|
},
|
|
17779
17784
|
};
|
|
17780
17785
|
|
|
17781
|
-
var Container$
|
|
17782
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17783
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17786
|
+
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;'); });
|
|
17787
|
+
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'); });
|
|
17788
|
+
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'); });
|
|
17784
17789
|
var UserInfoText = newStyled.div(function (_a) {
|
|
17785
17790
|
var theme = _a.theme, isMobile = _a.isMobile, alignCenter = _a.alignCenter;
|
|
17786
17791
|
return [
|
|
@@ -17791,13 +17796,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17791
17796
|
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;
|
|
17792
17797
|
var theme = useTheme();
|
|
17793
17798
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17794
|
-
return (jsxs$1(Container$
|
|
17799
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxs$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile }, { children: jsx$1(Image, { borderRadius: "20px", src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ isMobile: isMobile }, { children: jsx$1(Image, { borderRadius: "20px", src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, isMobile: isMobile, alignCenter: alignCenter }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17795
17800
|
};
|
|
17796
|
-
var templateObject_1$
|
|
17801
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
17797
17802
|
|
|
17798
|
-
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'); });
|
|
17799
|
-
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'); });
|
|
17800
|
-
var StyledTitle = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17803
|
+
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'); });
|
|
17804
|
+
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'); });
|
|
17805
|
+
var StyledTitle = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17801
17806
|
var titlePosition = _a.titlePosition;
|
|
17802
17807
|
return titlePosition == 'center' &&
|
|
17803
17808
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17805,9 +17810,49 @@ var StyledTitle = newStyled.div(templateObject_3 || (templateObject_3 = __makeTe
|
|
|
17805
17810
|
var ImageCardWithDescription = function (_a) {
|
|
17806
17811
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17807
17812
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17808
|
-
return (jsxs$1(Container, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17813
|
+
return (jsxs$1(Container$1, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17814
|
+
};
|
|
17815
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
17816
|
+
|
|
17817
|
+
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"])));
|
|
17818
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17819
|
+
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; });
|
|
17820
|
+
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'); });
|
|
17821
|
+
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'); });
|
|
17822
|
+
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) {
|
|
17823
|
+
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
17824
|
+
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
17825
|
+
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)'); });
|
|
17826
|
+
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; });
|
|
17827
|
+
var TrackingProgress = function (_a) {
|
|
17828
|
+
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
17829
|
+
var theme = useTheme();
|
|
17830
|
+
var fillSpaces = amountOfCheckPoints - checkPoints.length;
|
|
17831
|
+
if (fillSpaces < 0) {
|
|
17832
|
+
console.error('Invalid amount of total checkpoints', amountOfCheckPoints, checkPoints.length);
|
|
17833
|
+
fillSpaces = 0;
|
|
17834
|
+
}
|
|
17835
|
+
var statusSpaces = [47, 39, 31, 30];
|
|
17836
|
+
var emptySpaces = !fillSpaces ? [] : new Array(fillSpaces).fill({});
|
|
17837
|
+
var getCurrentSpace = function (index) {
|
|
17838
|
+
if (!fillSpaces && index + 1 === checkPoints.length) {
|
|
17839
|
+
return '0';
|
|
17840
|
+
}
|
|
17841
|
+
if (statusSpaces[index]) {
|
|
17842
|
+
return "".concat(statusSpaces[index], "px");
|
|
17843
|
+
}
|
|
17844
|
+
return '30px';
|
|
17845
|
+
};
|
|
17846
|
+
return (jsxs$1(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17847
|
+
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17848
|
+
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
17849
|
+
? theme.colors.semantic.informative.color
|
|
17850
|
+
: theme.colors.semantic.positive.color, firstElement: index === 0 }, { children: jsx$1(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), index + 1 === checkPoints.length && !fillSpaces && (jsx$1(LastCheckpointTrack, { backgroundColor: theme.colors.semantic.positive.color }, void 0)), index + 1 === checkPoints.length && !!fillSpaces && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color, firstElement: index === 0, lastElement: fillSpaces === 1 }, { children: jsx$1(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), jsx$1(CheckpointStatus, __assign$1({ finishedTrack: !fillSpaces && index + 1 === checkPoints.length, finishedTrackColor: theme.colors.semantic.positive.color }, { children: statusMessage }), void 0)] }), statusMessage));
|
|
17851
|
+
}), emptySpaces.map(function (element, index) {
|
|
17852
|
+
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
17853
|
+
})] }), void 0));
|
|
17809
17854
|
};
|
|
17810
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
17855
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
17811
17856
|
|
|
17812
|
-
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17857
|
+
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17813
17858
|
//# sourceMappingURL=index.esm.js.map
|