@trafilea/afrodita-components 5.0.0-beta.117 → 5.0.0-beta.119
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 +10 -1
- package/build/index.esm.js +174 -145
- package/build/index.esm.js.map +1 -1
- package/build/index.js +174 -145
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +8 -0
- package/build/theme/revel.theme.js +9 -1
- package/build/theme/shapermint.theme.d.ts +8 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +8 -0
- package/build/theme/truekind.theme.js +7 -0
- 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$1m || (templateObject_1$1m = __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$1m;
|
|
4031
4031
|
|
|
4032
|
-
var Body = newStyled.div(templateObject_1$
|
|
4032
|
+
var Body = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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$1l;
|
|
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$R = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4183
4183
|
var flex = _a.flex;
|
|
4184
4184
|
return flex &&
|
|
4185
4185
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4192,14 +4192,14 @@ var Container$Q = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4192
4192
|
var Card$1 = function (_a) {
|
|
4193
4193
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4194
4194
|
var theme = useTheme();
|
|
4195
|
-
return (jsx$1(Container$
|
|
4195
|
+
return (jsx$1(Container$R, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var Card$2 = Object.assign(Card$1, {
|
|
4198
4198
|
Header: CardHeader,
|
|
4199
4199
|
Footer: CardFooter,
|
|
4200
4200
|
Body: CardBody,
|
|
4201
4201
|
});
|
|
4202
|
-
var templateObject_1$
|
|
4202
|
+
var templateObject_1$1k;
|
|
4203
4203
|
|
|
4204
4204
|
var Fragment = Fragment$1;
|
|
4205
4205
|
function jsx(type, props, key) {
|
|
@@ -4341,7 +4341,7 @@ function BaseSelectOption(_a) {
|
|
|
4341
4341
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4342
4342
|
}
|
|
4343
4343
|
|
|
4344
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4344
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4345
4345
|
function BaseSelect(_a) {
|
|
4346
4346
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4347
4347
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4351,7 +4351,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4351
4351
|
Options: BaseSelectOptions,
|
|
4352
4352
|
Option: BaseSelectOption,
|
|
4353
4353
|
});
|
|
4354
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$1j;
|
|
4355
4355
|
|
|
4356
4356
|
var CustomButton = newStyled.button(function (_a) {
|
|
4357
4357
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4564,7 +4564,7 @@ var CustomCheckboxStyles = {
|
|
|
4564
4564
|
},
|
|
4565
4565
|
};
|
|
4566
4566
|
|
|
4567
|
-
var Container$
|
|
4567
|
+
var Container$Q = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4568
4568
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4569
4569
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4570
4570
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4598,9 +4598,9 @@ var Checkbox = function (_a) {
|
|
|
4598
4598
|
useEffect(function () {
|
|
4599
4599
|
mounted.current = true;
|
|
4600
4600
|
}, []);
|
|
4601
|
-
return (jsxs$1(Container$
|
|
4601
|
+
return (jsxs$1(Container$Q, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4602
4602
|
};
|
|
4603
|
-
var templateObject_1$
|
|
4603
|
+
var templateObject_1$1i, templateObject_2$R;
|
|
4604
4604
|
|
|
4605
4605
|
var CustomOption = newStyled.li(function (_a) {
|
|
4606
4606
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4679,7 +4679,7 @@ function SimpleDropdown(_a) {
|
|
|
4679
4679
|
return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4680
4680
|
}
|
|
4681
4681
|
|
|
4682
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4682
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4683
4683
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4684
4684
|
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4685
4685
|
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
@@ -4690,7 +4690,7 @@ var DropdownDialog = function (_a) {
|
|
|
4690
4690
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4691
4691
|
}) }), void 0) }), void 0));
|
|
4692
4692
|
};
|
|
4693
|
-
var templateObject_1$
|
|
4693
|
+
var templateObject_1$1h, templateObject_2$Q, templateObject_3$C, templateObject_4$p;
|
|
4694
4694
|
|
|
4695
4695
|
var getStylesBySize$8 = function (size, theme) {
|
|
4696
4696
|
switch (size) {
|
|
@@ -4750,7 +4750,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4750
4750
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4751
4751
|
// `variants` styles that are consistent through all themes.
|
|
4752
4752
|
var TAGS = {
|
|
4753
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4753
|
+
hero1: newStyled.h1(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject([""], [""]))),
|
|
4754
4754
|
hero2: newStyled.h2(templateObject_2$P || (templateObject_2$P = __makeTemplateObject([""], [""]))),
|
|
4755
4755
|
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4756
4756
|
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4873,9 +4873,9 @@ var DEFAULTS = {
|
|
|
4873
4873
|
size: 'regular',
|
|
4874
4874
|
},
|
|
4875
4875
|
};
|
|
4876
|
-
var templateObject_1$
|
|
4876
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$B, templateObject_4$o, templateObject_5$f, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4877
4877
|
|
|
4878
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4878
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4879
4879
|
var inline = _a.inline;
|
|
4880
4880
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4881
4881
|
});
|
|
@@ -4893,7 +4893,7 @@ var SizeSelector = function (_a) {
|
|
|
4893
4893
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4894
4894
|
}) }), void 0)] }), void 0));
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$
|
|
4896
|
+
var templateObject_1$1f;
|
|
4897
4897
|
|
|
4898
4898
|
var getStylesBySize$7 = function (size) {
|
|
4899
4899
|
switch (size) {
|
|
@@ -4920,7 +4920,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4920
4920
|
} });
|
|
4921
4921
|
};
|
|
4922
4922
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4923
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4923
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
4924
4924
|
};
|
|
4925
4925
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4926
4926
|
if (disabled)
|
|
@@ -4936,16 +4936,16 @@ var TextButton = function (_a) {
|
|
|
4936
4936
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4937
4937
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
4938
4938
|
};
|
|
4939
|
-
var templateObject_1$
|
|
4939
|
+
var templateObject_1$1e;
|
|
4940
4940
|
|
|
4941
|
-
var Container$
|
|
4941
|
+
var Container$P = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4942
4942
|
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4943
4943
|
var PercentageSpan = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4944
4944
|
var SizeFitGuide = function (_a) {
|
|
4945
4945
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4946
|
-
return (jsxs$1(Container$
|
|
4946
|
+
return (jsxs$1(Container$P, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4947
4947
|
};
|
|
4948
|
-
var templateObject_1$
|
|
4948
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$A;
|
|
4949
4949
|
|
|
4950
4950
|
var getStylesBySize$6 = function (size) {
|
|
4951
4951
|
switch (size) {
|
|
@@ -4975,7 +4975,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4975
4975
|
};
|
|
4976
4976
|
}
|
|
4977
4977
|
};
|
|
4978
|
-
var Container$
|
|
4978
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
4979
4979
|
var backgroundColor = _a.backgroundColor;
|
|
4980
4980
|
return backgroundColor;
|
|
4981
4981
|
}, function (_a) {
|
|
@@ -5012,9 +5012,9 @@ var H3$2 = newStyled.h3(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5012
5012
|
var DiscountTag = function (_a) {
|
|
5013
5013
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5014
5014
|
var theme = useTheme();
|
|
5015
|
-
return (jsx$1(Container$
|
|
5015
|
+
return (jsx$1(Container$O, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5016
5016
|
};
|
|
5017
|
-
var templateObject_1$
|
|
5017
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5018
5018
|
|
|
5019
5019
|
var getStylesBySize$5 = function (size) {
|
|
5020
5020
|
switch (size) {
|
|
@@ -5044,7 +5044,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
5044
5044
|
};
|
|
5045
5045
|
}
|
|
5046
5046
|
};
|
|
5047
|
-
var Container$
|
|
5047
|
+
var Container$N = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5048
5048
|
var Price = newStyled.p(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5049
5049
|
var weight = _a.weight;
|
|
5050
5050
|
return (weight ? weight : '400');
|
|
@@ -5095,11 +5095,11 @@ var PriceLabel = function (_a) {
|
|
|
5095
5095
|
weight: 700,
|
|
5096
5096
|
};
|
|
5097
5097
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5098
|
-
return (jsxs$1(Container$
|
|
5098
|
+
return (jsxs$1(Container$N, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5099
5099
|
};
|
|
5100
|
-
var templateObject_1$
|
|
5100
|
+
var templateObject_1$1b, templateObject_2$M, templateObject_3$z;
|
|
5101
5101
|
|
|
5102
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5102
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5103
5103
|
var PriceLabelV2 = function (_a) {
|
|
5104
5104
|
var _b;
|
|
5105
5105
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5127,9 +5127,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5127
5127
|
weight: 700,
|
|
5128
5128
|
};
|
|
5129
5129
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5130
|
-
return (jsxs$1(Container$
|
|
5130
|
+
return (jsxs$1(Container$N, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5131
5131
|
};
|
|
5132
|
-
var templateObject_1$
|
|
5132
|
+
var templateObject_1$1a;
|
|
5133
5133
|
|
|
5134
5134
|
var OneColorSelector = function (_a) {
|
|
5135
5135
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5170,7 +5170,7 @@ var OutOfStock = function (_a) {
|
|
|
5170
5170
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5171
5171
|
};
|
|
5172
5172
|
|
|
5173
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5173
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5174
5174
|
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5175
5175
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5176
5176
|
var Span = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -5192,9 +5192,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5192
5192
|
Option: Option,
|
|
5193
5193
|
OptionsContainer: OptionsContainer,
|
|
5194
5194
|
});
|
|
5195
|
-
var templateObject_1$
|
|
5195
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5196
5196
|
|
|
5197
|
-
var Container$
|
|
5197
|
+
var Container$M = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
5198
5198
|
var borderColor = _a.borderColor;
|
|
5199
5199
|
return borderColor;
|
|
5200
5200
|
});
|
|
@@ -5203,9 +5203,9 @@ var PatternSelector = function (_a) {
|
|
|
5203
5203
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5204
5204
|
var theme = useTheme();
|
|
5205
5205
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5206
|
-
return (jsx$1(Container$
|
|
5206
|
+
return (jsx$1(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5207
5207
|
};
|
|
5208
|
-
var templateObject_1$
|
|
5208
|
+
var templateObject_1$18, templateObject_2$K;
|
|
5209
5209
|
|
|
5210
5210
|
var renderOptions$1 = function (options) {
|
|
5211
5211
|
if (options.length === 0) {
|
|
@@ -5263,7 +5263,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5263
5263
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5264
5264
|
};
|
|
5265
5265
|
|
|
5266
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5266
|
+
var Image$2 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5267
5267
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5268
5268
|
return borderRadiusVariant &&
|
|
5269
5269
|
"\nborder-radius: 20px;\n";
|
|
@@ -5278,7 +5278,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5278
5278
|
var theme = useTheme();
|
|
5279
5279
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5280
5280
|
};
|
|
5281
|
-
var templateObject_1$
|
|
5281
|
+
var templateObject_1$17;
|
|
5282
5282
|
|
|
5283
5283
|
var Button$4 = newStyled.button(function () { return ({
|
|
5284
5284
|
background: 'transparent',
|
|
@@ -9521,14 +9521,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9521
9521
|
return Slider;
|
|
9522
9522
|
}(React__default.Component);
|
|
9523
9523
|
|
|
9524
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9524
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
9525
9525
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9526
9526
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9527
9527
|
}, function (_a) {
|
|
9528
9528
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9529
9529
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9530
9530
|
});
|
|
9531
|
-
var templateObject_1$
|
|
9531
|
+
var templateObject_1$16;
|
|
9532
9532
|
|
|
9533
9533
|
var getStylesBySize$4 = function (size) {
|
|
9534
9534
|
// rem units
|
|
@@ -9587,22 +9587,22 @@ var SliderNavigation = function (_a) {
|
|
|
9587
9587
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9588
9588
|
};
|
|
9589
9589
|
|
|
9590
|
-
var horizontalStyles = css(templateObject_1$
|
|
9590
|
+
var horizontalStyles = css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9591
9591
|
var verticalStyles = css(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
9592
|
-
var Container$
|
|
9592
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9593
9593
|
var position = _a.position;
|
|
9594
9594
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9595
9595
|
});
|
|
9596
9596
|
var Button$3 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9597
9597
|
var ImagePreviewList = function (_a) {
|
|
9598
9598
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9599
|
-
return (jsx$1(Container$
|
|
9599
|
+
return (jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9600
9600
|
arrowWidth: 0.75,
|
|
9601
9601
|
arrowHeight: 1.25,
|
|
9602
9602
|
arrowPadding: 1.625,
|
|
9603
9603
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9604
9604
|
};
|
|
9605
|
-
var templateObject_1$
|
|
9605
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$x, templateObject_4$m;
|
|
9606
9606
|
|
|
9607
9607
|
var propTypes = {exports: {}};
|
|
9608
9608
|
|
|
@@ -11188,15 +11188,15 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11188
11188
|
afterZoomOut: PropTypes.func
|
|
11189
11189
|
} : {};
|
|
11190
11190
|
|
|
11191
|
-
var Container$
|
|
11191
|
+
var Container$K = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
11192
11192
|
var ButtonContainer$2 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 100%;\n button {\n width: 100%;\n padding: 0.5rem 2rem;\n text-transform: capitalize;\n &:hover {\n background-color: #fff;\n color: #292929;\n }\n }\n"], ["\n width: 100%;\n button {\n width: 100%;\n padding: 0.5rem 2rem;\n text-transform: capitalize;\n &:hover {\n background-color: #fff;\n color: #292929;\n }\n }\n"])));
|
|
11193
11193
|
var MirrorEffectButton = function (_a) {
|
|
11194
11194
|
var title = _a.title, onClick = _a.onClick;
|
|
11195
|
-
return (jsx$1(Container$
|
|
11195
|
+
return (jsx$1(Container$K, { children: jsx$1(ButtonContainer$2, { children: jsx$1(ButtonSecondaryOutline, { text: title, onClick: onClick }, void 0) }, void 0) }, void 0));
|
|
11196
11196
|
};
|
|
11197
|
-
var templateObject_1$
|
|
11197
|
+
var templateObject_1$14, templateObject_2$I;
|
|
11198
11198
|
|
|
11199
|
-
var Container$
|
|
11199
|
+
var Container$J = 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) {
|
|
11200
11200
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11201
11201
|
return borderRadiusVariant &&
|
|
11202
11202
|
"\n border-radius: 40px;\n ";
|
|
@@ -11205,14 +11205,14 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H
|
|
|
11205
11205
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11206
11206
|
var ImageProductWithTags$1 = function (_a) {
|
|
11207
11207
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11208
|
-
return (jsxs$1(Container$
|
|
11208
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11209
11209
|
alt: image.alt,
|
|
11210
11210
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11211
11211
|
}, 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), jsx$1(MirrorEffectButton, { title: "See in your size", onClick: function () { } }, void 0)] }), void 0));
|
|
11212
11212
|
};
|
|
11213
|
-
var templateObject_1$
|
|
11213
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$w;
|
|
11214
11214
|
|
|
11215
|
-
var Container$
|
|
11215
|
+
var Container$I = 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"])));
|
|
11216
11216
|
var ProductGallery = function (_a) {
|
|
11217
11217
|
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;
|
|
11218
11218
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11220,11 +11220,11 @@ var ProductGallery = function (_a) {
|
|
|
11220
11220
|
useEffect(function () {
|
|
11221
11221
|
setSelectedImage(initialValue);
|
|
11222
11222
|
}, [initialValue]);
|
|
11223
|
-
return (jsxs$1(Container$
|
|
11223
|
+
return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11224
11224
|
setSelectedImage(value);
|
|
11225
11225
|
}, 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));
|
|
11226
11226
|
};
|
|
11227
|
-
var templateObject_1$
|
|
11227
|
+
var templateObject_1$12;
|
|
11228
11228
|
|
|
11229
11229
|
/* base styles & size variants */
|
|
11230
11230
|
var StarStyles = {
|
|
@@ -11270,8 +11270,8 @@ var StarStyles = {
|
|
|
11270
11270
|
});
|
|
11271
11271
|
},
|
|
11272
11272
|
};
|
|
11273
|
-
var Container$
|
|
11274
|
-
var templateObject_1$
|
|
11273
|
+
var Container$H = 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"])));
|
|
11274
|
+
var templateObject_1$11;
|
|
11275
11275
|
|
|
11276
11276
|
var StarContainer = newStyled.div(function (_a) {
|
|
11277
11277
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11289,7 +11289,7 @@ var sizes = {
|
|
|
11289
11289
|
var StarList = function (_a) {
|
|
11290
11290
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11291
11291
|
var theme = useTheme();
|
|
11292
|
-
return (jsx$1(Container$
|
|
11292
|
+
return (jsx$1(Container$H, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11293
11293
|
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));
|
|
11294
11294
|
}) }, void 0));
|
|
11295
11295
|
};
|
|
@@ -11333,8 +11333,8 @@ var LabelStyles = {
|
|
|
11333
11333
|
});
|
|
11334
11334
|
},
|
|
11335
11335
|
};
|
|
11336
|
-
var Container$
|
|
11337
|
-
var templateObject_1
|
|
11336
|
+
var Container$G = 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"])));
|
|
11337
|
+
var templateObject_1$10;
|
|
11338
11338
|
|
|
11339
11339
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11340
11340
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11372,10 +11372,10 @@ var Rating = function (_a) {
|
|
|
11372
11372
|
href: reviewsContainerId,
|
|
11373
11373
|
}
|
|
11374
11374
|
: {};
|
|
11375
|
-
return (jsxs$1(Container$
|
|
11375
|
+
return (jsxs$1(Container$G, __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));
|
|
11376
11376
|
};
|
|
11377
11377
|
|
|
11378
|
-
var Container$
|
|
11378
|
+
var Container$F = 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"])));
|
|
11379
11379
|
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
11380
11380
|
var textButtonStyles = function (theme) { return ({
|
|
11381
11381
|
border: 'none',
|
|
@@ -11389,9 +11389,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11389
11389
|
var FitPredictor = function (_a) {
|
|
11390
11390
|
var onClick = _a.onClick;
|
|
11391
11391
|
var theme = useTheme();
|
|
11392
|
-
return (jsxs(Container$
|
|
11392
|
+
return (jsxs(Container$F, __assign$1({ theme: theme }, { children: [jsx(Container$F, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11393
11393
|
};
|
|
11394
|
-
var templateObject_1
|
|
11394
|
+
var templateObject_1$$, templateObject_2$G;
|
|
11395
11395
|
|
|
11396
11396
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11397
11397
|
var color = _a.color;
|
|
@@ -11405,7 +11405,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11405
11405
|
margin: '0.938rem 4.188rem',
|
|
11406
11406
|
});
|
|
11407
11407
|
});
|
|
11408
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11408
|
+
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) {
|
|
11409
11409
|
var backgroundColor = _a.backgroundColor;
|
|
11410
11410
|
return backgroundColor;
|
|
11411
11411
|
}, function (_a) {
|
|
@@ -11428,7 +11428,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11428
11428
|
position: 'absolute',
|
|
11429
11429
|
});
|
|
11430
11430
|
});
|
|
11431
|
-
var Container$
|
|
11431
|
+
var Container$E = newStyled.div(function (_a) {
|
|
11432
11432
|
var widthAuto = _a.widthAuto;
|
|
11433
11433
|
return ({
|
|
11434
11434
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11442,9 +11442,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11442
11442
|
var ProgressBar = function (_a) {
|
|
11443
11443
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11444
11444
|
var theme = useTheme();
|
|
11445
|
-
return (jsxs$1(Container$
|
|
11445
|
+
return (jsxs$1(Container$E, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11446
11446
|
};
|
|
11447
|
-
var templateObject_1$
|
|
11447
|
+
var templateObject_1$_;
|
|
11448
11448
|
|
|
11449
11449
|
var getStylesBySize$3 = function (size) {
|
|
11450
11450
|
switch (size) {
|
|
@@ -11465,7 +11465,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11465
11465
|
};
|
|
11466
11466
|
}
|
|
11467
11467
|
};
|
|
11468
|
-
var Container$
|
|
11468
|
+
var Container$D = 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) {
|
|
11469
11469
|
var backgroundColor = _a.backgroundColor;
|
|
11470
11470
|
return backgroundColor;
|
|
11471
11471
|
}, function (_a) {
|
|
@@ -11493,9 +11493,9 @@ var Container$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
11493
11493
|
var IconButton = function (_a) {
|
|
11494
11494
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11495
11495
|
var theme = useTheme();
|
|
11496
|
-
return (jsx$1(Container$
|
|
11496
|
+
return (jsx$1(Container$D, __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));
|
|
11497
11497
|
};
|
|
11498
|
-
var templateObject_1$
|
|
11498
|
+
var templateObject_1$Z;
|
|
11499
11499
|
|
|
11500
11500
|
var TooltipArrow = function (_a) {
|
|
11501
11501
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11575,7 +11575,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11575
11575
|
}
|
|
11576
11576
|
};
|
|
11577
11577
|
|
|
11578
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11578
|
+
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) {
|
|
11579
11579
|
var position = _a.position;
|
|
11580
11580
|
return getWrapperFlexDirection(position);
|
|
11581
11581
|
});
|
|
@@ -11623,7 +11623,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11623
11623
|
return color;
|
|
11624
11624
|
});
|
|
11625
11625
|
var IconContainer$5 = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11626
|
-
var templateObject_1$
|
|
11626
|
+
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11627
11627
|
|
|
11628
11628
|
var Tooltip = function (_a) {
|
|
11629
11629
|
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;
|
|
@@ -11781,8 +11781,8 @@ var ContainerStyles = {
|
|
|
11781
11781
|
},
|
|
11782
11782
|
};
|
|
11783
11783
|
|
|
11784
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11785
|
-
var Container$
|
|
11784
|
+
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"])));
|
|
11785
|
+
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11786
11786
|
var Input$2 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
11787
11787
|
var disabled = _a.disabled;
|
|
11788
11788
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11798,9 +11798,9 @@ var RadioInput = function (_a) {
|
|
|
11798
11798
|
var value = event.currentTarget.value;
|
|
11799
11799
|
onChange({ value: value, label: label });
|
|
11800
11800
|
};
|
|
11801
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11801
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$C, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11802
11802
|
};
|
|
11803
|
-
var templateObject_1$
|
|
11803
|
+
var templateObject_1$X, templateObject_2$E;
|
|
11804
11804
|
|
|
11805
11805
|
var RadioGroupInput = function (_a) {
|
|
11806
11806
|
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;
|
|
@@ -11814,37 +11814,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11814
11814
|
}) }), void 0));
|
|
11815
11815
|
};
|
|
11816
11816
|
|
|
11817
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11818
|
-
var Container$
|
|
11817
|
+
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"])));
|
|
11818
|
+
var Container$B = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11819
11819
|
var Minimalistic = function (_a) {
|
|
11820
11820
|
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;
|
|
11821
11821
|
var theme = useTheme();
|
|
11822
|
-
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$
|
|
11822
|
+
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$B, __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$B, __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));
|
|
11823
11823
|
};
|
|
11824
|
-
var templateObject_1$
|
|
11824
|
+
var templateObject_1$W, templateObject_2$D;
|
|
11825
11825
|
|
|
11826
|
-
var Container$
|
|
11826
|
+
var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11827
11827
|
var Title$5 = newStyled.h1(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11828
11828
|
var Details$1 = newStyled.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
11829
11829
|
var PriceContainer$1 = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
11830
11830
|
var Simple = function (_a) {
|
|
11831
11831
|
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;
|
|
11832
11832
|
var theme = useTheme();
|
|
11833
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11833
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$A, { 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));
|
|
11834
11834
|
};
|
|
11835
|
-
var templateObject_1$
|
|
11835
|
+
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$k;
|
|
11836
11836
|
|
|
11837
11837
|
var Bundle = {
|
|
11838
11838
|
Minimalistic: Minimalistic,
|
|
11839
11839
|
Simple: Simple,
|
|
11840
11840
|
};
|
|
11841
11841
|
|
|
11842
|
-
var Container$
|
|
11842
|
+
var Container$z = 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"])));
|
|
11843
11843
|
var Tag$1 = function (_a) {
|
|
11844
11844
|
var text = _a.text, className = _a.className;
|
|
11845
|
-
return jsx$1(Container$
|
|
11845
|
+
return jsx$1(Container$z, __assign$1({ className: className }, { children: text }), void 0);
|
|
11846
11846
|
};
|
|
11847
|
-
var templateObject_1$
|
|
11847
|
+
var templateObject_1$U;
|
|
11848
11848
|
|
|
11849
11849
|
var getStylesBySize$2 = function (size, styledBorder) {
|
|
11850
11850
|
switch (size) {
|
|
@@ -11947,7 +11947,7 @@ var Timer = function (_a) {
|
|
|
11947
11947
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11948
11948
|
};
|
|
11949
11949
|
|
|
11950
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11950
|
+
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) {
|
|
11951
11951
|
var color = _a.color;
|
|
11952
11952
|
return color;
|
|
11953
11953
|
});
|
|
@@ -11960,7 +11960,7 @@ var InputLabel = function (_a) {
|
|
|
11960
11960
|
var theme = useTheme();
|
|
11961
11961
|
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));
|
|
11962
11962
|
};
|
|
11963
|
-
var templateObject_1$
|
|
11963
|
+
var templateObject_1$T, templateObject_2$B;
|
|
11964
11964
|
|
|
11965
11965
|
/**
|
|
11966
11966
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12014,14 +12014,14 @@ var formatPrice = function (value, _a) {
|
|
|
12014
12014
|
}).format(valueToFormat);
|
|
12015
12015
|
};
|
|
12016
12016
|
|
|
12017
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12017
|
+
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; });
|
|
12018
12018
|
var ErrorContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
12019
12019
|
var Error$1 = function (_a) {
|
|
12020
12020
|
var error = _a.error;
|
|
12021
12021
|
var theme = useTheme();
|
|
12022
12022
|
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));
|
|
12023
12023
|
};
|
|
12024
|
-
var templateObject_1$
|
|
12024
|
+
var templateObject_1$S, templateObject_2$A;
|
|
12025
12025
|
|
|
12026
12026
|
var containerByStatus = function (theme, status) {
|
|
12027
12027
|
if (status === InputValidationType.Valid)
|
|
@@ -12030,7 +12030,7 @@ var containerByStatus = function (theme, status) {
|
|
|
12030
12030
|
return theme.colors.semantic.urgent.color;
|
|
12031
12031
|
return '';
|
|
12032
12032
|
};
|
|
12033
|
-
var Container$
|
|
12033
|
+
var Container$y = 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) {
|
|
12034
12034
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12035
12035
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12036
12036
|
});
|
|
@@ -12095,7 +12095,7 @@ var InputWrapper = newStyled.div(templateObject_3$t || (templateObject_3$t = __m
|
|
|
12095
12095
|
});
|
|
12096
12096
|
var AnimatedPlaceholder = newStyled.span(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12097
12097
|
var ClearInput = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12098
|
-
var templateObject_1$
|
|
12098
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c;
|
|
12099
12099
|
|
|
12100
12100
|
var BaseInput = function (_a) {
|
|
12101
12101
|
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"]);
|
|
@@ -12118,7 +12118,7 @@ var BaseInput = function (_a) {
|
|
|
12118
12118
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12119
12119
|
}, [status]);
|
|
12120
12120
|
var hasValue = Boolean(value);
|
|
12121
|
-
return (jsxs$1(Container$
|
|
12121
|
+
return (jsxs$1(Container$y, __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) {
|
|
12122
12122
|
onChange(event.target.value, event);
|
|
12123
12123
|
}, 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 () {
|
|
12124
12124
|
onChange('', { target: { value: '' } });
|
|
@@ -12139,7 +12139,7 @@ var Button$2 = function (_a) {
|
|
|
12139
12139
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12140
12140
|
};
|
|
12141
12141
|
|
|
12142
|
-
var Container$
|
|
12142
|
+
var Container$x = 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) {
|
|
12143
12143
|
var theme = _a.theme;
|
|
12144
12144
|
return theme.component.inputCustom.input.borderRadius;
|
|
12145
12145
|
});
|
|
@@ -12156,11 +12156,11 @@ var Custom = function (_a) {
|
|
|
12156
12156
|
text: text,
|
|
12157
12157
|
disabled: rest.disabled,
|
|
12158
12158
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12159
|
-
return (jsx$1(Container$
|
|
12159
|
+
return (jsx$1(Container$x, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12160
12160
|
};
|
|
12161
|
-
var templateObject_1$
|
|
12161
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
12162
12162
|
|
|
12163
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12163
|
+
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) {
|
|
12164
12164
|
var size = _a.size;
|
|
12165
12165
|
return (size === 'small' ? '36px' : '');
|
|
12166
12166
|
});
|
|
@@ -12170,9 +12170,9 @@ var Success = function (_a) {
|
|
|
12170
12170
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12171
12171
|
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));
|
|
12172
12172
|
};
|
|
12173
|
-
var templateObject_1$
|
|
12173
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
12174
12174
|
|
|
12175
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12175
|
+
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) {
|
|
12176
12176
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12177
12177
|
return status === InputValidationType.Empty &&
|
|
12178
12178
|
type === 'primary' &&
|
|
@@ -12189,21 +12189,21 @@ var BasePlusButton = function (_a) {
|
|
|
12189
12189
|
}
|
|
12190
12190
|
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));
|
|
12191
12191
|
};
|
|
12192
|
-
var templateObject_1$
|
|
12192
|
+
var templateObject_1$O;
|
|
12193
12193
|
|
|
12194
|
-
var Container$
|
|
12194
|
+
var Container$w = 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"])));
|
|
12195
12195
|
var IconContainer$4 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12196
12196
|
var BasePlusIcon = function (_a) {
|
|
12197
12197
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12198
12198
|
var theme = useTheme();
|
|
12199
12199
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12200
|
-
return (jsx$1(Container$
|
|
12200
|
+
return (jsx$1(Container$w, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12201
12201
|
? theme.colors.shades['700'].color
|
|
12202
12202
|
: status === InputValidationType.Error
|
|
12203
12203
|
? theme.colors.semantic.urgent.color
|
|
12204
12204
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12205
12205
|
};
|
|
12206
|
-
var templateObject_1$
|
|
12206
|
+
var templateObject_1$N, templateObject_2$w;
|
|
12207
12207
|
|
|
12208
12208
|
var Input$1 = {
|
|
12209
12209
|
Simple: BaseInput,
|
|
@@ -12212,7 +12212,7 @@ var Input$1 = {
|
|
|
12212
12212
|
SimplePlusIcon: BasePlusIcon,
|
|
12213
12213
|
};
|
|
12214
12214
|
|
|
12215
|
-
var Container$
|
|
12215
|
+
var Container$v = 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) {
|
|
12216
12216
|
var width = _a.width;
|
|
12217
12217
|
return width;
|
|
12218
12218
|
}, function (_a) {
|
|
@@ -12228,11 +12228,11 @@ var Container$u = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
12228
12228
|
var PaymentMethod = function (_a) {
|
|
12229
12229
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12230
12230
|
var theme = useTheme();
|
|
12231
|
-
return (jsx$1(Container$
|
|
12231
|
+
return (jsx$1(Container$v, __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));
|
|
12232
12232
|
};
|
|
12233
|
-
var templateObject_1$
|
|
12233
|
+
var templateObject_1$M;
|
|
12234
12234
|
|
|
12235
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12235
|
+
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) {
|
|
12236
12236
|
var backgroundColor = _a.backgroundColor;
|
|
12237
12237
|
return backgroundColor;
|
|
12238
12238
|
}, function (_a) {
|
|
@@ -12244,21 +12244,21 @@ var OfferBanner = function (_a) {
|
|
|
12244
12244
|
var theme = useTheme();
|
|
12245
12245
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12246
12246
|
};
|
|
12247
|
-
var templateObject_1$
|
|
12247
|
+
var templateObject_1$L;
|
|
12248
12248
|
|
|
12249
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12249
|
+
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"])));
|
|
12250
12250
|
var GrandTotal = newStyled.h1(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12251
12251
|
var Currency = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12252
|
-
var Container$
|
|
12252
|
+
var Container$u = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12253
12253
|
var Discount = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
12254
12254
|
var Total = function (_a) {
|
|
12255
12255
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12256
12256
|
var theme = useTheme();
|
|
12257
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12257
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$u, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12258
12258
|
};
|
|
12259
|
-
var templateObject_1$
|
|
12259
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
12260
12260
|
|
|
12261
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12261
|
+
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12262
12262
|
var color = _a.color;
|
|
12263
12263
|
return color;
|
|
12264
12264
|
});
|
|
@@ -12277,22 +12277,22 @@ var Subtotal = function (_a) {
|
|
|
12277
12277
|
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));
|
|
12278
12278
|
})] }), void 0));
|
|
12279
12279
|
};
|
|
12280
|
-
var templateObject_1$
|
|
12280
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$h;
|
|
12281
12281
|
|
|
12282
12282
|
var Totals = {
|
|
12283
12283
|
Total: Total,
|
|
12284
12284
|
Subtotal: Subtotal,
|
|
12285
12285
|
};
|
|
12286
12286
|
|
|
12287
|
-
var Container$
|
|
12287
|
+
var Container$t = 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; });
|
|
12288
12288
|
var IconContainer$3 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
12289
12289
|
var Text$4 = newStyled.p(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12290
12290
|
var Details = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12291
12291
|
var Note = function (_a) {
|
|
12292
12292
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12293
|
-
return (jsxs$1(Container$
|
|
12293
|
+
return (jsxs$1(Container$t, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12294
12294
|
};
|
|
12295
|
-
var templateObject_1$
|
|
12295
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$g;
|
|
12296
12296
|
|
|
12297
12297
|
/* eslint-disable no-param-reassign */
|
|
12298
12298
|
var index$1 = function (breakpoints) {
|
|
@@ -12378,7 +12378,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12378
12378
|
literal: true,
|
|
12379
12379
|
});
|
|
12380
12380
|
|
|
12381
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12381
|
+
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; });
|
|
12382
12382
|
var Line = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12383
12383
|
var Row$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12384
12384
|
flexDirection: ['column', 'row'],
|
|
@@ -12407,20 +12407,20 @@ var DeliveryDetails = function (_a) {
|
|
|
12407
12407
|
var theme = useTheme();
|
|
12408
12408
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12409
12409
|
};
|
|
12410
|
-
var templateObject_1$
|
|
12410
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$o, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
12411
12411
|
|
|
12412
|
-
var Container$
|
|
12412
|
+
var Container$s = 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"])));
|
|
12413
12413
|
var Text$3 = newStyled.p(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12414
12414
|
var ScrollToTop = function (_a) {
|
|
12415
12415
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12416
12416
|
var theme = useTheme();
|
|
12417
12417
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12418
|
-
return (jsxs$1(Container$
|
|
12418
|
+
return (jsxs$1(Container$s, __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));
|
|
12419
12419
|
};
|
|
12420
|
-
var templateObject_1$
|
|
12420
|
+
var templateObject_1$G, templateObject_2$r;
|
|
12421
12421
|
|
|
12422
12422
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12423
|
-
var Container$
|
|
12423
|
+
var Container$r = 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) {
|
|
12424
12424
|
var color = _a.color;
|
|
12425
12425
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12426
12426
|
});
|
|
@@ -12428,11 +12428,11 @@ var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplate
|
|
|
12428
12428
|
var OrderBar = function (_a) {
|
|
12429
12429
|
var message = _a.message, color = _a.color;
|
|
12430
12430
|
var theme = useTheme();
|
|
12431
|
-
return (jsxs$1(Container$
|
|
12431
|
+
return (jsxs$1(Container$r, __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));
|
|
12432
12432
|
};
|
|
12433
|
-
var templateObject_1$
|
|
12433
|
+
var templateObject_1$F, templateObject_2$q;
|
|
12434
12434
|
|
|
12435
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12435
|
+
var TableElement = 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; });
|
|
12436
12436
|
var TableCell = newStyled.td(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12437
12437
|
var TableHead = newStyled.th(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12438
12438
|
var TableRow = newStyled.tr(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -12441,16 +12441,16 @@ var SizeTable = function (_a) {
|
|
|
12441
12441
|
var theme = useTheme();
|
|
12442
12442
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12443
12443
|
};
|
|
12444
|
-
var templateObject_1$
|
|
12444
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$e;
|
|
12445
12445
|
|
|
12446
|
-
var Img = newStyled.img(templateObject_1$
|
|
12446
|
+
var Img = newStyled.img(templateObject_1$D || (templateObject_1$D = __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; });
|
|
12447
12447
|
var Image = function (_a) {
|
|
12448
12448
|
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;
|
|
12449
12449
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12450
12450
|
};
|
|
12451
|
-
var templateObject_1$
|
|
12451
|
+
var templateObject_1$D;
|
|
12452
12452
|
|
|
12453
|
-
var Container$
|
|
12453
|
+
var Container$q = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12454
12454
|
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12455
12455
|
var DescriptionContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12456
12456
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12488,9 +12488,9 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
|
|
|
12488
12488
|
var SimpleOrderItem = function (_a) {
|
|
12489
12489
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12490
12490
|
var theme = useTheme();
|
|
12491
|
-
return (jsxs$1(Container$
|
|
12491
|
+
return (jsxs$1(Container$q, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12492
12492
|
};
|
|
12493
|
-
var templateObject_1$
|
|
12493
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$9;
|
|
12494
12494
|
|
|
12495
12495
|
function formatDate(date) {
|
|
12496
12496
|
var day = date.getDate();
|
|
@@ -12499,7 +12499,7 @@ function formatDate(date) {
|
|
|
12499
12499
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12500
12500
|
}
|
|
12501
12501
|
|
|
12502
|
-
var Container$
|
|
12502
|
+
var Container$p = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
12503
12503
|
var Heading = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
12504
12504
|
fontSize: ['14px', '16px'],
|
|
12505
12505
|
lineHeight: ['22px', '24px'],
|
|
@@ -12522,17 +12522,17 @@ var P$1 = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplate
|
|
|
12522
12522
|
var Review = function (_a) {
|
|
12523
12523
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12524
12524
|
var theme = useTheme();
|
|
12525
|
-
return (jsxs$1(Container$
|
|
12525
|
+
return (jsxs$1(Container$p, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12526
12526
|
};
|
|
12527
|
-
var templateObject_1$
|
|
12527
|
+
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12528
12528
|
|
|
12529
|
-
var List = newStyled.ul(templateObject_1$
|
|
12529
|
+
var List = newStyled.ul(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12530
12530
|
var Item$1 = newStyled.li(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
12531
12531
|
var DropdownWrapper = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
12532
12532
|
var ArrowContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
12533
12533
|
var StyledDropdown = newStyled.ul(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
12534
12534
|
var DropdownItem = newStyled.li(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
12535
|
-
var templateObject_1$
|
|
12535
|
+
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
12536
12536
|
|
|
12537
12537
|
var DropdownListIcons = function (_a) {
|
|
12538
12538
|
var items = _a.items;
|
|
@@ -12545,7 +12545,7 @@ var Dropdown = function (_a) {
|
|
|
12545
12545
|
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));
|
|
12546
12546
|
};
|
|
12547
12547
|
|
|
12548
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12548
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$z || (templateObject_1$z = __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; });
|
|
12549
12549
|
var AmazonButton = function (_a) {
|
|
12550
12550
|
var onClick = _a.onClick;
|
|
12551
12551
|
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));
|
|
@@ -12554,9 +12554,9 @@ var PaypalButton = function (_a) {
|
|
|
12554
12554
|
var onClick = _a.onClick;
|
|
12555
12555
|
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));
|
|
12556
12556
|
};
|
|
12557
|
-
var templateObject_1$
|
|
12557
|
+
var templateObject_1$z;
|
|
12558
12558
|
|
|
12559
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12559
|
+
var Wrapper = newStyled.div(templateObject_1$y || (templateObject_1$y = __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'); });
|
|
12560
12560
|
var Col = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12561
12561
|
var Row = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
12562
12562
|
return props.rightToLeft &&
|
|
@@ -12570,7 +12570,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12570
12570
|
var theme = useTheme();
|
|
12571
12571
|
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));
|
|
12572
12572
|
};
|
|
12573
|
-
var templateObject_1$
|
|
12573
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
12574
12574
|
|
|
12575
12575
|
var index = /*#__PURE__*/Object.freeze({
|
|
12576
12576
|
__proto__: null,
|
|
@@ -12583,6 +12583,35 @@ var Spacing = function (_a) {
|
|
|
12583
12583
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12584
12584
|
};
|
|
12585
12585
|
|
|
12586
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
12587
|
+
var height = _a.height;
|
|
12588
|
+
return (height ? height : '1.5em');
|
|
12589
|
+
}, function (_a) {
|
|
12590
|
+
var width = _a.width;
|
|
12591
|
+
return (width ? width : '100%');
|
|
12592
|
+
}, function (_a) {
|
|
12593
|
+
var theme = _a.theme;
|
|
12594
|
+
return theme.colors.background.disabled;
|
|
12595
|
+
}, function (_a) {
|
|
12596
|
+
var theme = _a.theme;
|
|
12597
|
+
return theme.radius.regular;
|
|
12598
|
+
}, function (_a) {
|
|
12599
|
+
var theme = _a.theme;
|
|
12600
|
+
return theme.colors.shades['10'].color;
|
|
12601
|
+
}, function (_a) {
|
|
12602
|
+
var theme = _a.theme;
|
|
12603
|
+
return theme.colors.background.disabled;
|
|
12604
|
+
}, function (_a) {
|
|
12605
|
+
var theme = _a.theme;
|
|
12606
|
+
return theme.colors.shades['10'].color;
|
|
12607
|
+
});
|
|
12608
|
+
var SkeletonBox = function (_a) {
|
|
12609
|
+
var width = _a.width, height = _a.height;
|
|
12610
|
+
var theme = useTheme();
|
|
12611
|
+
return jsx$1(Container$o, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12612
|
+
};
|
|
12613
|
+
var templateObject_1$x;
|
|
12614
|
+
|
|
12586
12615
|
var ImageContainer$2 = newStyled.div(function (_a) {
|
|
12587
12616
|
var width = _a.width, height = _a.height;
|
|
12588
12617
|
return ({
|
|
@@ -12623,7 +12652,7 @@ var TopTagContainer$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9
|
|
|
12623
12652
|
var BottomTagContainer$1 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12624
12653
|
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12625
12654
|
var ProductItemMobile = function (_a) {
|
|
12626
|
-
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;
|
|
12655
|
+
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;
|
|
12627
12656
|
var theme = useTheme();
|
|
12628
12657
|
var styles = getStylesBySize(size);
|
|
12629
12658
|
var space = useMemo(function () {
|
|
@@ -12638,7 +12667,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12638
12667
|
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));
|
|
12639
12668
|
};
|
|
12640
12669
|
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)); };
|
|
12641
|
-
return (jsxs(Container$n, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
|
|
12670
|
+
return (jsxs(Container$n, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: 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));
|
|
12642
12671
|
};
|
|
12643
12672
|
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
12644
12673
|
|
|
@@ -13345,8 +13374,8 @@ var SlideDots = function (_a) {
|
|
|
13345
13374
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13346
13375
|
var theme = useTheme();
|
|
13347
13376
|
return (jsx$1(Container$e, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13348
|
-
? theme.
|
|
13349
|
-
: theme.
|
|
13377
|
+
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13378
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13350
13379
|
};
|
|
13351
13380
|
var templateObject_1$l;
|
|
13352
13381
|
|