@trafilea/afrodita-components 5.0.0-beta.116 → 5.0.0-beta.117
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.esm.js +64 -56
- package/build/index.esm.js.map +1 -1
- package/build/index.js +64 -56
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
|
|
|
4042
4042
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4043
4043
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4044
4044
|
|
|
4045
|
-
var Section = newStyled.div(templateObject_1$
|
|
4045
|
+
var Section = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
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$1l;
|
|
4057
4057
|
|
|
4058
|
-
var Body = newStyled.div(templateObject_1$
|
|
4058
|
+
var Body = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
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$1k;
|
|
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$Q = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
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$P = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
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$Q, __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$1j;
|
|
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$1i || (templateObject_1$1i = __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$1i;
|
|
4381
4381
|
|
|
4382
4382
|
var CustomButton = newStyled.button(function (_a) {
|
|
4383
4383
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4590,12 +4590,12 @@ var CustomCheckboxStyles = {
|
|
|
4590
4590
|
},
|
|
4591
4591
|
};
|
|
4592
4592
|
|
|
4593
|
-
var Container$
|
|
4593
|
+
var Container$P = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4594
4594
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4595
4595
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4596
4596
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4597
4597
|
]; });
|
|
4598
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4598
|
+
var Input$3 = newStyled.input(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4599
4599
|
var disabled = _a.disabled;
|
|
4600
4600
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4601
4601
|
});
|
|
@@ -4624,9 +4624,9 @@ var Checkbox = function (_a) {
|
|
|
4624
4624
|
React$2.useEffect(function () {
|
|
4625
4625
|
mounted.current = true;
|
|
4626
4626
|
}, []);
|
|
4627
|
-
return (jsxRuntime.jsxs(Container$
|
|
4627
|
+
return (jsxRuntime.jsxs(Container$P, { 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$1h, 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,8 +4705,8 @@ function SimpleDropdown(_a) {
|
|
|
4705
4705
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4706
4706
|
}
|
|
4707
4707
|
|
|
4708
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4709
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4708
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
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"])));
|
|
4712
4712
|
var DropdownDialog = function (_a) {
|
|
@@ -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$1g, templateObject_2$Q, templateObject_3$C, templateObject_4$p;
|
|
4720
4720
|
|
|
4721
4721
|
var getStylesBySize$8 = function (size, theme) {
|
|
4722
4722
|
switch (size) {
|
|
@@ -4776,8 +4776,8 @@ var SelectorSecondary = function (_a) {
|
|
|
4776
4776
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4777
4777
|
// `variants` styles that are consistent through all themes.
|
|
4778
4778
|
var TAGS = {
|
|
4779
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4780
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4779
|
+
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
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([""], [""]))),
|
|
4783
4783
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
@@ -4899,9 +4899,9 @@ var DEFAULTS = {
|
|
|
4899
4899
|
size: 'regular',
|
|
4900
4900
|
},
|
|
4901
4901
|
};
|
|
4902
|
-
var templateObject_1$
|
|
4902
|
+
var templateObject_1$1f, 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$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
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$1e;
|
|
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$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
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$1d;
|
|
4966
4966
|
|
|
4967
|
-
var Container$
|
|
4968
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4967
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
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$O, { 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$1c, 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$N = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5005
5005
|
var backgroundColor = _a.backgroundColor;
|
|
5006
5006
|
return backgroundColor;
|
|
5007
5007
|
}, function (_a) {
|
|
@@ -5023,7 +5023,7 @@ var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
5023
5023
|
var size = _a.size;
|
|
5024
5024
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5025
5025
|
});
|
|
5026
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5026
|
+
var H3$2 = newStyled.h3(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5027
5027
|
var textColor = _a.textColor;
|
|
5028
5028
|
return textColor;
|
|
5029
5029
|
}, function (_a) {
|
|
@@ -5038,9 +5038,9 @@ var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __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$N, __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$1b, templateObject_2$N;
|
|
5044
5044
|
|
|
5045
5045
|
var getStylesBySize$5 = function (size) {
|
|
5046
5046
|
switch (size) {
|
|
@@ -5070,8 +5070,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
5070
5070
|
};
|
|
5071
5071
|
}
|
|
5072
5072
|
};
|
|
5073
|
-
var Container$
|
|
5074
|
-
var Price = newStyled.p(templateObject_2$
|
|
5073
|
+
var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
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');
|
|
5077
5077
|
}, function (_a) {
|
|
@@ -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$M, { 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$1a, templateObject_2$M, templateObject_3$z;
|
|
5127
5127
|
|
|
5128
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5128
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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$M, { 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$19;
|
|
5159
5159
|
|
|
5160
5160
|
var OneColorSelector = function (_a) {
|
|
5161
5161
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5196,8 +5196,8 @@ var OutOfStock = function (_a) {
|
|
|
5196
5196
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5197
5197
|
};
|
|
5198
5198
|
|
|
5199
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5200
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5199
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
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"])));
|
|
5203
5203
|
var OptionsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -5218,20 +5218,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5218
5218
|
Option: Option,
|
|
5219
5219
|
OptionsContainer: OptionsContainer,
|
|
5220
5220
|
});
|
|
5221
|
-
var templateObject_1$
|
|
5221
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5222
5222
|
|
|
5223
|
-
var Container$
|
|
5223
|
+
var Container$L = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
5224
5224
|
var borderColor = _a.borderColor;
|
|
5225
5225
|
return borderColor;
|
|
5226
5226
|
});
|
|
5227
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5227
|
+
var Image$3 = newStyled.img(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5228
5228
|
var PatternSelector = function (_a) {
|
|
5229
5229
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5230
5230
|
var theme = useTheme();
|
|
5231
5231
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5232
|
-
return (jsxRuntime.jsx(Container$
|
|
5232
|
+
return (jsxRuntime.jsx(Container$L, __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$17, 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$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
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$16;
|
|
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$15 || (templateObject_1$15 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
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$15;
|
|
9558
9558
|
|
|
9559
9559
|
var getStylesBySize$4 = function (size) {
|
|
9560
9560
|
// rem units
|
|
@@ -9613,22 +9613,22 @@ var SliderNavigation = function (_a) {
|
|
|
9613
9613
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9614
9614
|
};
|
|
9615
9615
|
|
|
9616
|
-
var horizontalStyles = css(templateObject_1$
|
|
9617
|
-
var verticalStyles = css(templateObject_2$
|
|
9618
|
-
var Container$
|
|
9616
|
+
var horizontalStyles = css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
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$K = 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$K, __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$14, templateObject_2$J, templateObject_3$x, templateObject_4$m;
|
|
9632
9632
|
|
|
9633
9633
|
var propTypes = {exports: {}};
|
|
9634
9634
|
|
|
@@ -11214,6 +11214,14 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11214
11214
|
afterZoomOut: PropTypes.func
|
|
11215
11215
|
} : {};
|
|
11216
11216
|
|
|
11217
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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
|
+
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
|
+
var MirrorEffectButton = function (_a) {
|
|
11220
|
+
var title = _a.title, onClick = _a.onClick;
|
|
11221
|
+
return (jsxRuntime.jsx(Container$J, { children: jsxRuntime.jsx(ButtonContainer$2, { children: jsxRuntime.jsx(ButtonSecondaryOutline, { text: title, onClick: onClick }, void 0) }, void 0) }, void 0));
|
|
11222
|
+
};
|
|
11223
|
+
var templateObject_1$13, templateObject_2$I;
|
|
11224
|
+
|
|
11217
11225
|
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11218
11226
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11219
11227
|
return borderRadiusVariant &&
|
|
@@ -11226,7 +11234,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11226
11234
|
return (jsxRuntime.jsxs(Container$I, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11227
11235
|
alt: image.alt,
|
|
11228
11236
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11229
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
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));
|
|
11230
11238
|
};
|
|
11231
11239
|
var templateObject_1$12, templateObject_2$H, templateObject_3$w;
|
|
11232
11240
|
|
|
@@ -13406,7 +13414,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13406
13414
|
React$2.useEffect(function () {
|
|
13407
13415
|
setSelectedImage(images[index]);
|
|
13408
13416
|
}, [index, images]);
|
|
13409
|
-
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13417
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0), jsxRuntime.jsx(MirrorEffectButton, { title: "See in your size", onClick: function () { } }, void 0)] }, void 0));
|
|
13410
13418
|
};
|
|
13411
13419
|
var templateObject_1$j;
|
|
13412
13420
|
|