@trafilea/afrodita-components 5.0.0-beta.136 → 5.0.0-beta.137
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 +9 -2
- package/build/index.esm.js +183 -147
- package/build/index.esm.js.map +1 -1
- package/build/index.js +183 -146
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4016,7 +4016,7 @@ var InputValidationType;
|
|
|
4016
4016
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4017
4017
|
})(InputValidationType || (InputValidationType = {}));
|
|
4018
4018
|
|
|
4019
|
-
var Section = newStyled.div(templateObject_1$
|
|
4019
|
+
var Section = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
4020
4020
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4021
4021
|
});
|
|
4022
4022
|
var CardHeader = function (_a) {
|
|
@@ -4027,14 +4027,14 @@ var CardFooter = function (_a) {
|
|
|
4027
4027
|
var children = _a.children;
|
|
4028
4028
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4029
4029
|
};
|
|
4030
|
-
var templateObject_1$
|
|
4030
|
+
var templateObject_1$1m;
|
|
4031
4031
|
|
|
4032
|
-
var Body = newStyled.div(templateObject_1$
|
|
4032
|
+
var Body = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4033
4033
|
var CardBody = function (_a) {
|
|
4034
4034
|
var children = _a.children;
|
|
4035
4035
|
return jsx$1(Body, { children: children }, void 0);
|
|
4036
4036
|
};
|
|
4037
|
-
var templateObject_1$
|
|
4037
|
+
var templateObject_1$1l;
|
|
4038
4038
|
|
|
4039
4039
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4040
4040
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4179,7 +4179,7 @@ var AssetsProvider = function (_a) {
|
|
|
4179
4179
|
};
|
|
4180
4180
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4181
4181
|
|
|
4182
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
4182
|
+
var Container$R = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4183
4183
|
var flex = _a.flex;
|
|
4184
4184
|
return flex &&
|
|
4185
4185
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4199,7 +4199,7 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
4199
4199
|
Footer: CardFooter,
|
|
4200
4200
|
Body: CardBody,
|
|
4201
4201
|
});
|
|
4202
|
-
var templateObject_1$
|
|
4202
|
+
var templateObject_1$1k;
|
|
4203
4203
|
|
|
4204
4204
|
var Fragment = Fragment$1;
|
|
4205
4205
|
function jsx(type, props, key) {
|
|
@@ -4341,7 +4341,7 @@ function BaseSelectOption(_a) {
|
|
|
4341
4341
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4342
4342
|
}
|
|
4343
4343
|
|
|
4344
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4344
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4345
4345
|
function BaseSelect(_a) {
|
|
4346
4346
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4347
4347
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4351,7 +4351,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4351
4351
|
Options: BaseSelectOptions,
|
|
4352
4352
|
Option: BaseSelectOption,
|
|
4353
4353
|
});
|
|
4354
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$1j;
|
|
4355
4355
|
|
|
4356
4356
|
var CustomButton = newStyled.button(function (_a) {
|
|
4357
4357
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4566,12 +4566,12 @@ var CustomCheckboxStyles = {
|
|
|
4566
4566
|
},
|
|
4567
4567
|
};
|
|
4568
4568
|
|
|
4569
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
4569
|
+
var Container$Q = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4570
4570
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4571
4571
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4572
4572
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4573
4573
|
]; });
|
|
4574
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4574
|
+
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) {
|
|
4575
4575
|
var disabled = _a.disabled;
|
|
4576
4576
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4577
4577
|
});
|
|
@@ -4602,7 +4602,7 @@ var Checkbox = function (_a) {
|
|
|
4602
4602
|
}, []);
|
|
4603
4603
|
return (jsxs$1(Container$Q, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4604
4604
|
};
|
|
4605
|
-
var templateObject_1$
|
|
4605
|
+
var templateObject_1$1i, templateObject_2$R;
|
|
4606
4606
|
|
|
4607
4607
|
var CustomOption = newStyled.li(function (_a) {
|
|
4608
4608
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4681,10 +4681,10 @@ function SimpleDropdown(_a) {
|
|
|
4681
4681
|
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));
|
|
4682
4682
|
}
|
|
4683
4683
|
|
|
4684
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4685
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4686
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4687
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4684
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4685
|
+
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; });
|
|
4686
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
4687
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
4688
4688
|
var DropdownDialog = function (_a) {
|
|
4689
4689
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4690
4690
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4692,7 +4692,7 @@ var DropdownDialog = function (_a) {
|
|
|
4692
4692
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4693
4693
|
}) }), void 0) }), void 0));
|
|
4694
4694
|
};
|
|
4695
|
-
var templateObject_1$
|
|
4695
|
+
var templateObject_1$1h, templateObject_2$Q, templateObject_3$D, templateObject_4$r;
|
|
4696
4696
|
|
|
4697
4697
|
var getStylesBySize$9 = function (size, theme) {
|
|
4698
4698
|
switch (size) {
|
|
@@ -4760,10 +4760,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4760
4760
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4761
4761
|
// `variants` styles that are consistent through all themes.
|
|
4762
4762
|
var TAGS = {
|
|
4763
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4764
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4765
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4766
|
-
display1: newStyled.h1(templateObject_4$
|
|
4763
|
+
hero1: newStyled.h1(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject([""], [""]))),
|
|
4764
|
+
hero2: newStyled.h2(templateObject_2$P || (templateObject_2$P = __makeTemplateObject([""], [""]))),
|
|
4765
|
+
hero3: newStyled.h3(templateObject_3$C || (templateObject_3$C = __makeTemplateObject([""], [""]))),
|
|
4766
|
+
display1: newStyled.h1(templateObject_4$q || (templateObject_4$q = __makeTemplateObject([""], [""]))),
|
|
4767
4767
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4768
4768
|
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4769
4769
|
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4883,9 +4883,9 @@ var DEFAULTS = {
|
|
|
4883
4883
|
size: 'regular',
|
|
4884
4884
|
},
|
|
4885
4885
|
};
|
|
4886
|
-
var templateObject_1$
|
|
4886
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$q, 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;
|
|
4887
4887
|
|
|
4888
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4888
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4889
4889
|
var inline = _a.inline;
|
|
4890
4890
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4891
4891
|
});
|
|
@@ -4904,7 +4904,7 @@ var SizeSelector = function (_a) {
|
|
|
4904
4904
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
4905
4905
|
}) }), void 0)] }), void 0));
|
|
4906
4906
|
};
|
|
4907
|
-
var templateObject_1$
|
|
4907
|
+
var templateObject_1$1f;
|
|
4908
4908
|
|
|
4909
4909
|
var getStylesBySize$8 = function (size) {
|
|
4910
4910
|
switch (size) {
|
|
@@ -4931,7 +4931,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4931
4931
|
} });
|
|
4932
4932
|
};
|
|
4933
4933
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4934
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4934
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
4935
4935
|
};
|
|
4936
4936
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4937
4937
|
if (disabled)
|
|
@@ -4947,16 +4947,16 @@ var TextButton = function (_a) {
|
|
|
4947
4947
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4948
4948
|
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));
|
|
4949
4949
|
};
|
|
4950
|
-
var templateObject_1$
|
|
4950
|
+
var templateObject_1$1e;
|
|
4951
4951
|
|
|
4952
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
4953
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4954
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4952
|
+
var Container$P = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4953
|
+
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4954
|
+
var PercentageSpan = newStyled.span(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
4955
4955
|
var SizeFitGuide = function (_a) {
|
|
4956
4956
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4957
4957
|
return (jsxs$1(Container$P, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4958
4958
|
};
|
|
4959
|
-
var templateObject_1$
|
|
4959
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$B;
|
|
4960
4960
|
|
|
4961
4961
|
var getStylesBySize$7 = function (size) {
|
|
4962
4962
|
switch (size) {
|
|
@@ -4986,7 +4986,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
4986
4986
|
};
|
|
4987
4987
|
}
|
|
4988
4988
|
};
|
|
4989
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
4989
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
4990
4990
|
var backgroundColor = _a.backgroundColor;
|
|
4991
4991
|
return backgroundColor;
|
|
4992
4992
|
}, function (_a) {
|
|
@@ -5008,7 +5008,7 @@ var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
|
|
|
5008
5008
|
var size = _a.size;
|
|
5009
5009
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5010
5010
|
});
|
|
5011
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5011
|
+
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) {
|
|
5012
5012
|
var textColor = _a.textColor;
|
|
5013
5013
|
return textColor;
|
|
5014
5014
|
}, function (_a) {
|
|
@@ -5025,7 +5025,7 @@ var DiscountTag = function (_a) {
|
|
|
5025
5025
|
var theme = useTheme();
|
|
5026
5026
|
return (jsx$1(Container$O, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5027
5027
|
};
|
|
5028
|
-
var templateObject_1$
|
|
5028
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5029
5029
|
|
|
5030
5030
|
var getStylesBySize$6 = function (size) {
|
|
5031
5031
|
switch (size) {
|
|
@@ -5055,8 +5055,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5055
5055
|
};
|
|
5056
5056
|
}
|
|
5057
5057
|
};
|
|
5058
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
5059
|
-
var Price = newStyled.p(templateObject_2$
|
|
5058
|
+
var Container$N = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5059
|
+
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) {
|
|
5060
5060
|
var weight = _a.weight;
|
|
5061
5061
|
return (weight ? weight : '400');
|
|
5062
5062
|
}, function (_a) {
|
|
@@ -5085,7 +5085,7 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
|
|
|
5085
5085
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5086
5086
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5087
5087
|
});
|
|
5088
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5088
|
+
var TagContainer = newStyled.p(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5089
5089
|
var _b;
|
|
5090
5090
|
var size = _a.size;
|
|
5091
5091
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5108,9 +5108,9 @@ var PriceLabel = function (_a) {
|
|
|
5108
5108
|
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)); };
|
|
5109
5109
|
return (jsxs$1(Container$N, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5110
5110
|
};
|
|
5111
|
-
var templateObject_1$
|
|
5111
|
+
var templateObject_1$1b, templateObject_2$M, templateObject_3$A;
|
|
5112
5112
|
|
|
5113
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5113
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5114
5114
|
var PriceLabelV2 = function (_a) {
|
|
5115
5115
|
var _b;
|
|
5116
5116
|
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;
|
|
@@ -5140,7 +5140,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5140
5140
|
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)); };
|
|
5141
5141
|
return (jsxs$1(Container$N, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5142
5142
|
};
|
|
5143
|
-
var templateObject_1$
|
|
5143
|
+
var templateObject_1$1a;
|
|
5144
5144
|
|
|
5145
5145
|
var OneColorSelector = function (_a) {
|
|
5146
5146
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5181,10 +5181,10 @@ var OutOfStock = function (_a) {
|
|
|
5181
5181
|
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));
|
|
5182
5182
|
};
|
|
5183
5183
|
|
|
5184
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5185
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5186
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5187
|
-
var Span = newStyled.span(templateObject_4$
|
|
5184
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5185
|
+
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5186
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
5187
|
+
var Span = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5188
5188
|
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"])));
|
|
5189
5189
|
var Label$2 = function (_a) {
|
|
5190
5190
|
var label = _a.label, values = _a.values;
|
|
@@ -5203,23 +5203,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5203
5203
|
Option: Option,
|
|
5204
5204
|
OptionsContainer: OptionsContainer,
|
|
5205
5205
|
});
|
|
5206
|
-
var templateObject_1$
|
|
5206
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$z, templateObject_4$p, templateObject_5$e;
|
|
5207
5207
|
|
|
5208
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
5208
|
+
var Container$M = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
5209
5209
|
var borderColor = _a.borderColor;
|
|
5210
5210
|
return borderColor;
|
|
5211
5211
|
}, function (_a) {
|
|
5212
5212
|
var noStock = _a.noStock;
|
|
5213
5213
|
return (noStock ? '0.4' : '1');
|
|
5214
5214
|
});
|
|
5215
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5215
|
+
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"])));
|
|
5216
5216
|
var PatternSelector = function (_a) {
|
|
5217
5217
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5218
5218
|
var theme = useTheme();
|
|
5219
5219
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5220
5220
|
return (jsx$1(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5221
5221
|
};
|
|
5222
|
-
var templateObject_1$
|
|
5222
|
+
var templateObject_1$18, templateObject_2$K;
|
|
5223
5223
|
|
|
5224
5224
|
var renderOptions$1 = function (options) {
|
|
5225
5225
|
if (options.length === 0) {
|
|
@@ -5277,7 +5277,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5277
5277
|
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));
|
|
5278
5278
|
};
|
|
5279
5279
|
|
|
5280
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5280
|
+
var Image$2 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5281
5281
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5282
5282
|
return borderRadiusVariant &&
|
|
5283
5283
|
"\nborder-radius: 20px;\n";
|
|
@@ -5292,7 +5292,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5292
5292
|
var theme = useTheme();
|
|
5293
5293
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5294
5294
|
};
|
|
5295
|
-
var templateObject_1$
|
|
5295
|
+
var templateObject_1$17;
|
|
5296
5296
|
|
|
5297
5297
|
var Button$4 = newStyled.button(function () { return ({
|
|
5298
5298
|
background: 'transparent',
|
|
@@ -9535,14 +9535,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9535
9535
|
return Slider;
|
|
9536
9536
|
}(React__default.Component);
|
|
9537
9537
|
|
|
9538
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9538
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
9539
9539
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9540
9540
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9541
9541
|
}, function (_a) {
|
|
9542
9542
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9543
9543
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9544
9544
|
});
|
|
9545
|
-
var templateObject_1$
|
|
9545
|
+
var templateObject_1$16;
|
|
9546
9546
|
|
|
9547
9547
|
var getStylesBySize$5 = function (size) {
|
|
9548
9548
|
// rem units
|
|
@@ -9601,13 +9601,13 @@ var SliderNavigation = function (_a) {
|
|
|
9601
9601
|
} }, { 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));
|
|
9602
9602
|
};
|
|
9603
9603
|
|
|
9604
|
-
var horizontalStyles = css(templateObject_1$
|
|
9605
|
-
var verticalStyles = css(templateObject_2$
|
|
9606
|
-
var Container$L = newStyled.div(templateObject_3$
|
|
9604
|
+
var horizontalStyles = css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9605
|
+
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"])));
|
|
9606
|
+
var Container$L = newStyled.div(templateObject_3$y || (templateObject_3$y = __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) {
|
|
9607
9607
|
var position = _a.position;
|
|
9608
9608
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9609
9609
|
});
|
|
9610
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9610
|
+
var Button$3 = newStyled.button(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
9611
9611
|
var ImagePreviewList = function (_a) {
|
|
9612
9612
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9613
9613
|
return (jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
@@ -9616,7 +9616,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9616
9616
|
arrowPadding: 1.625,
|
|
9617
9617
|
}, 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));
|
|
9618
9618
|
};
|
|
9619
|
-
var templateObject_1$
|
|
9619
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$y, templateObject_4$o;
|
|
9620
9620
|
|
|
9621
9621
|
var propTypes = {exports: {}};
|
|
9622
9622
|
|
|
@@ -11209,13 +11209,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11209
11209
|
afterZoomOut: PropTypes.func
|
|
11210
11210
|
} : {};
|
|
11211
11211
|
|
|
11212
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
11212
|
+
var Container$K = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
11213
11213
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11214
11214
|
return borderRadiusVariant &&
|
|
11215
11215
|
"\n border-radius: 40px;\n ";
|
|
11216
11216
|
});
|
|
11217
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11218
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11217
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11218
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11219
11219
|
var ImageProductWithTags$1 = function (_a) {
|
|
11220
11220
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11221
11221
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
@@ -11223,9 +11223,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11223
11223
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11224
11224
|
}, 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));
|
|
11225
11225
|
};
|
|
11226
|
-
var templateObject_1$
|
|
11226
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$x;
|
|
11227
11227
|
|
|
11228
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
11228
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11229
11229
|
var ProductGallery = function (_a) {
|
|
11230
11230
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11231
11231
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11237,7 +11237,7 @@ var ProductGallery = function (_a) {
|
|
|
11237
11237
|
setSelectedImage(value);
|
|
11238
11238
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11239
11239
|
};
|
|
11240
|
-
var templateObject_1$
|
|
11240
|
+
var templateObject_1$13;
|
|
11241
11241
|
|
|
11242
11242
|
/* base styles & size variants */
|
|
11243
11243
|
var StarStyles = {
|
|
@@ -11283,8 +11283,8 @@ var StarStyles = {
|
|
|
11283
11283
|
});
|
|
11284
11284
|
},
|
|
11285
11285
|
};
|
|
11286
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
11287
|
-
var templateObject_1$
|
|
11286
|
+
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11287
|
+
var templateObject_1$12;
|
|
11288
11288
|
|
|
11289
11289
|
var StarContainer = newStyled.div(function (_a) {
|
|
11290
11290
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11346,8 +11346,8 @@ var LabelStyles = {
|
|
|
11346
11346
|
});
|
|
11347
11347
|
},
|
|
11348
11348
|
};
|
|
11349
|
-
var Container$H = newStyled.a(templateObject_1$
|
|
11350
|
-
var templateObject_1$
|
|
11349
|
+
var Container$H = newStyled.a(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11350
|
+
var templateObject_1$11;
|
|
11351
11351
|
|
|
11352
11352
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11353
11353
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11388,8 +11388,8 @@ var Rating = function (_a) {
|
|
|
11388
11388
|
return (jsxs$1(Container$H, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11389
11389
|
};
|
|
11390
11390
|
|
|
11391
|
-
var Container$G = newStyled.div(templateObject_1
|
|
11392
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11391
|
+
var Container$G = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
11392
|
+
var P$2 = newStyled.p(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
11393
11393
|
var textButtonStyles = function (theme) { return ({
|
|
11394
11394
|
border: 'none',
|
|
11395
11395
|
background: 'transparent',
|
|
@@ -11404,7 +11404,7 @@ var FitPredictor = function (_a) {
|
|
|
11404
11404
|
var theme = useTheme();
|
|
11405
11405
|
return (jsxs(Container$G, __assign$1({ theme: theme }, { children: [jsx(Container$G, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11406
11406
|
};
|
|
11407
|
-
var templateObject_1
|
|
11407
|
+
var templateObject_1$10, templateObject_2$H;
|
|
11408
11408
|
|
|
11409
11409
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11410
11410
|
var color = _a.color;
|
|
@@ -11418,7 +11418,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11418
11418
|
margin: '0.938rem 4.188rem',
|
|
11419
11419
|
});
|
|
11420
11420
|
});
|
|
11421
|
-
var Bar = newStyled.div(templateObject_1
|
|
11421
|
+
var Bar = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11422
11422
|
var backgroundColor = _a.backgroundColor;
|
|
11423
11423
|
return backgroundColor;
|
|
11424
11424
|
}, function (_a) {
|
|
@@ -11457,7 +11457,7 @@ var ProgressBar = function (_a) {
|
|
|
11457
11457
|
var theme = useTheme();
|
|
11458
11458
|
return (jsxs$1(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11459
11459
|
};
|
|
11460
|
-
var templateObject_1
|
|
11460
|
+
var templateObject_1$$;
|
|
11461
11461
|
|
|
11462
11462
|
var getStylesBySize$4 = function (size) {
|
|
11463
11463
|
switch (size) {
|
|
@@ -11478,7 +11478,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11478
11478
|
};
|
|
11479
11479
|
}
|
|
11480
11480
|
};
|
|
11481
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
11481
|
+
var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
11482
11482
|
var backgroundColor = _a.backgroundColor;
|
|
11483
11483
|
return backgroundColor;
|
|
11484
11484
|
}, function (_a) {
|
|
@@ -11508,7 +11508,7 @@ var IconButton = function (_a) {
|
|
|
11508
11508
|
var theme = useTheme();
|
|
11509
11509
|
return (jsx$1(Container$E, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
11510
11510
|
};
|
|
11511
|
-
var templateObject_1$
|
|
11511
|
+
var templateObject_1$_;
|
|
11512
11512
|
|
|
11513
11513
|
var TooltipArrow = function (_a) {
|
|
11514
11514
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11588,7 +11588,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11588
11588
|
}
|
|
11589
11589
|
};
|
|
11590
11590
|
|
|
11591
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11591
|
+
var Wrapper$5 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
11592
11592
|
var position = _a.position;
|
|
11593
11593
|
return getWrapperFlexDirection(position);
|
|
11594
11594
|
});
|
|
@@ -11612,11 +11612,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11612
11612
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11613
11613
|
return actual === expected ? margin : '0';
|
|
11614
11614
|
};
|
|
11615
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11615
|
+
var ContentWrapper = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
11616
11616
|
var borderColor = _a.borderColor;
|
|
11617
11617
|
return borderColor;
|
|
11618
11618
|
});
|
|
11619
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11619
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
11620
11620
|
var position = _a.position;
|
|
11621
11621
|
return getArrowRotation(position);
|
|
11622
11622
|
}, function (_a) {
|
|
@@ -11626,7 +11626,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_
|
|
|
11626
11626
|
var position = _a.position;
|
|
11627
11627
|
return getArrowContainerMargin(position);
|
|
11628
11628
|
});
|
|
11629
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11629
|
+
var TooltipText = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11630
11630
|
var color = _a.color;
|
|
11631
11631
|
return color;
|
|
11632
11632
|
});
|
|
@@ -11636,7 +11636,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11636
11636
|
return color;
|
|
11637
11637
|
});
|
|
11638
11638
|
var IconContainer$5 = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11639
|
-
var templateObject_1$
|
|
11639
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$w, templateObject_4$n, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11640
11640
|
|
|
11641
11641
|
var Tooltip = function (_a) {
|
|
11642
11642
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -11794,9 +11794,9 @@ var ContainerStyles = {
|
|
|
11794
11794
|
},
|
|
11795
11795
|
};
|
|
11796
11796
|
|
|
11797
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11797
|
+
var Wrapper$4 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11798
11798
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11799
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11799
|
+
var Input$2 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
11800
11800
|
var disabled = _a.disabled;
|
|
11801
11801
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11802
11802
|
});
|
|
@@ -11813,7 +11813,7 @@ var RadioInput = function (_a) {
|
|
|
11813
11813
|
};
|
|
11814
11814
|
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: theme.component.radio.textSize, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11815
11815
|
};
|
|
11816
|
-
var templateObject_1$
|
|
11816
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
11817
11817
|
|
|
11818
11818
|
var RadioGroupInput = function (_a) {
|
|
11819
11819
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11827,37 +11827,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11827
11827
|
}) }), void 0));
|
|
11828
11828
|
};
|
|
11829
11829
|
|
|
11830
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11831
|
-
var Container$C = newStyled.div(templateObject_2$
|
|
11830
|
+
var Wrapper$3 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11831
|
+
var Container$C = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11832
11832
|
var Minimalistic = function (_a) {
|
|
11833
11833
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11834
11834
|
var theme = useTheme();
|
|
11835
11835
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11836
11836
|
};
|
|
11837
|
-
var templateObject_1$
|
|
11837
|
+
var templateObject_1$X, templateObject_2$E;
|
|
11838
11838
|
|
|
11839
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
11840
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11841
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11842
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11839
|
+
var Container$B = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11840
|
+
var Title$5 = newStyled.h1(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11841
|
+
var Details$1 = newStyled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
11842
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
11843
11843
|
var Simple = function (_a) {
|
|
11844
11844
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
11845
11845
|
var theme = useTheme();
|
|
11846
11846
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$B, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11847
11847
|
};
|
|
11848
|
-
var templateObject_1$
|
|
11848
|
+
var templateObject_1$W, templateObject_2$D, templateObject_3$v, templateObject_4$m;
|
|
11849
11849
|
|
|
11850
11850
|
var Bundle = {
|
|
11851
11851
|
Minimalistic: Minimalistic,
|
|
11852
11852
|
Simple: Simple,
|
|
11853
11853
|
};
|
|
11854
11854
|
|
|
11855
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
11855
|
+
var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
11856
11856
|
var Tag$1 = function (_a) {
|
|
11857
11857
|
var text = _a.text, className = _a.className;
|
|
11858
11858
|
return jsx$1(Container$A, __assign$1({ className: className }, { children: text }), void 0);
|
|
11859
11859
|
};
|
|
11860
|
-
var templateObject_1$
|
|
11860
|
+
var templateObject_1$V;
|
|
11861
11861
|
|
|
11862
11862
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11863
11863
|
switch (size) {
|
|
@@ -11960,11 +11960,11 @@ var Timer = function (_a) {
|
|
|
11960
11960
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11961
11961
|
};
|
|
11962
11962
|
|
|
11963
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11963
|
+
var Label$1 = newStyled.span(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
11964
11964
|
var color = _a.color;
|
|
11965
11965
|
return color;
|
|
11966
11966
|
});
|
|
11967
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11967
|
+
var MandatoryIcon = newStyled.span(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
11968
11968
|
var color = _a.color;
|
|
11969
11969
|
return color;
|
|
11970
11970
|
});
|
|
@@ -11973,7 +11973,7 @@ var InputLabel = function (_a) {
|
|
|
11973
11973
|
var theme = useTheme();
|
|
11974
11974
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11975
11975
|
};
|
|
11976
|
-
var templateObject_1$
|
|
11976
|
+
var templateObject_1$U, templateObject_2$C;
|
|
11977
11977
|
|
|
11978
11978
|
/**
|
|
11979
11979
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12027,14 +12027,14 @@ var formatPrice = function (value, _a) {
|
|
|
12027
12027
|
}).format(valueToFormat);
|
|
12028
12028
|
};
|
|
12029
12029
|
|
|
12030
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12031
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12030
|
+
var ErrorText = newStyled.h3(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12031
|
+
var ErrorContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
12032
12032
|
var Error$1 = function (_a) {
|
|
12033
12033
|
var error = _a.error;
|
|
12034
12034
|
var theme = useTheme();
|
|
12035
12035
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12036
12036
|
};
|
|
12037
|
-
var templateObject_1$
|
|
12037
|
+
var templateObject_1$T, templateObject_2$B;
|
|
12038
12038
|
|
|
12039
12039
|
var containerByStatus = function (theme, status) {
|
|
12040
12040
|
if (status === InputValidationType.Valid)
|
|
@@ -12043,11 +12043,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12043
12043
|
return theme.colors.semantic.urgent.color;
|
|
12044
12044
|
return '';
|
|
12045
12045
|
};
|
|
12046
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
12046
|
+
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12047
12047
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12048
12048
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12049
12049
|
});
|
|
12050
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12050
|
+
var StyledInput = newStyled.input(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12051
12051
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12052
12052
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12053
12053
|
}, function (_a) {
|
|
@@ -12102,13 +12102,13 @@ var StyledInput = newStyled.input(templateObject_2$z || (templateObject_2$z = __
|
|
|
12102
12102
|
return hasValue &&
|
|
12103
12103
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12104
12104
|
});
|
|
12105
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12105
|
+
var InputWrapper = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12106
12106
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12107
12107
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12108
12108
|
});
|
|
12109
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12109
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12110
12110
|
var ClearInput = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12111
|
-
var templateObject_1$
|
|
12111
|
+
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$l, templateObject_5$c;
|
|
12112
12112
|
|
|
12113
12113
|
var BaseInput = function (_a) {
|
|
12114
12114
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
@@ -12152,11 +12152,11 @@ var Button$2 = function (_a) {
|
|
|
12152
12152
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12153
12153
|
};
|
|
12154
12154
|
|
|
12155
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
12155
|
+
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
12156
12156
|
var theme = _a.theme;
|
|
12157
12157
|
return theme.component.inputCustom.input.borderRadius;
|
|
12158
12158
|
});
|
|
12159
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12159
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
12160
12160
|
var theme = _a.theme;
|
|
12161
12161
|
return theme.component.inputCustom.button.borderRadius;
|
|
12162
12162
|
});
|
|
@@ -12171,21 +12171,21 @@ var Custom = function (_a) {
|
|
|
12171
12171
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12172
12172
|
return (jsx$1(Container$y, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12173
12173
|
};
|
|
12174
|
-
var templateObject_1$
|
|
12174
|
+
var templateObject_1$R, templateObject_2$z;
|
|
12175
12175
|
|
|
12176
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12176
|
+
var SuccessContainer = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12177
12177
|
var size = _a.size;
|
|
12178
12178
|
return (size === 'small' ? '36px' : '');
|
|
12179
12179
|
});
|
|
12180
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12181
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12180
|
+
var SuccessMessage = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
12181
|
+
var SuccessText = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
12182
12182
|
var Success = function (_a) {
|
|
12183
12183
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12184
12184
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12185
12185
|
};
|
|
12186
|
-
var templateObject_1$
|
|
12186
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$t;
|
|
12187
12187
|
|
|
12188
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12188
|
+
var ButtonContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12189
12189
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12190
12190
|
return status === InputValidationType.Empty &&
|
|
12191
12191
|
type === 'primary' &&
|
|
@@ -12202,10 +12202,10 @@ var BasePlusButton = function (_a) {
|
|
|
12202
12202
|
}
|
|
12203
12203
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12204
12204
|
};
|
|
12205
|
-
var templateObject_1$
|
|
12205
|
+
var templateObject_1$P;
|
|
12206
12206
|
|
|
12207
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
12208
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12207
|
+
var Container$x = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12208
|
+
var IconContainer$4 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12209
12209
|
var BasePlusIcon = function (_a) {
|
|
12210
12210
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12211
12211
|
var theme = useTheme();
|
|
@@ -12216,7 +12216,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12216
12216
|
? theme.colors.semantic.urgent.color
|
|
12217
12217
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12218
12218
|
};
|
|
12219
|
-
var templateObject_1$
|
|
12219
|
+
var templateObject_1$O, templateObject_2$x;
|
|
12220
12220
|
|
|
12221
12221
|
var Input$1 = {
|
|
12222
12222
|
Simple: BaseInput,
|
|
@@ -12225,7 +12225,7 @@ var Input$1 = {
|
|
|
12225
12225
|
SimplePlusIcon: BasePlusIcon,
|
|
12226
12226
|
};
|
|
12227
12227
|
|
|
12228
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
12228
|
+
var Container$w = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
12229
12229
|
var width = _a.width;
|
|
12230
12230
|
return width;
|
|
12231
12231
|
}, function (_a) {
|
|
@@ -12243,9 +12243,9 @@ var PaymentMethod = function (_a) {
|
|
|
12243
12243
|
var theme = useTheme();
|
|
12244
12244
|
return (jsx$1(Container$w, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
12245
12245
|
};
|
|
12246
|
-
var templateObject_1$
|
|
12246
|
+
var templateObject_1$N;
|
|
12247
12247
|
|
|
12248
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12248
|
+
var Text$5 = newStyled.h3(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
12249
12249
|
var backgroundColor = _a.backgroundColor;
|
|
12250
12250
|
return backgroundColor;
|
|
12251
12251
|
}, function (_a) {
|
|
@@ -12257,27 +12257,27 @@ var OfferBanner = function (_a) {
|
|
|
12257
12257
|
var theme = useTheme();
|
|
12258
12258
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12259
12259
|
};
|
|
12260
|
-
var templateObject_1$
|
|
12260
|
+
var templateObject_1$M;
|
|
12261
12261
|
|
|
12262
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12263
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12264
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12265
|
-
var Container$v = newStyled.div(templateObject_4$
|
|
12262
|
+
var Wrapper$2 = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12263
|
+
var GrandTotal = newStyled.h1(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12264
|
+
var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12265
|
+
var Container$v = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12266
12266
|
var Discount = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
12267
12267
|
var Total = function (_a) {
|
|
12268
12268
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12269
12269
|
var theme = useTheme();
|
|
12270
12270
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12271
12271
|
};
|
|
12272
|
-
var templateObject_1$
|
|
12272
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b;
|
|
12273
12273
|
|
|
12274
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12274
|
+
var Wrapper$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12275
12275
|
var color = _a.color;
|
|
12276
12276
|
return color;
|
|
12277
12277
|
});
|
|
12278
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12279
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12280
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12278
|
+
var ItemContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12279
|
+
var Item$2 = newStyled.h4(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
12280
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12281
12281
|
var color = _a.color;
|
|
12282
12282
|
return color;
|
|
12283
12283
|
});
|
|
@@ -12290,22 +12290,22 @@ var Subtotal = function (_a) {
|
|
|
12290
12290
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12291
12291
|
})] }), void 0));
|
|
12292
12292
|
};
|
|
12293
|
-
var templateObject_1$
|
|
12293
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$j;
|
|
12294
12294
|
|
|
12295
12295
|
var Totals = {
|
|
12296
12296
|
Total: Total,
|
|
12297
12297
|
Subtotal: Subtotal,
|
|
12298
12298
|
};
|
|
12299
12299
|
|
|
12300
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
12301
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12302
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12303
|
-
var Details = newStyled.span(templateObject_4$
|
|
12300
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12301
|
+
var IconContainer$3 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
12302
|
+
var Text$4 = newStyled.p(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12303
|
+
var Details = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12304
12304
|
var Note = function (_a) {
|
|
12305
12305
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12306
12306
|
return (jsxs$1(Container$u, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12307
12307
|
};
|
|
12308
|
-
var templateObject_1$
|
|
12308
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;
|
|
12309
12309
|
|
|
12310
12310
|
/* eslint-disable no-param-reassign */
|
|
12311
12311
|
var index$1 = function (breakpoints) {
|
|
@@ -12391,12 +12391,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12391
12391
|
literal: true,
|
|
12392
12392
|
});
|
|
12393
12393
|
|
|
12394
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12395
|
-
var Line = newStyled.div(templateObject_2$
|
|
12396
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12394
|
+
var Title$4 = newStyled.h1(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12395
|
+
var Line = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12396
|
+
var Row$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12397
12397
|
flexDirection: ['column', 'row'],
|
|
12398
12398
|
}));
|
|
12399
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12399
|
+
var Col$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
12400
12400
|
margin: ['0', '0 1.25rem'],
|
|
12401
12401
|
marginBottom: ['1.875rem', '0'],
|
|
12402
12402
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12420,39 +12420,75 @@ var DeliveryDetails = function (_a) {
|
|
|
12420
12420
|
var theme = useTheme();
|
|
12421
12421
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12422
12422
|
};
|
|
12423
|
-
var templateObject_1$
|
|
12423
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
12424
12424
|
|
|
12425
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
12426
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12425
|
+
var Container$t = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
12426
|
+
var Text$3 = newStyled.p(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12427
12427
|
var ScrollToTop = function (_a) {
|
|
12428
12428
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12429
12429
|
var theme = useTheme();
|
|
12430
12430
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12431
12431
|
return (jsxs$1(Container$t, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12432
12432
|
};
|
|
12433
|
-
var templateObject_1$
|
|
12433
|
+
var templateObject_1$H, templateObject_2$s;
|
|
12434
12434
|
|
|
12435
12435
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12436
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
12436
|
+
var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
12437
12437
|
var color = _a.color;
|
|
12438
12438
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12439
12439
|
});
|
|
12440
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12440
|
+
var H1 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
12441
12441
|
var OrderBar = function (_a) {
|
|
12442
12442
|
var message = _a.message, color = _a.color;
|
|
12443
12443
|
var theme = useTheme();
|
|
12444
12444
|
return (jsxs$1(Container$s, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12445
12445
|
};
|
|
12446
|
-
var templateObject_1$
|
|
12446
|
+
var templateObject_1$G, templateObject_2$r;
|
|
12447
|
+
|
|
12448
|
+
var TableElement$1 = newStyled.table(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12449
|
+
var TableCell$1 = newStyled.td(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12450
|
+
var TableHead$1 = newStyled.th(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12451
|
+
var TableRow$1 = newStyled.tr(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12452
|
+
var SizeTable = function (_a) {
|
|
12453
|
+
var headers = _a.headers, data = _a.data;
|
|
12454
|
+
var theme = useTheme();
|
|
12455
|
+
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12456
|
+
};
|
|
12457
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$o, templateObject_4$g;
|
|
12447
12458
|
|
|
12448
12459
|
var TableElement = newStyled.table(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12449
12460
|
var TableCell = newStyled.td(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12450
12461
|
var TableHead = newStyled.th(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12451
12462
|
var TableRow = newStyled.tr(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12452
|
-
var
|
|
12453
|
-
var headers = _a.headers, data = _a.data;
|
|
12463
|
+
var SizeChartTable = function (_a) {
|
|
12464
|
+
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12454
12465
|
var theme = useTheme();
|
|
12455
|
-
|
|
12466
|
+
var getCellColor = function (index, cell) {
|
|
12467
|
+
if (index == 0) {
|
|
12468
|
+
return '#f6f0e7';
|
|
12469
|
+
}
|
|
12470
|
+
switch (cell) {
|
|
12471
|
+
case 'S':
|
|
12472
|
+
return '#f7a08b';
|
|
12473
|
+
case 'M':
|
|
12474
|
+
return '#ffe1b8';
|
|
12475
|
+
case 'L':
|
|
12476
|
+
return '#f5bab0';
|
|
12477
|
+
case 'XL':
|
|
12478
|
+
return '#8bbeea';
|
|
12479
|
+
case '2XL':
|
|
12480
|
+
return '#b1d7c3';
|
|
12481
|
+
case '3XL':
|
|
12482
|
+
return '#e7a4f7';
|
|
12483
|
+
case '4XL':
|
|
12484
|
+
return '#e7c9b2';
|
|
12485
|
+
default:
|
|
12486
|
+
return '';
|
|
12487
|
+
}
|
|
12488
|
+
};
|
|
12489
|
+
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ style: {
|
|
12490
|
+
backgroundColor: getCellColor(index, cell),
|
|
12491
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12456
12492
|
};
|
|
12457
12493
|
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$f;
|
|
12458
12494
|
|
|
@@ -18011,5 +18047,5 @@ var TrackingProgress = function (_a) {
|
|
|
18011
18047
|
};
|
|
18012
18048
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
18013
18049
|
|
|
18014
|
-
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18050
|
+
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18015
18051
|
//# sourceMappingURL=index.esm.js.map
|