@trafilea/afrodita-components 5.0.0-beta.136 → 5.0.0-beta.138
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 +11 -4
- package/build/index.esm.js +197 -151
- package/build/index.esm.js.map +1 -1
- package/build/index.js +197 -150
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +2 -2
- package/build/theme/revel.theme.js +2 -27
- package/build/theme/shapermint.theme.d.ts +2 -2
- package/build/theme/shapermint.theme.js +2 -27
- package/build/theme/truekind.theme.d.ts +2 -2
- package/build/theme/truekind.theme.js +2 -27
- 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;
|
|
@@ -4478,7 +4478,7 @@ var Styles = /*#__PURE__*/Object.freeze({
|
|
|
4478
4478
|
large: large
|
|
4479
4479
|
});
|
|
4480
4480
|
|
|
4481
|
-
var StyledLabel = newStyled.label(baseStyles, function (props) { return [
|
|
4481
|
+
var StyledLabel$1 = newStyled.label(baseStyles, function (props) { return [
|
|
4482
4482
|
{ color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
|
|
4483
4483
|
Styles[props.variant](props.theme),
|
|
4484
4484
|
Styles[props.size](props.theme),
|
|
@@ -4486,7 +4486,7 @@ var StyledLabel = newStyled.label(baseStyles, function (props) { return [
|
|
|
4486
4486
|
var Label$3 = function (_a) {
|
|
4487
4487
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4488
4488
|
var theme = useTheme();
|
|
4489
|
-
return (jsx$1(StyledLabel, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4489
|
+
return (jsx$1(StyledLabel$1, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4490
4490
|
};
|
|
4491
4491
|
|
|
4492
4492
|
/* base styles & size variants */
|
|
@@ -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$E || (templateObject_3$E = __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$E, 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$D || (templateObject_3$D = __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([""], [""]))),
|
|
@@ -4775,7 +4775,10 @@ var TAGS = {
|
|
|
4775
4775
|
link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4776
4776
|
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4777
4777
|
pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4778
|
-
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "
|
|
4778
|
+
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4779
|
+
var theme = _a.theme;
|
|
4780
|
+
return theme.component.label.color;
|
|
4781
|
+
}),
|
|
4779
4782
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4780
4783
|
};
|
|
4781
4784
|
var Text$6 = function (_a) {
|
|
@@ -4883,9 +4886,9 @@ var DEFAULTS = {
|
|
|
4883
4886
|
size: 'regular',
|
|
4884
4887
|
},
|
|
4885
4888
|
};
|
|
4886
|
-
var templateObject_1$
|
|
4889
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$D, 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
4890
|
|
|
4888
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4891
|
+
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
4892
|
var inline = _a.inline;
|
|
4890
4893
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4891
4894
|
});
|
|
@@ -4904,7 +4907,7 @@ var SizeSelector = function (_a) {
|
|
|
4904
4907
|
}, 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
4908
|
}) }), void 0)] }), void 0));
|
|
4906
4909
|
};
|
|
4907
|
-
var templateObject_1$
|
|
4910
|
+
var templateObject_1$1f;
|
|
4908
4911
|
|
|
4909
4912
|
var getStylesBySize$8 = function (size) {
|
|
4910
4913
|
switch (size) {
|
|
@@ -4931,7 +4934,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4931
4934
|
} });
|
|
4932
4935
|
};
|
|
4933
4936
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4934
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4937
|
+
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
4938
|
};
|
|
4936
4939
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4937
4940
|
if (disabled)
|
|
@@ -4947,16 +4950,16 @@ var TextButton = function (_a) {
|
|
|
4947
4950
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4948
4951
|
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
4952
|
};
|
|
4950
|
-
var templateObject_1$
|
|
4953
|
+
var templateObject_1$1e;
|
|
4951
4954
|
|
|
4952
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
4953
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4954
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4955
|
+
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"])));
|
|
4956
|
+
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4957
|
+
var PercentageSpan = newStyled.span(templateObject_3$C || (templateObject_3$C = __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
4958
|
var SizeFitGuide = function (_a) {
|
|
4956
4959
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4957
4960
|
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
4961
|
};
|
|
4959
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$C;
|
|
4960
4963
|
|
|
4961
4964
|
var getStylesBySize$7 = function (size) {
|
|
4962
4965
|
switch (size) {
|
|
@@ -4986,7 +4989,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
4986
4989
|
};
|
|
4987
4990
|
}
|
|
4988
4991
|
};
|
|
4989
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
4992
|
+
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
4993
|
var backgroundColor = _a.backgroundColor;
|
|
4991
4994
|
return backgroundColor;
|
|
4992
4995
|
}, function (_a) {
|
|
@@ -5008,7 +5011,7 @@ var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
|
|
|
5008
5011
|
var size = _a.size;
|
|
5009
5012
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5010
5013
|
});
|
|
5011
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5014
|
+
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
5015
|
var textColor = _a.textColor;
|
|
5013
5016
|
return textColor;
|
|
5014
5017
|
}, function (_a) {
|
|
@@ -5025,7 +5028,7 @@ var DiscountTag = function (_a) {
|
|
|
5025
5028
|
var theme = useTheme();
|
|
5026
5029
|
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
5030
|
};
|
|
5028
|
-
var templateObject_1$
|
|
5031
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5029
5032
|
|
|
5030
5033
|
var getStylesBySize$6 = function (size) {
|
|
5031
5034
|
switch (size) {
|
|
@@ -5055,8 +5058,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5055
5058
|
};
|
|
5056
5059
|
}
|
|
5057
5060
|
};
|
|
5058
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
5059
|
-
var Price = newStyled.p(templateObject_2$
|
|
5061
|
+
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"])));
|
|
5062
|
+
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
5063
|
var weight = _a.weight;
|
|
5061
5064
|
return (weight ? weight : '400');
|
|
5062
5065
|
}, function (_a) {
|
|
@@ -5085,7 +5088,7 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
|
|
|
5085
5088
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5086
5089
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5087
5090
|
});
|
|
5088
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5091
|
+
var TagContainer = newStyled.p(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5089
5092
|
var _b;
|
|
5090
5093
|
var size = _a.size;
|
|
5091
5094
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5108,9 +5111,9 @@ var PriceLabel = function (_a) {
|
|
|
5108
5111
|
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
5112
|
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
5113
|
};
|
|
5111
|
-
var templateObject_1$
|
|
5114
|
+
var templateObject_1$1b, templateObject_2$M, templateObject_3$B;
|
|
5112
5115
|
|
|
5113
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5116
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5114
5117
|
var PriceLabelV2 = function (_a) {
|
|
5115
5118
|
var _b;
|
|
5116
5119
|
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 +5143,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5140
5143
|
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
5144
|
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
5145
|
};
|
|
5143
|
-
var templateObject_1$
|
|
5146
|
+
var templateObject_1$1a;
|
|
5144
5147
|
|
|
5145
5148
|
var OneColorSelector = function (_a) {
|
|
5146
5149
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5181,10 +5184,10 @@ var OutOfStock = function (_a) {
|
|
|
5181
5184
|
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
5185
|
};
|
|
5183
5186
|
|
|
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$
|
|
5187
|
+
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"])));
|
|
5188
|
+
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5189
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
5190
|
+
var Span = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5188
5191
|
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
5192
|
var Label$2 = function (_a) {
|
|
5190
5193
|
var label = _a.label, values = _a.values;
|
|
@@ -5203,23 +5206,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5203
5206
|
Option: Option,
|
|
5204
5207
|
OptionsContainer: OptionsContainer,
|
|
5205
5208
|
});
|
|
5206
|
-
var templateObject_1$
|
|
5209
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$A, templateObject_4$p, templateObject_5$e;
|
|
5207
5210
|
|
|
5208
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
5211
|
+
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
5212
|
var borderColor = _a.borderColor;
|
|
5210
5213
|
return borderColor;
|
|
5211
5214
|
}, function (_a) {
|
|
5212
5215
|
var noStock = _a.noStock;
|
|
5213
5216
|
return (noStock ? '0.4' : '1');
|
|
5214
5217
|
});
|
|
5215
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5218
|
+
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
5219
|
var PatternSelector = function (_a) {
|
|
5217
5220
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5218
5221
|
var theme = useTheme();
|
|
5219
5222
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5220
5223
|
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
5224
|
};
|
|
5222
|
-
var templateObject_1$
|
|
5225
|
+
var templateObject_1$18, templateObject_2$K;
|
|
5223
5226
|
|
|
5224
5227
|
var renderOptions$1 = function (options) {
|
|
5225
5228
|
if (options.length === 0) {
|
|
@@ -5277,7 +5280,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5277
5280
|
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
5281
|
};
|
|
5279
5282
|
|
|
5280
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5283
|
+
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
5284
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5282
5285
|
return borderRadiusVariant &&
|
|
5283
5286
|
"\nborder-radius: 20px;\n";
|
|
@@ -5292,7 +5295,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5292
5295
|
var theme = useTheme();
|
|
5293
5296
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5294
5297
|
};
|
|
5295
|
-
var templateObject_1$
|
|
5298
|
+
var templateObject_1$17;
|
|
5296
5299
|
|
|
5297
5300
|
var Button$4 = newStyled.button(function () { return ({
|
|
5298
5301
|
background: 'transparent',
|
|
@@ -9535,14 +9538,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9535
9538
|
return Slider;
|
|
9536
9539
|
}(React__default.Component);
|
|
9537
9540
|
|
|
9538
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9541
|
+
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
9542
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9540
9543
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9541
9544
|
}, function (_a) {
|
|
9542
9545
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9543
9546
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9544
9547
|
});
|
|
9545
|
-
var templateObject_1$
|
|
9548
|
+
var templateObject_1$16;
|
|
9546
9549
|
|
|
9547
9550
|
var getStylesBySize$5 = function (size) {
|
|
9548
9551
|
// rem units
|
|
@@ -9601,13 +9604,13 @@ var SliderNavigation = function (_a) {
|
|
|
9601
9604
|
} }, { 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
9605
|
};
|
|
9603
9606
|
|
|
9604
|
-
var horizontalStyles = css(templateObject_1$
|
|
9605
|
-
var verticalStyles = css(templateObject_2$
|
|
9606
|
-
var Container$L = newStyled.div(templateObject_3$
|
|
9607
|
+
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"])));
|
|
9608
|
+
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"])));
|
|
9609
|
+
var Container$L = newStyled.div(templateObject_3$z || (templateObject_3$z = __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
9610
|
var position = _a.position;
|
|
9608
9611
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9609
9612
|
});
|
|
9610
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9613
|
+
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
9614
|
var ImagePreviewList = function (_a) {
|
|
9612
9615
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9613
9616
|
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 +9619,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9616
9619
|
arrowPadding: 1.625,
|
|
9617
9620
|
}, 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
9621
|
};
|
|
9619
|
-
var templateObject_1$
|
|
9622
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$z, templateObject_4$o;
|
|
9620
9623
|
|
|
9621
9624
|
var propTypes = {exports: {}};
|
|
9622
9625
|
|
|
@@ -11209,13 +11212,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11209
11212
|
afterZoomOut: PropTypes.func
|
|
11210
11213
|
} : {};
|
|
11211
11214
|
|
|
11212
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
11215
|
+
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
11216
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11214
11217
|
return borderRadiusVariant &&
|
|
11215
11218
|
"\n border-radius: 40px;\n ";
|
|
11216
11219
|
});
|
|
11217
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11218
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11220
|
+
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'); });
|
|
11221
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11219
11222
|
var ImageProductWithTags$1 = function (_a) {
|
|
11220
11223
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11221
11224
|
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 +11226,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11223
11226
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11224
11227
|
}, 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
11228
|
};
|
|
11226
|
-
var templateObject_1$
|
|
11229
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$y;
|
|
11227
11230
|
|
|
11228
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
11231
|
+
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
11232
|
var ProductGallery = function (_a) {
|
|
11230
11233
|
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
11234
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11237,7 +11240,7 @@ var ProductGallery = function (_a) {
|
|
|
11237
11240
|
setSelectedImage(value);
|
|
11238
11241
|
}, 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
11242
|
};
|
|
11240
|
-
var templateObject_1$
|
|
11243
|
+
var templateObject_1$13;
|
|
11241
11244
|
|
|
11242
11245
|
/* base styles & size variants */
|
|
11243
11246
|
var StarStyles = {
|
|
@@ -11283,8 +11286,8 @@ var StarStyles = {
|
|
|
11283
11286
|
});
|
|
11284
11287
|
},
|
|
11285
11288
|
};
|
|
11286
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
11287
|
-
var templateObject_1$
|
|
11289
|
+
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"])));
|
|
11290
|
+
var templateObject_1$12;
|
|
11288
11291
|
|
|
11289
11292
|
var StarContainer = newStyled.div(function (_a) {
|
|
11290
11293
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11346,8 +11349,8 @@ var LabelStyles = {
|
|
|
11346
11349
|
});
|
|
11347
11350
|
},
|
|
11348
11351
|
};
|
|
11349
|
-
var Container$H = newStyled.a(templateObject_1$
|
|
11350
|
-
var templateObject_1$
|
|
11352
|
+
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"])));
|
|
11353
|
+
var templateObject_1$11;
|
|
11351
11354
|
|
|
11352
11355
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11353
11356
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11388,8 +11391,8 @@ var Rating = function (_a) {
|
|
|
11388
11391
|
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
11392
|
};
|
|
11390
11393
|
|
|
11391
|
-
var Container$G = newStyled.div(templateObject_1
|
|
11392
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11394
|
+
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"])));
|
|
11395
|
+
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
11396
|
var textButtonStyles = function (theme) { return ({
|
|
11394
11397
|
border: 'none',
|
|
11395
11398
|
background: 'transparent',
|
|
@@ -11404,7 +11407,7 @@ var FitPredictor = function (_a) {
|
|
|
11404
11407
|
var theme = useTheme();
|
|
11405
11408
|
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
11409
|
};
|
|
11407
|
-
var templateObject_1
|
|
11410
|
+
var templateObject_1$10, templateObject_2$H;
|
|
11408
11411
|
|
|
11409
11412
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11410
11413
|
var color = _a.color;
|
|
@@ -11418,7 +11421,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11418
11421
|
margin: '0.938rem 4.188rem',
|
|
11419
11422
|
});
|
|
11420
11423
|
});
|
|
11421
|
-
var Bar = newStyled.div(templateObject_1
|
|
11424
|
+
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
11425
|
var backgroundColor = _a.backgroundColor;
|
|
11423
11426
|
return backgroundColor;
|
|
11424
11427
|
}, function (_a) {
|
|
@@ -11457,7 +11460,7 @@ var ProgressBar = function (_a) {
|
|
|
11457
11460
|
var theme = useTheme();
|
|
11458
11461
|
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
11462
|
};
|
|
11460
|
-
var templateObject_1
|
|
11463
|
+
var templateObject_1$$;
|
|
11461
11464
|
|
|
11462
11465
|
var getStylesBySize$4 = function (size) {
|
|
11463
11466
|
switch (size) {
|
|
@@ -11478,7 +11481,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11478
11481
|
};
|
|
11479
11482
|
}
|
|
11480
11483
|
};
|
|
11481
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
11484
|
+
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
11485
|
var backgroundColor = _a.backgroundColor;
|
|
11483
11486
|
return backgroundColor;
|
|
11484
11487
|
}, function (_a) {
|
|
@@ -11508,7 +11511,7 @@ var IconButton = function (_a) {
|
|
|
11508
11511
|
var theme = useTheme();
|
|
11509
11512
|
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
11513
|
};
|
|
11511
|
-
var templateObject_1$
|
|
11514
|
+
var templateObject_1$_;
|
|
11512
11515
|
|
|
11513
11516
|
var TooltipArrow = function (_a) {
|
|
11514
11517
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11588,7 +11591,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11588
11591
|
}
|
|
11589
11592
|
};
|
|
11590
11593
|
|
|
11591
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11594
|
+
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
11595
|
var position = _a.position;
|
|
11593
11596
|
return getWrapperFlexDirection(position);
|
|
11594
11597
|
});
|
|
@@ -11612,11 +11615,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11612
11615
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11613
11616
|
return actual === expected ? margin : '0';
|
|
11614
11617
|
};
|
|
11615
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11618
|
+
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
11619
|
var borderColor = _a.borderColor;
|
|
11617
11620
|
return borderColor;
|
|
11618
11621
|
});
|
|
11619
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11622
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __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
11623
|
var position = _a.position;
|
|
11621
11624
|
return getArrowRotation(position);
|
|
11622
11625
|
}, function (_a) {
|
|
@@ -11626,7 +11629,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_
|
|
|
11626
11629
|
var position = _a.position;
|
|
11627
11630
|
return getArrowContainerMargin(position);
|
|
11628
11631
|
});
|
|
11629
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11632
|
+
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
11633
|
var color = _a.color;
|
|
11631
11634
|
return color;
|
|
11632
11635
|
});
|
|
@@ -11636,7 +11639,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11636
11639
|
return color;
|
|
11637
11640
|
});
|
|
11638
11641
|
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$
|
|
11642
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11640
11643
|
|
|
11641
11644
|
var Tooltip = function (_a) {
|
|
11642
11645
|
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 +11797,9 @@ var ContainerStyles = {
|
|
|
11794
11797
|
},
|
|
11795
11798
|
};
|
|
11796
11799
|
|
|
11797
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11800
|
+
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
11801
|
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$
|
|
11802
|
+
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
11803
|
var disabled = _a.disabled;
|
|
11801
11804
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11802
11805
|
});
|
|
@@ -11804,6 +11807,13 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11804
11807
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11805
11808
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11806
11809
|
]; });
|
|
11810
|
+
var StyledLabel = newStyled(Label$3)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11811
|
+
var theme = _a.theme;
|
|
11812
|
+
return theme.component.radio.textSize;
|
|
11813
|
+
}, function (_a) {
|
|
11814
|
+
var theme = _a.theme;
|
|
11815
|
+
return theme.component.radio.lineHeight;
|
|
11816
|
+
});
|
|
11807
11817
|
var RadioInput = function (_a) {
|
|
11808
11818
|
var name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
11809
11819
|
var theme = useTheme();
|
|
@@ -11811,9 +11821,9 @@ var RadioInput = function (_a) {
|
|
|
11811
11821
|
var value = event.currentTarget.value;
|
|
11812
11822
|
onChange({ value: value, label: label });
|
|
11813
11823
|
};
|
|
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(
|
|
11824
|
+
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(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11815
11825
|
};
|
|
11816
|
-
var templateObject_1$
|
|
11826
|
+
var templateObject_1$Y, templateObject_2$F, templateObject_3$w;
|
|
11817
11827
|
|
|
11818
11828
|
var RadioGroupInput = function (_a) {
|
|
11819
11829
|
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 +11837,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11827
11837
|
}) }), void 0));
|
|
11828
11838
|
};
|
|
11829
11839
|
|
|
11830
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11831
|
-
var Container$C = newStyled.div(templateObject_2$
|
|
11840
|
+
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"])));
|
|
11841
|
+
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
11842
|
var Minimalistic = function (_a) {
|
|
11833
11843
|
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
11844
|
var theme = useTheme();
|
|
11835
11845
|
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
11846
|
};
|
|
11837
|
-
var templateObject_1$
|
|
11847
|
+
var templateObject_1$X, templateObject_2$E;
|
|
11838
11848
|
|
|
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$
|
|
11849
|
+
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"])));
|
|
11850
|
+
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; });
|
|
11851
|
+
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; });
|
|
11852
|
+
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
11853
|
var Simple = function (_a) {
|
|
11844
11854
|
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
11855
|
var theme = useTheme();
|
|
11846
11856
|
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
11857
|
};
|
|
11848
|
-
var templateObject_1$
|
|
11858
|
+
var templateObject_1$W, templateObject_2$D, templateObject_3$v, templateObject_4$m;
|
|
11849
11859
|
|
|
11850
11860
|
var Bundle = {
|
|
11851
11861
|
Minimalistic: Minimalistic,
|
|
11852
11862
|
Simple: Simple,
|
|
11853
11863
|
};
|
|
11854
11864
|
|
|
11855
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
11865
|
+
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
11866
|
var Tag$1 = function (_a) {
|
|
11857
11867
|
var text = _a.text, className = _a.className;
|
|
11858
11868
|
return jsx$1(Container$A, __assign$1({ className: className }, { children: text }), void 0);
|
|
11859
11869
|
};
|
|
11860
|
-
var templateObject_1$
|
|
11870
|
+
var templateObject_1$V;
|
|
11861
11871
|
|
|
11862
11872
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11863
11873
|
switch (size) {
|
|
@@ -11960,11 +11970,11 @@ var Timer = function (_a) {
|
|
|
11960
11970
|
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
11971
|
};
|
|
11962
11972
|
|
|
11963
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11973
|
+
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
11974
|
var color = _a.color;
|
|
11965
11975
|
return color;
|
|
11966
11976
|
});
|
|
11967
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11977
|
+
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
11978
|
var color = _a.color;
|
|
11969
11979
|
return color;
|
|
11970
11980
|
});
|
|
@@ -11973,7 +11983,7 @@ var InputLabel = function (_a) {
|
|
|
11973
11983
|
var theme = useTheme();
|
|
11974
11984
|
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
11985
|
};
|
|
11976
|
-
var templateObject_1$
|
|
11986
|
+
var templateObject_1$U, templateObject_2$C;
|
|
11977
11987
|
|
|
11978
11988
|
/**
|
|
11979
11989
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12027,14 +12037,14 @@ var formatPrice = function (value, _a) {
|
|
|
12027
12037
|
}).format(valueToFormat);
|
|
12028
12038
|
};
|
|
12029
12039
|
|
|
12030
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12031
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12040
|
+
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; });
|
|
12041
|
+
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
12042
|
var Error$1 = function (_a) {
|
|
12033
12043
|
var error = _a.error;
|
|
12034
12044
|
var theme = useTheme();
|
|
12035
12045
|
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
12046
|
};
|
|
12037
|
-
var templateObject_1$
|
|
12047
|
+
var templateObject_1$T, templateObject_2$B;
|
|
12038
12048
|
|
|
12039
12049
|
var containerByStatus = function (theme, status) {
|
|
12040
12050
|
if (status === InputValidationType.Valid)
|
|
@@ -12043,11 +12053,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12043
12053
|
return theme.colors.semantic.urgent.color;
|
|
12044
12054
|
return '';
|
|
12045
12055
|
};
|
|
12046
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
12056
|
+
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
12057
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12048
12058
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12049
12059
|
});
|
|
12050
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12060
|
+
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
12061
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12052
12062
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12053
12063
|
}, function (_a) {
|
|
@@ -12102,13 +12112,13 @@ var StyledInput = newStyled.input(templateObject_2$z || (templateObject_2$z = __
|
|
|
12102
12112
|
return hasValue &&
|
|
12103
12113
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12104
12114
|
});
|
|
12105
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12115
|
+
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
12116
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12107
12117
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12108
12118
|
});
|
|
12109
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12119
|
+
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
12120
|
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$
|
|
12121
|
+
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$l, templateObject_5$c;
|
|
12112
12122
|
|
|
12113
12123
|
var BaseInput = function (_a) {
|
|
12114
12124
|
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 +12162,11 @@ var Button$2 = function (_a) {
|
|
|
12152
12162
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12153
12163
|
};
|
|
12154
12164
|
|
|
12155
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
12165
|
+
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
12166
|
var theme = _a.theme;
|
|
12157
12167
|
return theme.component.inputCustom.input.borderRadius;
|
|
12158
12168
|
});
|
|
12159
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12169
|
+
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
12170
|
var theme = _a.theme;
|
|
12161
12171
|
return theme.component.inputCustom.button.borderRadius;
|
|
12162
12172
|
});
|
|
@@ -12171,21 +12181,21 @@ var Custom = function (_a) {
|
|
|
12171
12181
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12172
12182
|
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
12183
|
};
|
|
12174
|
-
var templateObject_1$
|
|
12184
|
+
var templateObject_1$R, templateObject_2$z;
|
|
12175
12185
|
|
|
12176
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12186
|
+
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
12187
|
var size = _a.size;
|
|
12178
12188
|
return (size === 'small' ? '36px' : '');
|
|
12179
12189
|
});
|
|
12180
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12181
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12190
|
+
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"])));
|
|
12191
|
+
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
12192
|
var Success = function (_a) {
|
|
12183
12193
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12184
12194
|
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
12195
|
};
|
|
12186
|
-
var templateObject_1$
|
|
12196
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$t;
|
|
12187
12197
|
|
|
12188
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12198
|
+
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
12199
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12190
12200
|
return status === InputValidationType.Empty &&
|
|
12191
12201
|
type === 'primary' &&
|
|
@@ -12202,10 +12212,10 @@ var BasePlusButton = function (_a) {
|
|
|
12202
12212
|
}
|
|
12203
12213
|
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
12214
|
};
|
|
12205
|
-
var templateObject_1$
|
|
12215
|
+
var templateObject_1$P;
|
|
12206
12216
|
|
|
12207
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
12208
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12217
|
+
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"])));
|
|
12218
|
+
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
12219
|
var BasePlusIcon = function (_a) {
|
|
12210
12220
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12211
12221
|
var theme = useTheme();
|
|
@@ -12216,7 +12226,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12216
12226
|
? theme.colors.semantic.urgent.color
|
|
12217
12227
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12218
12228
|
};
|
|
12219
|
-
var templateObject_1$
|
|
12229
|
+
var templateObject_1$O, templateObject_2$x;
|
|
12220
12230
|
|
|
12221
12231
|
var Input$1 = {
|
|
12222
12232
|
Simple: BaseInput,
|
|
@@ -12225,7 +12235,7 @@ var Input$1 = {
|
|
|
12225
12235
|
SimplePlusIcon: BasePlusIcon,
|
|
12226
12236
|
};
|
|
12227
12237
|
|
|
12228
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
12238
|
+
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
12239
|
var width = _a.width;
|
|
12230
12240
|
return width;
|
|
12231
12241
|
}, function (_a) {
|
|
@@ -12243,9 +12253,9 @@ var PaymentMethod = function (_a) {
|
|
|
12243
12253
|
var theme = useTheme();
|
|
12244
12254
|
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
12255
|
};
|
|
12246
|
-
var templateObject_1$
|
|
12256
|
+
var templateObject_1$N;
|
|
12247
12257
|
|
|
12248
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12258
|
+
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
12259
|
var backgroundColor = _a.backgroundColor;
|
|
12250
12260
|
return backgroundColor;
|
|
12251
12261
|
}, function (_a) {
|
|
@@ -12257,27 +12267,27 @@ var OfferBanner = function (_a) {
|
|
|
12257
12267
|
var theme = useTheme();
|
|
12258
12268
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12259
12269
|
};
|
|
12260
|
-
var templateObject_1$
|
|
12270
|
+
var templateObject_1$M;
|
|
12261
12271
|
|
|
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$
|
|
12272
|
+
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"])));
|
|
12273
|
+
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; });
|
|
12274
|
+
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"])));
|
|
12275
|
+
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
12276
|
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
12277
|
var Total = function (_a) {
|
|
12268
12278
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12269
12279
|
var theme = useTheme();
|
|
12270
12280
|
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
12281
|
};
|
|
12272
|
-
var templateObject_1$
|
|
12282
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b;
|
|
12273
12283
|
|
|
12274
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12284
|
+
var Wrapper$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12275
12285
|
var color = _a.color;
|
|
12276
12286
|
return color;
|
|
12277
12287
|
});
|
|
12278
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12279
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12280
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12288
|
+
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"])));
|
|
12289
|
+
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"])));
|
|
12290
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12281
12291
|
var color = _a.color;
|
|
12282
12292
|
return color;
|
|
12283
12293
|
});
|
|
@@ -12290,22 +12300,22 @@ var Subtotal = function (_a) {
|
|
|
12290
12300
|
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
12301
|
})] }), void 0));
|
|
12292
12302
|
};
|
|
12293
|
-
var templateObject_1$
|
|
12303
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$j;
|
|
12294
12304
|
|
|
12295
12305
|
var Totals = {
|
|
12296
12306
|
Total: Total,
|
|
12297
12307
|
Subtotal: Subtotal,
|
|
12298
12308
|
};
|
|
12299
12309
|
|
|
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$
|
|
12310
|
+
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; });
|
|
12311
|
+
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"])));
|
|
12312
|
+
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; });
|
|
12313
|
+
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
12314
|
var Note = function (_a) {
|
|
12305
12315
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12306
12316
|
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
12317
|
};
|
|
12308
|
-
var templateObject_1$
|
|
12318
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;
|
|
12309
12319
|
|
|
12310
12320
|
/* eslint-disable no-param-reassign */
|
|
12311
12321
|
var index$1 = function (breakpoints) {
|
|
@@ -12391,12 +12401,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12391
12401
|
literal: true,
|
|
12392
12402
|
});
|
|
12393
12403
|
|
|
12394
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12395
|
-
var Line = newStyled.div(templateObject_2$
|
|
12396
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12404
|
+
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; });
|
|
12405
|
+
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; });
|
|
12406
|
+
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
12407
|
flexDirection: ['column', 'row'],
|
|
12398
12408
|
}));
|
|
12399
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12409
|
+
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
12410
|
margin: ['0', '0 1.25rem'],
|
|
12401
12411
|
marginBottom: ['1.875rem', '0'],
|
|
12402
12412
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12420,39 +12430,75 @@ var DeliveryDetails = function (_a) {
|
|
|
12420
12430
|
var theme = useTheme();
|
|
12421
12431
|
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
12432
|
};
|
|
12423
|
-
var templateObject_1$
|
|
12433
|
+
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
12434
|
|
|
12425
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
12426
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12435
|
+
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"])));
|
|
12436
|
+
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
12437
|
var ScrollToTop = function (_a) {
|
|
12428
12438
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12429
12439
|
var theme = useTheme();
|
|
12430
12440
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12431
12441
|
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
12442
|
};
|
|
12433
|
-
var templateObject_1$
|
|
12443
|
+
var templateObject_1$H, templateObject_2$s;
|
|
12434
12444
|
|
|
12435
12445
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12436
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
12446
|
+
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
12447
|
var color = _a.color;
|
|
12438
12448
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12439
12449
|
});
|
|
12440
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12450
|
+
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
12451
|
var OrderBar = function (_a) {
|
|
12442
12452
|
var message = _a.message, color = _a.color;
|
|
12443
12453
|
var theme = useTheme();
|
|
12444
12454
|
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
12455
|
};
|
|
12446
|
-
var templateObject_1$
|
|
12456
|
+
var templateObject_1$G, templateObject_2$r;
|
|
12457
|
+
|
|
12458
|
+
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; });
|
|
12459
|
+
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; });
|
|
12460
|
+
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; });
|
|
12461
|
+
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; });
|
|
12462
|
+
var SizeTable = function (_a) {
|
|
12463
|
+
var headers = _a.headers, data = _a.data;
|
|
12464
|
+
var theme = useTheme();
|
|
12465
|
+
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));
|
|
12466
|
+
};
|
|
12467
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$o, templateObject_4$g;
|
|
12447
12468
|
|
|
12448
12469
|
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
12470
|
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
12471
|
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
12472
|
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;
|
|
12473
|
+
var SizeChartTable = function (_a) {
|
|
12474
|
+
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12454
12475
|
var theme = useTheme();
|
|
12455
|
-
|
|
12476
|
+
var getCellColor = function (index, cell) {
|
|
12477
|
+
if (index == 0) {
|
|
12478
|
+
return '#f6f0e7';
|
|
12479
|
+
}
|
|
12480
|
+
switch (cell) {
|
|
12481
|
+
case 'S':
|
|
12482
|
+
return '#f7a08b';
|
|
12483
|
+
case 'M':
|
|
12484
|
+
return '#ffe1b8';
|
|
12485
|
+
case 'L':
|
|
12486
|
+
return '#f5bab0';
|
|
12487
|
+
case 'XL':
|
|
12488
|
+
return '#8bbeea';
|
|
12489
|
+
case '2XL':
|
|
12490
|
+
return '#b1d7c3';
|
|
12491
|
+
case '3XL':
|
|
12492
|
+
return '#e7a4f7';
|
|
12493
|
+
case '4XL':
|
|
12494
|
+
return '#e7c9b2';
|
|
12495
|
+
default:
|
|
12496
|
+
return '';
|
|
12497
|
+
}
|
|
12498
|
+
};
|
|
12499
|
+
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: {
|
|
12500
|
+
backgroundColor: getCellColor(index, cell),
|
|
12501
|
+
}, 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
12502
|
};
|
|
12457
12503
|
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$f;
|
|
12458
12504
|
|
|
@@ -18011,5 +18057,5 @@ var TrackingProgress = function (_a) {
|
|
|
18011
18057
|
};
|
|
18012
18058
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
18013
18059
|
|
|
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 };
|
|
18060
|
+
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
18061
|
//# sourceMappingURL=index.esm.js.map
|