@trafilea/afrodita-components 5.0.0-beta.136 → 5.0.0-beta.137
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +9 -2
- package/build/index.esm.js +183 -147
- package/build/index.esm.js.map +1 -1
- package/build/index.js +183 -146
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
|
|
|
4042
4042
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4043
4043
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4044
4044
|
|
|
4045
|
-
var Section = newStyled.div(templateObject_1$
|
|
4045
|
+
var Section = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
4046
4046
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4047
4047
|
});
|
|
4048
4048
|
var CardHeader = function (_a) {
|
|
@@ -4053,14 +4053,14 @@ var CardFooter = function (_a) {
|
|
|
4053
4053
|
var children = _a.children;
|
|
4054
4054
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4055
4055
|
};
|
|
4056
|
-
var templateObject_1$
|
|
4056
|
+
var templateObject_1$1m;
|
|
4057
4057
|
|
|
4058
|
-
var Body = newStyled.div(templateObject_1$
|
|
4058
|
+
var Body = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4059
4059
|
var CardBody = function (_a) {
|
|
4060
4060
|
var children = _a.children;
|
|
4061
4061
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4062
4062
|
};
|
|
4063
|
-
var templateObject_1$
|
|
4063
|
+
var templateObject_1$1l;
|
|
4064
4064
|
|
|
4065
4065
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4066
4066
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4207
4207
|
|
|
4208
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
4208
|
+
var Container$R = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4209
4209
|
var flex = _a.flex;
|
|
4210
4210
|
return flex &&
|
|
4211
4211
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4225,7 +4225,7 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
4225
4225
|
Footer: CardFooter,
|
|
4226
4226
|
Body: CardBody,
|
|
4227
4227
|
});
|
|
4228
|
-
var templateObject_1$
|
|
4228
|
+
var templateObject_1$1k;
|
|
4229
4229
|
|
|
4230
4230
|
var Fragment = jsxRuntime.Fragment;
|
|
4231
4231
|
function jsx(type, props, key) {
|
|
@@ -4367,7 +4367,7 @@ function BaseSelectOption(_a) {
|
|
|
4367
4367
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4368
4368
|
}
|
|
4369
4369
|
|
|
4370
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4370
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4371
4371
|
function BaseSelect(_a) {
|
|
4372
4372
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4373
4373
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4377,7 +4377,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4377
4377
|
Options: BaseSelectOptions,
|
|
4378
4378
|
Option: BaseSelectOption,
|
|
4379
4379
|
});
|
|
4380
|
-
var templateObject_1$
|
|
4380
|
+
var templateObject_1$1j;
|
|
4381
4381
|
|
|
4382
4382
|
var CustomButton = newStyled.button(function (_a) {
|
|
4383
4383
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4592,12 +4592,12 @@ var CustomCheckboxStyles = {
|
|
|
4592
4592
|
},
|
|
4593
4593
|
};
|
|
4594
4594
|
|
|
4595
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
4595
|
+
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"])));
|
|
4596
4596
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4597
4597
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4598
4598
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4599
4599
|
]; });
|
|
4600
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4600
|
+
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) {
|
|
4601
4601
|
var disabled = _a.disabled;
|
|
4602
4602
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4603
4603
|
});
|
|
@@ -4628,7 +4628,7 @@ var Checkbox = function (_a) {
|
|
|
4628
4628
|
}, []);
|
|
4629
4629
|
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4630
4630
|
};
|
|
4631
|
-
var templateObject_1$
|
|
4631
|
+
var templateObject_1$1i, templateObject_2$R;
|
|
4632
4632
|
|
|
4633
4633
|
var CustomOption = newStyled.li(function (_a) {
|
|
4634
4634
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4707,10 +4707,10 @@ function SimpleDropdown(_a) {
|
|
|
4707
4707
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4708
4708
|
}
|
|
4709
4709
|
|
|
4710
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4711
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4712
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4713
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4710
|
+
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; });
|
|
4711
|
+
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; });
|
|
4712
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4713
|
+
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"])));
|
|
4714
4714
|
var DropdownDialog = function (_a) {
|
|
4715
4715
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4716
4716
|
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4718,7 +4718,7 @@ var DropdownDialog = function (_a) {
|
|
|
4718
4718
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4719
4719
|
}) }), void 0) }), void 0));
|
|
4720
4720
|
};
|
|
4721
|
-
var templateObject_1$
|
|
4721
|
+
var templateObject_1$1h, templateObject_2$Q, templateObject_3$D, templateObject_4$r;
|
|
4722
4722
|
|
|
4723
4723
|
var getStylesBySize$9 = function (size, theme) {
|
|
4724
4724
|
switch (size) {
|
|
@@ -4786,10 +4786,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4786
4786
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4787
4787
|
// `variants` styles that are consistent through all themes.
|
|
4788
4788
|
var TAGS = {
|
|
4789
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4790
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4791
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4792
|
-
display1: newStyled.h1(templateObject_4$
|
|
4789
|
+
hero1: newStyled.h1(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject([""], [""]))),
|
|
4790
|
+
hero2: newStyled.h2(templateObject_2$P || (templateObject_2$P = __makeTemplateObject([""], [""]))),
|
|
4791
|
+
hero3: newStyled.h3(templateObject_3$C || (templateObject_3$C = __makeTemplateObject([""], [""]))),
|
|
4792
|
+
display1: newStyled.h1(templateObject_4$q || (templateObject_4$q = __makeTemplateObject([""], [""]))),
|
|
4793
4793
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4794
4794
|
heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
|
|
4795
4795
|
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4909,9 +4909,9 @@ var DEFAULTS = {
|
|
|
4909
4909
|
size: 'regular',
|
|
4910
4910
|
},
|
|
4911
4911
|
};
|
|
4912
|
-
var templateObject_1$
|
|
4912
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$q, templateObject_5$f, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4913
4913
|
|
|
4914
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4914
|
+
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) {
|
|
4915
4915
|
var inline = _a.inline;
|
|
4916
4916
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4917
4917
|
});
|
|
@@ -4930,7 +4930,7 @@ var SizeSelector = function (_a) {
|
|
|
4930
4930
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
4931
4931
|
}) }), void 0)] }), void 0));
|
|
4932
4932
|
};
|
|
4933
|
-
var templateObject_1$
|
|
4933
|
+
var templateObject_1$1f;
|
|
4934
4934
|
|
|
4935
4935
|
var getStylesBySize$8 = function (size) {
|
|
4936
4936
|
switch (size) {
|
|
@@ -4957,7 +4957,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4957
4957
|
} });
|
|
4958
4958
|
};
|
|
4959
4959
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4960
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4960
|
+
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));
|
|
4961
4961
|
};
|
|
4962
4962
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4963
4963
|
if (disabled)
|
|
@@ -4973,16 +4973,16 @@ var TextButton = function (_a) {
|
|
|
4973
4973
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4974
4974
|
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));
|
|
4975
4975
|
};
|
|
4976
|
-
var templateObject_1$
|
|
4976
|
+
var templateObject_1$1e;
|
|
4977
4977
|
|
|
4978
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
4979
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4980
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4978
|
+
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"])));
|
|
4979
|
+
var P$3 = newStyled.p(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4980
|
+
var PercentageSpan = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4981
4981
|
var SizeFitGuide = function (_a) {
|
|
4982
4982
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4983
4983
|
return (jsxRuntime.jsxs(Container$P, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4984
4984
|
};
|
|
4985
|
-
var templateObject_1$
|
|
4985
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$B;
|
|
4986
4986
|
|
|
4987
4987
|
var getStylesBySize$7 = function (size) {
|
|
4988
4988
|
switch (size) {
|
|
@@ -5012,7 +5012,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5012
5012
|
};
|
|
5013
5013
|
}
|
|
5014
5014
|
};
|
|
5015
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
5015
|
+
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) {
|
|
5016
5016
|
var backgroundColor = _a.backgroundColor;
|
|
5017
5017
|
return backgroundColor;
|
|
5018
5018
|
}, function (_a) {
|
|
@@ -5034,7 +5034,7 @@ var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
|
|
|
5034
5034
|
var size = _a.size;
|
|
5035
5035
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5036
5036
|
});
|
|
5037
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5037
|
+
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) {
|
|
5038
5038
|
var textColor = _a.textColor;
|
|
5039
5039
|
return textColor;
|
|
5040
5040
|
}, function (_a) {
|
|
@@ -5051,7 +5051,7 @@ var DiscountTag = function (_a) {
|
|
|
5051
5051
|
var theme = useTheme();
|
|
5052
5052
|
return (jsxRuntime.jsx(Container$O, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5053
5053
|
};
|
|
5054
|
-
var templateObject_1$
|
|
5054
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5055
5055
|
|
|
5056
5056
|
var getStylesBySize$6 = function (size) {
|
|
5057
5057
|
switch (size) {
|
|
@@ -5081,8 +5081,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5081
5081
|
};
|
|
5082
5082
|
}
|
|
5083
5083
|
};
|
|
5084
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
5085
|
-
var Price = newStyled.p(templateObject_2$
|
|
5084
|
+
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"])));
|
|
5085
|
+
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) {
|
|
5086
5086
|
var weight = _a.weight;
|
|
5087
5087
|
return (weight ? weight : '400');
|
|
5088
5088
|
}, function (_a) {
|
|
@@ -5111,7 +5111,7 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
|
|
|
5111
5111
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5112
5112
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5113
5113
|
});
|
|
5114
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5114
|
+
var TagContainer = newStyled.p(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5115
5115
|
var _b;
|
|
5116
5116
|
var size = _a.size;
|
|
5117
5117
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5134,9 +5134,9 @@ var PriceLabel = function (_a) {
|
|
|
5134
5134
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5135
5135
|
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5136
5136
|
};
|
|
5137
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$1b, templateObject_2$M, templateObject_3$A;
|
|
5138
5138
|
|
|
5139
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5139
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5140
5140
|
var PriceLabelV2 = function (_a) {
|
|
5141
5141
|
var _b;
|
|
5142
5142
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5166,7 +5166,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5166
5166
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5167
5167
|
return (jsxRuntime.jsxs(Container$N, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5168
5168
|
};
|
|
5169
|
-
var templateObject_1$
|
|
5169
|
+
var templateObject_1$1a;
|
|
5170
5170
|
|
|
5171
5171
|
var OneColorSelector = function (_a) {
|
|
5172
5172
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5207,10 +5207,10 @@ var OutOfStock = function (_a) {
|
|
|
5207
5207
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5208
5208
|
};
|
|
5209
5209
|
|
|
5210
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5211
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5212
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5213
|
-
var Span = newStyled.span(templateObject_4$
|
|
5210
|
+
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"])));
|
|
5211
|
+
newStyled(lt.Label)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5212
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5213
|
+
var Span = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5214
5214
|
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"])));
|
|
5215
5215
|
var Label$2 = function (_a) {
|
|
5216
5216
|
var label = _a.label, values = _a.values;
|
|
@@ -5229,23 +5229,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5229
5229
|
Option: Option,
|
|
5230
5230
|
OptionsContainer: OptionsContainer,
|
|
5231
5231
|
});
|
|
5232
|
-
var templateObject_1$
|
|
5232
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$z, templateObject_4$p, templateObject_5$e;
|
|
5233
5233
|
|
|
5234
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
5234
|
+
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) {
|
|
5235
5235
|
var borderColor = _a.borderColor;
|
|
5236
5236
|
return borderColor;
|
|
5237
5237
|
}, function (_a) {
|
|
5238
5238
|
var noStock = _a.noStock;
|
|
5239
5239
|
return (noStock ? '0.4' : '1');
|
|
5240
5240
|
});
|
|
5241
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5241
|
+
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"])));
|
|
5242
5242
|
var PatternSelector = function (_a) {
|
|
5243
5243
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5244
5244
|
var theme = useTheme();
|
|
5245
5245
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5246
5246
|
return (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5247
5247
|
};
|
|
5248
|
-
var templateObject_1$
|
|
5248
|
+
var templateObject_1$18, templateObject_2$K;
|
|
5249
5249
|
|
|
5250
5250
|
var renderOptions$1 = function (options) {
|
|
5251
5251
|
if (options.length === 0) {
|
|
@@ -5303,7 +5303,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5303
5303
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5304
5304
|
};
|
|
5305
5305
|
|
|
5306
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5306
|
+
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) {
|
|
5307
5307
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5308
5308
|
return borderRadiusVariant &&
|
|
5309
5309
|
"\nborder-radius: 20px;\n";
|
|
@@ -5318,7 +5318,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5318
5318
|
var theme = useTheme();
|
|
5319
5319
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5320
5320
|
};
|
|
5321
|
-
var templateObject_1$
|
|
5321
|
+
var templateObject_1$17;
|
|
5322
5322
|
|
|
5323
5323
|
var Button$4 = newStyled.button(function () { return ({
|
|
5324
5324
|
background: 'transparent',
|
|
@@ -9561,14 +9561,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9561
9561
|
return Slider;
|
|
9562
9562
|
}(React__default["default"].Component);
|
|
9563
9563
|
|
|
9564
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9564
|
+
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) {
|
|
9565
9565
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9566
9566
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9567
9567
|
}, function (_a) {
|
|
9568
9568
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9569
9569
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9570
9570
|
});
|
|
9571
|
-
var templateObject_1$
|
|
9571
|
+
var templateObject_1$16;
|
|
9572
9572
|
|
|
9573
9573
|
var getStylesBySize$5 = function (size) {
|
|
9574
9574
|
// rem units
|
|
@@ -9627,13 +9627,13 @@ var SliderNavigation = function (_a) {
|
|
|
9627
9627
|
} }, { 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));
|
|
9628
9628
|
};
|
|
9629
9629
|
|
|
9630
|
-
var horizontalStyles = css(templateObject_1$
|
|
9631
|
-
var verticalStyles = css(templateObject_2$
|
|
9632
|
-
var Container$L = newStyled.div(templateObject_3$
|
|
9630
|
+
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"])));
|
|
9631
|
+
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"])));
|
|
9632
|
+
var Container$L = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9633
9633
|
var position = _a.position;
|
|
9634
9634
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9635
9635
|
});
|
|
9636
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9636
|
+
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"])));
|
|
9637
9637
|
var ImagePreviewList = function (_a) {
|
|
9638
9638
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9639
9639
|
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
@@ -9642,7 +9642,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9642
9642
|
arrowPadding: 1.625,
|
|
9643
9643
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9644
9644
|
};
|
|
9645
|
-
var templateObject_1$
|
|
9645
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$y, templateObject_4$o;
|
|
9646
9646
|
|
|
9647
9647
|
var propTypes = {exports: {}};
|
|
9648
9648
|
|
|
@@ -11235,13 +11235,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11235
11235
|
afterZoomOut: PropTypes.func
|
|
11236
11236
|
} : {};
|
|
11237
11237
|
|
|
11238
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
11238
|
+
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) {
|
|
11239
11239
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11240
11240
|
return borderRadiusVariant &&
|
|
11241
11241
|
"\n border-radius: 40px;\n ";
|
|
11242
11242
|
});
|
|
11243
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11244
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11243
|
+
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'); });
|
|
11244
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11245
11245
|
var ImageProductWithTags$1 = function (_a) {
|
|
11246
11246
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11247
11247
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
@@ -11249,9 +11249,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11249
11249
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11250
11250
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
11251
11251
|
};
|
|
11252
|
-
var templateObject_1$
|
|
11252
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$x;
|
|
11253
11253
|
|
|
11254
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
11254
|
+
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"])));
|
|
11255
11255
|
var ProductGallery = function (_a) {
|
|
11256
11256
|
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;
|
|
11257
11257
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11263,7 +11263,7 @@ var ProductGallery = function (_a) {
|
|
|
11263
11263
|
setSelectedImage(value);
|
|
11264
11264
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
|
|
11265
11265
|
};
|
|
11266
|
-
var templateObject_1$
|
|
11266
|
+
var templateObject_1$13;
|
|
11267
11267
|
|
|
11268
11268
|
/* base styles & size variants */
|
|
11269
11269
|
var StarStyles = {
|
|
@@ -11309,8 +11309,8 @@ var StarStyles = {
|
|
|
11309
11309
|
});
|
|
11310
11310
|
},
|
|
11311
11311
|
};
|
|
11312
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
11313
|
-
var templateObject_1$
|
|
11312
|
+
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"])));
|
|
11313
|
+
var templateObject_1$12;
|
|
11314
11314
|
|
|
11315
11315
|
var StarContainer = newStyled.div(function (_a) {
|
|
11316
11316
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11372,8 +11372,8 @@ var LabelStyles = {
|
|
|
11372
11372
|
});
|
|
11373
11373
|
},
|
|
11374
11374
|
};
|
|
11375
|
-
var Container$H = newStyled.a(templateObject_1$
|
|
11376
|
-
var templateObject_1$
|
|
11375
|
+
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"])));
|
|
11376
|
+
var templateObject_1$11;
|
|
11377
11377
|
|
|
11378
11378
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11379
11379
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11414,8 +11414,8 @@ var Rating = function (_a) {
|
|
|
11414
11414
|
return (jsxRuntime.jsxs(Container$H, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11415
11415
|
};
|
|
11416
11416
|
|
|
11417
|
-
var Container$G = newStyled.div(templateObject_1
|
|
11418
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11417
|
+
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"])));
|
|
11418
|
+
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; });
|
|
11419
11419
|
var textButtonStyles = function (theme) { return ({
|
|
11420
11420
|
border: 'none',
|
|
11421
11421
|
background: 'transparent',
|
|
@@ -11430,7 +11430,7 @@ var FitPredictor = function (_a) {
|
|
|
11430
11430
|
var theme = useTheme();
|
|
11431
11431
|
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));
|
|
11432
11432
|
};
|
|
11433
|
-
var templateObject_1
|
|
11433
|
+
var templateObject_1$10, templateObject_2$H;
|
|
11434
11434
|
|
|
11435
11435
|
var H2$2 = newStyled.h2(function (_a) {
|
|
11436
11436
|
var color = _a.color;
|
|
@@ -11444,7 +11444,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
11444
11444
|
margin: '0.938rem 4.188rem',
|
|
11445
11445
|
});
|
|
11446
11446
|
});
|
|
11447
|
-
var Bar = newStyled.div(templateObject_1
|
|
11447
|
+
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) {
|
|
11448
11448
|
var backgroundColor = _a.backgroundColor;
|
|
11449
11449
|
return backgroundColor;
|
|
11450
11450
|
}, function (_a) {
|
|
@@ -11483,7 +11483,7 @@ var ProgressBar = function (_a) {
|
|
|
11483
11483
|
var theme = useTheme();
|
|
11484
11484
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11485
11485
|
};
|
|
11486
|
-
var templateObject_1
|
|
11486
|
+
var templateObject_1$$;
|
|
11487
11487
|
|
|
11488
11488
|
var getStylesBySize$4 = function (size) {
|
|
11489
11489
|
switch (size) {
|
|
@@ -11504,7 +11504,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11504
11504
|
};
|
|
11505
11505
|
}
|
|
11506
11506
|
};
|
|
11507
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
11507
|
+
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) {
|
|
11508
11508
|
var backgroundColor = _a.backgroundColor;
|
|
11509
11509
|
return backgroundColor;
|
|
11510
11510
|
}, function (_a) {
|
|
@@ -11534,7 +11534,7 @@ var IconButton = function (_a) {
|
|
|
11534
11534
|
var theme = useTheme();
|
|
11535
11535
|
return (jsxRuntime.jsx(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));
|
|
11536
11536
|
};
|
|
11537
|
-
var templateObject_1$
|
|
11537
|
+
var templateObject_1$_;
|
|
11538
11538
|
|
|
11539
11539
|
var TooltipArrow = function (_a) {
|
|
11540
11540
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11614,7 +11614,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11614
11614
|
}
|
|
11615
11615
|
};
|
|
11616
11616
|
|
|
11617
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11617
|
+
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) {
|
|
11618
11618
|
var position = _a.position;
|
|
11619
11619
|
return getWrapperFlexDirection(position);
|
|
11620
11620
|
});
|
|
@@ -11638,11 +11638,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11638
11638
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11639
11639
|
return actual === expected ? margin : '0';
|
|
11640
11640
|
};
|
|
11641
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11641
|
+
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) {
|
|
11642
11642
|
var borderColor = _a.borderColor;
|
|
11643
11643
|
return borderColor;
|
|
11644
11644
|
});
|
|
11645
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11645
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
11646
11646
|
var position = _a.position;
|
|
11647
11647
|
return getArrowRotation(position);
|
|
11648
11648
|
}, function (_a) {
|
|
@@ -11652,7 +11652,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$v || (templateObject_
|
|
|
11652
11652
|
var position = _a.position;
|
|
11653
11653
|
return getArrowContainerMargin(position);
|
|
11654
11654
|
});
|
|
11655
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11655
|
+
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) {
|
|
11656
11656
|
var color = _a.color;
|
|
11657
11657
|
return color;
|
|
11658
11658
|
});
|
|
@@ -11662,7 +11662,7 @@ var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __makeTem
|
|
|
11662
11662
|
return color;
|
|
11663
11663
|
});
|
|
11664
11664
|
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"])));
|
|
11665
|
-
var templateObject_1$
|
|
11665
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$w, templateObject_4$n, templateObject_5$d, templateObject_6$9, templateObject_7$5;
|
|
11666
11666
|
|
|
11667
11667
|
var Tooltip = function (_a) {
|
|
11668
11668
|
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;
|
|
@@ -11820,9 +11820,9 @@ var ContainerStyles = {
|
|
|
11820
11820
|
},
|
|
11821
11821
|
};
|
|
11822
11822
|
|
|
11823
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11823
|
+
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"])));
|
|
11824
11824
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11825
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11825
|
+
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) {
|
|
11826
11826
|
var disabled = _a.disabled;
|
|
11827
11827
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11828
11828
|
});
|
|
@@ -11839,7 +11839,7 @@ var RadioInput = function (_a) {
|
|
|
11839
11839
|
};
|
|
11840
11840
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: theme.component.radio.textSize, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11841
11841
|
};
|
|
11842
|
-
var templateObject_1$
|
|
11842
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
11843
11843
|
|
|
11844
11844
|
var RadioGroupInput = function (_a) {
|
|
11845
11845
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11853,37 +11853,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11853
11853
|
}) }), void 0));
|
|
11854
11854
|
};
|
|
11855
11855
|
|
|
11856
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11857
|
-
var Container$C = newStyled.div(templateObject_2$
|
|
11856
|
+
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"])));
|
|
11857
|
+
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"])));
|
|
11858
11858
|
var Minimalistic = function (_a) {
|
|
11859
11859
|
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;
|
|
11860
11860
|
var theme = useTheme();
|
|
11861
11861
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11862
11862
|
};
|
|
11863
|
-
var templateObject_1$
|
|
11863
|
+
var templateObject_1$X, templateObject_2$E;
|
|
11864
11864
|
|
|
11865
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
11866
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11867
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11868
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11865
|
+
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"])));
|
|
11866
|
+
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; });
|
|
11867
|
+
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; });
|
|
11868
|
+
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"])));
|
|
11869
11869
|
var Simple = function (_a) {
|
|
11870
11870
|
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;
|
|
11871
11871
|
var theme = useTheme();
|
|
11872
11872
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11873
11873
|
};
|
|
11874
|
-
var templateObject_1$
|
|
11874
|
+
var templateObject_1$W, templateObject_2$D, templateObject_3$v, templateObject_4$m;
|
|
11875
11875
|
|
|
11876
11876
|
var Bundle = {
|
|
11877
11877
|
Minimalistic: Minimalistic,
|
|
11878
11878
|
Simple: Simple,
|
|
11879
11879
|
};
|
|
11880
11880
|
|
|
11881
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
11881
|
+
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"])));
|
|
11882
11882
|
var Tag$1 = function (_a) {
|
|
11883
11883
|
var text = _a.text, className = _a.className;
|
|
11884
11884
|
return jsxRuntime.jsx(Container$A, __assign$1({ className: className }, { children: text }), void 0);
|
|
11885
11885
|
};
|
|
11886
|
-
var templateObject_1$
|
|
11886
|
+
var templateObject_1$V;
|
|
11887
11887
|
|
|
11888
11888
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11889
11889
|
switch (size) {
|
|
@@ -11986,11 +11986,11 @@ var Timer = function (_a) {
|
|
|
11986
11986
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11987
11987
|
};
|
|
11988
11988
|
|
|
11989
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11989
|
+
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) {
|
|
11990
11990
|
var color = _a.color;
|
|
11991
11991
|
return color;
|
|
11992
11992
|
});
|
|
11993
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11993
|
+
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) {
|
|
11994
11994
|
var color = _a.color;
|
|
11995
11995
|
return color;
|
|
11996
11996
|
});
|
|
@@ -11999,7 +11999,7 @@ var InputLabel = function (_a) {
|
|
|
11999
11999
|
var theme = useTheme();
|
|
12000
12000
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12001
12001
|
};
|
|
12002
|
-
var templateObject_1$
|
|
12002
|
+
var templateObject_1$U, templateObject_2$C;
|
|
12003
12003
|
|
|
12004
12004
|
/**
|
|
12005
12005
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12053,14 +12053,14 @@ var formatPrice = function (value, _a) {
|
|
|
12053
12053
|
}).format(valueToFormat);
|
|
12054
12054
|
};
|
|
12055
12055
|
|
|
12056
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12057
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12056
|
+
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; });
|
|
12057
|
+
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"])));
|
|
12058
12058
|
var Error$1 = function (_a) {
|
|
12059
12059
|
var error = _a.error;
|
|
12060
12060
|
var theme = useTheme();
|
|
12061
12061
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12062
12062
|
};
|
|
12063
|
-
var templateObject_1$
|
|
12063
|
+
var templateObject_1$T, templateObject_2$B;
|
|
12064
12064
|
|
|
12065
12065
|
var containerByStatus = function (theme, status) {
|
|
12066
12066
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12069,11 +12069,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12069
12069
|
return theme.colors.semantic.urgent.color;
|
|
12070
12070
|
return '';
|
|
12071
12071
|
};
|
|
12072
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
12072
|
+
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) {
|
|
12073
12073
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12074
12074
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12075
12075
|
});
|
|
12076
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12076
|
+
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) {
|
|
12077
12077
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12078
12078
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12079
12079
|
}, function (_a) {
|
|
@@ -12128,13 +12128,13 @@ var StyledInput = newStyled.input(templateObject_2$z || (templateObject_2$z = __
|
|
|
12128
12128
|
return hasValue &&
|
|
12129
12129
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12130
12130
|
});
|
|
12131
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12131
|
+
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) {
|
|
12132
12132
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12133
12133
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12134
12134
|
});
|
|
12135
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12135
|
+
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"])));
|
|
12136
12136
|
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"])));
|
|
12137
|
-
var templateObject_1$
|
|
12137
|
+
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$l, templateObject_5$c;
|
|
12138
12138
|
|
|
12139
12139
|
var BaseInput = function (_a) {
|
|
12140
12140
|
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"]);
|
|
@@ -12178,11 +12178,11 @@ var Button$2 = function (_a) {
|
|
|
12178
12178
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12179
12179
|
};
|
|
12180
12180
|
|
|
12181
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
12181
|
+
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) {
|
|
12182
12182
|
var theme = _a.theme;
|
|
12183
12183
|
return theme.component.inputCustom.input.borderRadius;
|
|
12184
12184
|
});
|
|
12185
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12185
|
+
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) {
|
|
12186
12186
|
var theme = _a.theme;
|
|
12187
12187
|
return theme.component.inputCustom.button.borderRadius;
|
|
12188
12188
|
});
|
|
@@ -12197,21 +12197,21 @@ var Custom = function (_a) {
|
|
|
12197
12197
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12198
12198
|
return (jsxRuntime.jsx(Container$y, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12199
12199
|
};
|
|
12200
|
-
var templateObject_1$
|
|
12200
|
+
var templateObject_1$R, templateObject_2$z;
|
|
12201
12201
|
|
|
12202
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12202
|
+
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) {
|
|
12203
12203
|
var size = _a.size;
|
|
12204
12204
|
return (size === 'small' ? '36px' : '');
|
|
12205
12205
|
});
|
|
12206
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12207
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12206
|
+
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"])));
|
|
12207
|
+
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"])));
|
|
12208
12208
|
var Success = function (_a) {
|
|
12209
12209
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12210
12210
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12211
12211
|
};
|
|
12212
|
-
var templateObject_1$
|
|
12212
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$t;
|
|
12213
12213
|
|
|
12214
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12214
|
+
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) {
|
|
12215
12215
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12216
12216
|
return status === exports.InputValidationType.Empty &&
|
|
12217
12217
|
type === 'primary' &&
|
|
@@ -12228,10 +12228,10 @@ var BasePlusButton = function (_a) {
|
|
|
12228
12228
|
}
|
|
12229
12229
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12230
12230
|
};
|
|
12231
|
-
var templateObject_1$
|
|
12231
|
+
var templateObject_1$P;
|
|
12232
12232
|
|
|
12233
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
12234
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12233
|
+
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"])));
|
|
12234
|
+
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; });
|
|
12235
12235
|
var BasePlusIcon = function (_a) {
|
|
12236
12236
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12237
12237
|
var theme = useTheme();
|
|
@@ -12242,7 +12242,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12242
12242
|
? theme.colors.semantic.urgent.color
|
|
12243
12243
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12244
12244
|
};
|
|
12245
|
-
var templateObject_1$
|
|
12245
|
+
var templateObject_1$O, templateObject_2$x;
|
|
12246
12246
|
|
|
12247
12247
|
var Input$1 = {
|
|
12248
12248
|
Simple: BaseInput,
|
|
@@ -12251,7 +12251,7 @@ var Input$1 = {
|
|
|
12251
12251
|
SimplePlusIcon: BasePlusIcon,
|
|
12252
12252
|
};
|
|
12253
12253
|
|
|
12254
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
12254
|
+
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) {
|
|
12255
12255
|
var width = _a.width;
|
|
12256
12256
|
return width;
|
|
12257
12257
|
}, function (_a) {
|
|
@@ -12269,9 +12269,9 @@ var PaymentMethod = function (_a) {
|
|
|
12269
12269
|
var theme = useTheme();
|
|
12270
12270
|
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
12271
12271
|
};
|
|
12272
|
-
var templateObject_1$
|
|
12272
|
+
var templateObject_1$N;
|
|
12273
12273
|
|
|
12274
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12274
|
+
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) {
|
|
12275
12275
|
var backgroundColor = _a.backgroundColor;
|
|
12276
12276
|
return backgroundColor;
|
|
12277
12277
|
}, function (_a) {
|
|
@@ -12283,27 +12283,27 @@ var OfferBanner = function (_a) {
|
|
|
12283
12283
|
var theme = useTheme();
|
|
12284
12284
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12285
12285
|
};
|
|
12286
|
-
var templateObject_1$
|
|
12286
|
+
var templateObject_1$M;
|
|
12287
12287
|
|
|
12288
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12289
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12290
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12291
|
-
var Container$v = newStyled.div(templateObject_4$
|
|
12288
|
+
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"])));
|
|
12289
|
+
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; });
|
|
12290
|
+
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"])));
|
|
12291
|
+
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; });
|
|
12292
12292
|
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"])));
|
|
12293
12293
|
var Total = function (_a) {
|
|
12294
12294
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12295
12295
|
var theme = useTheme();
|
|
12296
12296
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12297
12297
|
};
|
|
12298
|
-
var templateObject_1$
|
|
12298
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b;
|
|
12299
12299
|
|
|
12300
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12300
|
+
var Wrapper$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12301
12301
|
var color = _a.color;
|
|
12302
12302
|
return color;
|
|
12303
12303
|
});
|
|
12304
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12305
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12306
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12304
|
+
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"])));
|
|
12305
|
+
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"])));
|
|
12306
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12307
12307
|
var color = _a.color;
|
|
12308
12308
|
return color;
|
|
12309
12309
|
});
|
|
@@ -12316,22 +12316,22 @@ var Subtotal = function (_a) {
|
|
|
12316
12316
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12317
12317
|
})] }), void 0));
|
|
12318
12318
|
};
|
|
12319
|
-
var templateObject_1$
|
|
12319
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$r, templateObject_4$j;
|
|
12320
12320
|
|
|
12321
12321
|
var Totals = {
|
|
12322
12322
|
Total: Total,
|
|
12323
12323
|
Subtotal: Subtotal,
|
|
12324
12324
|
};
|
|
12325
12325
|
|
|
12326
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
12327
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12328
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12329
|
-
var Details = newStyled.span(templateObject_4$
|
|
12326
|
+
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; });
|
|
12327
|
+
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"])));
|
|
12328
|
+
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; });
|
|
12329
|
+
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; });
|
|
12330
12330
|
var Note = function (_a) {
|
|
12331
12331
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12332
12332
|
return (jsxRuntime.jsxs(Container$u, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
12333
12333
|
};
|
|
12334
|
-
var templateObject_1$
|
|
12334
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;
|
|
12335
12335
|
|
|
12336
12336
|
/* eslint-disable no-param-reassign */
|
|
12337
12337
|
var index$1 = function (breakpoints) {
|
|
@@ -12417,12 +12417,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12417
12417
|
literal: true,
|
|
12418
12418
|
});
|
|
12419
12419
|
|
|
12420
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12421
|
-
var Line = newStyled.div(templateObject_2$
|
|
12422
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12420
|
+
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; });
|
|
12421
|
+
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; });
|
|
12422
|
+
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({
|
|
12423
12423
|
flexDirection: ['column', 'row'],
|
|
12424
12424
|
}));
|
|
12425
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12425
|
+
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({
|
|
12426
12426
|
margin: ['0', '0 1.25rem'],
|
|
12427
12427
|
marginBottom: ['1.875rem', '0'],
|
|
12428
12428
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12446,39 +12446,75 @@ var DeliveryDetails = function (_a) {
|
|
|
12446
12446
|
var theme = useTheme();
|
|
12447
12447
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12448
12448
|
};
|
|
12449
|
-
var templateObject_1$
|
|
12449
|
+
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;
|
|
12450
12450
|
|
|
12451
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
12452
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12451
|
+
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"])));
|
|
12452
|
+
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; });
|
|
12453
12453
|
var ScrollToTop = function (_a) {
|
|
12454
12454
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12455
12455
|
var theme = useTheme();
|
|
12456
12456
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12457
12457
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12458
12458
|
};
|
|
12459
|
-
var templateObject_1$
|
|
12459
|
+
var templateObject_1$H, templateObject_2$s;
|
|
12460
12460
|
|
|
12461
12461
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12462
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
12462
|
+
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) {
|
|
12463
12463
|
var color = _a.color;
|
|
12464
12464
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12465
12465
|
});
|
|
12466
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12466
|
+
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; });
|
|
12467
12467
|
var OrderBar = function (_a) {
|
|
12468
12468
|
var message = _a.message, color = _a.color;
|
|
12469
12469
|
var theme = useTheme();
|
|
12470
12470
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12471
12471
|
};
|
|
12472
|
-
var templateObject_1$
|
|
12472
|
+
var templateObject_1$G, templateObject_2$r;
|
|
12473
|
+
|
|
12474
|
+
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; });
|
|
12475
|
+
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; });
|
|
12476
|
+
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; });
|
|
12477
|
+
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; });
|
|
12478
|
+
var SizeTable = function (_a) {
|
|
12479
|
+
var headers = _a.headers, data = _a.data;
|
|
12480
|
+
var theme = useTheme();
|
|
12481
|
+
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12482
|
+
};
|
|
12483
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$o, templateObject_4$g;
|
|
12473
12484
|
|
|
12474
12485
|
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; });
|
|
12475
12486
|
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; });
|
|
12476
12487
|
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; });
|
|
12477
12488
|
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; });
|
|
12478
|
-
var
|
|
12479
|
-
var headers = _a.headers, data = _a.data;
|
|
12489
|
+
var SizeChartTable = function (_a) {
|
|
12490
|
+
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12480
12491
|
var theme = useTheme();
|
|
12481
|
-
|
|
12492
|
+
var getCellColor = function (index, cell) {
|
|
12493
|
+
if (index == 0) {
|
|
12494
|
+
return '#f6f0e7';
|
|
12495
|
+
}
|
|
12496
|
+
switch (cell) {
|
|
12497
|
+
case 'S':
|
|
12498
|
+
return '#f7a08b';
|
|
12499
|
+
case 'M':
|
|
12500
|
+
return '#ffe1b8';
|
|
12501
|
+
case 'L':
|
|
12502
|
+
return '#f5bab0';
|
|
12503
|
+
case 'XL':
|
|
12504
|
+
return '#8bbeea';
|
|
12505
|
+
case '2XL':
|
|
12506
|
+
return '#b1d7c3';
|
|
12507
|
+
case '3XL':
|
|
12508
|
+
return '#e7a4f7';
|
|
12509
|
+
case '4XL':
|
|
12510
|
+
return '#e7c9b2';
|
|
12511
|
+
default:
|
|
12512
|
+
return '';
|
|
12513
|
+
}
|
|
12514
|
+
};
|
|
12515
|
+
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ style: {
|
|
12516
|
+
backgroundColor: getCellColor(index, cell),
|
|
12517
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12482
12518
|
};
|
|
12483
12519
|
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$f;
|
|
12484
12520
|
|
|
@@ -18097,6 +18133,7 @@ exports.ShortBanner = ShortBanner;
|
|
|
18097
18133
|
exports.SimpleDropdown = SimpleDropdown;
|
|
18098
18134
|
exports.SimpleOrderItem = SimpleOrderItem;
|
|
18099
18135
|
exports.SingleColorPicker = SingleColorPicker;
|
|
18136
|
+
exports.SizeChartTable = SizeChartTable;
|
|
18100
18137
|
exports.SizeFitGuide = SizeFitGuide;
|
|
18101
18138
|
exports.SizeSelector = SizeSelector;
|
|
18102
18139
|
exports.SizeTable = SizeTable;
|