@trafilea/afrodita-components 5.0.0-beta.153 → 5.0.0-beta.155
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 +28 -3
- package/build/index.esm.js +451 -422
- package/build/index.esm.js.map +1 -1
- package/build/index.js +452 -422
- 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$1l || (templateObject_1$1l = __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$1l;
|
|
4031
4031
|
|
|
4032
|
-
var Body = newStyled.div(templateObject_1$
|
|
4032
|
+
var Body = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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$1k;
|
|
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$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
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;";
|
|
@@ -4194,14 +4194,14 @@ var Container$R = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
4194
4194
|
var Card$1 = function (_a) {
|
|
4195
4195
|
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;
|
|
4196
4196
|
var theme = useTheme();
|
|
4197
|
-
return (jsx$1(Container$
|
|
4197
|
+
return (jsx$1(Container$S, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4198
4198
|
};
|
|
4199
4199
|
var Card$2 = Object.assign(Card$1, {
|
|
4200
4200
|
Header: CardHeader,
|
|
4201
4201
|
Footer: CardFooter,
|
|
4202
4202
|
Body: CardBody,
|
|
4203
4203
|
});
|
|
4204
|
-
var templateObject_1$
|
|
4204
|
+
var templateObject_1$1j;
|
|
4205
4205
|
|
|
4206
4206
|
var Fragment = Fragment$1;
|
|
4207
4207
|
function jsx(type, props, key) {
|
|
@@ -4343,7 +4343,7 @@ function BaseSelectOption(_a) {
|
|
|
4343
4343
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4344
4344
|
}
|
|
4345
4345
|
|
|
4346
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4346
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4347
4347
|
function BaseSelect(_a) {
|
|
4348
4348
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4349
4349
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4353,7 +4353,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4353
4353
|
Options: BaseSelectOptions,
|
|
4354
4354
|
Option: BaseSelectOption,
|
|
4355
4355
|
});
|
|
4356
|
-
var templateObject_1$
|
|
4356
|
+
var templateObject_1$1i;
|
|
4357
4357
|
|
|
4358
4358
|
var CustomButton = newStyled.button(function (_a) {
|
|
4359
4359
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4568,12 +4568,12 @@ var CustomCheckboxStyles = {
|
|
|
4568
4568
|
},
|
|
4569
4569
|
};
|
|
4570
4570
|
|
|
4571
|
-
var Container$
|
|
4571
|
+
var Container$R = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4572
4572
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4573
4573
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4574
4574
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4575
4575
|
]; });
|
|
4576
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4576
|
+
var Input$3 = newStyled.input(templateObject_2$S || (templateObject_2$S = __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) {
|
|
4577
4577
|
var disabled = _a.disabled;
|
|
4578
4578
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4579
4579
|
});
|
|
@@ -4602,9 +4602,9 @@ var Checkbox = function (_a) {
|
|
|
4602
4602
|
useEffect(function () {
|
|
4603
4603
|
mounted.current = true;
|
|
4604
4604
|
}, []);
|
|
4605
|
-
return (jsxs$1(Container$
|
|
4605
|
+
return (jsxs$1(Container$R, { 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));
|
|
4606
4606
|
};
|
|
4607
|
-
var templateObject_1$
|
|
4607
|
+
var templateObject_1$1h, templateObject_2$S;
|
|
4608
4608
|
|
|
4609
4609
|
var CustomOption = newStyled.li(function (_a) {
|
|
4610
4610
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4683,10 +4683,10 @@ function SimpleDropdown(_a) {
|
|
|
4683
4683
|
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));
|
|
4684
4684
|
}
|
|
4685
4685
|
|
|
4686
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4687
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4688
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4689
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4686
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4687
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$R || (templateObject_2$R = __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; });
|
|
4688
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
4689
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
4690
4690
|
var DropdownDialog = function (_a) {
|
|
4691
4691
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4692
4692
|
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) {
|
|
@@ -4694,7 +4694,7 @@ var DropdownDialog = function (_a) {
|
|
|
4694
4694
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4695
4695
|
}) }), void 0) }), void 0));
|
|
4696
4696
|
};
|
|
4697
|
-
var templateObject_1$
|
|
4697
|
+
var templateObject_1$1g, templateObject_2$R, templateObject_3$F, templateObject_4$t;
|
|
4698
4698
|
|
|
4699
4699
|
var getStylesBySize$9 = function (size, theme) {
|
|
4700
4700
|
switch (size) {
|
|
@@ -4762,26 +4762,26 @@ var SelectorSecondary = function (_a) {
|
|
|
4762
4762
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4763
4763
|
// `variants` styles that are consistent through all themes.
|
|
4764
4764
|
var TAGS = {
|
|
4765
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4766
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4767
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4768
|
-
display1: newStyled.h1(templateObject_4$
|
|
4769
|
-
display2: newStyled.h2(templateObject_5$
|
|
4770
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4771
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4772
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4773
|
-
heading4: newStyled.h4(templateObject_9$
|
|
4774
|
-
heading5: newStyled.h5(templateObject_10$
|
|
4775
|
-
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
4776
|
-
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
4777
|
-
link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4778
|
-
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4779
|
-
pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4780
|
-
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4765
|
+
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
4766
|
+
hero2: newStyled.h2(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject([""], [""]))),
|
|
4767
|
+
hero3: newStyled.h3(templateObject_3$E || (templateObject_3$E = __makeTemplateObject([""], [""]))),
|
|
4768
|
+
display1: newStyled.h1(templateObject_4$s || (templateObject_4$s = __makeTemplateObject([""], [""]))),
|
|
4769
|
+
display2: newStyled.h2(templateObject_5$h || (templateObject_5$h = __makeTemplateObject([""], [""]))),
|
|
4770
|
+
heading1: newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject([""], [""]))),
|
|
4771
|
+
heading2: newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject([""], [""]))),
|
|
4772
|
+
heading3: newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject([""], [""]))),
|
|
4773
|
+
heading4: newStyled.h4(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject([""], [""]))),
|
|
4774
|
+
heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
|
|
4775
|
+
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
body: newStyled.p(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
link: newStyled.a(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4778
|
+
button: newStyled.span(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4779
|
+
pricing: newStyled.span(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4780
|
+
label: newStyled.label(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4781
4781
|
var theme = _a.theme;
|
|
4782
4782
|
return theme.component.label.color;
|
|
4783
4783
|
}),
|
|
4784
|
-
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4784
|
+
tag: newStyled.span(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4785
4785
|
};
|
|
4786
4786
|
var Text$6 = function (_a) {
|
|
4787
4787
|
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
@@ -4888,9 +4888,9 @@ var DEFAULTS = {
|
|
|
4888
4888
|
size: 'regular',
|
|
4889
4889
|
},
|
|
4890
4890
|
};
|
|
4891
|
-
var templateObject_1$
|
|
4891
|
+
var templateObject_1$1f, templateObject_2$Q, templateObject_3$E, templateObject_4$s, templateObject_5$h, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
|
|
4892
4892
|
|
|
4893
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4893
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4894
4894
|
var inline = _a.inline;
|
|
4895
4895
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4896
4896
|
});
|
|
@@ -4909,7 +4909,7 @@ var SizeSelector = function (_a) {
|
|
|
4909
4909
|
}, 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, showNoStockStyles: size.noStock }, size.label));
|
|
4910
4910
|
}) }), void 0)] }), void 0));
|
|
4911
4911
|
};
|
|
4912
|
-
var templateObject_1$
|
|
4912
|
+
var templateObject_1$1e;
|
|
4913
4913
|
|
|
4914
4914
|
var getStylesBySize$8 = function (size) {
|
|
4915
4915
|
switch (size) {
|
|
@@ -4936,7 +4936,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4936
4936
|
} });
|
|
4937
4937
|
};
|
|
4938
4938
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4939
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4939
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1d || (templateObject_1$1d = __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));
|
|
4940
4940
|
};
|
|
4941
4941
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4942
4942
|
if (disabled)
|
|
@@ -4952,16 +4952,16 @@ var TextButton = function (_a) {
|
|
|
4952
4952
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4953
4953
|
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));
|
|
4954
4954
|
};
|
|
4955
|
-
var templateObject_1$
|
|
4955
|
+
var templateObject_1$1d;
|
|
4956
4956
|
|
|
4957
|
-
var Container$
|
|
4958
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4959
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4957
|
+
var Container$Q = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4958
|
+
var P$2 = newStyled.p(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4959
|
+
var PercentageSpan = newStyled.span(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
4960
4960
|
var SizeFitGuide = function (_a) {
|
|
4961
4961
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4962
|
-
return (jsxs$1(Container$
|
|
4962
|
+
return (jsxs$1(Container$Q, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$2, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4963
4963
|
};
|
|
4964
|
-
var templateObject_1$
|
|
4964
|
+
var templateObject_1$1c, templateObject_2$P, templateObject_3$D;
|
|
4965
4965
|
|
|
4966
4966
|
var getStylesBySize$7 = function (size) {
|
|
4967
4967
|
switch (size) {
|
|
@@ -4991,7 +4991,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
4991
4991
|
};
|
|
4992
4992
|
}
|
|
4993
4993
|
};
|
|
4994
|
-
var Container$
|
|
4994
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
4995
4995
|
var backgroundColor = _a.backgroundColor;
|
|
4996
4996
|
return backgroundColor;
|
|
4997
4997
|
}, function (_a) {
|
|
@@ -5013,7 +5013,7 @@ var Container$O = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
5013
5013
|
var size = _a.size;
|
|
5014
5014
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5015
5015
|
});
|
|
5016
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5016
|
+
var H3$1 = newStyled.h3(templateObject_2$O || (templateObject_2$O = __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) {
|
|
5017
5017
|
var textColor = _a.textColor;
|
|
5018
5018
|
return textColor;
|
|
5019
5019
|
}, function (_a) {
|
|
@@ -5028,9 +5028,9 @@ var H3$1 = newStyled.h3(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5028
5028
|
var DiscountTag = function (_a) {
|
|
5029
5029
|
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;
|
|
5030
5030
|
var theme = useTheme();
|
|
5031
|
-
return (jsx$1(Container$
|
|
5031
|
+
return (jsx$1(Container$P, __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$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5032
5032
|
};
|
|
5033
|
-
var templateObject_1$
|
|
5033
|
+
var templateObject_1$1b, templateObject_2$O;
|
|
5034
5034
|
|
|
5035
5035
|
var getStylesBySize$6 = function (size) {
|
|
5036
5036
|
switch (size) {
|
|
@@ -5060,8 +5060,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5060
5060
|
};
|
|
5061
5061
|
}
|
|
5062
5062
|
};
|
|
5063
|
-
var Container$
|
|
5064
|
-
var Price = newStyled.p(templateObject_2$
|
|
5063
|
+
var Container$O = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5064
|
+
var Price = newStyled.p(templateObject_2$N || (templateObject_2$N = __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) {
|
|
5065
5065
|
var weight = _a.weight;
|
|
5066
5066
|
return (weight ? weight : '400');
|
|
5067
5067
|
}, function (_a) {
|
|
@@ -5090,7 +5090,7 @@ var Price = newStyled.p(templateObject_2$M || (templateObject_2$M = __makeTempla
|
|
|
5090
5090
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5091
5091
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5092
5092
|
});
|
|
5093
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5093
|
+
var TagContainer = newStyled.p(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5094
5094
|
var _b;
|
|
5095
5095
|
var size = _a.size;
|
|
5096
5096
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5111,11 +5111,11 @@ var PriceLabel = function (_a) {
|
|
|
5111
5111
|
weight: 700,
|
|
5112
5112
|
};
|
|
5113
5113
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5114
|
-
return (jsxs$1(Container$
|
|
5114
|
+
return (jsxs$1(Container$O, { 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));
|
|
5115
5115
|
};
|
|
5116
|
-
var templateObject_1$
|
|
5116
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$C;
|
|
5117
5117
|
|
|
5118
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5118
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5119
5119
|
var PriceLabelV2 = function (_a) {
|
|
5120
5120
|
var _b;
|
|
5121
5121
|
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;
|
|
@@ -5143,9 +5143,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5143
5143
|
weight: 700,
|
|
5144
5144
|
};
|
|
5145
5145
|
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)); };
|
|
5146
|
-
return (jsxs$1(Container$
|
|
5146
|
+
return (jsxs$1(Container$O, { 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));
|
|
5147
5147
|
};
|
|
5148
|
-
var templateObject_1$
|
|
5148
|
+
var templateObject_1$19;
|
|
5149
5149
|
|
|
5150
5150
|
var OneColorSelector = function (_a) {
|
|
5151
5151
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5186,11 +5186,11 @@ var OutOfStock = function (_a) {
|
|
|
5186
5186
|
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));
|
|
5187
5187
|
};
|
|
5188
5188
|
|
|
5189
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5190
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5191
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5192
|
-
var Span = newStyled.span(templateObject_4$
|
|
5193
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5189
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5190
|
+
newStyled(lt.Label)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5191
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
5192
|
+
var Span = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5193
|
+
var OptionsContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
5194
5194
|
var Label$2 = function (_a) {
|
|
5195
5195
|
var label = _a.label, values = _a.values;
|
|
5196
5196
|
return (jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5208,23 +5208,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5208
5208
|
Option: Option,
|
|
5209
5209
|
OptionsContainer: OptionsContainer,
|
|
5210
5210
|
});
|
|
5211
|
-
var templateObject_1$
|
|
5211
|
+
var templateObject_1$18, templateObject_2$M, templateObject_3$B, templateObject_4$r, templateObject_5$g;
|
|
5212
5212
|
|
|
5213
|
-
var Container$
|
|
5213
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
5214
5214
|
var borderColor = _a.borderColor;
|
|
5215
5215
|
return borderColor;
|
|
5216
5216
|
}, function (_a) {
|
|
5217
5217
|
var noStock = _a.noStock;
|
|
5218
5218
|
return (noStock ? '0.4' : '1');
|
|
5219
5219
|
});
|
|
5220
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5220
|
+
var Image$3 = newStyled.img(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5221
5221
|
var PatternSelector = function (_a) {
|
|
5222
5222
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5223
5223
|
var theme = useTheme();
|
|
5224
5224
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5225
|
-
return (jsx$1(Container$
|
|
5225
|
+
return (jsx$1(Container$N, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5226
5226
|
};
|
|
5227
|
-
var templateObject_1$
|
|
5227
|
+
var templateObject_1$17, templateObject_2$L;
|
|
5228
5228
|
|
|
5229
5229
|
var renderOptions$1 = function (options) {
|
|
5230
5230
|
if (options.length === 0) {
|
|
@@ -5282,7 +5282,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5282
5282
|
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));
|
|
5283
5283
|
};
|
|
5284
5284
|
|
|
5285
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5285
|
+
var Image$2 = newStyled.img(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
5286
5286
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5287
5287
|
return borderRadiusVariant &&
|
|
5288
5288
|
"\nborder-radius: 20px;\n";
|
|
@@ -5297,7 +5297,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5297
5297
|
var theme = useTheme();
|
|
5298
5298
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5299
5299
|
};
|
|
5300
|
-
var templateObject_1$
|
|
5300
|
+
var templateObject_1$16;
|
|
5301
5301
|
|
|
5302
5302
|
var Button$3 = newStyled.button(function () { return ({
|
|
5303
5303
|
background: 'transparent',
|
|
@@ -9541,14 +9541,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9541
9541
|
return Slider;
|
|
9542
9542
|
}(React__default.Component);
|
|
9543
9543
|
|
|
9544
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9544
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
9545
9545
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9546
9546
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9547
9547
|
}, function (_a) {
|
|
9548
9548
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9549
9549
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9550
9550
|
});
|
|
9551
|
-
var templateObject_1$
|
|
9551
|
+
var templateObject_1$15;
|
|
9552
9552
|
|
|
9553
9553
|
var getStylesBySize$5 = function (size) {
|
|
9554
9554
|
// rem units
|
|
@@ -9607,22 +9607,22 @@ var SliderNavigation = function (_a) {
|
|
|
9607
9607
|
} }, { 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));
|
|
9608
9608
|
};
|
|
9609
9609
|
|
|
9610
|
-
var horizontalStyles = css(templateObject_1$
|
|
9611
|
-
var verticalStyles = css(templateObject_2$
|
|
9612
|
-
var Container$
|
|
9610
|
+
var horizontalStyles = css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9611
|
+
var verticalStyles = css(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
9612
|
+
var Container$M = newStyled.div(templateObject_3$A || (templateObject_3$A = __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) {
|
|
9613
9613
|
var position = _a.position;
|
|
9614
9614
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9615
9615
|
});
|
|
9616
|
-
var Button$2 = newStyled.button(templateObject_4$
|
|
9616
|
+
var Button$2 = newStyled.button(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
9617
9617
|
var ImagePreviewList = function (_a) {
|
|
9618
9618
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9619
|
-
return (jsx$1(Container$
|
|
9619
|
+
return (jsx$1(Container$M, __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: {
|
|
9620
9620
|
arrowWidth: 0.75,
|
|
9621
9621
|
arrowHeight: 1.25,
|
|
9622
9622
|
arrowPadding: 1.625,
|
|
9623
9623
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$2, __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$2, __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));
|
|
9624
9624
|
};
|
|
9625
|
-
var templateObject_1$
|
|
9625
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$q;
|
|
9626
9626
|
|
|
9627
9627
|
var propTypes = {exports: {}};
|
|
9628
9628
|
|
|
@@ -11215,23 +11215,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11215
11215
|
afterZoomOut: PropTypes.func
|
|
11216
11216
|
} : {};
|
|
11217
11217
|
|
|
11218
|
-
var Container$
|
|
11218
|
+
var Container$L = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11219
11219
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11220
11220
|
return borderRadiusVariant &&
|
|
11221
11221
|
"\n border-radius: 40px;\n ";
|
|
11222
11222
|
});
|
|
11223
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11224
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11223
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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'); });
|
|
11224
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11225
11225
|
var ImageProductWithTags$1 = function (_a) {
|
|
11226
11226
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11227
|
-
return (jsxs$1(Container$
|
|
11227
|
+
return (jsxs$1(Container$L, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11228
11228
|
alt: image.alt,
|
|
11229
11229
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11230
11230
|
}, 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));
|
|
11231
11231
|
};
|
|
11232
|
-
var templateObject_1$
|
|
11232
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z;
|
|
11233
11233
|
|
|
11234
|
-
var Container$
|
|
11234
|
+
var Container$K = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11235
11235
|
var ProductGallery = function (_a) {
|
|
11236
11236
|
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;
|
|
11237
11237
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11239,11 +11239,11 @@ var ProductGallery = function (_a) {
|
|
|
11239
11239
|
useEffect(function () {
|
|
11240
11240
|
setSelectedImage(initialValue);
|
|
11241
11241
|
}, [initialValue]);
|
|
11242
|
-
return (jsxs$1(Container$
|
|
11242
|
+
return (jsxs$1(Container$K, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11243
11243
|
setSelectedImage(value);
|
|
11244
11244
|
}, 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));
|
|
11245
11245
|
};
|
|
11246
|
-
var templateObject_1$
|
|
11246
|
+
var templateObject_1$12;
|
|
11247
11247
|
|
|
11248
11248
|
/* base styles & size variants */
|
|
11249
11249
|
var StarStyles = {
|
|
@@ -11289,8 +11289,8 @@ var StarStyles = {
|
|
|
11289
11289
|
});
|
|
11290
11290
|
},
|
|
11291
11291
|
};
|
|
11292
|
-
var Container$
|
|
11293
|
-
var templateObject_1$
|
|
11292
|
+
var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11293
|
+
var templateObject_1$11;
|
|
11294
11294
|
|
|
11295
11295
|
var StarContainer = newStyled.div(function (_a) {
|
|
11296
11296
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11308,7 +11308,7 @@ var sizes = {
|
|
|
11308
11308
|
var StarList = function (_a) {
|
|
11309
11309
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11310
11310
|
var theme = useTheme();
|
|
11311
|
-
return (jsx$1(Container$
|
|
11311
|
+
return (jsx$1(Container$J, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11312
11312
|
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));
|
|
11313
11313
|
}) }, void 0));
|
|
11314
11314
|
};
|
|
@@ -11352,8 +11352,8 @@ var LabelStyles = {
|
|
|
11352
11352
|
});
|
|
11353
11353
|
},
|
|
11354
11354
|
};
|
|
11355
|
-
var Container$
|
|
11356
|
-
var templateObject_1
|
|
11355
|
+
var Container$I = newStyled.a(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11356
|
+
var templateObject_1$10;
|
|
11357
11357
|
|
|
11358
11358
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11359
11359
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11391,11 +11391,11 @@ var Rating = function (_a) {
|
|
|
11391
11391
|
href: reviewsContainerId,
|
|
11392
11392
|
}
|
|
11393
11393
|
: {};
|
|
11394
|
-
return (jsxs$1(Container$
|
|
11394
|
+
return (jsxs$1(Container$I, __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));
|
|
11395
11395
|
};
|
|
11396
11396
|
|
|
11397
|
-
var Container$
|
|
11398
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11397
|
+
var Container$H = 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"])));
|
|
11398
|
+
var P$1 = newStyled.p(templateObject_2$I || (templateObject_2$I = __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; });
|
|
11399
11399
|
var textButtonStyles = function (theme) { return ({
|
|
11400
11400
|
border: 'none',
|
|
11401
11401
|
background: 'transparent',
|
|
@@ -11408,9 +11408,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11408
11408
|
var FitPredictor = function (_a) {
|
|
11409
11409
|
var onClick = _a.onClick;
|
|
11410
11410
|
var theme = useTheme();
|
|
11411
|
-
return (jsxs(Container$
|
|
11411
|
+
return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __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));
|
|
11412
11412
|
};
|
|
11413
|
-
var templateObject_1
|
|
11413
|
+
var templateObject_1$$, templateObject_2$I;
|
|
11414
11414
|
|
|
11415
11415
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11416
11416
|
var color = _a.color;
|
|
@@ -11424,7 +11424,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11424
11424
|
margin: '0.938rem 4.188rem',
|
|
11425
11425
|
});
|
|
11426
11426
|
});
|
|
11427
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11427
|
+
var Bar = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
11428
11428
|
var backgroundColor = _a.backgroundColor;
|
|
11429
11429
|
return backgroundColor;
|
|
11430
11430
|
}, function (_a) {
|
|
@@ -11447,7 +11447,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11447
11447
|
position: 'absolute',
|
|
11448
11448
|
});
|
|
11449
11449
|
});
|
|
11450
|
-
var Container$
|
|
11450
|
+
var Container$G = newStyled.div(function (_a) {
|
|
11451
11451
|
var widthAuto = _a.widthAuto;
|
|
11452
11452
|
return ({
|
|
11453
11453
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11461,9 +11461,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11461
11461
|
var ProgressBar = function (_a) {
|
|
11462
11462
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11463
11463
|
var theme = useTheme();
|
|
11464
|
-
return (jsxs$1(Container$
|
|
11464
|
+
return (jsxs$1(Container$G, __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$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11465
11465
|
};
|
|
11466
|
-
var templateObject_1$
|
|
11466
|
+
var templateObject_1$_;
|
|
11467
11467
|
|
|
11468
11468
|
var getStylesBySize$4 = function (size) {
|
|
11469
11469
|
switch (size) {
|
|
@@ -11484,7 +11484,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11484
11484
|
};
|
|
11485
11485
|
}
|
|
11486
11486
|
};
|
|
11487
|
-
var Container$
|
|
11487
|
+
var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
11488
11488
|
var backgroundColor = _a.backgroundColor;
|
|
11489
11489
|
return backgroundColor;
|
|
11490
11490
|
}, function (_a) {
|
|
@@ -11512,9 +11512,9 @@ var Container$E = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
11512
11512
|
var IconButton = function (_a) {
|
|
11513
11513
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11514
11514
|
var theme = useTheme();
|
|
11515
|
-
return (jsx$1(Container$
|
|
11515
|
+
return (jsx$1(Container$F, __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));
|
|
11516
11516
|
};
|
|
11517
|
-
var templateObject_1$
|
|
11517
|
+
var templateObject_1$Z;
|
|
11518
11518
|
|
|
11519
11519
|
var TooltipArrow = function (_a) {
|
|
11520
11520
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11594,7 +11594,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11594
11594
|
}
|
|
11595
11595
|
};
|
|
11596
11596
|
|
|
11597
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11597
|
+
var Wrapper$5 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
11598
11598
|
var position = _a.position;
|
|
11599
11599
|
return getWrapperFlexDirection(position);
|
|
11600
11600
|
});
|
|
@@ -11618,11 +11618,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11618
11618
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11619
11619
|
return actual === expected ? margin : '0';
|
|
11620
11620
|
};
|
|
11621
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11621
|
+
var ContentWrapper = newStyled.div(templateObject_2$H || (templateObject_2$H = __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) {
|
|
11622
11622
|
var borderColor = _a.borderColor;
|
|
11623
11623
|
return borderColor;
|
|
11624
11624
|
});
|
|
11625
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11625
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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) {
|
|
11626
11626
|
var position = _a.position;
|
|
11627
11627
|
return getArrowRotation(position);
|
|
11628
11628
|
}, function (_a) {
|
|
@@ -11632,17 +11632,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$x || (templateObject_
|
|
|
11632
11632
|
var position = _a.position;
|
|
11633
11633
|
return getArrowContainerMargin(position);
|
|
11634
11634
|
});
|
|
11635
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11635
|
+
var TooltipText = newStyled.div(templateObject_4$p || (templateObject_4$p = __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) {
|
|
11636
11636
|
var color = _a.color;
|
|
11637
11637
|
return color;
|
|
11638
11638
|
});
|
|
11639
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11640
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11639
|
+
var TopSection = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
11640
|
+
var Title$6 = newStyled.h1(templateObject_6$c || (templateObject_6$c = __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) {
|
|
11641
11641
|
var color = _a.color;
|
|
11642
11642
|
return color;
|
|
11643
11643
|
});
|
|
11644
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
11645
|
-
var templateObject_1$
|
|
11644
|
+
var IconContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __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"])));
|
|
11645
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$y, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
|
|
11646
11646
|
|
|
11647
11647
|
var Tooltip = function (_a) {
|
|
11648
11648
|
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;
|
|
@@ -11800,9 +11800,9 @@ var ContainerStyles = {
|
|
|
11800
11800
|
},
|
|
11801
11801
|
};
|
|
11802
11802
|
|
|
11803
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11804
|
-
var Container$
|
|
11805
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11803
|
+
var Wrapper$4 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11804
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11805
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __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) {
|
|
11806
11806
|
var disabled = _a.disabled;
|
|
11807
11807
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11808
11808
|
});
|
|
@@ -11810,7 +11810,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11810
11810
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11811
11811
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11812
11812
|
]; });
|
|
11813
|
-
var StyledLabel = newStyled(Label$3)(templateObject_3$
|
|
11813
|
+
var StyledLabel = newStyled(Label$3)(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11814
11814
|
var theme = _a.theme;
|
|
11815
11815
|
return theme.component.radio.textSize;
|
|
11816
11816
|
}, function (_a) {
|
|
@@ -11824,9 +11824,9 @@ var RadioInput = function (_a) {
|
|
|
11824
11824
|
var value = event.currentTarget.value;
|
|
11825
11825
|
onChange({ value: value, label: label });
|
|
11826
11826
|
};
|
|
11827
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11827
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$E, __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(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11828
11828
|
};
|
|
11829
|
-
var templateObject_1$
|
|
11829
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$x;
|
|
11830
11830
|
|
|
11831
11831
|
var RadioGroupInput = function (_a) {
|
|
11832
11832
|
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;
|
|
@@ -11840,37 +11840,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11840
11840
|
}) }), void 0));
|
|
11841
11841
|
};
|
|
11842
11842
|
|
|
11843
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11844
|
-
var Container$
|
|
11843
|
+
var Wrapper$3 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11844
|
+
var Container$D = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
11845
11845
|
var Minimalistic = function (_a) {
|
|
11846
11846
|
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;
|
|
11847
11847
|
var theme = useTheme();
|
|
11848
|
-
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$
|
|
11848
|
+
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$D, __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$D, __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));
|
|
11849
11849
|
};
|
|
11850
|
-
var templateObject_1$
|
|
11850
|
+
var templateObject_1$W, templateObject_2$F;
|
|
11851
11851
|
|
|
11852
|
-
var Container$
|
|
11853
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11854
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11855
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11852
|
+
var Container$C = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11853
|
+
var Title$5 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __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; });
|
|
11854
|
+
var Details$1 = newStyled.span(templateObject_3$w || (templateObject_3$w = __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; });
|
|
11855
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
11856
11856
|
var Simple = function (_a) {
|
|
11857
11857
|
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;
|
|
11858
11858
|
var theme = useTheme();
|
|
11859
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11859
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$C, { 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));
|
|
11860
11860
|
};
|
|
11861
|
-
var templateObject_1$
|
|
11861
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$w, templateObject_4$o;
|
|
11862
11862
|
|
|
11863
11863
|
var Bundle = {
|
|
11864
11864
|
Minimalistic: Minimalistic,
|
|
11865
11865
|
Simple: Simple,
|
|
11866
11866
|
};
|
|
11867
11867
|
|
|
11868
|
-
var Container$
|
|
11868
|
+
var Container$B = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
11869
11869
|
var Tag$1 = function (_a) {
|
|
11870
11870
|
var text = _a.text, className = _a.className;
|
|
11871
|
-
return jsx$1(Container$
|
|
11871
|
+
return jsx$1(Container$B, __assign$1({ className: className }, { children: text }), void 0);
|
|
11872
11872
|
};
|
|
11873
|
-
var templateObject_1$
|
|
11873
|
+
var templateObject_1$U;
|
|
11874
11874
|
|
|
11875
11875
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11876
11876
|
switch (size) {
|
|
@@ -11973,11 +11973,11 @@ var Timer = function (_a) {
|
|
|
11973
11973
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11974
11974
|
};
|
|
11975
11975
|
|
|
11976
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11976
|
+
var Label$1 = newStyled.span(templateObject_1$T || (templateObject_1$T = __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) {
|
|
11977
11977
|
var color = _a.color;
|
|
11978
11978
|
return color;
|
|
11979
11979
|
});
|
|
11980
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11980
|
+
var MandatoryIcon = newStyled.span(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
11981
11981
|
var color = _a.color;
|
|
11982
11982
|
return color;
|
|
11983
11983
|
});
|
|
@@ -11986,7 +11986,7 @@ var InputLabel = function (_a) {
|
|
|
11986
11986
|
var theme = useTheme();
|
|
11987
11987
|
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));
|
|
11988
11988
|
};
|
|
11989
|
-
var templateObject_1$
|
|
11989
|
+
var templateObject_1$T, templateObject_2$D;
|
|
11990
11990
|
|
|
11991
11991
|
/**
|
|
11992
11992
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12040,14 +12040,14 @@ var formatPrice = function (value, _a) {
|
|
|
12040
12040
|
}).format(valueToFormat);
|
|
12041
12041
|
};
|
|
12042
12042
|
|
|
12043
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12044
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12043
|
+
var ErrorText = newStyled.h3(templateObject_1$S || (templateObject_1$S = __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; });
|
|
12044
|
+
var ErrorContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
12045
12045
|
var Error$1 = function (_a) {
|
|
12046
12046
|
var error = _a.error;
|
|
12047
12047
|
var theme = useTheme();
|
|
12048
12048
|
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));
|
|
12049
12049
|
};
|
|
12050
|
-
var templateObject_1$
|
|
12050
|
+
var templateObject_1$S, templateObject_2$C;
|
|
12051
12051
|
|
|
12052
12052
|
var containerByStatus = function (theme, status) {
|
|
12053
12053
|
if (status === InputValidationType.Valid)
|
|
@@ -12056,11 +12056,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12056
12056
|
return theme.colors.semantic.urgent.color;
|
|
12057
12057
|
return '';
|
|
12058
12058
|
};
|
|
12059
|
-
var Container$
|
|
12059
|
+
var Container$A = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12060
12060
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12061
12061
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12062
12062
|
});
|
|
12063
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12063
|
+
var StyledInput = newStyled.input(templateObject_2$B || (templateObject_2$B = __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) {
|
|
12064
12064
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12065
12065
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12066
12066
|
}, function (_a) {
|
|
@@ -12115,13 +12115,13 @@ var StyledInput = newStyled.input(templateObject_2$A || (templateObject_2$A = __
|
|
|
12115
12115
|
return hasValue &&
|
|
12116
12116
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12117
12117
|
});
|
|
12118
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12118
|
+
var InputWrapper = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12119
12119
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12120
12120
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12121
12121
|
});
|
|
12122
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12123
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12124
|
-
var templateObject_1$
|
|
12122
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
12123
|
+
var ClearInput = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
12124
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$v, templateObject_4$n, templateObject_5$e;
|
|
12125
12125
|
|
|
12126
12126
|
var BaseInput = function (_a) {
|
|
12127
12127
|
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"]);
|
|
@@ -12144,7 +12144,7 @@ var BaseInput = function (_a) {
|
|
|
12144
12144
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12145
12145
|
}, [status]);
|
|
12146
12146
|
var hasValue = Boolean(value);
|
|
12147
|
-
return (jsxs$1(Container$
|
|
12147
|
+
return (jsxs$1(Container$A, __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) {
|
|
12148
12148
|
onChange(event.target.value, event);
|
|
12149
12149
|
}, 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 () {
|
|
12150
12150
|
onChange('', { target: { value: '' } });
|
|
@@ -12165,11 +12165,11 @@ var Button$1 = function (_a) {
|
|
|
12165
12165
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12166
12166
|
};
|
|
12167
12167
|
|
|
12168
|
-
var Container$
|
|
12168
|
+
var Container$z = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
12169
12169
|
var theme = _a.theme;
|
|
12170
12170
|
return theme.component.inputCustom.input.borderRadius;
|
|
12171
12171
|
});
|
|
12172
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12172
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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) {
|
|
12173
12173
|
var theme = _a.theme;
|
|
12174
12174
|
return theme.component.inputCustom.button.borderRadius;
|
|
12175
12175
|
});
|
|
@@ -12182,27 +12182,27 @@ var Custom = function (_a) {
|
|
|
12182
12182
|
text: text,
|
|
12183
12183
|
disabled: rest.disabled,
|
|
12184
12184
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12185
|
-
return (jsx$1(Container$
|
|
12185
|
+
return (jsx$1(Container$z, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$1, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12186
12186
|
};
|
|
12187
|
-
var templateObject_1$
|
|
12187
|
+
var templateObject_1$Q, templateObject_2$A;
|
|
12188
12188
|
|
|
12189
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12189
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12190
12190
|
var size = _a.size;
|
|
12191
12191
|
return (size === 'small' ? '36px' : '');
|
|
12192
12192
|
});
|
|
12193
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12194
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12193
|
+
var SuccessMessage = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
12194
|
+
var SuccessText = newStyled.span(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
12195
12195
|
var Success = function (_a) {
|
|
12196
12196
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12197
12197
|
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));
|
|
12198
12198
|
};
|
|
12199
|
-
var templateObject_1$
|
|
12199
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$u;
|
|
12200
12200
|
|
|
12201
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12201
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
12202
12202
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12203
12203
|
return status === InputValidationType.Empty &&
|
|
12204
12204
|
type === 'primary' &&
|
|
12205
|
-
theme.colors.shades['
|
|
12205
|
+
theme.colors.shades['850'].color;
|
|
12206
12206
|
});
|
|
12207
12207
|
var BasePlusButton = function (_a) {
|
|
12208
12208
|
var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
|
|
@@ -12215,21 +12215,21 @@ var BasePlusButton = function (_a) {
|
|
|
12215
12215
|
}
|
|
12216
12216
|
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));
|
|
12217
12217
|
};
|
|
12218
|
-
var templateObject_1$
|
|
12218
|
+
var templateObject_1$O;
|
|
12219
12219
|
|
|
12220
|
-
var Container$
|
|
12221
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12220
|
+
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12221
|
+
var IconContainer$4 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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; });
|
|
12222
12222
|
var BasePlusIcon = function (_a) {
|
|
12223
12223
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12224
12224
|
var theme = useTheme();
|
|
12225
12225
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12226
|
-
return (jsx$1(Container$
|
|
12226
|
+
return (jsx$1(Container$y, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12227
12227
|
? theme.colors.shades['700'].color
|
|
12228
12228
|
: status === InputValidationType.Error
|
|
12229
12229
|
? theme.colors.semantic.urgent.color
|
|
12230
12230
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12231
12231
|
};
|
|
12232
|
-
var templateObject_1$
|
|
12232
|
+
var templateObject_1$N, templateObject_2$y;
|
|
12233
12233
|
|
|
12234
12234
|
var Input$1 = {
|
|
12235
12235
|
Simple: BaseInput,
|
|
@@ -12238,7 +12238,7 @@ var Input$1 = {
|
|
|
12238
12238
|
SimplePlusIcon: BasePlusIcon,
|
|
12239
12239
|
};
|
|
12240
12240
|
|
|
12241
|
-
var Container$
|
|
12241
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
12242
12242
|
var width = _a.width;
|
|
12243
12243
|
return width;
|
|
12244
12244
|
}, function (_a) {
|
|
@@ -12254,11 +12254,11 @@ var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
12254
12254
|
var PaymentMethod = function (_a) {
|
|
12255
12255
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12256
12256
|
var theme = useTheme();
|
|
12257
|
-
return (jsx$1(Container$
|
|
12257
|
+
return (jsx$1(Container$x, __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));
|
|
12258
12258
|
};
|
|
12259
|
-
var templateObject_1$
|
|
12259
|
+
var templateObject_1$M;
|
|
12260
12260
|
|
|
12261
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12261
|
+
var Text$5 = newStyled.h3(templateObject_1$L || (templateObject_1$L = __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) {
|
|
12262
12262
|
var backgroundColor = _a.backgroundColor;
|
|
12263
12263
|
return backgroundColor;
|
|
12264
12264
|
}, function (_a) {
|
|
@@ -12270,11 +12270,11 @@ var OfferBanner = function (_a) {
|
|
|
12270
12270
|
var theme = useTheme();
|
|
12271
12271
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12272
12272
|
};
|
|
12273
|
-
var templateObject_1$
|
|
12273
|
+
var templateObject_1$L;
|
|
12274
12274
|
|
|
12275
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12276
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12277
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12275
|
+
var Wrapper$2 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12276
|
+
var GrandTotal = newStyled.h1(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\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: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12277
|
+
var Currency = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12278
12278
|
var theme = _a.theme;
|
|
12279
12279
|
return theme.component.total.basicTotal.currency.color;
|
|
12280
12280
|
}, function (_a) {
|
|
@@ -12287,15 +12287,15 @@ var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __make
|
|
|
12287
12287
|
var theme = _a.theme;
|
|
12288
12288
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12289
12289
|
});
|
|
12290
|
-
var Container$
|
|
12291
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12290
|
+
var Container$w = newStyled.div(templateObject_4$m || (templateObject_4$m = __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; });
|
|
12291
|
+
var DiscountText = newStyled.h3(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12292
12292
|
var theme = _a.theme;
|
|
12293
12293
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12294
12294
|
}, function (_a) {
|
|
12295
12295
|
var theme = _a.theme;
|
|
12296
12296
|
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12297
12297
|
});
|
|
12298
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12298
|
+
var DiscountAmount = newStyled.h3(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12299
12299
|
var theme = _a.theme;
|
|
12300
12300
|
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12301
12301
|
}, function (_a) {
|
|
@@ -12308,23 +12308,23 @@ var DiscountAmount = newStyled.h3(templateObject_6$a || (templateObject_6$a = __
|
|
|
12308
12308
|
var Total = function (_a) {
|
|
12309
12309
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12310
12310
|
var theme = useTheme();
|
|
12311
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12311
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$w, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12312
12312
|
};
|
|
12313
|
-
var templateObject_1$
|
|
12313
|
+
var templateObject_1$K, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$d, templateObject_6$b;
|
|
12314
12314
|
|
|
12315
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12315
|
+
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12316
12316
|
var color = _a.color;
|
|
12317
12317
|
return color;
|
|
12318
12318
|
});
|
|
12319
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12320
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12319
|
+
var ItemContainer = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
12320
|
+
var Item$2 = newStyled.h4(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12321
12321
|
var theme = _a.theme;
|
|
12322
12322
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12323
12323
|
}, function (_a) {
|
|
12324
12324
|
var theme = _a.theme;
|
|
12325
12325
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12326
12326
|
});
|
|
12327
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12327
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12328
12328
|
var color = _a.color;
|
|
12329
12329
|
return color;
|
|
12330
12330
|
});
|
|
@@ -12337,23 +12337,23 @@ var Subtotal = function (_a) {
|
|
|
12337
12337
|
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));
|
|
12338
12338
|
})] }), void 0));
|
|
12339
12339
|
};
|
|
12340
|
-
var templateObject_1$
|
|
12340
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
12341
12341
|
|
|
12342
12342
|
var Totals = {
|
|
12343
12343
|
Total: Total,
|
|
12344
12344
|
Subtotal: Subtotal,
|
|
12345
12345
|
};
|
|
12346
12346
|
|
|
12347
|
-
var Container$
|
|
12348
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12349
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12350
|
-
var Details = newStyled.span(templateObject_4$
|
|
12347
|
+
var Container$v = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12348
|
+
var IconContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
12349
|
+
var Text$4 = newStyled.p(templateObject_3$r || (templateObject_3$r = __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; });
|
|
12350
|
+
var Details = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12351
12351
|
var Note = function (_a) {
|
|
12352
12352
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12353
12353
|
var theme = useTheme();
|
|
12354
|
-
return (jsxs$1(Container$
|
|
12354
|
+
return (jsxs$1(Container$v, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12355
12355
|
};
|
|
12356
|
-
var templateObject_1$
|
|
12356
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$r, templateObject_4$k;
|
|
12357
12357
|
|
|
12358
12358
|
/* eslint-disable no-param-reassign */
|
|
12359
12359
|
var index$1 = function (breakpoints) {
|
|
@@ -12439,79 +12439,79 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12439
12439
|
literal: true,
|
|
12440
12440
|
});
|
|
12441
12441
|
|
|
12442
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12443
|
-
var Line = newStyled.div(templateObject_2$
|
|
12444
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12442
|
+
var Title$4 = newStyled.h1(templateObject_1$H || (templateObject_1$H = __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; });
|
|
12443
|
+
var Line = newStyled.div(templateObject_2$u || (templateObject_2$u = __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; });
|
|
12444
|
+
var Row$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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({
|
|
12445
12445
|
flexDirection: ['column', 'row'],
|
|
12446
12446
|
}));
|
|
12447
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12447
|
+
var Col$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __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({
|
|
12448
12448
|
margin: ['0', '0 1.25rem'],
|
|
12449
12449
|
marginBottom: ['1.875rem', '0'],
|
|
12450
12450
|
alignItems: ['center', 'flex-start'],
|
|
12451
12451
|
textAlign: ['center', 'inherit'],
|
|
12452
12452
|
width: ['100%', 'inherit'],
|
|
12453
12453
|
}));
|
|
12454
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12454
|
+
var IconContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __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({
|
|
12455
12455
|
marginBottom: ['1.875rem', '0'],
|
|
12456
12456
|
width: ['auto', '1.375rem'],
|
|
12457
12457
|
}));
|
|
12458
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12458
|
+
var SectionTitle = newStyled.h1(templateObject_6$a || (templateObject_6$a = __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({
|
|
12459
12459
|
display: ['block', 'flex'],
|
|
12460
12460
|
}), function (_a) {
|
|
12461
12461
|
var theme = _a.theme;
|
|
12462
12462
|
return theme.colors.shades['700'].color;
|
|
12463
12463
|
});
|
|
12464
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12464
|
+
var SectionDetails = newStyled.p(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-left: ", ";\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-left: ", ";\n margin-top: 0.625rem;\n"])), function (props) { return props.color; }, function (_a) {
|
|
12465
12465
|
var _b;
|
|
12466
12466
|
var theme = _a.theme;
|
|
12467
12467
|
return (_b = theme.component.deliveryDetails.SectionDetails) === null || _b === void 0 ? void 0 : _b.marginLeft;
|
|
12468
12468
|
});
|
|
12469
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
12469
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$5 || (templateObject_8$5 = __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; });
|
|
12470
12470
|
var DeliveryDetails = function (_a) {
|
|
12471
12471
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12472
12472
|
var theme = useTheme();
|
|
12473
12473
|
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), instantOrderUpdate.keepMeUpdated && (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));
|
|
12474
12474
|
};
|
|
12475
|
-
var templateObject_1$
|
|
12475
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q, templateObject_4$j, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
12476
12476
|
|
|
12477
|
-
var Container$
|
|
12478
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12477
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
12478
|
+
var Text$3 = newStyled.p(templateObject_2$t || (templateObject_2$t = __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; });
|
|
12479
12479
|
var ScrollToTop = function (_a) {
|
|
12480
12480
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12481
12481
|
var theme = useTheme();
|
|
12482
12482
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12483
|
-
return (jsxs$1(Container$
|
|
12483
|
+
return (jsxs$1(Container$u, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { 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));
|
|
12484
12484
|
};
|
|
12485
|
-
var templateObject_1$
|
|
12485
|
+
var templateObject_1$G, templateObject_2$t;
|
|
12486
12486
|
|
|
12487
12487
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12488
|
-
var Container$
|
|
12488
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
12489
12489
|
var color = _a.color;
|
|
12490
12490
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12491
12491
|
});
|
|
12492
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12492
|
+
var H1 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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; });
|
|
12493
12493
|
var OrderBar = function (_a) {
|
|
12494
12494
|
var message = _a.message, color = _a.color;
|
|
12495
12495
|
var theme = useTheme();
|
|
12496
|
-
return (jsxs$1(Container$
|
|
12496
|
+
return (jsxs$1(Container$t, __assign$1({ color: color }, { 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));
|
|
12497
12497
|
};
|
|
12498
|
-
var templateObject_1$
|
|
12498
|
+
var templateObject_1$F, templateObject_2$s;
|
|
12499
12499
|
|
|
12500
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12501
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12502
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12503
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12500
|
+
var TableElement$1 = newStyled.table(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12501
|
+
var TableCell$1 = newStyled.td(templateObject_2$r || (templateObject_2$r = __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; });
|
|
12502
|
+
var TableHead$1 = newStyled.th(templateObject_3$p || (templateObject_3$p = __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; });
|
|
12503
|
+
var TableRow$1 = newStyled.tr(templateObject_4$i || (templateObject_4$i = __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; });
|
|
12504
12504
|
var SizeTable = function (_a) {
|
|
12505
12505
|
var headers = _a.headers, data = _a.data;
|
|
12506
12506
|
var theme = useTheme();
|
|
12507
12507
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __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$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12508
12508
|
};
|
|
12509
|
-
var templateObject_1$
|
|
12509
|
+
var templateObject_1$E, templateObject_2$r, templateObject_3$p, templateObject_4$i;
|
|
12510
12510
|
|
|
12511
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12512
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12513
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12514
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12511
|
+
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; });
|
|
12512
|
+
var TableCell = newStyled.td(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1rem;\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 1rem;\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; });
|
|
12513
|
+
var TableHead = newStyled.th(templateObject_3$o || (templateObject_3$o = __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; });
|
|
12514
|
+
var TableRow = newStyled.tr(templateObject_4$h || (templateObject_4$h = __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; });
|
|
12515
12515
|
var SizeChartTable = function (_a) {
|
|
12516
12516
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12517
12517
|
var theme = useTheme();
|
|
@@ -12542,18 +12542,18 @@ var SizeChartTable = function (_a) {
|
|
|
12542
12542
|
backgroundColor: getCellColor(index, cell),
|
|
12543
12543
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : 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));
|
|
12544
12544
|
};
|
|
12545
|
-
var templateObject_1$
|
|
12545
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$o, templateObject_4$h;
|
|
12546
12546
|
|
|
12547
|
-
var Img = newStyled.img(templateObject_1$
|
|
12547
|
+
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; });
|
|
12548
12548
|
var Image = function (_a) {
|
|
12549
12549
|
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;
|
|
12550
12550
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12551
12551
|
};
|
|
12552
|
-
var templateObject_1$
|
|
12552
|
+
var templateObject_1$C;
|
|
12553
12553
|
|
|
12554
|
-
var Container$
|
|
12555
|
-
var ImageContainer$
|
|
12556
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
12554
|
+
var Container$s = 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"])));
|
|
12555
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12556
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __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({
|
|
12557
12557
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12558
12558
|
}));
|
|
12559
12559
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12576,7 +12576,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12576
12576
|
margin: '0.063rem 0',
|
|
12577
12577
|
});
|
|
12578
12578
|
});
|
|
12579
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12579
|
+
var PriceContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __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) {
|
|
12580
12580
|
var withTag = _a.withTag; _a.theme;
|
|
12581
12581
|
return withTag
|
|
12582
12582
|
? mediaQueries({
|
|
@@ -12585,13 +12585,13 @@ var PriceContainer = newStyled.div(templateObject_4$f || (templateObject_4$f = _
|
|
|
12585
12585
|
})
|
|
12586
12586
|
: 'justify-content: end';
|
|
12587
12587
|
});
|
|
12588
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12588
|
+
var Quantity = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
12589
12589
|
var SimpleOrderItem = function (_a) {
|
|
12590
12590
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12591
12591
|
var theme = useTheme();
|
|
12592
|
-
return (jsxs$1(Container$
|
|
12592
|
+
return (jsxs$1(Container$s, { children: [jsxs$1(ImageContainer$5, { 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$1, __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: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12593
12593
|
};
|
|
12594
|
-
var templateObject_1$
|
|
12594
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$n, templateObject_4$g, templateObject_5$b;
|
|
12595
12595
|
|
|
12596
12596
|
function formatDate(date) {
|
|
12597
12597
|
var day = date.getDate();
|
|
@@ -12600,30 +12600,31 @@ function formatDate(date) {
|
|
|
12600
12600
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12601
12601
|
}
|
|
12602
12602
|
|
|
12603
|
-
var Container$
|
|
12604
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12605
|
-
var Content = newStyled.div(templateObject_3$
|
|
12606
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12607
|
-
var DateText = newStyled.span(templateObject_5$
|
|
12608
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
12609
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
12610
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
12611
|
-
var ReviewDescription = newStyled.p(templateObject_9$
|
|
12612
|
-
var ImageContainer$
|
|
12613
|
-
var
|
|
12603
|
+
var Container$r = 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"])));
|
|
12604
|
+
var Heading = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12605
|
+
var Content$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12606
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0 0 8px 0;\n\n @media (min-width: 768px) {\n margin: 0 0 50px 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0 0 8px 0;\n\n @media (min-width: 768px) {\n margin: 0 0 50px 0;\n }\n"])));
|
|
12607
|
+
var DateText$1 = newStyled.span(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12608
|
+
var VariantText = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n float: right;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n float: right;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12609
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
12610
|
+
var ReviewTitle$1 = newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12611
|
+
var ReviewDescription$1 = newStyled.p(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12612
|
+
var ImageContainer$4 = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
12613
|
+
var ImageSpace = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
12614
|
+
var Review$1 = function (_a) {
|
|
12614
12615
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, reviewVariant = _a.reviewVariant;
|
|
12615
12616
|
var theme = useTheme();
|
|
12616
|
-
return (jsxs$1(Container$
|
|
12617
|
+
return (jsxs$1(Container$r, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }), void 0), jsxs$1(ImageContainer$4, { children: [image && jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0), !image && jsx$1(ImageSpace, {}, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0)] }, void 0));
|
|
12617
12618
|
};
|
|
12618
|
-
var templateObject_1$
|
|
12619
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$m, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
12619
12620
|
|
|
12620
|
-
var List = newStyled.ul(templateObject_1$
|
|
12621
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12622
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12623
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12624
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12625
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12626
|
-
var templateObject_1$
|
|
12621
|
+
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"])));
|
|
12622
|
+
var Item$1 = newStyled.li(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
12623
|
+
var DropdownWrapper = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
12624
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
12625
|
+
var StyledDropdown = newStyled.ul(templateObject_5$9 || (templateObject_5$9 = __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; });
|
|
12626
|
+
var DropdownItem = newStyled.li(templateObject_6$8 || (templateObject_6$8 = __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; });
|
|
12627
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$l, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12627
12628
|
|
|
12628
12629
|
var DropdownListIcons = function (_a) {
|
|
12629
12630
|
var items = _a.items;
|
|
@@ -12636,7 +12637,7 @@ var Dropdown = function (_a) {
|
|
|
12636
12637
|
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));
|
|
12637
12638
|
};
|
|
12638
12639
|
|
|
12639
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12640
|
+
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; });
|
|
12640
12641
|
var AmazonButton = function (_a) {
|
|
12641
12642
|
var onClick = _a.onClick;
|
|
12642
12643
|
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));
|
|
@@ -12645,23 +12646,23 @@ var PaypalButton = function (_a) {
|
|
|
12645
12646
|
var onClick = _a.onClick;
|
|
12646
12647
|
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));
|
|
12647
12648
|
};
|
|
12648
|
-
var templateObject_1$
|
|
12649
|
+
var templateObject_1$y;
|
|
12649
12650
|
|
|
12650
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12651
|
-
var Col = newStyled.div(templateObject_2$
|
|
12652
|
-
var Row = newStyled.div(templateObject_3$
|
|
12651
|
+
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'); });
|
|
12652
|
+
var Col = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12653
|
+
var Row = newStyled.div(templateObject_3$k || (templateObject_3$k = __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) {
|
|
12653
12654
|
return props.rightToLeft &&
|
|
12654
12655
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12655
12656
|
});
|
|
12656
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12657
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12658
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
12657
|
+
var H5 = newStyled.h5(templateObject_4$d || (templateObject_4$d = __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; });
|
|
12658
|
+
var H3 = newStyled.h3(templateObject_5$8 || (templateObject_5$8 = __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; });
|
|
12659
|
+
var FreeShipping = newStyled.span(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12659
12660
|
var CrossSellCheckbox = function (_a) {
|
|
12660
12661
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12661
12662
|
var theme = useTheme();
|
|
12662
12663
|
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));
|
|
12663
12664
|
};
|
|
12664
|
-
var templateObject_1$
|
|
12665
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
12665
12666
|
|
|
12666
12667
|
var index = /*#__PURE__*/Object.freeze({
|
|
12667
12668
|
__proto__: null,
|
|
@@ -12674,7 +12675,7 @@ var Spacing = function (_a) {
|
|
|
12674
12675
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12675
12676
|
};
|
|
12676
12677
|
|
|
12677
|
-
var Container$
|
|
12678
|
+
var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
12678
12679
|
var height = _a.height;
|
|
12679
12680
|
return (height ? height : '1.5em');
|
|
12680
12681
|
}, function (_a) {
|
|
@@ -12699,11 +12700,11 @@ var Container$p = newStyled.div(templateObject_1$v || (templateObject_1$v = __ma
|
|
|
12699
12700
|
var SkeletonBox = function (_a) {
|
|
12700
12701
|
var width = _a.width, height = _a.height;
|
|
12701
12702
|
var theme = useTheme();
|
|
12702
|
-
return jsx$1(Container$
|
|
12703
|
+
return jsx$1(Container$q, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12703
12704
|
};
|
|
12704
|
-
var templateObject_1$
|
|
12705
|
+
var templateObject_1$w;
|
|
12705
12706
|
|
|
12706
|
-
var ImageContainer$
|
|
12707
|
+
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12707
12708
|
var width = _a.width, height = _a.height;
|
|
12708
12709
|
return ({
|
|
12709
12710
|
position: 'relative',
|
|
@@ -12711,9 +12712,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12711
12712
|
height: height,
|
|
12712
12713
|
});
|
|
12713
12714
|
});
|
|
12714
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12715
|
-
var Container$
|
|
12716
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12715
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
12716
|
+
var Container$p = newStyled.a(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
12717
|
+
var Title$2 = newStyled.p(templateObject_3$j || (templateObject_3$j = __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; });
|
|
12717
12718
|
var getStylesBySize$1 = function (size) {
|
|
12718
12719
|
switch (size) {
|
|
12719
12720
|
case ComponentSize.Medium:
|
|
@@ -12739,9 +12740,9 @@ var getStylesBySize$1 = function (size) {
|
|
|
12739
12740
|
};
|
|
12740
12741
|
}
|
|
12741
12742
|
};
|
|
12742
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12743
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_5$
|
|
12744
|
-
var MarginTopContainer = newStyled.div(templateObject_6$
|
|
12743
|
+
var TopTagContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
12744
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
12745
|
+
var MarginTopContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12745
12746
|
var ProductItemMobile = function (_a) {
|
|
12746
12747
|
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, priceLoading = _a.priceLoading;
|
|
12747
12748
|
var theme = useTheme();
|
|
@@ -12758,32 +12759,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12758
12759
|
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));
|
|
12759
12760
|
};
|
|
12760
12761
|
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)); };
|
|
12761
|
-
return (jsxs(Container$
|
|
12762
|
+
return (jsxs(Container$p, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
|
|
12762
12763
|
};
|
|
12763
|
-
var templateObject_1$
|
|
12764
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12764
12765
|
|
|
12765
|
-
var Container$
|
|
12766
|
+
var Container$o = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
12766
12767
|
function withProductGrid(ProductItemComponent, data) {
|
|
12767
12768
|
function WithProductGrid(props) {
|
|
12768
|
-
return (jsx$1(Container$
|
|
12769
|
+
return (jsx$1(Container$o, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12769
12770
|
}
|
|
12770
12771
|
/* istanbul ignore next */
|
|
12771
12772
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12772
12773
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12773
12774
|
return WithProductGrid;
|
|
12774
12775
|
}
|
|
12775
|
-
var templateObject_1$
|
|
12776
|
+
var templateObject_1$u;
|
|
12776
12777
|
|
|
12777
12778
|
var Collection = {
|
|
12778
12779
|
ProductItemMobile: ProductItemMobile,
|
|
12779
12780
|
withProductGrid: withProductGrid,
|
|
12780
12781
|
};
|
|
12781
12782
|
|
|
12782
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12783
|
+
var Backdrop = newStyled.div(templateObject_1$t || (templateObject_1$t = __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) {
|
|
12783
12784
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12784
12785
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12785
12786
|
});
|
|
12786
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12787
|
+
var Sidebar = newStyled.div(templateObject_2$k || (templateObject_2$k = __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) {
|
|
12787
12788
|
var width = _a.width;
|
|
12788
12789
|
return width;
|
|
12789
12790
|
}, function (_a) {
|
|
@@ -12824,28 +12825,28 @@ var Drawer = function (_a) {
|
|
|
12824
12825
|
}, [isOpen, onClose, onOpen]);
|
|
12825
12826
|
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;
|
|
12826
12827
|
};
|
|
12827
|
-
var templateObject_1$
|
|
12828
|
+
var templateObject_1$t, templateObject_2$k;
|
|
12828
12829
|
|
|
12829
|
-
var Container$
|
|
12830
|
+
var Container$n = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12830
12831
|
var size = _a.size;
|
|
12831
12832
|
return (size ? size : '100%');
|
|
12832
12833
|
}, function (_a) {
|
|
12833
12834
|
var size = _a.size;
|
|
12834
12835
|
return (size ? size : '100%');
|
|
12835
12836
|
});
|
|
12836
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12837
|
+
var Animation = newStyled.div(templateObject_2$j || (templateObject_2$j = __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) {
|
|
12837
12838
|
var animationDuration = _a.animationDuration;
|
|
12838
12839
|
return animationDuration;
|
|
12839
12840
|
});
|
|
12840
12841
|
var Spinner = function (_a) {
|
|
12841
12842
|
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;
|
|
12842
|
-
return (jsx$1(Container$
|
|
12843
|
+
return (jsx$1(Container$n, __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));
|
|
12843
12844
|
};
|
|
12844
|
-
var templateObject_1$
|
|
12845
|
+
var templateObject_1$s, templateObject_2$j;
|
|
12845
12846
|
|
|
12846
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12847
|
-
var LI = newStyled.li(templateObject_2$
|
|
12848
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12847
|
+
var UL = newStyled.ul(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
12848
|
+
var LI = newStyled.li(templateObject_2$i || (templateObject_2$i = __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; });
|
|
12849
|
+
var CloseIconContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
12849
12850
|
var Tags = function (_a) {
|
|
12850
12851
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12851
12852
|
var theme = useTheme();
|
|
@@ -12853,7 +12854,7 @@ var Tags = function (_a) {
|
|
|
12853
12854
|
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));
|
|
12854
12855
|
}) }), void 0));
|
|
12855
12856
|
};
|
|
12856
|
-
var templateObject_1$
|
|
12857
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$i;
|
|
12857
12858
|
|
|
12858
12859
|
function FilteringDropdown(_a) {
|
|
12859
12860
|
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;
|
|
@@ -12886,12 +12887,12 @@ function FilteringDropdown(_a) {
|
|
|
12886
12887
|
}) }, void 0)] }), void 0));
|
|
12887
12888
|
}
|
|
12888
12889
|
|
|
12889
|
-
var Container$
|
|
12890
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12891
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12890
|
+
var Container$m = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
12891
|
+
var IconContainer$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
12892
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12892
12893
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12893
12894
|
}));
|
|
12894
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12895
|
+
var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
12895
12896
|
var bold = _a.bold;
|
|
12896
12897
|
return (bold ? '700' : '500');
|
|
12897
12898
|
}, function (_a) {
|
|
@@ -12903,12 +12904,12 @@ var PageNumber = newStyled.span(templateObject_4$a || (templateObject_4$a = __ma
|
|
|
12903
12904
|
}, mediaQueries({
|
|
12904
12905
|
fontSize: ['1rem', '1.25rem'],
|
|
12905
12906
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12906
|
-
|
|
12907
|
+
minWidth: ['1.5rem', '1.875rem'],
|
|
12907
12908
|
}), function (_a) {
|
|
12908
12909
|
var background = _a.background;
|
|
12909
12910
|
return background || 'unset';
|
|
12910
12911
|
});
|
|
12911
|
-
var templateObject_1$
|
|
12912
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$h, templateObject_4$b;
|
|
12912
12913
|
|
|
12913
12914
|
var Pagination = function (_a) {
|
|
12914
12915
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -12954,7 +12955,7 @@ var Pagination = function (_a) {
|
|
|
12954
12955
|
}
|
|
12955
12956
|
return pages;
|
|
12956
12957
|
}, [from, page, showReducedPages, to]);
|
|
12957
|
-
return (jsxs$1(Container$
|
|
12958
|
+
return (jsxs$1(Container$m, __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), !showReducedPages && (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)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), 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));
|
|
12958
12959
|
};
|
|
12959
12960
|
|
|
12960
12961
|
var PaginatorBlog = function (_a) {
|
|
@@ -12968,12 +12969,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12968
12969
|
setPage(page);
|
|
12969
12970
|
onChange(page);
|
|
12970
12971
|
};
|
|
12971
|
-
return (jsxs$1(Container$
|
|
12972
|
+
return (jsxs$1(Container$m, __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
|
|
12972
12973
|
? theme.colors.shades['white'].color
|
|
12973
12974
|
: 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));
|
|
12974
12975
|
};
|
|
12975
12976
|
|
|
12976
|
-
var Container$
|
|
12977
|
+
var Container$l = newStyled.div(templateObject_1$p || (templateObject_1$p = __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({
|
|
12977
12978
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12978
12979
|
}));
|
|
12979
12980
|
var Description$1 = newStyled.div({
|
|
@@ -12990,25 +12991,25 @@ var Description$1 = newStyled.div({
|
|
|
12990
12991
|
var ProductItem = function (_a) {
|
|
12991
12992
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12992
12993
|
var theme = useTheme();
|
|
12993
|
-
return (jsxs$1(Container$
|
|
12994
|
+
return (jsxs$1(Container$l, __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));
|
|
12994
12995
|
};
|
|
12995
|
-
var templateObject_1$
|
|
12996
|
+
var templateObject_1$p;
|
|
12996
12997
|
|
|
12997
|
-
var Container$
|
|
12998
|
+
var Container$k = newStyled.div({
|
|
12998
12999
|
display: 'flex',
|
|
12999
13000
|
justifyContent: 'center',
|
|
13000
13001
|
padding: '1rem',
|
|
13001
13002
|
});
|
|
13002
13003
|
var Footer = function (_a) {
|
|
13003
13004
|
var text = _a.text, onClick = _a.onClick;
|
|
13004
|
-
return (jsx$1(Container$
|
|
13005
|
+
return (jsx$1(Container$k, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13005
13006
|
};
|
|
13006
13007
|
|
|
13007
13008
|
var Ul = newStyled.ul({
|
|
13008
13009
|
margin: '0px',
|
|
13009
13010
|
padding: '0px',
|
|
13010
13011
|
});
|
|
13011
|
-
var Li = newStyled.li(templateObject_1$
|
|
13012
|
+
var Li = newStyled.li(templateObject_1$o || (templateObject_1$o = __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({
|
|
13012
13013
|
padding: [0, '0rem 1rem'],
|
|
13013
13014
|
borderRadius: [0, '0.5rem'],
|
|
13014
13015
|
}));
|
|
@@ -13020,20 +13021,20 @@ var Anchor = newStyled.a({
|
|
|
13020
13021
|
padding: 0,
|
|
13021
13022
|
textDecoration: 'none',
|
|
13022
13023
|
});
|
|
13023
|
-
var Container$
|
|
13024
|
+
var Container$j = newStyled.div(templateObject_2$g || (templateObject_2$g = __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({
|
|
13024
13025
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13025
13026
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13026
13027
|
borderRadius: ['0', '0.5rem'],
|
|
13027
13028
|
}));
|
|
13028
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13029
|
+
var Header$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13029
13030
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13030
13031
|
}));
|
|
13031
13032
|
var ResultsPanel = function (_a) {
|
|
13032
13033
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13033
13034
|
var theme = useTheme();
|
|
13034
|
-
return (jsxs$1(Container$
|
|
13035
|
+
return (jsxs$1(Container$j, __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));
|
|
13035
13036
|
};
|
|
13036
|
-
var templateObject_1$
|
|
13037
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$g;
|
|
13037
13038
|
|
|
13038
13039
|
var Input = newStyled.input(function (props) { return ({
|
|
13039
13040
|
padding: props.theme.component.input.padding,
|
|
@@ -13064,7 +13065,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13064
13065
|
},
|
|
13065
13066
|
}); });
|
|
13066
13067
|
|
|
13067
|
-
var Button = newStyled.button(templateObject_1$
|
|
13068
|
+
var Button = newStyled.button(templateObject_1$n || (templateObject_1$n = __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({
|
|
13068
13069
|
right: ['1rem', '7.75rem'],
|
|
13069
13070
|
top: ['0.75rem', '0.75rem'],
|
|
13070
13071
|
}));
|
|
@@ -13073,7 +13074,7 @@ var ClearButton = function (_a) {
|
|
|
13073
13074
|
var theme = useTheme();
|
|
13074
13075
|
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13075
13076
|
};
|
|
13076
|
-
var templateObject_1$
|
|
13077
|
+
var templateObject_1$n;
|
|
13077
13078
|
|
|
13078
13079
|
var useOnClickOutside = function (ref, handler) {
|
|
13079
13080
|
useEffect(function () {
|
|
@@ -13162,7 +13163,7 @@ var reducer = function (state, action) {
|
|
|
13162
13163
|
}
|
|
13163
13164
|
}
|
|
13164
13165
|
};
|
|
13165
|
-
var Container$
|
|
13166
|
+
var Container$i = newStyled.div({
|
|
13166
13167
|
position: 'relative',
|
|
13167
13168
|
display: 'flex',
|
|
13168
13169
|
});
|
|
@@ -13198,7 +13199,7 @@ var SearchBar = function (_a) {
|
|
|
13198
13199
|
onClose();
|
|
13199
13200
|
}
|
|
13200
13201
|
};
|
|
13201
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13202
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$i, __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) {
|
|
13202
13203
|
if (e.key === 'Enter') {
|
|
13203
13204
|
e.preventDefault();
|
|
13204
13205
|
e.stopPropagation();
|
|
@@ -13207,14 +13208,14 @@ var SearchBar = function (_a) {
|
|
|
13207
13208
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13208
13209
|
};
|
|
13209
13210
|
|
|
13210
|
-
var Container$
|
|
13211
|
+
var Container$h = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13211
13212
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13212
13213
|
return borderRadiusVariant &&
|
|
13213
13214
|
"\n border-radius: 40px;\n ";
|
|
13214
13215
|
});
|
|
13215
13216
|
// max-height: 31.875rem;
|
|
13216
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13217
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13217
|
+
var TopTagContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __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'); });
|
|
13218
|
+
var BottomTagContainer = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13218
13219
|
var settings = {
|
|
13219
13220
|
dots: true,
|
|
13220
13221
|
infinite: false,
|
|
@@ -13230,18 +13231,18 @@ var ImageProductWithTags = function (_a) {
|
|
|
13230
13231
|
var _a;
|
|
13231
13232
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
13232
13233
|
}, [slick]);
|
|
13233
|
-
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13234
|
+
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$h, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant }, { children: jsx$1(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13234
13235
|
return (jsxs$1("div", { 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, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13235
13236
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13236
13237
|
};
|
|
13237
|
-
var templateObject_1$
|
|
13238
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f;
|
|
13238
13239
|
|
|
13239
|
-
var Container$
|
|
13240
|
+
var Container$g = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
13240
13241
|
var ProductGalleryMobile = function (_a) {
|
|
13241
13242
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13242
|
-
return (jsx$1(Container$
|
|
13243
|
+
return (jsx$1(Container$g, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }, void 0) }, void 0));
|
|
13243
13244
|
};
|
|
13244
|
-
var templateObject_1$
|
|
13245
|
+
var templateObject_1$l;
|
|
13245
13246
|
|
|
13246
13247
|
var Portal = function (_a) {
|
|
13247
13248
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13374,19 +13375,19 @@ var react = __toCommonJS(react_exports);
|
|
|
13374
13375
|
var visibleStyle = function (_a) {
|
|
13375
13376
|
var opened = _a.opened;
|
|
13376
13377
|
return opened
|
|
13377
|
-
? css(templateObject_1$
|
|
13378
|
+
? css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13378
13379
|
};
|
|
13379
13380
|
var transformStyle = function (_a) {
|
|
13380
13381
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13381
13382
|
return opened
|
|
13382
|
-
? css(templateObject_3$
|
|
13383
|
+
? css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13383
13384
|
};
|
|
13384
|
-
var Container$
|
|
13385
|
+
var Container$f = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\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: ", ";\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.padding ? props.padding : '20px'); }, 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({
|
|
13385
13386
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13386
13387
|
}), visibleStyle, transformStyle);
|
|
13387
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
13388
|
+
var Overlay = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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);
|
|
13388
13389
|
var Modal = function (_a) {
|
|
13389
|
-
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;
|
|
13390
|
+
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, padding = _a.padding;
|
|
13390
13391
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
13391
13392
|
var onDismiss = function () {
|
|
13392
13393
|
if (!dismissable) {
|
|
@@ -13394,7 +13395,7 @@ var Modal = function (_a) {
|
|
|
13394
13395
|
}
|
|
13395
13396
|
close();
|
|
13396
13397
|
};
|
|
13397
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13398
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$f, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13398
13399
|
};
|
|
13399
13400
|
var modalEvent = function (id, detail) {
|
|
13400
13401
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13422,52 +13423,52 @@ var useModal = function (id) {
|
|
|
13422
13423
|
close: close,
|
|
13423
13424
|
}); }, [close, open, opened]);
|
|
13424
13425
|
};
|
|
13425
|
-
var templateObject_1$
|
|
13426
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
13426
13427
|
|
|
13427
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13428
|
+
var Text$2 = newStyled.span(templateObject_1$j || (templateObject_1$j = __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; });
|
|
13428
13429
|
var Title$1 = function (_a) {
|
|
13429
13430
|
var title = _a.title;
|
|
13430
13431
|
var theme = useTheme();
|
|
13431
13432
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13432
13433
|
};
|
|
13433
|
-
var templateObject_1$
|
|
13434
|
+
var templateObject_1$j;
|
|
13434
13435
|
|
|
13435
|
-
var P = newStyled.p(templateObject_1$
|
|
13436
|
+
var P = newStyled.p(templateObject_1$i || (templateObject_1$i = __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; });
|
|
13436
13437
|
var Promo = function (_a) {
|
|
13437
13438
|
var text = _a.text;
|
|
13438
13439
|
var theme = useTheme();
|
|
13439
13440
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13440
13441
|
};
|
|
13441
|
-
var templateObject_1$
|
|
13442
|
+
var templateObject_1$i;
|
|
13442
13443
|
|
|
13443
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13444
|
+
var Text$1 = newStyled.span(templateObject_1$h || (templateObject_1$h = __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; });
|
|
13444
13445
|
var Description = function (_a) {
|
|
13445
13446
|
var text = _a.text;
|
|
13446
13447
|
var theme = useTheme();
|
|
13447
13448
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13448
13449
|
};
|
|
13449
|
-
var templateObject_1$
|
|
13450
|
+
var templateObject_1$h;
|
|
13450
13451
|
|
|
13451
|
-
var Container$
|
|
13452
|
-
var CloseButton = function (_a) {
|
|
13452
|
+
var Container$e = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"); });
|
|
13453
|
+
var CloseButton$1 = function (_a) {
|
|
13453
13454
|
var onClick = _a.onClick, size = _a.size;
|
|
13454
13455
|
var theme = useTheme();
|
|
13455
|
-
return (jsx$1(Container$
|
|
13456
|
+
return (jsx$1(Container$e, __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));
|
|
13456
13457
|
};
|
|
13457
|
-
var templateObject_1$
|
|
13458
|
+
var templateObject_1$g;
|
|
13458
13459
|
|
|
13459
13460
|
var CartProductItem = {
|
|
13460
13461
|
Title: Title$1,
|
|
13461
13462
|
Tag: OfferBanner,
|
|
13462
13463
|
Promo: Promo,
|
|
13463
13464
|
Description: Description,
|
|
13464
|
-
CloseButton: CloseButton,
|
|
13465
|
+
CloseButton: CloseButton$1,
|
|
13465
13466
|
};
|
|
13466
13467
|
|
|
13467
|
-
var Container$
|
|
13468
|
-
var Item = newStyled.span(templateObject_2$
|
|
13469
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13470
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13468
|
+
var Container$d = newStyled.div(templateObject_1$f || (templateObject_1$f = __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; });
|
|
13469
|
+
var Item = newStyled.span(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
13470
|
+
var Number$1 = newStyled(Item)(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
13471
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
13471
13472
|
var QuantityPicker = function (_a) {
|
|
13472
13473
|
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;
|
|
13473
13474
|
var theme = useTheme();
|
|
@@ -13490,9 +13491,9 @@ var QuantityPicker = function (_a) {
|
|
|
13490
13491
|
return clamp(value);
|
|
13491
13492
|
});
|
|
13492
13493
|
}, [value, clamp]);
|
|
13493
|
-
return (jsxs$1(Container$
|
|
13494
|
+
return (jsxs$1(Container$d, __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));
|
|
13494
13495
|
};
|
|
13495
|
-
var templateObject_1$
|
|
13496
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$d, templateObject_4$9;
|
|
13496
13497
|
|
|
13497
13498
|
var htmlReactParser = {exports: {}};
|
|
13498
13499
|
|
|
@@ -17273,17 +17274,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17273
17274
|
HTMLReactParser$1.attributesToProps;
|
|
17274
17275
|
HTMLReactParser$1.Element;
|
|
17275
17276
|
|
|
17276
|
-
var Container$
|
|
17277
|
-
var Card = newStyled.div(templateObject_2$
|
|
17278
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17279
|
-
var Label = newStyled.div(templateObject_4$
|
|
17280
|
-
var Check = newStyled.div(templateObject_5$
|
|
17281
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
17282
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17283
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17277
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
17278
|
+
var Card = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
17279
|
+
var Tag = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
17280
|
+
var Label = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
17281
|
+
var Check = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
17282
|
+
var IconContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __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"])));
|
|
17283
|
+
var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
|
|
17284
|
+
var DiscountContainer = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
17284
17285
|
var PackSelector = function (_a) {
|
|
17285
17286
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17286
|
-
return (jsx$1(Container$
|
|
17287
|
+
return (jsx$1(Container$c, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17287
17288
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17288
17289
|
}) }), void 0));
|
|
17289
17290
|
};
|
|
@@ -17309,31 +17310,31 @@ var PackCard = function (_a) {
|
|
|
17309
17310
|
currency: currencyCode || 'USD',
|
|
17310
17311
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17311
17312
|
};
|
|
17312
|
-
var templateObject_1$
|
|
17313
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$c, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3;
|
|
17313
17314
|
|
|
17314
|
-
var Title = newStyled.div(templateObject_1$
|
|
17315
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17316
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17317
|
-
var Container$
|
|
17315
|
+
var Title = newStyled.div(templateObject_1$d || (templateObject_1$d = __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; });
|
|
17316
|
+
var H2 = newStyled.h2(templateObject_2$b || (templateObject_2$b = __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; });
|
|
17317
|
+
var ArrowContainer = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17318
|
+
var Container$b = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17318
17319
|
var Accordion = function (_a) {
|
|
17319
17320
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
17320
17321
|
var theme = useTheme();
|
|
17321
17322
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17322
|
-
return (jsxs$1(Container$
|
|
17323
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { 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));
|
|
17323
17324
|
};
|
|
17324
|
-
var templateObject_1$
|
|
17325
|
-
|
|
17326
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17327
|
-
var Header = newStyled.div(templateObject_2$
|
|
17328
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17329
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17330
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
17331
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
17332
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
17333
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
17334
|
-
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"])));
|
|
17335
|
-
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"])));
|
|
17336
|
-
var templateObject_1$
|
|
17325
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$7;
|
|
17326
|
+
|
|
17327
|
+
var SectionContent = newStyled.div(templateObject_1$c || (templateObject_1$c = __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; });
|
|
17328
|
+
var Header = newStyled.div(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
17329
|
+
var MobileHeader = newStyled.div(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
17330
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
17331
|
+
var H4 = newStyled.h4(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
17332
|
+
var FilterLink = newStyled.a(templateObject_6$3 || (templateObject_6$3 = __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; });
|
|
17333
|
+
var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17334
|
+
var ClearAll = newStyled.span(templateObject_8$2 || (templateObject_8$2 = __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; });
|
|
17335
|
+
var MobileFooter = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __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"])));
|
|
17336
|
+
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __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"])));
|
|
17337
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17337
17338
|
|
|
17338
17339
|
var Filters = function (_a) {
|
|
17339
17340
|
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;
|
|
@@ -17431,20 +17432,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17431
17432
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
|
|
17432
17433
|
};
|
|
17433
17434
|
|
|
17434
|
-
var Container$
|
|
17435
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17436
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17437
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17438
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
17435
|
+
var Container$a = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
17436
|
+
var BackArrow = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17437
|
+
var BoldSpan = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
17438
|
+
var NormalSpan = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
17439
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
17439
17440
|
var SearchNavigation = function (_a) {
|
|
17440
17441
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17441
|
-
return (jsxs$1(Container$
|
|
17442
|
+
return (jsxs$1(Container$a, { 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) {
|
|
17442
17443
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17443
17444
|
}) }, void 0)] }, void 0));
|
|
17444
17445
|
};
|
|
17445
|
-
var templateObject_1$
|
|
17446
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$5, templateObject_5$3;
|
|
17446
17447
|
|
|
17447
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17448
|
+
var TabContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
17448
17449
|
var titleSize = _a.titleSize;
|
|
17449
17450
|
return titleSize;
|
|
17450
17451
|
}, function (_a) {
|
|
@@ -17461,15 +17462,15 @@ var Tab = function (_a) {
|
|
|
17461
17462
|
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;
|
|
17462
17463
|
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));
|
|
17463
17464
|
};
|
|
17464
|
-
var templateObject_1$
|
|
17465
|
+
var templateObject_1$a;
|
|
17465
17466
|
|
|
17466
|
-
var Container$
|
|
17467
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17467
|
+
var Container$9 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17468
|
+
var TabList = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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) {
|
|
17468
17469
|
var backgroundColor = _a.backgroundColor;
|
|
17469
17470
|
return backgroundColor;
|
|
17470
17471
|
});
|
|
17471
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17472
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17472
|
+
var TabContent = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17473
|
+
var TabSeparator = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
17473
17474
|
var Tabs = function (_a) {
|
|
17474
17475
|
var _b;
|
|
17475
17476
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17478,11 +17479,11 @@ var Tabs = function (_a) {
|
|
|
17478
17479
|
return null;
|
|
17479
17480
|
}
|
|
17480
17481
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17481
|
-
return (jsxs$1(Container$
|
|
17482
|
+
return (jsxs$1(Container$9, __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));
|
|
17482
17483
|
};
|
|
17483
|
-
var templateObject_1$
|
|
17484
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$4;
|
|
17484
17485
|
|
|
17485
|
-
var Container$
|
|
17486
|
+
var Container$8 = newStyled.div(function (props) { return ({
|
|
17486
17487
|
height: 'auto',
|
|
17487
17488
|
textAlign: 'center',
|
|
17488
17489
|
justifyContent: 'center',
|
|
@@ -17532,12 +17533,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17532
17533
|
textAlign: 'center',
|
|
17533
17534
|
lineHeight: '18px',
|
|
17534
17535
|
};
|
|
17535
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
17536
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$8, __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));
|
|
17536
17537
|
};
|
|
17537
17538
|
|
|
17538
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17539
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17540
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17539
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
17540
|
+
var VideoOverlay = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
17541
|
+
var FullscreenVideo = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
17541
17542
|
var ImageVideo = function (_a) {
|
|
17542
17543
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17543
17544
|
var video = useRef(null);
|
|
@@ -17545,7 +17546,7 @@ var ImageVideo = function (_a) {
|
|
|
17545
17546
|
var handleOnClick = function () {
|
|
17546
17547
|
setOpened(true);
|
|
17547
17548
|
};
|
|
17548
|
-
return (jsxs$1(Fragment$1, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$6, __assign$1({ variant: "link", style: {
|
|
17549
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(ImageWrapper$1, { children: [jsx$1(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$6, __assign$1({ variant: "link", style: {
|
|
17549
17550
|
position: 'absolute',
|
|
17550
17551
|
top: '10px',
|
|
17551
17552
|
right: '10px',
|
|
@@ -17557,12 +17558,12 @@ var ImageVideo = function (_a) {
|
|
|
17557
17558
|
height: '100%',
|
|
17558
17559
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17559
17560
|
};
|
|
17560
|
-
var templateObject_1$
|
|
17561
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7;
|
|
17561
17562
|
|
|
17562
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17563
|
-
var ContainerMobile = css(templateObject_2$
|
|
17564
|
-
var Container$
|
|
17565
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
17563
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
17564
|
+
var ContainerMobile = css(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
17565
|
+
var Container$7 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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);
|
|
17566
|
+
var TextContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
17566
17567
|
var TextWithImage = function (_a) {
|
|
17567
17568
|
var _b, _c, _d, _e;
|
|
17568
17569
|
var title = _a.title, text = _a.text, children = _a.children, 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", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -17582,7 +17583,7 @@ var TextWithImage = function (_a) {
|
|
|
17582
17583
|
// @ts-ignore
|
|
17583
17584
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17584
17585
|
};
|
|
17585
|
-
return (jsxs(Container$
|
|
17586
|
+
return (jsxs(Container$7, __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), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17586
17587
|
backgroundColor: props.btnBGColor,
|
|
17587
17588
|
color: '#ffffff',
|
|
17588
17589
|
border: props.btnBGColor,
|
|
@@ -17592,9 +17593,9 @@ var TextWithImage = function (_a) {
|
|
|
17592
17593
|
},
|
|
17593
17594
|
} }, 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));
|
|
17594
17595
|
};
|
|
17595
|
-
var templateObject_1$
|
|
17596
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$3;
|
|
17596
17597
|
|
|
17597
|
-
var Container$
|
|
17598
|
+
var Container$6 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17598
17599
|
var AccordionOptions = function (_a) {
|
|
17599
17600
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17600
17601
|
var _b = useState({
|
|
@@ -17607,7 +17608,7 @@ var AccordionOptions = function (_a) {
|
|
|
17607
17608
|
}
|
|
17608
17609
|
return false;
|
|
17609
17610
|
};
|
|
17610
|
-
return (jsx$1(Container$
|
|
17611
|
+
return (jsx$1(Container$6, { children: accordions.map(function (accordion, index) {
|
|
17611
17612
|
var forceOpenValue = getForceOpen(index);
|
|
17612
17613
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17613
17614
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17618,9 +17619,9 @@ var AccordionOptions = function (_a) {
|
|
|
17618
17619
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17619
17620
|
}) }, void 0));
|
|
17620
17621
|
};
|
|
17621
|
-
var templateObject_1$
|
|
17622
|
+
var templateObject_1$6;
|
|
17622
17623
|
|
|
17623
|
-
var Container$
|
|
17624
|
+
var Container$5 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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) {
|
|
17624
17625
|
var alignCenter = _a.alignCenter;
|
|
17625
17626
|
return alignCenter &&
|
|
17626
17627
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17630,14 +17631,14 @@ var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __ma
|
|
|
17630
17631
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17631
17632
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17632
17633
|
});
|
|
17633
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17634
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17634
|
+
var TitleText = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
17635
|
+
var BannerText = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
17635
17636
|
var ShortBanner = function (_a) {
|
|
17636
17637
|
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;
|
|
17637
17638
|
var theme = useTheme();
|
|
17638
|
-
return (jsxs$1(Container$
|
|
17639
|
+
return (jsxs$1(Container$5, __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));
|
|
17639
17640
|
};
|
|
17640
|
-
var templateObject_1$
|
|
17641
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
17641
17642
|
|
|
17642
17643
|
/* base styles & size variants */
|
|
17643
17644
|
var UserInfoTextStyles = {
|
|
@@ -17705,13 +17706,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17705
17706
|
}
|
|
17706
17707
|
};
|
|
17707
17708
|
|
|
17708
|
-
var Container$
|
|
17709
|
+
var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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 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 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) {
|
|
17709
17710
|
return props.isMobile
|
|
17710
17711
|
? props.styles.imageContainerMobileMaxWidth
|
|
17711
17712
|
: props.styles.imageContainerMaxWidth;
|
|
17712
17713
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17713
|
-
var ImageContainer$
|
|
17714
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17714
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
17715
|
+
var ImageCard = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"])), function (props) {
|
|
17715
17716
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17716
17717
|
}, function (props) {
|
|
17717
17718
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17729,13 +17730,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17729
17730
|
var theme = useTheme();
|
|
17730
17731
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17731
17732
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17732
|
-
return (jsxs$1(Container$
|
|
17733
|
+
return (jsxs$1(Container$4, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxs$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, alignCenter: alignCenter, fontSize: isMobile ? stylesBySize.userInfoTextMobileFontSize : stylesBySize.userInfoTextFontSize }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17733
17734
|
};
|
|
17734
|
-
var templateObject_1$
|
|
17735
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
17735
17736
|
|
|
17736
|
-
var Container$
|
|
17737
|
-
var ImageContainer = newStyled.div(templateObject_2$
|
|
17738
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17737
|
+
var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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'); });
|
|
17738
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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'); });
|
|
17739
|
+
var StyledTitle = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17739
17740
|
var titlePosition = _a.titlePosition;
|
|
17740
17741
|
return titlePosition == 'center' &&
|
|
17741
17742
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17743,20 +17744,20 @@ var StyledTitle = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __ma
|
|
|
17743
17744
|
var ImageCardWithDescription = function (_a) {
|
|
17744
17745
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17745
17746
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17746
|
-
return (jsxs$1(Container$
|
|
17747
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __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));
|
|
17747
17748
|
};
|
|
17748
|
-
var templateObject_1$
|
|
17749
|
-
|
|
17750
|
-
var Container$
|
|
17751
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17752
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17753
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
17754
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
17755
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
17749
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
17750
|
+
|
|
17751
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17752
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17753
|
+
var CheckpointDate = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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; });
|
|
17754
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __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'); });
|
|
17755
|
+
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __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'); });
|
|
17756
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __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) {
|
|
17756
17757
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
17757
17758
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
17758
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
17759
|
-
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; });
|
|
17759
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __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)'); });
|
|
17760
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __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; });
|
|
17760
17761
|
var TrackingProgress = function (_a) {
|
|
17761
17762
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
17762
17763
|
var theme = useTheme();
|
|
@@ -17776,7 +17777,7 @@ var TrackingProgress = function (_a) {
|
|
|
17776
17777
|
}
|
|
17777
17778
|
return '30px';
|
|
17778
17779
|
};
|
|
17779
|
-
return (jsxs$1(Container$
|
|
17780
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17780
17781
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17781
17782
|
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
|
|
17782
17783
|
? theme.colors.semantic.informative.color
|
|
@@ -17785,15 +17786,15 @@ var TrackingProgress = function (_a) {
|
|
|
17785
17786
|
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));
|
|
17786
17787
|
})] }), void 0));
|
|
17787
17788
|
};
|
|
17788
|
-
var templateObject_1$
|
|
17789
|
-
|
|
17790
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
17791
|
-
var ReviewsContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
17792
|
-
var ReviewsCount = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
17793
|
-
var ReviewsStars = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
17794
|
-
var ReviewsTextCount = newStyled(Text$6)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
17795
|
-
var ReviewsImages = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
17796
|
-
var SummaryItem = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
17789
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
17790
|
+
|
|
17791
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
17792
|
+
var ReviewsContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
17793
|
+
var ReviewsCount = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
17794
|
+
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
17795
|
+
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
17796
|
+
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
17797
|
+
var SummaryItem = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
17797
17798
|
var backgroundUrl = _a.backgroundUrl;
|
|
17798
17799
|
return "url(".concat(backgroundUrl, ")");
|
|
17799
17800
|
});
|
|
@@ -17801,9 +17802,37 @@ var ReviewsHeader = function (_a) {
|
|
|
17801
17802
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
17802
17803
|
var starsNumber = 5;
|
|
17803
17804
|
var theme = useTheme();
|
|
17804
|
-
return (jsxs$1(Container, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17805
|
+
return (jsxs$1(Container$1, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17806
|
+
};
|
|
17807
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
17808
|
+
|
|
17809
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
17810
|
+
var Content = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
17811
|
+
var StarsContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
17812
|
+
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
17813
|
+
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
17814
|
+
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
17815
|
+
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
17816
|
+
var ReviewTitle = newStyled.h2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
17817
|
+
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"])));
|
|
17818
|
+
var ImageContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
17819
|
+
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
17820
|
+
var ProductContainer = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
17821
|
+
var ProductTitle = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
17822
|
+
var ProductImage = newStyled(Image)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n max-height: 100px;\n height: auto;\n width: auto;\n"], ["\n max-height: 100px;\n height: auto;\n width: auto;\n"])));
|
|
17823
|
+
var ProductImageWrapper = newStyled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"], ["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"])));
|
|
17824
|
+
var DescriptionContainer = newStyled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
|
|
17825
|
+
var CloseButton = newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"], ["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"])));
|
|
17826
|
+
var Review = function (_a) {
|
|
17827
|
+
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, modalId = _a.modalId, _b = _a.maxFullScreen, maxFullScreen = _b === void 0 ? false : _b, verified = _a.verified, productImage = _a.productImage, productTitle = _a.productTitle, productLink = _a.productLink;
|
|
17828
|
+
var handleCloseClick = function () {
|
|
17829
|
+
modalEvent(modalId, {
|
|
17830
|
+
type: 'close',
|
|
17831
|
+
});
|
|
17832
|
+
};
|
|
17833
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container, { children: [jsx$1(CloseButton, __assign$1({ onClick: handleCloseClick }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image && jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0) }, void 0), jsxs$1(DescriptionContainer, { children: [jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17805
17834
|
};
|
|
17806
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
17835
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
17807
17836
|
|
|
17808
|
-
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, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, 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 };
|
|
17837
|
+
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$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, 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 };
|
|
17809
17838
|
//# sourceMappingURL=index.esm.js.map
|