@trafilea/afrodita-components 5.0.0-beta.115 → 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.d.ts +1 -0
- package/build/index.esm.js +77 -60
- package/build/index.esm.js.map +1 -1
- package/build/index.js +77 -60
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
package/build/index.esm.js
CHANGED
|
@@ -4016,7 +4016,7 @@ var InputValidationType;
|
|
|
4016
4016
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4017
4017
|
})(InputValidationType || (InputValidationType = {}));
|
|
4018
4018
|
|
|
4019
|
-
var Section = newStyled.div(templateObject_1$
|
|
4019
|
+
var Section = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
4020
4020
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4021
4021
|
});
|
|
4022
4022
|
var CardHeader = function (_a) {
|
|
@@ -4027,14 +4027,14 @@ var CardFooter = function (_a) {
|
|
|
4027
4027
|
var children = _a.children;
|
|
4028
4028
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4029
4029
|
};
|
|
4030
|
-
var templateObject_1$
|
|
4030
|
+
var templateObject_1$1l;
|
|
4031
4031
|
|
|
4032
|
-
var Body = newStyled.div(templateObject_1$
|
|
4032
|
+
var Body = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4033
4033
|
var CardBody = function (_a) {
|
|
4034
4034
|
var children = _a.children;
|
|
4035
4035
|
return jsx$1(Body, { children: children }, void 0);
|
|
4036
4036
|
};
|
|
4037
|
-
var templateObject_1$
|
|
4037
|
+
var templateObject_1$1k;
|
|
4038
4038
|
|
|
4039
4039
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4040
4040
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4179,7 +4179,7 @@ var AssetsProvider = function (_a) {
|
|
|
4179
4179
|
};
|
|
4180
4180
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4181
4181
|
|
|
4182
|
-
var Container$
|
|
4182
|
+
var Container$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) {
|
|
4183
4183
|
var flex = _a.flex;
|
|
4184
4184
|
return flex &&
|
|
4185
4185
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4192,14 +4192,14 @@ var Container$P = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
4192
4192
|
var Card$1 = function (_a) {
|
|
4193
4193
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4194
4194
|
var theme = useTheme();
|
|
4195
|
-
return (jsx$1(Container$
|
|
4195
|
+
return (jsx$1(Container$Q, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var Card$2 = Object.assign(Card$1, {
|
|
4198
4198
|
Header: CardHeader,
|
|
4199
4199
|
Footer: CardFooter,
|
|
4200
4200
|
Body: CardBody,
|
|
4201
4201
|
});
|
|
4202
|
-
var templateObject_1$
|
|
4202
|
+
var templateObject_1$1j;
|
|
4203
4203
|
|
|
4204
4204
|
var Fragment = Fragment$1;
|
|
4205
4205
|
function jsx(type, props, key) {
|
|
@@ -4341,7 +4341,7 @@ function BaseSelectOption(_a) {
|
|
|
4341
4341
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4342
4342
|
}
|
|
4343
4343
|
|
|
4344
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4344
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4345
4345
|
function BaseSelect(_a) {
|
|
4346
4346
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4347
4347
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4351,7 +4351,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4351
4351
|
Options: BaseSelectOptions,
|
|
4352
4352
|
Option: BaseSelectOption,
|
|
4353
4353
|
});
|
|
4354
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$1i;
|
|
4355
4355
|
|
|
4356
4356
|
var CustomButton = newStyled.button(function (_a) {
|
|
4357
4357
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4564,12 +4564,12 @@ var CustomCheckboxStyles = {
|
|
|
4564
4564
|
},
|
|
4565
4565
|
};
|
|
4566
4566
|
|
|
4567
|
-
var Container$
|
|
4567
|
+
var Container$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"])));
|
|
4568
4568
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4569
4569
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4570
4570
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4571
4571
|
]; });
|
|
4572
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4572
|
+
var Input$3 = newStyled.input(templateObject_2$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) {
|
|
4573
4573
|
var disabled = _a.disabled;
|
|
4574
4574
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4575
4575
|
});
|
|
@@ -4598,9 +4598,9 @@ var Checkbox = function (_a) {
|
|
|
4598
4598
|
useEffect(function () {
|
|
4599
4599
|
mounted.current = true;
|
|
4600
4600
|
}, []);
|
|
4601
|
-
return (jsxs$1(Container$
|
|
4601
|
+
return (jsxs$1(Container$P, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4602
4602
|
};
|
|
4603
|
-
var templateObject_1$
|
|
4603
|
+
var templateObject_1$1h, templateObject_2$R;
|
|
4604
4604
|
|
|
4605
4605
|
var CustomOption = newStyled.li(function (_a) {
|
|
4606
4606
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4679,8 +4679,8 @@ function SimpleDropdown(_a) {
|
|
|
4679
4679
|
return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4680
4680
|
}
|
|
4681
4681
|
|
|
4682
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4683
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4682
|
+
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; });
|
|
4683
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4684
4684
|
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4685
4685
|
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4686
4686
|
var DropdownDialog = function (_a) {
|
|
@@ -4690,7 +4690,7 @@ var DropdownDialog = function (_a) {
|
|
|
4690
4690
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4691
4691
|
}) }), void 0) }), void 0));
|
|
4692
4692
|
};
|
|
4693
|
-
var templateObject_1$
|
|
4693
|
+
var templateObject_1$1g, templateObject_2$Q, templateObject_3$C, templateObject_4$p;
|
|
4694
4694
|
|
|
4695
4695
|
var getStylesBySize$8 = function (size, theme) {
|
|
4696
4696
|
switch (size) {
|
|
@@ -4750,8 +4750,8 @@ var SelectorSecondary = function (_a) {
|
|
|
4750
4750
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4751
4751
|
// `variants` styles that are consistent through all themes.
|
|
4752
4752
|
var TAGS = {
|
|
4753
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4754
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4753
|
+
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
4754
|
+
hero2: newStyled.h2(templateObject_2$P || (templateObject_2$P = __makeTemplateObject([""], [""]))),
|
|
4755
4755
|
hero3: newStyled.h3(templateObject_3$B || (templateObject_3$B = __makeTemplateObject([""], [""]))),
|
|
4756
4756
|
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
4757
4757
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
@@ -4873,9 +4873,9 @@ var DEFAULTS = {
|
|
|
4873
4873
|
size: 'regular',
|
|
4874
4874
|
},
|
|
4875
4875
|
};
|
|
4876
|
-
var templateObject_1$
|
|
4876
|
+
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;
|
|
4877
4877
|
|
|
4878
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4878
|
+
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) {
|
|
4879
4879
|
var inline = _a.inline;
|
|
4880
4880
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4881
4881
|
});
|
|
@@ -4893,7 +4893,7 @@ var SizeSelector = function (_a) {
|
|
|
4893
4893
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4894
4894
|
}) }), void 0)] }), void 0));
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$
|
|
4896
|
+
var templateObject_1$1e;
|
|
4897
4897
|
|
|
4898
4898
|
var getStylesBySize$7 = function (size) {
|
|
4899
4899
|
switch (size) {
|
|
@@ -4920,7 +4920,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4920
4920
|
} });
|
|
4921
4921
|
};
|
|
4922
4922
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4923
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4923
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$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));
|
|
4924
4924
|
};
|
|
4925
4925
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4926
4926
|
if (disabled)
|
|
@@ -4936,16 +4936,16 @@ var TextButton = function (_a) {
|
|
|
4936
4936
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4937
4937
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
4938
4938
|
};
|
|
4939
|
-
var templateObject_1$
|
|
4939
|
+
var templateObject_1$1d;
|
|
4940
4940
|
|
|
4941
|
-
var Container$
|
|
4942
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4941
|
+
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"])));
|
|
4942
|
+
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4943
4943
|
var PercentageSpan = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4944
4944
|
var SizeFitGuide = function (_a) {
|
|
4945
4945
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4946
|
-
return (jsxs$1(Container$
|
|
4946
|
+
return (jsxs$1(Container$O, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4947
4947
|
};
|
|
4948
|
-
var templateObject_1$
|
|
4948
|
+
var templateObject_1$1c, templateObject_2$O, templateObject_3$A;
|
|
4949
4949
|
|
|
4950
4950
|
var getStylesBySize$6 = function (size) {
|
|
4951
4951
|
switch (size) {
|
|
@@ -4975,7 +4975,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4975
4975
|
};
|
|
4976
4976
|
}
|
|
4977
4977
|
};
|
|
4978
|
-
var Container$
|
|
4978
|
+
var Container$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) {
|
|
4979
4979
|
var backgroundColor = _a.backgroundColor;
|
|
4980
4980
|
return backgroundColor;
|
|
4981
4981
|
}, function (_a) {
|
|
@@ -4997,7 +4997,7 @@ var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
4997
4997
|
var size = _a.size;
|
|
4998
4998
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4999
4999
|
});
|
|
5000
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5000
|
+
var H3$2 = newStyled.h3(templateObject_2$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) {
|
|
5001
5001
|
var textColor = _a.textColor;
|
|
5002
5002
|
return textColor;
|
|
5003
5003
|
}, function (_a) {
|
|
@@ -5012,9 +5012,9 @@ var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __makeTempla
|
|
|
5012
5012
|
var DiscountTag = function (_a) {
|
|
5013
5013
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5014
5014
|
var theme = useTheme();
|
|
5015
|
-
return (jsx$1(Container$
|
|
5015
|
+
return (jsx$1(Container$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: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5016
5016
|
};
|
|
5017
|
-
var templateObject_1$
|
|
5017
|
+
var templateObject_1$1b, templateObject_2$N;
|
|
5018
5018
|
|
|
5019
5019
|
var getStylesBySize$5 = function (size) {
|
|
5020
5020
|
switch (size) {
|
|
@@ -5044,8 +5044,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
5044
5044
|
};
|
|
5045
5045
|
}
|
|
5046
5046
|
};
|
|
5047
|
-
var Container$
|
|
5048
|
-
var Price = newStyled.p(templateObject_2$
|
|
5047
|
+
var Container$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"])));
|
|
5048
|
+
var Price = newStyled.p(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5049
5049
|
var weight = _a.weight;
|
|
5050
5050
|
return (weight ? weight : '400');
|
|
5051
5051
|
}, function (_a) {
|
|
@@ -5095,11 +5095,11 @@ var PriceLabel = function (_a) {
|
|
|
5095
5095
|
weight: 700,
|
|
5096
5096
|
};
|
|
5097
5097
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5098
|
-
return (jsxs$1(Container$
|
|
5098
|
+
return (jsxs$1(Container$M, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5099
5099
|
};
|
|
5100
|
-
var templateObject_1$
|
|
5100
|
+
var templateObject_1$1a, templateObject_2$M, templateObject_3$z;
|
|
5101
5101
|
|
|
5102
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5102
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5103
5103
|
var PriceLabelV2 = function (_a) {
|
|
5104
5104
|
var _b;
|
|
5105
5105
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5127,9 +5127,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5127
5127
|
weight: 700,
|
|
5128
5128
|
};
|
|
5129
5129
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5130
|
-
return (jsxs$1(Container$
|
|
5130
|
+
return (jsxs$1(Container$M, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5131
5131
|
};
|
|
5132
|
-
var templateObject_1$
|
|
5132
|
+
var templateObject_1$19;
|
|
5133
5133
|
|
|
5134
5134
|
var OneColorSelector = function (_a) {
|
|
5135
5135
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -5170,8 +5170,8 @@ var OutOfStock = function (_a) {
|
|
|
5170
5170
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5171
5171
|
};
|
|
5172
5172
|
|
|
5173
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5174
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5173
|
+
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"])));
|
|
5174
|
+
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5175
5175
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5176
5176
|
var Span = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5177
5177
|
var OptionsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -5192,20 +5192,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5192
5192
|
Option: Option,
|
|
5193
5193
|
OptionsContainer: OptionsContainer,
|
|
5194
5194
|
});
|
|
5195
|
-
var templateObject_1$
|
|
5195
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$y, templateObject_4$n, templateObject_5$e;
|
|
5196
5196
|
|
|
5197
|
-
var Container$
|
|
5197
|
+
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) {
|
|
5198
5198
|
var borderColor = _a.borderColor;
|
|
5199
5199
|
return borderColor;
|
|
5200
5200
|
});
|
|
5201
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5201
|
+
var Image$3 = newStyled.img(templateObject_2$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"])));
|
|
5202
5202
|
var PatternSelector = function (_a) {
|
|
5203
5203
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
5204
5204
|
var theme = useTheme();
|
|
5205
5205
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5206
|
-
return (jsx$1(Container$
|
|
5206
|
+
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5207
5207
|
};
|
|
5208
|
-
var templateObject_1$
|
|
5208
|
+
var templateObject_1$17, templateObject_2$K;
|
|
5209
5209
|
|
|
5210
5210
|
var renderOptions$1 = function (options) {
|
|
5211
5211
|
if (options.length === 0) {
|
|
@@ -5263,7 +5263,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5263
5263
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5264
5264
|
};
|
|
5265
5265
|
|
|
5266
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5266
|
+
var Image$2 = newStyled.img(templateObject_1$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) {
|
|
5267
5267
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5268
5268
|
return borderRadiusVariant &&
|
|
5269
5269
|
"\nborder-radius: 20px;\n";
|
|
@@ -5278,7 +5278,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5278
5278
|
var theme = useTheme();
|
|
5279
5279
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5280
5280
|
};
|
|
5281
|
-
var templateObject_1$
|
|
5281
|
+
var templateObject_1$16;
|
|
5282
5282
|
|
|
5283
5283
|
var Button$4 = newStyled.button(function () { return ({
|
|
5284
5284
|
background: 'transparent',
|
|
@@ -9521,14 +9521,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9521
9521
|
return Slider;
|
|
9522
9522
|
}(React__default.Component);
|
|
9523
9523
|
|
|
9524
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9524
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$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) {
|
|
9525
9525
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9526
9526
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9527
9527
|
}, function (_a) {
|
|
9528
9528
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9529
9529
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9530
9530
|
});
|
|
9531
|
-
var templateObject_1$
|
|
9531
|
+
var templateObject_1$15;
|
|
9532
9532
|
|
|
9533
9533
|
var getStylesBySize$4 = function (size) {
|
|
9534
9534
|
// rem units
|
|
@@ -9587,22 +9587,22 @@ var SliderNavigation = function (_a) {
|
|
|
9587
9587
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9588
9588
|
};
|
|
9589
9589
|
|
|
9590
|
-
var horizontalStyles = css(templateObject_1$
|
|
9591
|
-
var verticalStyles = css(templateObject_2$
|
|
9592
|
-
var Container$
|
|
9590
|
+
var horizontalStyles = css(templateObject_1$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"])));
|
|
9591
|
+
var verticalStyles = css(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
9592
|
+
var Container$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) {
|
|
9593
9593
|
var position = _a.position;
|
|
9594
9594
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9595
9595
|
});
|
|
9596
9596
|
var Button$3 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9597
9597
|
var ImagePreviewList = function (_a) {
|
|
9598
9598
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9599
|
-
return (jsx$1(Container$
|
|
9599
|
+
return (jsx$1(Container$K, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9600
9600
|
arrowWidth: 0.75,
|
|
9601
9601
|
arrowHeight: 1.25,
|
|
9602
9602
|
arrowPadding: 1.625,
|
|
9603
9603
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9604
9604
|
};
|
|
9605
|
-
var templateObject_1$
|
|
9605
|
+
var templateObject_1$14, templateObject_2$J, templateObject_3$x, templateObject_4$m;
|
|
9606
9606
|
|
|
9607
9607
|
var propTypes = {exports: {}};
|
|
9608
9608
|
|
|
@@ -11188,6 +11188,14 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11188
11188
|
afterZoomOut: PropTypes.func
|
|
11189
11189
|
} : {};
|
|
11190
11190
|
|
|
11191
|
+
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"])));
|
|
11192
|
+
var ButtonContainer$2 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 100%;\n button {\n width: 100%;\n padding: 0.5rem 2rem;\n text-transform: capitalize;\n &:hover {\n background-color: #fff;\n color: #292929;\n }\n }\n"], ["\n width: 100%;\n button {\n width: 100%;\n padding: 0.5rem 2rem;\n text-transform: capitalize;\n &:hover {\n background-color: #fff;\n color: #292929;\n }\n }\n"])));
|
|
11193
|
+
var MirrorEffectButton = function (_a) {
|
|
11194
|
+
var title = _a.title, onClick = _a.onClick;
|
|
11195
|
+
return (jsx$1(Container$J, { children: jsx$1(ButtonContainer$2, { children: jsx$1(ButtonSecondaryOutline, { text: title, onClick: onClick }, void 0) }, void 0) }, void 0));
|
|
11196
|
+
};
|
|
11197
|
+
var templateObject_1$13, templateObject_2$I;
|
|
11198
|
+
|
|
11191
11199
|
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11192
11200
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11193
11201
|
return borderRadiusVariant &&
|
|
@@ -11200,7 +11208,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11200
11208
|
return (jsxs$1(Container$I, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11201
11209
|
alt: image.alt,
|
|
11202
11210
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11203
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11211
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0), jsx$1(MirrorEffectButton, { title: "See in your size", onClick: function () { } }, void 0)] }), void 0));
|
|
11204
11212
|
};
|
|
11205
11213
|
var templateObject_1$12, templateObject_2$H, templateObject_3$w;
|
|
11206
11214
|
|
|
@@ -13380,7 +13388,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
13380
13388
|
useEffect(function () {
|
|
13381
13389
|
setSelectedImage(images[index]);
|
|
13382
13390
|
}, [index, images]);
|
|
13383
|
-
return (jsxs$1(Container$d, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13391
|
+
return (jsxs$1("div", { children: [jsxs$1(Container$d, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0), jsx$1(MirrorEffectButton, { title: "See in your size", onClick: function () { } }, void 0)] }, void 0));
|
|
13384
13392
|
};
|
|
13385
13393
|
var templateObject_1$j;
|
|
13386
13394
|
|
|
@@ -17423,13 +17431,13 @@ var IconContainer = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __
|
|
|
17423
17431
|
var IconPlaceholder = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17424
17432
|
var DiscountContainer = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17425
17433
|
var PackSelector = function (_a) {
|
|
17426
|
-
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
17434
|
+
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17427
17435
|
return (jsx$1(Container$9, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17428
|
-
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
17436
|
+
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17429
17437
|
}) }), void 0));
|
|
17430
17438
|
};
|
|
17431
17439
|
var PackCard = function (_a) {
|
|
17432
|
-
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected;
|
|
17440
|
+
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected, currencyCode = _a.currencyCode;
|
|
17433
17441
|
var _b = useState(null), icon = _b[0], setIcon = _b[1];
|
|
17434
17442
|
useEffect(function () {
|
|
17435
17443
|
fetch(pack.meta.icon)
|
|
@@ -17439,7 +17447,16 @@ var PackCard = function (_a) {
|
|
|
17439
17447
|
}, [pack.meta.icon]);
|
|
17440
17448
|
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17441
17449
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17442
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice
|
|
17450
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17451
|
+
locale: 'en-US',
|
|
17452
|
+
currency: currencyCode || 'USD',
|
|
17453
|
+
}) }), void 0), jsxs$1(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
17454
|
+
locale: 'en-US',
|
|
17455
|
+
currency: currencyCode || 'USD',
|
|
17456
|
+
})] }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17457
|
+
locale: 'en-US',
|
|
17458
|
+
currency: currencyCode || 'USD',
|
|
17459
|
+
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17443
17460
|
};
|
|
17444
17461
|
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
17445
17462
|
|