@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.js
CHANGED
|
@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
|
|
|
4042
4042
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4043
4043
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4044
4044
|
|
|
4045
|
-
var Section = newStyled.div(templateObject_1$
|
|
4045
|
+
var Section = newStyled.div(templateObject_1$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) {
|
|
4046
4046
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4047
4047
|
});
|
|
4048
4048
|
var CardHeader = function (_a) {
|
|
@@ -4053,14 +4053,14 @@ var CardFooter = function (_a) {
|
|
|
4053
4053
|
var children = _a.children;
|
|
4054
4054
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4055
4055
|
};
|
|
4056
|
-
var templateObject_1$
|
|
4056
|
+
var templateObject_1$1m;
|
|
4057
4057
|
|
|
4058
|
-
var Body = newStyled.div(templateObject_1$
|
|
4058
|
+
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"])));
|
|
4059
4059
|
var CardBody = function (_a) {
|
|
4060
4060
|
var children = _a.children;
|
|
4061
4061
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4062
4062
|
};
|
|
4063
|
-
var templateObject_1$
|
|
4063
|
+
var templateObject_1$1l;
|
|
4064
4064
|
|
|
4065
4065
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4066
4066
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4207
4207
|
|
|
4208
|
-
var Container$
|
|
4208
|
+
var Container$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) {
|
|
4209
4209
|
var flex = _a.flex;
|
|
4210
4210
|
return flex &&
|
|
4211
4211
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4218,14 +4218,14 @@ var Container$Q = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4218
4218
|
var Card$1 = function (_a) {
|
|
4219
4219
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4220
4220
|
var theme = useTheme();
|
|
4221
|
-
return (jsxRuntime.jsx(Container$
|
|
4221
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4222
4222
|
};
|
|
4223
4223
|
var Card$2 = Object.assign(Card$1, {
|
|
4224
4224
|
Header: CardHeader,
|
|
4225
4225
|
Footer: CardFooter,
|
|
4226
4226
|
Body: CardBody,
|
|
4227
4227
|
});
|
|
4228
|
-
var templateObject_1$
|
|
4228
|
+
var templateObject_1$1k;
|
|
4229
4229
|
|
|
4230
4230
|
var Fragment = jsxRuntime.Fragment;
|
|
4231
4231
|
function jsx(type, props, key) {
|
|
@@ -4367,7 +4367,7 @@ function BaseSelectOption(_a) {
|
|
|
4367
4367
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4368
4368
|
}
|
|
4369
4369
|
|
|
4370
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4370
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4371
4371
|
function BaseSelect(_a) {
|
|
4372
4372
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4373
4373
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4377,7 +4377,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4377
4377
|
Options: BaseSelectOptions,
|
|
4378
4378
|
Option: BaseSelectOption,
|
|
4379
4379
|
});
|
|
4380
|
-
var templateObject_1$
|
|
4380
|
+
var templateObject_1$1j;
|
|
4381
4381
|
|
|
4382
4382
|
var CustomButton = newStyled.button(function (_a) {
|
|
4383
4383
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4590,7 +4590,7 @@ var CustomCheckboxStyles = {
|
|
|
4590
4590
|
},
|
|
4591
4591
|
};
|
|
4592
4592
|
|
|
4593
|
-
var Container$
|
|
4593
|
+
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"])));
|
|
4594
4594
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4595
4595
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4596
4596
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4624,9 +4624,9 @@ var Checkbox = function (_a) {
|
|
|
4624
4624
|
React$2.useEffect(function () {
|
|
4625
4625
|
mounted.current = true;
|
|
4626
4626
|
}, []);
|
|
4627
|
-
return (jsxRuntime.jsxs(Container$
|
|
4627
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4628
4628
|
};
|
|
4629
|
-
var templateObject_1$
|
|
4629
|
+
var templateObject_1$1i, templateObject_2$R;
|
|
4630
4630
|
|
|
4631
4631
|
var CustomOption = newStyled.li(function (_a) {
|
|
4632
4632
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4705,7 +4705,7 @@ function SimpleDropdown(_a) {
|
|
|
4705
4705
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4706
4706
|
}
|
|
4707
4707
|
|
|
4708
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4708
|
+
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; });
|
|
4709
4709
|
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; });
|
|
4710
4710
|
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4711
4711
|
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
@@ -4716,7 +4716,7 @@ var DropdownDialog = function (_a) {
|
|
|
4716
4716
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4717
4717
|
}) }), void 0) }), void 0));
|
|
4718
4718
|
};
|
|
4719
|
-
var templateObject_1$
|
|
4719
|
+
var templateObject_1$1h, templateObject_2$Q, templateObject_3$C, templateObject_4$p;
|
|
4720
4720
|
|
|
4721
4721
|
var getStylesBySize$8 = function (size, theme) {
|
|
4722
4722
|
switch (size) {
|
|
@@ -4776,7 +4776,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4776
4776
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4777
4777
|
// `variants` styles that are consistent through all themes.
|
|
4778
4778
|
var TAGS = {
|
|
4779
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4779
|
+
hero1: newStyled.h1(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject([""], [""]))),
|
|
4780
4780
|
hero2: newStyled.h2(templateObject_2$P || (templateObject_2$P = __makeTemplateObject([""], [""]))),
|
|
4781
4781
|
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4899,9 +4899,9 @@ var DEFAULTS = {
|
|
|
4899
4899
|
size: 'regular',
|
|
4900
4900
|
},
|
|
4901
4901
|
};
|
|
4902
|
-
var templateObject_1$
|
|
4902
|
+
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;
|
|
4903
4903
|
|
|
4904
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4904
|
+
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) {
|
|
4905
4905
|
var inline = _a.inline;
|
|
4906
4906
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4907
4907
|
});
|
|
@@ -4919,7 +4919,7 @@ var SizeSelector = function (_a) {
|
|
|
4919
4919
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4920
4920
|
}) }), void 0)] }), void 0));
|
|
4921
4921
|
};
|
|
4922
|
-
var templateObject_1$
|
|
4922
|
+
var templateObject_1$1f;
|
|
4923
4923
|
|
|
4924
4924
|
var getStylesBySize$7 = function (size) {
|
|
4925
4925
|
switch (size) {
|
|
@@ -4946,7 +4946,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4946
4946
|
} });
|
|
4947
4947
|
};
|
|
4948
4948
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4949
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4949
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$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));
|
|
4950
4950
|
};
|
|
4951
4951
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4952
4952
|
if (disabled)
|
|
@@ -4962,16 +4962,16 @@ var TextButton = function (_a) {
|
|
|
4962
4962
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4963
4963
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
4964
4964
|
};
|
|
4965
|
-
var templateObject_1$
|
|
4965
|
+
var templateObject_1$1e;
|
|
4966
4966
|
|
|
4967
|
-
var Container$
|
|
4967
|
+
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"])));
|
|
4968
4968
|
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4969
4969
|
var PercentageSpan = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4970
4970
|
var SizeFitGuide = function (_a) {
|
|
4971
4971
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4972
|
-
return (jsxRuntime.jsxs(Container$
|
|
4972
|
+
return (jsxRuntime.jsxs(Container$P, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4973
4973
|
};
|
|
4974
|
-
var templateObject_1$
|
|
4974
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$A;
|
|
4975
4975
|
|
|
4976
4976
|
var getStylesBySize$6 = function (size) {
|
|
4977
4977
|
switch (size) {
|
|
@@ -5001,7 +5001,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5001
5001
|
};
|
|
5002
5002
|
}
|
|
5003
5003
|
};
|
|
5004
|
-
var Container$
|
|
5004
|
+
var Container$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) {
|
|
5005
5005
|
var backgroundColor = _a.backgroundColor;
|
|
5006
5006
|
return backgroundColor;
|
|
5007
5007
|
}, function (_a) {
|
|
@@ -5038,9 +5038,9 @@ var H3$2 = newStyled.h3(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5038
5038
|
var DiscountTag = function (_a) {
|
|
5039
5039
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5040
5040
|
var theme = useTheme();
|
|
5041
|
-
return (jsxRuntime.jsx(Container$
|
|
5041
|
+
return (jsxRuntime.jsx(Container$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: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5042
5042
|
};
|
|
5043
|
-
var templateObject_1$
|
|
5043
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5044
5044
|
|
|
5045
5045
|
var getStylesBySize$5 = function (size) {
|
|
5046
5046
|
switch (size) {
|
|
@@ -5070,7 +5070,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
5070
5070
|
};
|
|
5071
5071
|
}
|
|
5072
5072
|
};
|
|
5073
|
-
var Container$
|
|
5073
|
+
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"])));
|
|
5074
5074
|
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) {
|
|
5075
5075
|
var weight = _a.weight;
|
|
5076
5076
|
return (weight ? weight : '400');
|
|
@@ -5121,11 +5121,11 @@ var PriceLabel = function (_a) {
|
|
|
5121
5121
|
weight: 700,
|
|
5122
5122
|
};
|
|
5123
5123
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5124
|
-
return (jsxRuntime.jsxs(Container$
|
|
5124
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5125
5125
|
};
|
|
5126
|
-
var templateObject_1$
|
|
5126
|
+
var templateObject_1$1b, templateObject_2$M, templateObject_3$z;
|
|
5127
5127
|
|
|
5128
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5128
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5129
5129
|
var PriceLabelV2 = function (_a) {
|
|
5130
5130
|
var _b;
|
|
5131
5131
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5153,9 +5153,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5153
5153
|
weight: 700,
|
|
5154
5154
|
};
|
|
5155
5155
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5156
|
-
return (jsxRuntime.jsxs(Container$
|
|
5156
|
+
return (jsxRuntime.jsxs(Container$N, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5157
5157
|
};
|
|
5158
|
-
var templateObject_1$
|
|
5158
|
+
var templateObject_1$1a;
|
|
5159
5159
|
|
|
5160
5160
|
var OneColorSelector = function (_a) {
|
|
5161
5161
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5196,7 +5196,7 @@ var OutOfStock = function (_a) {
|
|
|
5196
5196
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5197
5197
|
};
|
|
5198
5198
|
|
|
5199
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5199
|
+
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"])));
|
|
5200
5200
|
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5201
5201
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5202
5202
|
var Span = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -5218,9 +5218,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5218
5218
|
Option: Option,
|
|
5219
5219
|
OptionsContainer: OptionsContainer,
|
|
5220
5220
|
});
|
|
5221
|
-
var templateObject_1$
|
|
5221
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5222
5222
|
|
|
5223
|
-
var Container$
|
|
5223
|
+
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) {
|
|
5224
5224
|
var borderColor = _a.borderColor;
|
|
5225
5225
|
return borderColor;
|
|
5226
5226
|
});
|
|
@@ -5229,9 +5229,9 @@ var PatternSelector = function (_a) {
|
|
|
5229
5229
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5230
5230
|
var theme = useTheme();
|
|
5231
5231
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5232
|
-
return (jsxRuntime.jsx(Container$
|
|
5232
|
+
return (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5233
5233
|
};
|
|
5234
|
-
var templateObject_1$
|
|
5234
|
+
var templateObject_1$18, templateObject_2$K;
|
|
5235
5235
|
|
|
5236
5236
|
var renderOptions$1 = function (options) {
|
|
5237
5237
|
if (options.length === 0) {
|
|
@@ -5289,7 +5289,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5289
5289
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5290
5290
|
};
|
|
5291
5291
|
|
|
5292
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5292
|
+
var Image$2 = newStyled.img(templateObject_1$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) {
|
|
5293
5293
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5294
5294
|
return borderRadiusVariant &&
|
|
5295
5295
|
"\nborder-radius: 20px;\n";
|
|
@@ -5304,7 +5304,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5304
5304
|
var theme = useTheme();
|
|
5305
5305
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5306
5306
|
};
|
|
5307
|
-
var templateObject_1$
|
|
5307
|
+
var templateObject_1$17;
|
|
5308
5308
|
|
|
5309
5309
|
var Button$4 = newStyled.button(function () { return ({
|
|
5310
5310
|
background: 'transparent',
|
|
@@ -9547,14 +9547,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9547
9547
|
return Slider;
|
|
9548
9548
|
}(React__default["default"].Component);
|
|
9549
9549
|
|
|
9550
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9550
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$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) {
|
|
9551
9551
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9552
9552
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9553
9553
|
}, function (_a) {
|
|
9554
9554
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9555
9555
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9556
9556
|
});
|
|
9557
|
-
var templateObject_1$
|
|
9557
|
+
var templateObject_1$16;
|
|
9558
9558
|
|
|
9559
9559
|
var getStylesBySize$4 = function (size) {
|
|
9560
9560
|
// rem units
|
|
@@ -9613,22 +9613,22 @@ var SliderNavigation = function (_a) {
|
|
|
9613
9613
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9614
9614
|
};
|
|
9615
9615
|
|
|
9616
|
-
var horizontalStyles = css(templateObject_1$
|
|
9616
|
+
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"])));
|
|
9617
9617
|
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"])));
|
|
9618
|
-
var Container$
|
|
9618
|
+
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) {
|
|
9619
9619
|
var position = _a.position;
|
|
9620
9620
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9621
9621
|
});
|
|
9622
9622
|
var Button$3 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9623
9623
|
var ImagePreviewList = function (_a) {
|
|
9624
9624
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9625
|
-
return (jsxRuntime.jsx(Container$
|
|
9625
|
+
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9626
9626
|
arrowWidth: 0.75,
|
|
9627
9627
|
arrowHeight: 1.25,
|
|
9628
9628
|
arrowPadding: 1.625,
|
|
9629
9629
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9630
9630
|
};
|
|
9631
|
-
var templateObject_1$
|
|
9631
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$x, templateObject_4$m;
|
|
9632
9632
|
|
|
9633
9633
|
var propTypes = {exports: {}};
|
|
9634
9634
|
|
|
@@ -11214,15 +11214,15 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11214
11214
|
afterZoomOut: PropTypes.func
|
|
11215
11215
|
} : {};
|
|
11216
11216
|
|
|
11217
|
-
var Container$
|
|
11217
|
+
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"])));
|
|
11218
11218
|
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"])));
|
|
11219
11219
|
var MirrorEffectButton = function (_a) {
|
|
11220
11220
|
var title = _a.title, onClick = _a.onClick;
|
|
11221
|
-
return (jsxRuntime.jsx(Container$
|
|
11221
|
+
return (jsxRuntime.jsx(Container$K, { children: jsxRuntime.jsx(ButtonContainer$2, { children: jsxRuntime.jsx(ButtonSecondaryOutline, { text: title, onClick: onClick }, void 0) }, void 0) }, void 0));
|
|
11222
11222
|
};
|
|
11223
|
-
var templateObject_1$
|
|
11223
|
+
var templateObject_1$14, templateObject_2$I;
|
|
11224
11224
|
|
|
11225
|
-
var Container$
|
|
11225
|
+
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) {
|
|
11226
11226
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11227
11227
|
return borderRadiusVariant &&
|
|
11228
11228
|
"\n border-radius: 40px;\n ";
|
|
@@ -11231,14 +11231,14 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H
|
|
|
11231
11231
|
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"])));
|
|
11232
11232
|
var ImageProductWithTags$1 = function (_a) {
|
|
11233
11233
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11234
|
-
return (jsxRuntime.jsxs(Container$
|
|
11234
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11235
11235
|
alt: image.alt,
|
|
11236
11236
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11237
11237
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0), jsxRuntime.jsx(MirrorEffectButton, { title: "See in your size", onClick: function () { } }, void 0)] }), void 0));
|
|
11238
11238
|
};
|
|
11239
|
-
var templateObject_1$
|
|
11239
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$w;
|
|
11240
11240
|
|
|
11241
|
-
var Container$
|
|
11241
|
+
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"])));
|
|
11242
11242
|
var ProductGallery = function (_a) {
|
|
11243
11243
|
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;
|
|
11244
11244
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11246,11 +11246,11 @@ var ProductGallery = function (_a) {
|
|
|
11246
11246
|
React$2.useEffect(function () {
|
|
11247
11247
|
setSelectedImage(initialValue);
|
|
11248
11248
|
}, [initialValue]);
|
|
11249
|
-
return (jsxRuntime.jsxs(Container$
|
|
11249
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11250
11250
|
setSelectedImage(value);
|
|
11251
11251
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11252
11252
|
};
|
|
11253
|
-
var templateObject_1$
|
|
11253
|
+
var templateObject_1$12;
|
|
11254
11254
|
|
|
11255
11255
|
/* base styles & size variants */
|
|
11256
11256
|
var StarStyles = {
|
|
@@ -11296,8 +11296,8 @@ var StarStyles = {
|
|
|
11296
11296
|
});
|
|
11297
11297
|
},
|
|
11298
11298
|
};
|
|
11299
|
-
var Container$
|
|
11300
|
-
var templateObject_1$
|
|
11299
|
+
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"])));
|
|
11300
|
+
var templateObject_1$11;
|
|
11301
11301
|
|
|
11302
11302
|
var StarContainer = newStyled.div(function (_a) {
|
|
11303
11303
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11315,7 +11315,7 @@ var sizes = {
|
|
|
11315
11315
|
var StarList = function (_a) {
|
|
11316
11316
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11317
11317
|
var theme = useTheme();
|
|
11318
|
-
return (jsxRuntime.jsx(Container$
|
|
11318
|
+
return (jsxRuntime.jsx(Container$H, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11319
11319
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11320
11320
|
}) }, void 0));
|
|
11321
11321
|
};
|
|
@@ -11359,8 +11359,8 @@ var LabelStyles = {
|
|
|
11359
11359
|
});
|
|
11360
11360
|
},
|
|
11361
11361
|
};
|
|
11362
|
-
var Container$
|
|
11363
|
-
var templateObject_1
|
|
11362
|
+
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"])));
|
|
11363
|
+
var templateObject_1$10;
|
|
11364
11364
|
|
|
11365
11365
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11366
11366
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11398,10 +11398,10 @@ var Rating = function (_a) {
|
|
|
11398
11398
|
href: reviewsContainerId,
|
|
11399
11399
|
}
|
|
11400
11400
|
: {};
|
|
11401
|
-
return (jsxRuntime.jsxs(Container$
|
|
11401
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11402
11402
|
};
|
|
11403
11403
|
|
|
11404
|
-
var Container$
|
|
11404
|
+
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"])));
|
|
11405
11405
|
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; });
|
|
11406
11406
|
var textButtonStyles = function (theme) { return ({
|
|
11407
11407
|
border: 'none',
|
|
@@ -11415,9 +11415,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11415
11415
|
var FitPredictor = function (_a) {
|
|
11416
11416
|
var onClick = _a.onClick;
|
|
11417
11417
|
var theme = useTheme();
|
|
11418
|
-
return (jsxs(Container$
|
|
11418
|
+
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));
|
|
11419
11419
|
};
|
|
11420
|
-
var templateObject_1
|
|
11420
|
+
var templateObject_1$$, templateObject_2$G;
|
|
11421
11421
|
|
|
11422
11422
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11423
11423
|
var color = _a.color;
|
|
@@ -11431,7 +11431,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11431
11431
|
margin: '0.938rem 4.188rem',
|
|
11432
11432
|
});
|
|
11433
11433
|
});
|
|
11434
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11434
|
+
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) {
|
|
11435
11435
|
var backgroundColor = _a.backgroundColor;
|
|
11436
11436
|
return backgroundColor;
|
|
11437
11437
|
}, function (_a) {
|
|
@@ -11454,7 +11454,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11454
11454
|
position: 'absolute',
|
|
11455
11455
|
});
|
|
11456
11456
|
});
|
|
11457
|
-
var Container$
|
|
11457
|
+
var Container$E = newStyled.div(function (_a) {
|
|
11458
11458
|
var widthAuto = _a.widthAuto;
|
|
11459
11459
|
return ({
|
|
11460
11460
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11468,9 +11468,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11468
11468
|
var ProgressBar = function (_a) {
|
|
11469
11469
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11470
11470
|
var theme = useTheme();
|
|
11471
|
-
return (jsxRuntime.jsxs(Container$
|
|
11471
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11472
11472
|
};
|
|
11473
|
-
var templateObject_1$
|
|
11473
|
+
var templateObject_1$_;
|
|
11474
11474
|
|
|
11475
11475
|
var getStylesBySize$3 = function (size) {
|
|
11476
11476
|
switch (size) {
|
|
@@ -11491,7 +11491,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11491
11491
|
};
|
|
11492
11492
|
}
|
|
11493
11493
|
};
|
|
11494
|
-
var Container$
|
|
11494
|
+
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) {
|
|
11495
11495
|
var backgroundColor = _a.backgroundColor;
|
|
11496
11496
|
return backgroundColor;
|
|
11497
11497
|
}, function (_a) {
|
|
@@ -11519,9 +11519,9 @@ var Container$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
11519
11519
|
var IconButton = function (_a) {
|
|
11520
11520
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11521
11521
|
var theme = useTheme();
|
|
11522
|
-
return (jsxRuntime.jsx(Container$
|
|
11522
|
+
return (jsxRuntime.jsx(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));
|
|
11523
11523
|
};
|
|
11524
|
-
var templateObject_1$
|
|
11524
|
+
var templateObject_1$Z;
|
|
11525
11525
|
|
|
11526
11526
|
var TooltipArrow = function (_a) {
|
|
11527
11527
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11601,7 +11601,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11601
11601
|
}
|
|
11602
11602
|
};
|
|
11603
11603
|
|
|
11604
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11604
|
+
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) {
|
|
11605
11605
|
var position = _a.position;
|
|
11606
11606
|
return getWrapperFlexDirection(position);
|
|
11607
11607
|
});
|
|
@@ -11649,7 +11649,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11649
11649
|
return color;
|
|
11650
11650
|
});
|
|
11651
11651
|
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"])));
|
|
11652
|
-
var templateObject_1$
|
|
11652
|
+
var templateObject_1$Y, templateObject_2$F, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11653
11653
|
|
|
11654
11654
|
var Tooltip = function (_a) {
|
|
11655
11655
|
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;
|
|
@@ -11807,8 +11807,8 @@ var ContainerStyles = {
|
|
|
11807
11807
|
},
|
|
11808
11808
|
};
|
|
11809
11809
|
|
|
11810
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11811
|
-
var Container$
|
|
11810
|
+
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"])));
|
|
11811
|
+
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11812
11812
|
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) {
|
|
11813
11813
|
var disabled = _a.disabled;
|
|
11814
11814
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11824,9 +11824,9 @@ var RadioInput = function (_a) {
|
|
|
11824
11824
|
var value = event.currentTarget.value;
|
|
11825
11825
|
onChange({ value: value, label: label });
|
|
11826
11826
|
};
|
|
11827
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11827
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$C, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11828
11828
|
};
|
|
11829
|
-
var templateObject_1$
|
|
11829
|
+
var templateObject_1$X, templateObject_2$E;
|
|
11830
11830
|
|
|
11831
11831
|
var RadioGroupInput = function (_a) {
|
|
11832
11832
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11840,37 +11840,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11840
11840
|
}) }), void 0));
|
|
11841
11841
|
};
|
|
11842
11842
|
|
|
11843
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11844
|
-
var Container$
|
|
11843
|
+
var Wrapper$3 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11844
|
+
var Container$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"])));
|
|
11845
11845
|
var Minimalistic = function (_a) {
|
|
11846
11846
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11847
11847
|
var theme = useTheme();
|
|
11848
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11848
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$B, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$B, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11849
11849
|
};
|
|
11850
|
-
var templateObject_1$
|
|
11850
|
+
var templateObject_1$W, templateObject_2$D;
|
|
11851
11851
|
|
|
11852
|
-
var Container$
|
|
11852
|
+
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"])));
|
|
11853
11853
|
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; });
|
|
11854
11854
|
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; });
|
|
11855
11855
|
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"])));
|
|
11856
11856
|
var Simple = function (_a) {
|
|
11857
11857
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
11858
11858
|
var theme = useTheme();
|
|
11859
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11859
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11860
11860
|
};
|
|
11861
|
-
var templateObject_1$
|
|
11861
|
+
var templateObject_1$V, templateObject_2$C, templateObject_3$u, templateObject_4$k;
|
|
11862
11862
|
|
|
11863
11863
|
var Bundle = {
|
|
11864
11864
|
Minimalistic: Minimalistic,
|
|
11865
11865
|
Simple: Simple,
|
|
11866
11866
|
};
|
|
11867
11867
|
|
|
11868
|
-
var Container$
|
|
11868
|
+
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"])));
|
|
11869
11869
|
var Tag$1 = function (_a) {
|
|
11870
11870
|
var text = _a.text, className = _a.className;
|
|
11871
|
-
return jsxRuntime.jsx(Container$
|
|
11871
|
+
return jsxRuntime.jsx(Container$z, __assign$1({ className: className }, { children: text }), void 0);
|
|
11872
11872
|
};
|
|
11873
|
-
var templateObject_1$
|
|
11873
|
+
var templateObject_1$U;
|
|
11874
11874
|
|
|
11875
11875
|
var getStylesBySize$2 = function (size, styledBorder) {
|
|
11876
11876
|
switch (size) {
|
|
@@ -11973,7 +11973,7 @@ var Timer = function (_a) {
|
|
|
11973
11973
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11974
11974
|
};
|
|
11975
11975
|
|
|
11976
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11976
|
+
var Label$1 = newStyled.span(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
11977
11977
|
var color = _a.color;
|
|
11978
11978
|
return color;
|
|
11979
11979
|
});
|
|
@@ -11986,7 +11986,7 @@ var InputLabel = function (_a) {
|
|
|
11986
11986
|
var theme = useTheme();
|
|
11987
11987
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11988
11988
|
};
|
|
11989
|
-
var templateObject_1$
|
|
11989
|
+
var templateObject_1$T, templateObject_2$B;
|
|
11990
11990
|
|
|
11991
11991
|
/**
|
|
11992
11992
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12040,14 +12040,14 @@ var formatPrice = function (value, _a) {
|
|
|
12040
12040
|
}).format(valueToFormat);
|
|
12041
12041
|
};
|
|
12042
12042
|
|
|
12043
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12043
|
+
var ErrorText = newStyled.h3(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12044
12044
|
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"])));
|
|
12045
12045
|
var Error$1 = function (_a) {
|
|
12046
12046
|
var error = _a.error;
|
|
12047
12047
|
var theme = useTheme();
|
|
12048
12048
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12049
12049
|
};
|
|
12050
|
-
var templateObject_1$
|
|
12050
|
+
var templateObject_1$S, templateObject_2$A;
|
|
12051
12051
|
|
|
12052
12052
|
var containerByStatus = function (theme, status) {
|
|
12053
12053
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12056,7 +12056,7 @@ var containerByStatus = function (theme, status) {
|
|
|
12056
12056
|
return theme.colors.semantic.urgent.color;
|
|
12057
12057
|
return '';
|
|
12058
12058
|
};
|
|
12059
|
-
var Container$
|
|
12059
|
+
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) {
|
|
12060
12060
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12061
12061
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12062
12062
|
});
|
|
@@ -12121,7 +12121,7 @@ var InputWrapper = newStyled.div(templateObject_3$t || (templateObject_3$t = __m
|
|
|
12121
12121
|
});
|
|
12122
12122
|
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"])));
|
|
12123
12123
|
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"])));
|
|
12124
|
-
var templateObject_1$
|
|
12124
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c;
|
|
12125
12125
|
|
|
12126
12126
|
var BaseInput = function (_a) {
|
|
12127
12127
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
@@ -12144,7 +12144,7 @@ var BaseInput = function (_a) {
|
|
|
12144
12144
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12145
12145
|
}, [status]);
|
|
12146
12146
|
var hasValue = Boolean(value);
|
|
12147
|
-
return (jsxRuntime.jsxs(Container$
|
|
12147
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12148
12148
|
onChange(event.target.value, event);
|
|
12149
12149
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12150
12150
|
onChange('', { target: { value: '' } });
|
|
@@ -12165,7 +12165,7 @@ var Button$2 = function (_a) {
|
|
|
12165
12165
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12166
12166
|
};
|
|
12167
12167
|
|
|
12168
|
-
var Container$
|
|
12168
|
+
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) {
|
|
12169
12169
|
var theme = _a.theme;
|
|
12170
12170
|
return theme.component.inputCustom.input.borderRadius;
|
|
12171
12171
|
});
|
|
@@ -12182,11 +12182,11 @@ var Custom = function (_a) {
|
|
|
12182
12182
|
text: text,
|
|
12183
12183
|
disabled: rest.disabled,
|
|
12184
12184
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12185
|
-
return (jsxRuntime.jsx(Container$
|
|
12185
|
+
return (jsxRuntime.jsx(Container$x, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12186
12186
|
};
|
|
12187
|
-
var templateObject_1$
|
|
12187
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
12188
12188
|
|
|
12189
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12189
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12190
12190
|
var size = _a.size;
|
|
12191
12191
|
return (size === 'small' ? '36px' : '');
|
|
12192
12192
|
});
|
|
@@ -12196,9 +12196,9 @@ var Success = function (_a) {
|
|
|
12196
12196
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12197
12197
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12198
12198
|
};
|
|
12199
|
-
var templateObject_1$
|
|
12199
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
12200
12200
|
|
|
12201
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12201
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12202
12202
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12203
12203
|
return status === exports.InputValidationType.Empty &&
|
|
12204
12204
|
type === 'primary' &&
|
|
@@ -12215,21 +12215,21 @@ var BasePlusButton = function (_a) {
|
|
|
12215
12215
|
}
|
|
12216
12216
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12217
12217
|
};
|
|
12218
|
-
var templateObject_1$
|
|
12218
|
+
var templateObject_1$O;
|
|
12219
12219
|
|
|
12220
|
-
var Container$
|
|
12220
|
+
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"])));
|
|
12221
12221
|
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; });
|
|
12222
12222
|
var BasePlusIcon = function (_a) {
|
|
12223
12223
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12224
12224
|
var theme = useTheme();
|
|
12225
12225
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12226
|
-
return (jsxRuntime.jsx(Container$
|
|
12226
|
+
return (jsxRuntime.jsx(Container$w, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12227
12227
|
? theme.colors.shades['700'].color
|
|
12228
12228
|
: status === exports.InputValidationType.Error
|
|
12229
12229
|
? theme.colors.semantic.urgent.color
|
|
12230
12230
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12231
12231
|
};
|
|
12232
|
-
var templateObject_1$
|
|
12232
|
+
var templateObject_1$N, templateObject_2$w;
|
|
12233
12233
|
|
|
12234
12234
|
var Input$1 = {
|
|
12235
12235
|
Simple: BaseInput,
|
|
@@ -12238,7 +12238,7 @@ var Input$1 = {
|
|
|
12238
12238
|
SimplePlusIcon: BasePlusIcon,
|
|
12239
12239
|
};
|
|
12240
12240
|
|
|
12241
|
-
var Container$
|
|
12241
|
+
var Container$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) {
|
|
12242
12242
|
var width = _a.width;
|
|
12243
12243
|
return width;
|
|
12244
12244
|
}, function (_a) {
|
|
@@ -12254,11 +12254,11 @@ var Container$u = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
12254
12254
|
var PaymentMethod = function (_a) {
|
|
12255
12255
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12256
12256
|
var theme = useTheme();
|
|
12257
|
-
return (jsxRuntime.jsx(Container$
|
|
12257
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
12258
12258
|
};
|
|
12259
|
-
var templateObject_1$
|
|
12259
|
+
var templateObject_1$M;
|
|
12260
12260
|
|
|
12261
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12261
|
+
var Text$5 = newStyled.h3(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
12262
12262
|
var backgroundColor = _a.backgroundColor;
|
|
12263
12263
|
return backgroundColor;
|
|
12264
12264
|
}, function (_a) {
|
|
@@ -12270,21 +12270,21 @@ var OfferBanner = function (_a) {
|
|
|
12270
12270
|
var theme = useTheme();
|
|
12271
12271
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12272
12272
|
};
|
|
12273
|
-
var templateObject_1$
|
|
12273
|
+
var templateObject_1$L;
|
|
12274
12274
|
|
|
12275
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12275
|
+
var Wrapper$2 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12276
12276
|
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; });
|
|
12277
12277
|
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"])));
|
|
12278
|
-
var Container$
|
|
12278
|
+
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; });
|
|
12279
12279
|
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"])));
|
|
12280
12280
|
var Total = function (_a) {
|
|
12281
12281
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12282
12282
|
var theme = useTheme();
|
|
12283
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12283
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$u, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12284
12284
|
};
|
|
12285
|
-
var templateObject_1$
|
|
12285
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
12286
12286
|
|
|
12287
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12287
|
+
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12288
12288
|
var color = _a.color;
|
|
12289
12289
|
return color;
|
|
12290
12290
|
});
|
|
@@ -12303,22 +12303,22 @@ var Subtotal = function (_a) {
|
|
|
12303
12303
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12304
12304
|
})] }), void 0));
|
|
12305
12305
|
};
|
|
12306
|
-
var templateObject_1$
|
|
12306
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$h;
|
|
12307
12307
|
|
|
12308
12308
|
var Totals = {
|
|
12309
12309
|
Total: Total,
|
|
12310
12310
|
Subtotal: Subtotal,
|
|
12311
12311
|
};
|
|
12312
12312
|
|
|
12313
|
-
var Container$
|
|
12313
|
+
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; });
|
|
12314
12314
|
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"])));
|
|
12315
12315
|
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; });
|
|
12316
12316
|
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; });
|
|
12317
12317
|
var Note = function (_a) {
|
|
12318
12318
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12319
|
-
return (jsxRuntime.jsxs(Container$
|
|
12319
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12320
12320
|
};
|
|
12321
|
-
var templateObject_1$
|
|
12321
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$g;
|
|
12322
12322
|
|
|
12323
12323
|
/* eslint-disable no-param-reassign */
|
|
12324
12324
|
var index$1 = function (breakpoints) {
|
|
@@ -12404,7 +12404,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12404
12404
|
literal: true,
|
|
12405
12405
|
});
|
|
12406
12406
|
|
|
12407
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12407
|
+
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; });
|
|
12408
12408
|
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; });
|
|
12409
12409
|
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({
|
|
12410
12410
|
flexDirection: ['column', 'row'],
|
|
@@ -12433,20 +12433,20 @@ var DeliveryDetails = function (_a) {
|
|
|
12433
12433
|
var theme = useTheme();
|
|
12434
12434
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12435
12435
|
};
|
|
12436
|
-
var templateObject_1$
|
|
12436
|
+
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;
|
|
12437
12437
|
|
|
12438
|
-
var Container$
|
|
12438
|
+
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"])));
|
|
12439
12439
|
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; });
|
|
12440
12440
|
var ScrollToTop = function (_a) {
|
|
12441
12441
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12442
12442
|
var theme = useTheme();
|
|
12443
12443
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12444
|
-
return (jsxRuntime.jsxs(Container$
|
|
12444
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12445
12445
|
};
|
|
12446
|
-
var templateObject_1$
|
|
12446
|
+
var templateObject_1$G, templateObject_2$r;
|
|
12447
12447
|
|
|
12448
12448
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12449
|
-
var Container$
|
|
12449
|
+
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) {
|
|
12450
12450
|
var color = _a.color;
|
|
12451
12451
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12452
12452
|
});
|
|
@@ -12454,11 +12454,11 @@ var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplate
|
|
|
12454
12454
|
var OrderBar = function (_a) {
|
|
12455
12455
|
var message = _a.message, color = _a.color;
|
|
12456
12456
|
var theme = useTheme();
|
|
12457
|
-
return (jsxRuntime.jsxs(Container$
|
|
12457
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12458
12458
|
};
|
|
12459
|
-
var templateObject_1$
|
|
12459
|
+
var templateObject_1$F, templateObject_2$q;
|
|
12460
12460
|
|
|
12461
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12461
|
+
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; });
|
|
12462
12462
|
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; });
|
|
12463
12463
|
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; });
|
|
12464
12464
|
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; });
|
|
@@ -12467,16 +12467,16 @@ var SizeTable = function (_a) {
|
|
|
12467
12467
|
var theme = useTheme();
|
|
12468
12468
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12469
12469
|
};
|
|
12470
|
-
var templateObject_1$
|
|
12470
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$e;
|
|
12471
12471
|
|
|
12472
|
-
var Img = newStyled.img(templateObject_1$
|
|
12472
|
+
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; });
|
|
12473
12473
|
var Image = function (_a) {
|
|
12474
12474
|
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;
|
|
12475
12475
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12476
12476
|
};
|
|
12477
|
-
var templateObject_1$
|
|
12477
|
+
var templateObject_1$D;
|
|
12478
12478
|
|
|
12479
|
-
var Container$
|
|
12479
|
+
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"])));
|
|
12480
12480
|
var ImageContainer$3 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12481
12481
|
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({
|
|
12482
12482
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12514,9 +12514,9 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
|
|
|
12514
12514
|
var SimpleOrderItem = function (_a) {
|
|
12515
12515
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12516
12516
|
var theme = useTheme();
|
|
12517
|
-
return (jsxRuntime.jsxs(Container$
|
|
12517
|
+
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12518
12518
|
};
|
|
12519
|
-
var templateObject_1$
|
|
12519
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$9;
|
|
12520
12520
|
|
|
12521
12521
|
function formatDate(date) {
|
|
12522
12522
|
var day = date.getDate();
|
|
@@ -12525,7 +12525,7 @@ function formatDate(date) {
|
|
|
12525
12525
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12526
12526
|
}
|
|
12527
12527
|
|
|
12528
|
-
var Container$
|
|
12528
|
+
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"])));
|
|
12529
12529
|
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({
|
|
12530
12530
|
fontSize: ['14px', '16px'],
|
|
12531
12531
|
lineHeight: ['22px', '24px'],
|
|
@@ -12548,17 +12548,17 @@ var P$1 = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplate
|
|
|
12548
12548
|
var Review = function (_a) {
|
|
12549
12549
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12550
12550
|
var theme = useTheme();
|
|
12551
|
-
return (jsxRuntime.jsxs(Container$
|
|
12551
|
+
return (jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12552
12552
|
};
|
|
12553
|
-
var templateObject_1$
|
|
12553
|
+
var templateObject_1$B, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3;
|
|
12554
12554
|
|
|
12555
|
-
var List = newStyled.ul(templateObject_1$
|
|
12555
|
+
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"])));
|
|
12556
12556
|
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"])));
|
|
12557
12557
|
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"])));
|
|
12558
12558
|
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"])));
|
|
12559
12559
|
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; });
|
|
12560
12560
|
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; });
|
|
12561
|
-
var templateObject_1$
|
|
12561
|
+
var templateObject_1$A, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
12562
12562
|
|
|
12563
12563
|
var DropdownListIcons = function (_a) {
|
|
12564
12564
|
var items = _a.items;
|
|
@@ -12571,7 +12571,7 @@ var Dropdown = function (_a) {
|
|
|
12571
12571
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12572
12572
|
};
|
|
12573
12573
|
|
|
12574
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12574
|
+
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; });
|
|
12575
12575
|
var AmazonButton = function (_a) {
|
|
12576
12576
|
var onClick = _a.onClick;
|
|
12577
12577
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12580,9 +12580,9 @@ var PaypalButton = function (_a) {
|
|
|
12580
12580
|
var onClick = _a.onClick;
|
|
12581
12581
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12582
12582
|
};
|
|
12583
|
-
var templateObject_1$
|
|
12583
|
+
var templateObject_1$z;
|
|
12584
12584
|
|
|
12585
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12585
|
+
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'); });
|
|
12586
12586
|
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"])));
|
|
12587
12587
|
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) {
|
|
12588
12588
|
return props.rightToLeft &&
|
|
@@ -12596,7 +12596,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12596
12596
|
var theme = useTheme();
|
|
12597
12597
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12598
12598
|
};
|
|
12599
|
-
var templateObject_1$
|
|
12599
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
12600
12600
|
|
|
12601
12601
|
var index = /*#__PURE__*/Object.freeze({
|
|
12602
12602
|
__proto__: null,
|
|
@@ -12609,6 +12609,35 @@ var Spacing = function (_a) {
|
|
|
12609
12609
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12610
12610
|
};
|
|
12611
12611
|
|
|
12612
|
+
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) {
|
|
12613
|
+
var height = _a.height;
|
|
12614
|
+
return (height ? height : '1.5em');
|
|
12615
|
+
}, function (_a) {
|
|
12616
|
+
var width = _a.width;
|
|
12617
|
+
return (width ? width : '100%');
|
|
12618
|
+
}, function (_a) {
|
|
12619
|
+
var theme = _a.theme;
|
|
12620
|
+
return theme.colors.background.disabled;
|
|
12621
|
+
}, function (_a) {
|
|
12622
|
+
var theme = _a.theme;
|
|
12623
|
+
return theme.radius.regular;
|
|
12624
|
+
}, function (_a) {
|
|
12625
|
+
var theme = _a.theme;
|
|
12626
|
+
return theme.colors.shades['10'].color;
|
|
12627
|
+
}, function (_a) {
|
|
12628
|
+
var theme = _a.theme;
|
|
12629
|
+
return theme.colors.background.disabled;
|
|
12630
|
+
}, function (_a) {
|
|
12631
|
+
var theme = _a.theme;
|
|
12632
|
+
return theme.colors.shades['10'].color;
|
|
12633
|
+
});
|
|
12634
|
+
var SkeletonBox = function (_a) {
|
|
12635
|
+
var width = _a.width, height = _a.height;
|
|
12636
|
+
var theme = useTheme();
|
|
12637
|
+
return jsxRuntime.jsx(Container$o, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12638
|
+
};
|
|
12639
|
+
var templateObject_1$x;
|
|
12640
|
+
|
|
12612
12641
|
var ImageContainer$2 = newStyled.div(function (_a) {
|
|
12613
12642
|
var width = _a.width, height = _a.height;
|
|
12614
12643
|
return ({
|
|
@@ -12649,7 +12678,7 @@ var TopTagContainer$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9
|
|
|
12649
12678
|
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"])));
|
|
12650
12679
|
var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12651
12680
|
var ProductItemMobile = function (_a) {
|
|
12652
|
-
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;
|
|
12681
|
+
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;
|
|
12653
12682
|
var theme = useTheme();
|
|
12654
12683
|
var styles = getStylesBySize(size);
|
|
12655
12684
|
var space = React$2.useMemo(function () {
|
|
@@ -12664,7 +12693,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12664
12693
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12665
12694
|
};
|
|
12666
12695
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12667
|
-
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));
|
|
12696
|
+
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));
|
|
12668
12697
|
};
|
|
12669
12698
|
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
12670
12699
|
|
|
@@ -13371,8 +13400,8 @@ var SlideDots = function (_a) {
|
|
|
13371
13400
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13372
13401
|
var theme = useTheme();
|
|
13373
13402
|
return (jsxRuntime.jsx(Container$e, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13374
|
-
? theme.
|
|
13375
|
-
: theme.
|
|
13403
|
+
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13404
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13376
13405
|
};
|
|
13377
13406
|
var templateObject_1$l;
|
|
13378
13407
|
|