@trafilea/afrodita-components 5.0.0-beta.154 → 5.0.0-beta.155
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 +28 -3
- package/build/index.esm.js +450 -421
- package/build/index.esm.js.map +1 -1
- package/build/index.js +451 -421
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
|
|
|
4042
4042
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4043
4043
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4044
4044
|
|
|
4045
|
-
var Section = newStyled.div(templateObject_1$
|
|
4045
|
+
var Section = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
4046
4046
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4047
4047
|
});
|
|
4048
4048
|
var CardHeader = function (_a) {
|
|
@@ -4053,14 +4053,14 @@ var CardFooter = function (_a) {
|
|
|
4053
4053
|
var children = _a.children;
|
|
4054
4054
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4055
4055
|
};
|
|
4056
|
-
var templateObject_1$
|
|
4056
|
+
var templateObject_1$1l;
|
|
4057
4057
|
|
|
4058
|
-
var Body = newStyled.div(templateObject_1$
|
|
4058
|
+
var Body = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4059
4059
|
var CardBody = function (_a) {
|
|
4060
4060
|
var children = _a.children;
|
|
4061
4061
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4062
4062
|
};
|
|
4063
|
-
var templateObject_1$
|
|
4063
|
+
var templateObject_1$1k;
|
|
4064
4064
|
|
|
4065
4065
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4066
4066
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4207
4207
|
|
|
4208
|
-
var Container$
|
|
4208
|
+
var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4209
4209
|
var flex = _a.flex;
|
|
4210
4210
|
return flex &&
|
|
4211
4211
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4220,14 +4220,14 @@ var Container$R = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __
|
|
|
4220
4220
|
var Card$1 = function (_a) {
|
|
4221
4221
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4222
4222
|
var theme = useTheme();
|
|
4223
|
-
return (jsxRuntime.jsx(Container$
|
|
4223
|
+
return (jsxRuntime.jsx(Container$S, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4224
4224
|
};
|
|
4225
4225
|
var Card$2 = Object.assign(Card$1, {
|
|
4226
4226
|
Header: CardHeader,
|
|
4227
4227
|
Footer: CardFooter,
|
|
4228
4228
|
Body: CardBody,
|
|
4229
4229
|
});
|
|
4230
|
-
var templateObject_1$
|
|
4230
|
+
var templateObject_1$1j;
|
|
4231
4231
|
|
|
4232
4232
|
var Fragment = jsxRuntime.Fragment;
|
|
4233
4233
|
function jsx(type, props, key) {
|
|
@@ -4369,7 +4369,7 @@ function BaseSelectOption(_a) {
|
|
|
4369
4369
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4370
4370
|
}
|
|
4371
4371
|
|
|
4372
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4372
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4373
4373
|
function BaseSelect(_a) {
|
|
4374
4374
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4375
4375
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4379,7 +4379,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4379
4379
|
Options: BaseSelectOptions,
|
|
4380
4380
|
Option: BaseSelectOption,
|
|
4381
4381
|
});
|
|
4382
|
-
var templateObject_1$
|
|
4382
|
+
var templateObject_1$1i;
|
|
4383
4383
|
|
|
4384
4384
|
var CustomButton = newStyled.button(function (_a) {
|
|
4385
4385
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4594,12 +4594,12 @@ var CustomCheckboxStyles = {
|
|
|
4594
4594
|
},
|
|
4595
4595
|
};
|
|
4596
4596
|
|
|
4597
|
-
var Container$
|
|
4597
|
+
var Container$R = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4598
4598
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4599
4599
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4600
4600
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4601
4601
|
]; });
|
|
4602
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4602
|
+
var Input$3 = newStyled.input(templateObject_2$S || (templateObject_2$S = __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) {
|
|
4603
4603
|
var disabled = _a.disabled;
|
|
4604
4604
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4605
4605
|
});
|
|
@@ -4628,9 +4628,9 @@ var Checkbox = function (_a) {
|
|
|
4628
4628
|
React$2.useEffect(function () {
|
|
4629
4629
|
mounted.current = true;
|
|
4630
4630
|
}, []);
|
|
4631
|
-
return (jsxRuntime.jsxs(Container$
|
|
4631
|
+
return (jsxRuntime.jsxs(Container$R, { 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));
|
|
4632
4632
|
};
|
|
4633
|
-
var templateObject_1$
|
|
4633
|
+
var templateObject_1$1h, templateObject_2$S;
|
|
4634
4634
|
|
|
4635
4635
|
var CustomOption = newStyled.li(function (_a) {
|
|
4636
4636
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4709,10 +4709,10 @@ function SimpleDropdown(_a) {
|
|
|
4709
4709
|
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));
|
|
4710
4710
|
}
|
|
4711
4711
|
|
|
4712
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4713
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4714
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4715
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4712
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4713
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$R || (templateObject_2$R = __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; });
|
|
4714
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
4715
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
4716
4716
|
var DropdownDialog = function (_a) {
|
|
4717
4717
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4718
4718
|
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) {
|
|
@@ -4720,7 +4720,7 @@ var DropdownDialog = function (_a) {
|
|
|
4720
4720
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4721
4721
|
}) }), void 0) }), void 0));
|
|
4722
4722
|
};
|
|
4723
|
-
var templateObject_1$
|
|
4723
|
+
var templateObject_1$1g, templateObject_2$R, templateObject_3$F, templateObject_4$t;
|
|
4724
4724
|
|
|
4725
4725
|
var getStylesBySize$9 = function (size, theme) {
|
|
4726
4726
|
switch (size) {
|
|
@@ -4788,26 +4788,26 @@ var SelectorSecondary = function (_a) {
|
|
|
4788
4788
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4789
4789
|
// `variants` styles that are consistent through all themes.
|
|
4790
4790
|
var TAGS = {
|
|
4791
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4792
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4793
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4794
|
-
display1: newStyled.h1(templateObject_4$
|
|
4795
|
-
display2: newStyled.h2(templateObject_5$
|
|
4796
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4797
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4798
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4799
|
-
heading4: newStyled.h4(templateObject_9$
|
|
4800
|
-
heading5: newStyled.h5(templateObject_10$
|
|
4801
|
-
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
4802
|
-
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
4803
|
-
link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4804
|
-
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4805
|
-
pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4806
|
-
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4791
|
+
hero1: newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""]))),
|
|
4792
|
+
hero2: newStyled.h2(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject([""], [""]))),
|
|
4793
|
+
hero3: newStyled.h3(templateObject_3$E || (templateObject_3$E = __makeTemplateObject([""], [""]))),
|
|
4794
|
+
display1: newStyled.h1(templateObject_4$s || (templateObject_4$s = __makeTemplateObject([""], [""]))),
|
|
4795
|
+
display2: newStyled.h2(templateObject_5$h || (templateObject_5$h = __makeTemplateObject([""], [""]))),
|
|
4796
|
+
heading1: newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject([""], [""]))),
|
|
4797
|
+
heading2: newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject([""], [""]))),
|
|
4798
|
+
heading3: newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject([""], [""]))),
|
|
4799
|
+
heading4: newStyled.h4(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject([""], [""]))),
|
|
4800
|
+
heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
|
|
4801
|
+
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
body: newStyled.p(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
link: newStyled.a(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4804
|
+
button: newStyled.span(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4805
|
+
pricing: newStyled.span(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4806
|
+
label: newStyled.label(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4807
4807
|
var theme = _a.theme;
|
|
4808
4808
|
return theme.component.label.color;
|
|
4809
4809
|
}),
|
|
4810
|
-
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4810
|
+
tag: newStyled.span(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4811
4811
|
};
|
|
4812
4812
|
var Text$6 = function (_a) {
|
|
4813
4813
|
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
@@ -4914,9 +4914,9 @@ var DEFAULTS = {
|
|
|
4914
4914
|
size: 'regular',
|
|
4915
4915
|
},
|
|
4916
4916
|
};
|
|
4917
|
-
var templateObject_1$
|
|
4917
|
+
var templateObject_1$1f, templateObject_2$Q, templateObject_3$E, templateObject_4$s, templateObject_5$h, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
|
|
4918
4918
|
|
|
4919
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4919
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4920
4920
|
var inline = _a.inline;
|
|
4921
4921
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4922
4922
|
});
|
|
@@ -4935,7 +4935,7 @@ var SizeSelector = function (_a) {
|
|
|
4935
4935
|
}, 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));
|
|
4936
4936
|
}) }), void 0)] }), void 0));
|
|
4937
4937
|
};
|
|
4938
|
-
var templateObject_1$
|
|
4938
|
+
var templateObject_1$1e;
|
|
4939
4939
|
|
|
4940
4940
|
var getStylesBySize$8 = function (size) {
|
|
4941
4941
|
switch (size) {
|
|
@@ -4962,7 +4962,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4962
4962
|
} });
|
|
4963
4963
|
};
|
|
4964
4964
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4965
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4965
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
4966
4966
|
};
|
|
4967
4967
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4968
4968
|
if (disabled)
|
|
@@ -4978,16 +4978,16 @@ var TextButton = function (_a) {
|
|
|
4978
4978
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4979
4979
|
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));
|
|
4980
4980
|
};
|
|
4981
|
-
var templateObject_1$
|
|
4981
|
+
var templateObject_1$1d;
|
|
4982
4982
|
|
|
4983
|
-
var Container$
|
|
4984
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4985
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4983
|
+
var Container$Q = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4984
|
+
var P$2 = newStyled.p(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4985
|
+
var PercentageSpan = newStyled.span(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
4986
4986
|
var SizeFitGuide = function (_a) {
|
|
4987
4987
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4988
|
-
return (jsxRuntime.jsxs(Container$
|
|
4988
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$2, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4989
4989
|
};
|
|
4990
|
-
var templateObject_1$
|
|
4990
|
+
var templateObject_1$1c, templateObject_2$P, templateObject_3$D;
|
|
4991
4991
|
|
|
4992
4992
|
var getStylesBySize$7 = function (size) {
|
|
4993
4993
|
switch (size) {
|
|
@@ -5017,7 +5017,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5017
5017
|
};
|
|
5018
5018
|
}
|
|
5019
5019
|
};
|
|
5020
|
-
var Container$
|
|
5020
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5021
5021
|
var backgroundColor = _a.backgroundColor;
|
|
5022
5022
|
return backgroundColor;
|
|
5023
5023
|
}, function (_a) {
|
|
@@ -5039,7 +5039,7 @@ var Container$O = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
5039
5039
|
var size = _a.size;
|
|
5040
5040
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5041
5041
|
});
|
|
5042
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5042
|
+
var H3$1 = newStyled.h3(templateObject_2$O || (templateObject_2$O = __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) {
|
|
5043
5043
|
var textColor = _a.textColor;
|
|
5044
5044
|
return textColor;
|
|
5045
5045
|
}, function (_a) {
|
|
@@ -5054,9 +5054,9 @@ var H3$1 = newStyled.h3(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5054
5054
|
var DiscountTag = function (_a) {
|
|
5055
5055
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5056
5056
|
var theme = useTheme();
|
|
5057
|
-
return (jsxRuntime.jsx(Container$
|
|
5057
|
+
return (jsxRuntime.jsx(Container$P, __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$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5058
5058
|
};
|
|
5059
|
-
var templateObject_1$
|
|
5059
|
+
var templateObject_1$1b, templateObject_2$O;
|
|
5060
5060
|
|
|
5061
5061
|
var getStylesBySize$6 = function (size) {
|
|
5062
5062
|
switch (size) {
|
|
@@ -5086,8 +5086,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5086
5086
|
};
|
|
5087
5087
|
}
|
|
5088
5088
|
};
|
|
5089
|
-
var Container$
|
|
5090
|
-
var Price = newStyled.p(templateObject_2$
|
|
5089
|
+
var Container$O = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5090
|
+
var Price = newStyled.p(templateObject_2$N || (templateObject_2$N = __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) {
|
|
5091
5091
|
var weight = _a.weight;
|
|
5092
5092
|
return (weight ? weight : '400');
|
|
5093
5093
|
}, function (_a) {
|
|
@@ -5116,7 +5116,7 @@ var Price = newStyled.p(templateObject_2$M || (templateObject_2$M = __makeTempla
|
|
|
5116
5116
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5117
5117
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5118
5118
|
});
|
|
5119
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5119
|
+
var TagContainer = newStyled.p(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5120
5120
|
var _b;
|
|
5121
5121
|
var size = _a.size;
|
|
5122
5122
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5137,11 +5137,11 @@ var PriceLabel = function (_a) {
|
|
|
5137
5137
|
weight: 700,
|
|
5138
5138
|
};
|
|
5139
5139
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5140
|
-
return (jsxRuntime.jsxs(Container$
|
|
5140
|
+
return (jsxRuntime.jsxs(Container$O, { 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));
|
|
5141
5141
|
};
|
|
5142
|
-
var templateObject_1$
|
|
5142
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$C;
|
|
5143
5143
|
|
|
5144
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5144
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5145
5145
|
var PriceLabelV2 = function (_a) {
|
|
5146
5146
|
var _b;
|
|
5147
5147
|
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;
|
|
@@ -5169,9 +5169,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5169
5169
|
weight: 700,
|
|
5170
5170
|
};
|
|
5171
5171
|
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)); };
|
|
5172
|
-
return (jsxRuntime.jsxs(Container$
|
|
5172
|
+
return (jsxRuntime.jsxs(Container$O, { 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));
|
|
5173
5173
|
};
|
|
5174
|
-
var templateObject_1$
|
|
5174
|
+
var templateObject_1$19;
|
|
5175
5175
|
|
|
5176
5176
|
var OneColorSelector = function (_a) {
|
|
5177
5177
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5212,11 +5212,11 @@ var OutOfStock = function (_a) {
|
|
|
5212
5212
|
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));
|
|
5213
5213
|
};
|
|
5214
5214
|
|
|
5215
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5216
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5217
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5218
|
-
var Span = newStyled.span(templateObject_4$
|
|
5219
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5215
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5216
|
+
newStyled(lt.Label)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5217
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
5218
|
+
var Span = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5219
|
+
var OptionsContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
5220
5220
|
var Label$2 = function (_a) {
|
|
5221
5221
|
var label = _a.label, values = _a.values;
|
|
5222
5222
|
return (jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5234,23 +5234,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5234
5234
|
Option: Option,
|
|
5235
5235
|
OptionsContainer: OptionsContainer,
|
|
5236
5236
|
});
|
|
5237
|
-
var templateObject_1$
|
|
5237
|
+
var templateObject_1$18, templateObject_2$M, templateObject_3$B, templateObject_4$r, templateObject_5$g;
|
|
5238
5238
|
|
|
5239
|
-
var Container$
|
|
5239
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n 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) {
|
|
5240
5240
|
var borderColor = _a.borderColor;
|
|
5241
5241
|
return borderColor;
|
|
5242
5242
|
}, function (_a) {
|
|
5243
5243
|
var noStock = _a.noStock;
|
|
5244
5244
|
return (noStock ? '0.4' : '1');
|
|
5245
5245
|
});
|
|
5246
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5246
|
+
var Image$3 = newStyled.img(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5247
5247
|
var PatternSelector = function (_a) {
|
|
5248
5248
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5249
5249
|
var theme = useTheme();
|
|
5250
5250
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5251
|
-
return (jsxRuntime.jsx(Container$
|
|
5251
|
+
return (jsxRuntime.jsx(Container$N, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5252
5252
|
};
|
|
5253
|
-
var templateObject_1$
|
|
5253
|
+
var templateObject_1$17, templateObject_2$L;
|
|
5254
5254
|
|
|
5255
5255
|
var renderOptions$1 = function (options) {
|
|
5256
5256
|
if (options.length === 0) {
|
|
@@ -5308,7 +5308,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5308
5308
|
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));
|
|
5309
5309
|
};
|
|
5310
5310
|
|
|
5311
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5311
|
+
var Image$2 = newStyled.img(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5312
5312
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5313
5313
|
return borderRadiusVariant &&
|
|
5314
5314
|
"\nborder-radius: 20px;\n";
|
|
@@ -5323,7 +5323,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5323
5323
|
var theme = useTheme();
|
|
5324
5324
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5325
5325
|
};
|
|
5326
|
-
var templateObject_1$
|
|
5326
|
+
var templateObject_1$16;
|
|
5327
5327
|
|
|
5328
5328
|
var Button$3 = newStyled.button(function () { return ({
|
|
5329
5329
|
background: 'transparent',
|
|
@@ -9567,14 +9567,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9567
9567
|
return Slider;
|
|
9568
9568
|
}(React__default["default"].Component);
|
|
9569
9569
|
|
|
9570
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9570
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
9571
9571
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9572
9572
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9573
9573
|
}, function (_a) {
|
|
9574
9574
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9575
9575
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9576
9576
|
});
|
|
9577
|
-
var templateObject_1$
|
|
9577
|
+
var templateObject_1$15;
|
|
9578
9578
|
|
|
9579
9579
|
var getStylesBySize$5 = function (size) {
|
|
9580
9580
|
// rem units
|
|
@@ -9633,22 +9633,22 @@ var SliderNavigation = function (_a) {
|
|
|
9633
9633
|
} }, { 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));
|
|
9634
9634
|
};
|
|
9635
9635
|
|
|
9636
|
-
var horizontalStyles = css(templateObject_1$
|
|
9637
|
-
var verticalStyles = css(templateObject_2$
|
|
9638
|
-
var Container$
|
|
9636
|
+
var horizontalStyles = css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9637
|
+
var verticalStyles = css(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
9638
|
+
var Container$M = newStyled.div(templateObject_3$A || (templateObject_3$A = __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) {
|
|
9639
9639
|
var position = _a.position;
|
|
9640
9640
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9641
9641
|
});
|
|
9642
|
-
var Button$2 = newStyled.button(templateObject_4$
|
|
9642
|
+
var Button$2 = newStyled.button(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
9643
9643
|
var ImagePreviewList = function (_a) {
|
|
9644
9644
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9645
|
-
return (jsxRuntime.jsx(Container$
|
|
9645
|
+
return (jsxRuntime.jsx(Container$M, __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: {
|
|
9646
9646
|
arrowWidth: 0.75,
|
|
9647
9647
|
arrowHeight: 1.25,
|
|
9648
9648
|
arrowPadding: 1.625,
|
|
9649
9649
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$2, __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$2, __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));
|
|
9650
9650
|
};
|
|
9651
|
-
var templateObject_1$
|
|
9651
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$q;
|
|
9652
9652
|
|
|
9653
9653
|
var propTypes = {exports: {}};
|
|
9654
9654
|
|
|
@@ -11241,23 +11241,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11241
11241
|
afterZoomOut: PropTypes.func
|
|
11242
11242
|
} : {};
|
|
11243
11243
|
|
|
11244
|
-
var Container$
|
|
11244
|
+
var Container$L = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
11245
11245
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11246
11246
|
return borderRadiusVariant &&
|
|
11247
11247
|
"\n border-radius: 40px;\n ";
|
|
11248
11248
|
});
|
|
11249
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
11250
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
11249
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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'); });
|
|
11250
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11251
11251
|
var ImageProductWithTags$1 = function (_a) {
|
|
11252
11252
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
|
|
11253
|
-
return (jsxRuntime.jsxs(Container$
|
|
11253
|
+
return (jsxRuntime.jsxs(Container$L, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11254
11254
|
alt: image.alt,
|
|
11255
11255
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11256
11256
|
}, 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));
|
|
11257
11257
|
};
|
|
11258
|
-
var templateObject_1$
|
|
11258
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z;
|
|
11259
11259
|
|
|
11260
|
-
var Container$
|
|
11260
|
+
var Container$K = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
11261
11261
|
var ProductGallery = function (_a) {
|
|
11262
11262
|
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;
|
|
11263
11263
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11265,11 +11265,11 @@ var ProductGallery = function (_a) {
|
|
|
11265
11265
|
React$2.useEffect(function () {
|
|
11266
11266
|
setSelectedImage(initialValue);
|
|
11267
11267
|
}, [initialValue]);
|
|
11268
|
-
return (jsxRuntime.jsxs(Container$
|
|
11268
|
+
return (jsxRuntime.jsxs(Container$K, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11269
11269
|
setSelectedImage(value);
|
|
11270
11270
|
}, 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));
|
|
11271
11271
|
};
|
|
11272
|
-
var templateObject_1$
|
|
11272
|
+
var templateObject_1$12;
|
|
11273
11273
|
|
|
11274
11274
|
/* base styles & size variants */
|
|
11275
11275
|
var StarStyles = {
|
|
@@ -11315,8 +11315,8 @@ var StarStyles = {
|
|
|
11315
11315
|
});
|
|
11316
11316
|
},
|
|
11317
11317
|
};
|
|
11318
|
-
var Container$
|
|
11319
|
-
var templateObject_1$
|
|
11318
|
+
var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11319
|
+
var templateObject_1$11;
|
|
11320
11320
|
|
|
11321
11321
|
var StarContainer = newStyled.div(function (_a) {
|
|
11322
11322
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11334,7 +11334,7 @@ var sizes = {
|
|
|
11334
11334
|
var StarList = function (_a) {
|
|
11335
11335
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11336
11336
|
var theme = useTheme();
|
|
11337
|
-
return (jsxRuntime.jsx(Container$
|
|
11337
|
+
return (jsxRuntime.jsx(Container$J, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11338
11338
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11339
11339
|
}) }, void 0));
|
|
11340
11340
|
};
|
|
@@ -11378,8 +11378,8 @@ var LabelStyles = {
|
|
|
11378
11378
|
});
|
|
11379
11379
|
},
|
|
11380
11380
|
};
|
|
11381
|
-
var Container$
|
|
11382
|
-
var templateObject_1
|
|
11381
|
+
var Container$I = newStyled.a(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11382
|
+
var templateObject_1$10;
|
|
11383
11383
|
|
|
11384
11384
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11385
11385
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11417,11 +11417,11 @@ var Rating = function (_a) {
|
|
|
11417
11417
|
href: reviewsContainerId,
|
|
11418
11418
|
}
|
|
11419
11419
|
: {};
|
|
11420
|
-
return (jsxRuntime.jsxs(Container$
|
|
11420
|
+
return (jsxRuntime.jsxs(Container$I, __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));
|
|
11421
11421
|
};
|
|
11422
11422
|
|
|
11423
|
-
var Container$
|
|
11424
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11423
|
+
var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
11424
|
+
var P$1 = newStyled.p(templateObject_2$I || (templateObject_2$I = __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; });
|
|
11425
11425
|
var textButtonStyles = function (theme) { return ({
|
|
11426
11426
|
border: 'none',
|
|
11427
11427
|
background: 'transparent',
|
|
@@ -11434,9 +11434,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11434
11434
|
var FitPredictor = function (_a) {
|
|
11435
11435
|
var onClick = _a.onClick;
|
|
11436
11436
|
var theme = useTheme();
|
|
11437
|
-
return (jsxs(Container$
|
|
11437
|
+
return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __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));
|
|
11438
11438
|
};
|
|
11439
|
-
var templateObject_1
|
|
11439
|
+
var templateObject_1$$, templateObject_2$I;
|
|
11440
11440
|
|
|
11441
11441
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11442
11442
|
var color = _a.color;
|
|
@@ -11450,7 +11450,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11450
11450
|
margin: '0.938rem 4.188rem',
|
|
11451
11451
|
});
|
|
11452
11452
|
});
|
|
11453
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11453
|
+
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) {
|
|
11454
11454
|
var backgroundColor = _a.backgroundColor;
|
|
11455
11455
|
return backgroundColor;
|
|
11456
11456
|
}, function (_a) {
|
|
@@ -11473,7 +11473,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11473
11473
|
position: 'absolute',
|
|
11474
11474
|
});
|
|
11475
11475
|
});
|
|
11476
|
-
var Container$
|
|
11476
|
+
var Container$G = newStyled.div(function (_a) {
|
|
11477
11477
|
var widthAuto = _a.widthAuto;
|
|
11478
11478
|
return ({
|
|
11479
11479
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11487,9 +11487,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11487
11487
|
var ProgressBar = function (_a) {
|
|
11488
11488
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11489
11489
|
var theme = useTheme();
|
|
11490
|
-
return (jsxRuntime.jsxs(Container$
|
|
11490
|
+
return (jsxRuntime.jsxs(Container$G, __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$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11491
11491
|
};
|
|
11492
|
-
var templateObject_1$
|
|
11492
|
+
var templateObject_1$_;
|
|
11493
11493
|
|
|
11494
11494
|
var getStylesBySize$4 = function (size) {
|
|
11495
11495
|
switch (size) {
|
|
@@ -11510,7 +11510,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11510
11510
|
};
|
|
11511
11511
|
}
|
|
11512
11512
|
};
|
|
11513
|
-
var Container$
|
|
11513
|
+
var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
11514
11514
|
var backgroundColor = _a.backgroundColor;
|
|
11515
11515
|
return backgroundColor;
|
|
11516
11516
|
}, function (_a) {
|
|
@@ -11538,9 +11538,9 @@ var Container$E = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
11538
11538
|
var IconButton = function (_a) {
|
|
11539
11539
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11540
11540
|
var theme = useTheme();
|
|
11541
|
-
return (jsxRuntime.jsx(Container$
|
|
11541
|
+
return (jsxRuntime.jsx(Container$F, __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));
|
|
11542
11542
|
};
|
|
11543
|
-
var templateObject_1$
|
|
11543
|
+
var templateObject_1$Z;
|
|
11544
11544
|
|
|
11545
11545
|
var TooltipArrow = function (_a) {
|
|
11546
11546
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11620,7 +11620,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11620
11620
|
}
|
|
11621
11621
|
};
|
|
11622
11622
|
|
|
11623
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11623
|
+
var Wrapper$5 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
11624
11624
|
var position = _a.position;
|
|
11625
11625
|
return getWrapperFlexDirection(position);
|
|
11626
11626
|
});
|
|
@@ -11644,11 +11644,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11644
11644
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11645
11645
|
return actual === expected ? margin : '0';
|
|
11646
11646
|
};
|
|
11647
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11647
|
+
var ContentWrapper = newStyled.div(templateObject_2$H || (templateObject_2$H = __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) {
|
|
11648
11648
|
var borderColor = _a.borderColor;
|
|
11649
11649
|
return borderColor;
|
|
11650
11650
|
});
|
|
11651
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11651
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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) {
|
|
11652
11652
|
var position = _a.position;
|
|
11653
11653
|
return getArrowRotation(position);
|
|
11654
11654
|
}, function (_a) {
|
|
@@ -11658,17 +11658,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$x || (templateObject_
|
|
|
11658
11658
|
var position = _a.position;
|
|
11659
11659
|
return getArrowContainerMargin(position);
|
|
11660
11660
|
});
|
|
11661
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11661
|
+
var TooltipText = newStyled.div(templateObject_4$p || (templateObject_4$p = __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) {
|
|
11662
11662
|
var color = _a.color;
|
|
11663
11663
|
return color;
|
|
11664
11664
|
});
|
|
11665
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11666
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11665
|
+
var TopSection = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11666
|
+
var Title$6 = newStyled.h1(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11667
11667
|
var color = _a.color;
|
|
11668
11668
|
return color;
|
|
11669
11669
|
});
|
|
11670
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
11671
|
-
var templateObject_1$
|
|
11670
|
+
var IconContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __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"])));
|
|
11671
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$y, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
|
|
11672
11672
|
|
|
11673
11673
|
var Tooltip = function (_a) {
|
|
11674
11674
|
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;
|
|
@@ -11826,9 +11826,9 @@ var ContainerStyles = {
|
|
|
11826
11826
|
},
|
|
11827
11827
|
};
|
|
11828
11828
|
|
|
11829
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11830
|
-
var Container$
|
|
11831
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11829
|
+
var Wrapper$4 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11830
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11831
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __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) {
|
|
11832
11832
|
var disabled = _a.disabled;
|
|
11833
11833
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11834
11834
|
});
|
|
@@ -11836,7 +11836,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11836
11836
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11837
11837
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11838
11838
|
]; });
|
|
11839
|
-
var StyledLabel = newStyled(Label$3)(templateObject_3$
|
|
11839
|
+
var StyledLabel = newStyled(Label$3)(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11840
11840
|
var theme = _a.theme;
|
|
11841
11841
|
return theme.component.radio.textSize;
|
|
11842
11842
|
}, function (_a) {
|
|
@@ -11850,9 +11850,9 @@ var RadioInput = function (_a) {
|
|
|
11850
11850
|
var value = event.currentTarget.value;
|
|
11851
11851
|
onChange({ value: value, label: label });
|
|
11852
11852
|
};
|
|
11853
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11853
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$E, __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(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11854
11854
|
};
|
|
11855
|
-
var templateObject_1$
|
|
11855
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$x;
|
|
11856
11856
|
|
|
11857
11857
|
var RadioGroupInput = function (_a) {
|
|
11858
11858
|
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;
|
|
@@ -11866,37 +11866,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11866
11866
|
}) }), void 0));
|
|
11867
11867
|
};
|
|
11868
11868
|
|
|
11869
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11870
|
-
var Container$
|
|
11869
|
+
var Wrapper$3 = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
11870
|
+
var Container$D = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
11871
11871
|
var Minimalistic = function (_a) {
|
|
11872
11872
|
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;
|
|
11873
11873
|
var theme = useTheme();
|
|
11874
|
-
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$
|
|
11874
|
+
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$D, __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$D, __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));
|
|
11875
11875
|
};
|
|
11876
|
-
var templateObject_1$
|
|
11876
|
+
var templateObject_1$W, templateObject_2$F;
|
|
11877
11877
|
|
|
11878
|
-
var Container$
|
|
11879
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11880
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11881
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11878
|
+
var Container$C = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11879
|
+
var Title$5 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __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; });
|
|
11880
|
+
var Details$1 = newStyled.span(templateObject_3$w || (templateObject_3$w = __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; });
|
|
11881
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
11882
11882
|
var Simple = function (_a) {
|
|
11883
11883
|
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;
|
|
11884
11884
|
var theme = useTheme();
|
|
11885
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11885
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$C, { 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));
|
|
11886
11886
|
};
|
|
11887
|
-
var templateObject_1$
|
|
11887
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$w, templateObject_4$o;
|
|
11888
11888
|
|
|
11889
11889
|
var Bundle = {
|
|
11890
11890
|
Minimalistic: Minimalistic,
|
|
11891
11891
|
Simple: Simple,
|
|
11892
11892
|
};
|
|
11893
11893
|
|
|
11894
|
-
var Container$
|
|
11894
|
+
var Container$B = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
11895
11895
|
var Tag$1 = function (_a) {
|
|
11896
11896
|
var text = _a.text, className = _a.className;
|
|
11897
|
-
return jsxRuntime.jsx(Container$
|
|
11897
|
+
return jsxRuntime.jsx(Container$B, __assign$1({ className: className }, { children: text }), void 0);
|
|
11898
11898
|
};
|
|
11899
|
-
var templateObject_1$
|
|
11899
|
+
var templateObject_1$U;
|
|
11900
11900
|
|
|
11901
11901
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11902
11902
|
switch (size) {
|
|
@@ -11999,11 +11999,11 @@ var Timer = function (_a) {
|
|
|
11999
11999
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12000
12000
|
};
|
|
12001
12001
|
|
|
12002
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
12002
|
+
var Label$1 = newStyled.span(templateObject_1$T || (templateObject_1$T = __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) {
|
|
12003
12003
|
var color = _a.color;
|
|
12004
12004
|
return color;
|
|
12005
12005
|
});
|
|
12006
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12006
|
+
var MandatoryIcon = newStyled.span(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12007
12007
|
var color = _a.color;
|
|
12008
12008
|
return color;
|
|
12009
12009
|
});
|
|
@@ -12012,7 +12012,7 @@ var InputLabel = function (_a) {
|
|
|
12012
12012
|
var theme = useTheme();
|
|
12013
12013
|
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));
|
|
12014
12014
|
};
|
|
12015
|
-
var templateObject_1$
|
|
12015
|
+
var templateObject_1$T, templateObject_2$D;
|
|
12016
12016
|
|
|
12017
12017
|
/**
|
|
12018
12018
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12066,14 +12066,14 @@ var formatPrice = function (value, _a) {
|
|
|
12066
12066
|
}).format(valueToFormat);
|
|
12067
12067
|
};
|
|
12068
12068
|
|
|
12069
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12070
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12069
|
+
var ErrorText = newStyled.h3(templateObject_1$S || (templateObject_1$S = __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; });
|
|
12070
|
+
var ErrorContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
12071
12071
|
var Error$1 = function (_a) {
|
|
12072
12072
|
var error = _a.error;
|
|
12073
12073
|
var theme = useTheme();
|
|
12074
12074
|
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));
|
|
12075
12075
|
};
|
|
12076
|
-
var templateObject_1$
|
|
12076
|
+
var templateObject_1$S, templateObject_2$C;
|
|
12077
12077
|
|
|
12078
12078
|
var containerByStatus = function (theme, status) {
|
|
12079
12079
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12082,11 +12082,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12082
12082
|
return theme.colors.semantic.urgent.color;
|
|
12083
12083
|
return '';
|
|
12084
12084
|
};
|
|
12085
|
-
var Container$
|
|
12085
|
+
var Container$A = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12086
12086
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12087
12087
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12088
12088
|
});
|
|
12089
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12089
|
+
var StyledInput = newStyled.input(templateObject_2$B || (templateObject_2$B = __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) {
|
|
12090
12090
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12091
12091
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12092
12092
|
}, function (_a) {
|
|
@@ -12141,13 +12141,13 @@ var StyledInput = newStyled.input(templateObject_2$A || (templateObject_2$A = __
|
|
|
12141
12141
|
return hasValue &&
|
|
12142
12142
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12143
12143
|
});
|
|
12144
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12144
|
+
var InputWrapper = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12145
12145
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12146
12146
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12147
12147
|
});
|
|
12148
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12149
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12150
|
-
var templateObject_1$
|
|
12148
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
12149
|
+
var ClearInput = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
12150
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$v, templateObject_4$n, templateObject_5$e;
|
|
12151
12151
|
|
|
12152
12152
|
var BaseInput = function (_a) {
|
|
12153
12153
|
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"]);
|
|
@@ -12170,7 +12170,7 @@ var BaseInput = function (_a) {
|
|
|
12170
12170
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12171
12171
|
}, [status]);
|
|
12172
12172
|
var hasValue = Boolean(value);
|
|
12173
|
-
return (jsxRuntime.jsxs(Container$
|
|
12173
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12174
12174
|
onChange(event.target.value, event);
|
|
12175
12175
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12176
12176
|
onChange('', { target: { value: '' } });
|
|
@@ -12191,11 +12191,11 @@ var Button$1 = function (_a) {
|
|
|
12191
12191
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12192
12192
|
};
|
|
12193
12193
|
|
|
12194
|
-
var Container$
|
|
12194
|
+
var Container$z = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
12195
12195
|
var theme = _a.theme;
|
|
12196
12196
|
return theme.component.inputCustom.input.borderRadius;
|
|
12197
12197
|
});
|
|
12198
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12198
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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) {
|
|
12199
12199
|
var theme = _a.theme;
|
|
12200
12200
|
return theme.component.inputCustom.button.borderRadius;
|
|
12201
12201
|
});
|
|
@@ -12208,23 +12208,23 @@ var Custom = function (_a) {
|
|
|
12208
12208
|
text: text,
|
|
12209
12209
|
disabled: rest.disabled,
|
|
12210
12210
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12211
|
-
return (jsxRuntime.jsx(Container$
|
|
12211
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$1, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12212
12212
|
};
|
|
12213
|
-
var templateObject_1$
|
|
12213
|
+
var templateObject_1$Q, templateObject_2$A;
|
|
12214
12214
|
|
|
12215
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12215
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12216
12216
|
var size = _a.size;
|
|
12217
12217
|
return (size === 'small' ? '36px' : '');
|
|
12218
12218
|
});
|
|
12219
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12220
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12219
|
+
var SuccessMessage = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
12220
|
+
var SuccessText = newStyled.span(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
12221
12221
|
var Success = function (_a) {
|
|
12222
12222
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12223
12223
|
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));
|
|
12224
12224
|
};
|
|
12225
|
-
var templateObject_1$
|
|
12225
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$u;
|
|
12226
12226
|
|
|
12227
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12227
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
12228
12228
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12229
12229
|
return status === exports.InputValidationType.Empty &&
|
|
12230
12230
|
type === 'primary' &&
|
|
@@ -12241,21 +12241,21 @@ var BasePlusButton = function (_a) {
|
|
|
12241
12241
|
}
|
|
12242
12242
|
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));
|
|
12243
12243
|
};
|
|
12244
|
-
var templateObject_1$
|
|
12244
|
+
var templateObject_1$O;
|
|
12245
12245
|
|
|
12246
|
-
var Container$
|
|
12247
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12246
|
+
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12247
|
+
var IconContainer$4 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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; });
|
|
12248
12248
|
var BasePlusIcon = function (_a) {
|
|
12249
12249
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12250
12250
|
var theme = useTheme();
|
|
12251
12251
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12252
|
-
return (jsxRuntime.jsx(Container$
|
|
12252
|
+
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12253
12253
|
? theme.colors.shades['700'].color
|
|
12254
12254
|
: status === exports.InputValidationType.Error
|
|
12255
12255
|
? theme.colors.semantic.urgent.color
|
|
12256
12256
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12257
12257
|
};
|
|
12258
|
-
var templateObject_1$
|
|
12258
|
+
var templateObject_1$N, templateObject_2$y;
|
|
12259
12259
|
|
|
12260
12260
|
var Input$1 = {
|
|
12261
12261
|
Simple: BaseInput,
|
|
@@ -12264,7 +12264,7 @@ var Input$1 = {
|
|
|
12264
12264
|
SimplePlusIcon: BasePlusIcon,
|
|
12265
12265
|
};
|
|
12266
12266
|
|
|
12267
|
-
var Container$
|
|
12267
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
12268
12268
|
var width = _a.width;
|
|
12269
12269
|
return width;
|
|
12270
12270
|
}, function (_a) {
|
|
@@ -12280,11 +12280,11 @@ var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
12280
12280
|
var PaymentMethod = function (_a) {
|
|
12281
12281
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12282
12282
|
var theme = useTheme();
|
|
12283
|
-
return (jsxRuntime.jsx(Container$
|
|
12283
|
+
return (jsxRuntime.jsx(Container$x, __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));
|
|
12284
12284
|
};
|
|
12285
|
-
var templateObject_1$
|
|
12285
|
+
var templateObject_1$M;
|
|
12286
12286
|
|
|
12287
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12287
|
+
var Text$5 = newStyled.h3(templateObject_1$L || (templateObject_1$L = __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) {
|
|
12288
12288
|
var backgroundColor = _a.backgroundColor;
|
|
12289
12289
|
return backgroundColor;
|
|
12290
12290
|
}, function (_a) {
|
|
@@ -12296,11 +12296,11 @@ var OfferBanner = function (_a) {
|
|
|
12296
12296
|
var theme = useTheme();
|
|
12297
12297
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12298
12298
|
};
|
|
12299
|
-
var templateObject_1$
|
|
12299
|
+
var templateObject_1$L;
|
|
12300
12300
|
|
|
12301
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12302
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12303
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12301
|
+
var Wrapper$2 = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
12302
|
+
var GrandTotal = newStyled.h1(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\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: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12303
|
+
var Currency = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12304
12304
|
var theme = _a.theme;
|
|
12305
12305
|
return theme.component.total.basicTotal.currency.color;
|
|
12306
12306
|
}, function (_a) {
|
|
@@ -12313,15 +12313,15 @@ var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __make
|
|
|
12313
12313
|
var theme = _a.theme;
|
|
12314
12314
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12315
12315
|
});
|
|
12316
|
-
var Container$
|
|
12317
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12316
|
+
var Container$w = newStyled.div(templateObject_4$m || (templateObject_4$m = __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; });
|
|
12317
|
+
var DiscountText = newStyled.h3(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12318
12318
|
var theme = _a.theme;
|
|
12319
12319
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12320
12320
|
}, function (_a) {
|
|
12321
12321
|
var theme = _a.theme;
|
|
12322
12322
|
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12323
12323
|
});
|
|
12324
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12324
|
+
var DiscountAmount = newStyled.h3(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12325
12325
|
var theme = _a.theme;
|
|
12326
12326
|
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12327
12327
|
}, function (_a) {
|
|
@@ -12334,23 +12334,23 @@ var DiscountAmount = newStyled.h3(templateObject_6$a || (templateObject_6$a = __
|
|
|
12334
12334
|
var Total = function (_a) {
|
|
12335
12335
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12336
12336
|
var theme = useTheme();
|
|
12337
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12337
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12338
12338
|
};
|
|
12339
|
-
var templateObject_1$
|
|
12339
|
+
var templateObject_1$K, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$d, templateObject_6$b;
|
|
12340
12340
|
|
|
12341
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12341
|
+
var Wrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12342
12342
|
var color = _a.color;
|
|
12343
12343
|
return color;
|
|
12344
12344
|
});
|
|
12345
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12346
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12345
|
+
var ItemContainer = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
12346
|
+
var Item$2 = newStyled.h4(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12347
12347
|
var theme = _a.theme;
|
|
12348
12348
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12349
12349
|
}, function (_a) {
|
|
12350
12350
|
var theme = _a.theme;
|
|
12351
12351
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12352
12352
|
});
|
|
12353
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12353
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12354
12354
|
var color = _a.color;
|
|
12355
12355
|
return color;
|
|
12356
12356
|
});
|
|
@@ -12363,23 +12363,23 @@ var Subtotal = function (_a) {
|
|
|
12363
12363
|
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));
|
|
12364
12364
|
})] }), void 0));
|
|
12365
12365
|
};
|
|
12366
|
-
var templateObject_1$
|
|
12366
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
12367
12367
|
|
|
12368
12368
|
var Totals = {
|
|
12369
12369
|
Total: Total,
|
|
12370
12370
|
Subtotal: Subtotal,
|
|
12371
12371
|
};
|
|
12372
12372
|
|
|
12373
|
-
var Container$
|
|
12374
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12375
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12376
|
-
var Details = newStyled.span(templateObject_4$
|
|
12373
|
+
var Container$v = newStyled.div(templateObject_1$I || (templateObject_1$I = __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; });
|
|
12374
|
+
var IconContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
12375
|
+
var Text$4 = newStyled.p(templateObject_3$r || (templateObject_3$r = __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; });
|
|
12376
|
+
var Details = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12377
12377
|
var Note = function (_a) {
|
|
12378
12378
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12379
12379
|
var theme = useTheme();
|
|
12380
|
-
return (jsxRuntime.jsxs(Container$
|
|
12380
|
+
return (jsxRuntime.jsxs(Container$v, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12381
12381
|
};
|
|
12382
|
-
var templateObject_1$
|
|
12382
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$r, templateObject_4$k;
|
|
12383
12383
|
|
|
12384
12384
|
/* eslint-disable no-param-reassign */
|
|
12385
12385
|
var index$1 = function (breakpoints) {
|
|
@@ -12465,79 +12465,79 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12465
12465
|
literal: true,
|
|
12466
12466
|
});
|
|
12467
12467
|
|
|
12468
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12469
|
-
var Line = newStyled.div(templateObject_2$
|
|
12470
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12468
|
+
var Title$4 = newStyled.h1(templateObject_1$H || (templateObject_1$H = __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; });
|
|
12469
|
+
var Line = newStyled.div(templateObject_2$u || (templateObject_2$u = __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; });
|
|
12470
|
+
var Row$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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({
|
|
12471
12471
|
flexDirection: ['column', 'row'],
|
|
12472
12472
|
}));
|
|
12473
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12473
|
+
var Col$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __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({
|
|
12474
12474
|
margin: ['0', '0 1.25rem'],
|
|
12475
12475
|
marginBottom: ['1.875rem', '0'],
|
|
12476
12476
|
alignItems: ['center', 'flex-start'],
|
|
12477
12477
|
textAlign: ['center', 'inherit'],
|
|
12478
12478
|
width: ['100%', 'inherit'],
|
|
12479
12479
|
}));
|
|
12480
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12480
|
+
var IconContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
|
|
12481
12481
|
marginBottom: ['1.875rem', '0'],
|
|
12482
12482
|
width: ['auto', '1.375rem'],
|
|
12483
12483
|
}));
|
|
12484
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12484
|
+
var SectionTitle = newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
12485
12485
|
display: ['block', 'flex'],
|
|
12486
12486
|
}), function (_a) {
|
|
12487
12487
|
var theme = _a.theme;
|
|
12488
12488
|
return theme.colors.shades['700'].color;
|
|
12489
12489
|
});
|
|
12490
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
12490
|
+
var SectionDetails = newStyled.p(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-left: ", ";\n margin-top: 0.625rem;\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-left: ", ";\n margin-top: 0.625rem;\n"])), function (props) { return props.color; }, function (_a) {
|
|
12491
12491
|
var _b;
|
|
12492
12492
|
var theme = _a.theme;
|
|
12493
12493
|
return (_b = theme.component.deliveryDetails.SectionDetails) === null || _b === void 0 ? void 0 : _b.marginLeft;
|
|
12494
12494
|
});
|
|
12495
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
12495
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
12496
12496
|
var DeliveryDetails = function (_a) {
|
|
12497
12497
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12498
12498
|
var theme = useTheme();
|
|
12499
12499
|
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));
|
|
12500
12500
|
};
|
|
12501
|
-
var templateObject_1$
|
|
12501
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q, templateObject_4$j, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
12502
12502
|
|
|
12503
|
-
var Container$
|
|
12504
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12503
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
12504
|
+
var Text$3 = newStyled.p(templateObject_2$t || (templateObject_2$t = __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; });
|
|
12505
12505
|
var ScrollToTop = function (_a) {
|
|
12506
12506
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12507
12507
|
var theme = useTheme();
|
|
12508
12508
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12509
|
-
return (jsxRuntime.jsxs(Container$
|
|
12509
|
+
return (jsxRuntime.jsxs(Container$u, __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));
|
|
12510
12510
|
};
|
|
12511
|
-
var templateObject_1$
|
|
12511
|
+
var templateObject_1$G, templateObject_2$t;
|
|
12512
12512
|
|
|
12513
12513
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12514
|
-
var Container$
|
|
12514
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
12515
12515
|
var color = _a.color;
|
|
12516
12516
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12517
12517
|
});
|
|
12518
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12518
|
+
var H1 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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; });
|
|
12519
12519
|
var OrderBar = function (_a) {
|
|
12520
12520
|
var message = _a.message, color = _a.color;
|
|
12521
12521
|
var theme = useTheme();
|
|
12522
|
-
return (jsxRuntime.jsxs(Container$
|
|
12522
|
+
return (jsxRuntime.jsxs(Container$t, __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));
|
|
12523
12523
|
};
|
|
12524
|
-
var templateObject_1$
|
|
12524
|
+
var templateObject_1$F, templateObject_2$s;
|
|
12525
12525
|
|
|
12526
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12527
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12528
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12529
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12526
|
+
var TableElement$1 = 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; });
|
|
12527
|
+
var TableCell$1 = newStyled.td(templateObject_2$r || (templateObject_2$r = __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; });
|
|
12528
|
+
var TableHead$1 = newStyled.th(templateObject_3$p || (templateObject_3$p = __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; });
|
|
12529
|
+
var TableRow$1 = newStyled.tr(templateObject_4$i || (templateObject_4$i = __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; });
|
|
12530
12530
|
var SizeTable = function (_a) {
|
|
12531
12531
|
var headers = _a.headers, data = _a.data;
|
|
12532
12532
|
var theme = useTheme();
|
|
12533
12533
|
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));
|
|
12534
12534
|
};
|
|
12535
|
-
var templateObject_1$
|
|
12535
|
+
var templateObject_1$E, templateObject_2$r, templateObject_3$p, templateObject_4$i;
|
|
12536
12536
|
|
|
12537
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12538
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12539
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12540
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12537
|
+
var TableElement = newStyled.table(templateObject_1$D || (templateObject_1$D = __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; });
|
|
12538
|
+
var TableCell = newStyled.td(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1rem;\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 1rem;\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; });
|
|
12539
|
+
var TableHead = 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; });
|
|
12540
|
+
var TableRow = newStyled.tr(templateObject_4$h || (templateObject_4$h = __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; });
|
|
12541
12541
|
var SizeChartTable = function (_a) {
|
|
12542
12542
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12543
12543
|
var theme = useTheme();
|
|
@@ -12568,18 +12568,18 @@ var SizeChartTable = function (_a) {
|
|
|
12568
12568
|
backgroundColor: getCellColor(index, cell),
|
|
12569
12569
|
}, 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));
|
|
12570
12570
|
};
|
|
12571
|
-
var templateObject_1$
|
|
12571
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$o, templateObject_4$h;
|
|
12572
12572
|
|
|
12573
|
-
var Img = newStyled.img(templateObject_1$
|
|
12573
|
+
var Img = newStyled.img(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
12574
12574
|
var Image = function (_a) {
|
|
12575
12575
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
12576
12576
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12577
12577
|
};
|
|
12578
|
-
var templateObject_1$
|
|
12578
|
+
var templateObject_1$C;
|
|
12579
12579
|
|
|
12580
|
-
var Container$
|
|
12581
|
-
var ImageContainer$
|
|
12582
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
12580
|
+
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12581
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12582
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12583
12583
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12584
12584
|
}));
|
|
12585
12585
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12602,7 +12602,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12602
12602
|
margin: '0.063rem 0',
|
|
12603
12603
|
});
|
|
12604
12604
|
});
|
|
12605
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12605
|
+
var PriceContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
12606
12606
|
var withTag = _a.withTag; _a.theme;
|
|
12607
12607
|
return withTag
|
|
12608
12608
|
? mediaQueries({
|
|
@@ -12611,13 +12611,13 @@ var PriceContainer = newStyled.div(templateObject_4$f || (templateObject_4$f = _
|
|
|
12611
12611
|
})
|
|
12612
12612
|
: 'justify-content: end';
|
|
12613
12613
|
});
|
|
12614
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12614
|
+
var Quantity = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
12615
12615
|
var SimpleOrderItem = function (_a) {
|
|
12616
12616
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12617
12617
|
var theme = useTheme();
|
|
12618
|
-
return (jsxRuntime.jsxs(Container$
|
|
12618
|
+
return (jsxRuntime.jsxs(Container$s, { children: [jsxRuntime.jsxs(ImageContainer$5, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12619
12619
|
};
|
|
12620
|
-
var templateObject_1$
|
|
12620
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$n, templateObject_4$g, templateObject_5$b;
|
|
12621
12621
|
|
|
12622
12622
|
function formatDate(date) {
|
|
12623
12623
|
var day = date.getDate();
|
|
@@ -12626,30 +12626,31 @@ function formatDate(date) {
|
|
|
12626
12626
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12627
12627
|
}
|
|
12628
12628
|
|
|
12629
|
-
var Container$
|
|
12630
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12631
|
-
var Content = newStyled.div(templateObject_3$
|
|
12632
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12633
|
-
var DateText = newStyled.span(templateObject_5$
|
|
12634
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
12635
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
12636
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
12637
|
-
var ReviewDescription = newStyled.p(templateObject_9$
|
|
12638
|
-
var ImageContainer$
|
|
12639
|
-
var
|
|
12629
|
+
var Container$r = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
12630
|
+
var Heading = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12631
|
+
var Content$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12632
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0 0 8px 0;\n\n @media (min-width: 768px) {\n margin: 0 0 50px 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0 0 8px 0;\n\n @media (min-width: 768px) {\n margin: 0 0 50px 0;\n }\n"])));
|
|
12633
|
+
var DateText$1 = newStyled.span(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12634
|
+
var VariantText = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n float: right;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n float: right;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12635
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
12636
|
+
var ReviewTitle$1 = newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12637
|
+
var ReviewDescription$1 = newStyled.p(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12638
|
+
var ImageContainer$4 = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
12639
|
+
var ImageSpace = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
12640
|
+
var Review$1 = function (_a) {
|
|
12640
12641
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, reviewVariant = _a.reviewVariant;
|
|
12641
12642
|
var theme = useTheme();
|
|
12642
|
-
return (jsxRuntime.jsxs(Container$
|
|
12643
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }), void 0), jsxRuntime.jsxs(ImageContainer$4, { children: [image && jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0), !image && jsxRuntime.jsx(ImageSpace, {}, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0)] }, void 0));
|
|
12643
12644
|
};
|
|
12644
|
-
var templateObject_1$
|
|
12645
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$m, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
12645
12646
|
|
|
12646
|
-
var List = newStyled.ul(templateObject_1$
|
|
12647
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12648
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12649
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12650
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12651
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12652
|
-
var templateObject_1$
|
|
12647
|
+
var List = newStyled.ul(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12648
|
+
var Item$1 = newStyled.li(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
12649
|
+
var DropdownWrapper = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
12650
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
12651
|
+
var StyledDropdown = newStyled.ul(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
12652
|
+
var DropdownItem = newStyled.li(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
12653
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$l, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12653
12654
|
|
|
12654
12655
|
var DropdownListIcons = function (_a) {
|
|
12655
12656
|
var items = _a.items;
|
|
@@ -12662,7 +12663,7 @@ var Dropdown = function (_a) {
|
|
|
12662
12663
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12663
12664
|
};
|
|
12664
12665
|
|
|
12665
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12666
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
12666
12667
|
var AmazonButton = function (_a) {
|
|
12667
12668
|
var onClick = _a.onClick;
|
|
12668
12669
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12671,23 +12672,23 @@ var PaypalButton = function (_a) {
|
|
|
12671
12672
|
var onClick = _a.onClick;
|
|
12672
12673
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12673
12674
|
};
|
|
12674
|
-
var templateObject_1$
|
|
12675
|
+
var templateObject_1$y;
|
|
12675
12676
|
|
|
12676
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12677
|
-
var Col = newStyled.div(templateObject_2$
|
|
12678
|
-
var Row = newStyled.div(templateObject_3$
|
|
12677
|
+
var Wrapper = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
12678
|
+
var Col = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12679
|
+
var Row = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
12679
12680
|
return props.rightToLeft &&
|
|
12680
12681
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12681
12682
|
});
|
|
12682
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12683
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12684
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
12683
|
+
var H5 = newStyled.h5(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12684
|
+
var H3 = newStyled.h3(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12685
|
+
var FreeShipping = newStyled.span(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12685
12686
|
var CrossSellCheckbox = function (_a) {
|
|
12686
12687
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12687
12688
|
var theme = useTheme();
|
|
12688
12689
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12689
12690
|
};
|
|
12690
|
-
var templateObject_1$
|
|
12691
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
12691
12692
|
|
|
12692
12693
|
var index = /*#__PURE__*/Object.freeze({
|
|
12693
12694
|
__proto__: null,
|
|
@@ -12700,7 +12701,7 @@ var Spacing = function (_a) {
|
|
|
12700
12701
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12701
12702
|
};
|
|
12702
12703
|
|
|
12703
|
-
var Container$
|
|
12704
|
+
var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
12704
12705
|
var height = _a.height;
|
|
12705
12706
|
return (height ? height : '1.5em');
|
|
12706
12707
|
}, function (_a) {
|
|
@@ -12725,11 +12726,11 @@ var Container$p = newStyled.div(templateObject_1$v || (templateObject_1$v = __ma
|
|
|
12725
12726
|
var SkeletonBox = function (_a) {
|
|
12726
12727
|
var width = _a.width, height = _a.height;
|
|
12727
12728
|
var theme = useTheme();
|
|
12728
|
-
return jsxRuntime.jsx(Container$
|
|
12729
|
+
return jsxRuntime.jsx(Container$q, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12729
12730
|
};
|
|
12730
|
-
var templateObject_1$
|
|
12731
|
+
var templateObject_1$w;
|
|
12731
12732
|
|
|
12732
|
-
var ImageContainer$
|
|
12733
|
+
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12733
12734
|
var width = _a.width, height = _a.height;
|
|
12734
12735
|
return ({
|
|
12735
12736
|
position: 'relative',
|
|
@@ -12737,9 +12738,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12737
12738
|
height: height,
|
|
12738
12739
|
});
|
|
12739
12740
|
});
|
|
12740
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12741
|
-
var Container$
|
|
12742
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12741
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12742
|
+
var Container$p = newStyled.a(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12743
|
+
var Title$2 = newStyled.p(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12743
12744
|
var getStylesBySize$1 = function (size) {
|
|
12744
12745
|
switch (size) {
|
|
12745
12746
|
case exports.ComponentSize.Medium:
|
|
@@ -12765,9 +12766,9 @@ var getStylesBySize$1 = function (size) {
|
|
|
12765
12766
|
};
|
|
12766
12767
|
}
|
|
12767
12768
|
};
|
|
12768
|
-
var TopTagContainer$1 = newStyled.div(templateObject_4$
|
|
12769
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_5$
|
|
12770
|
-
var MarginTopContainer = newStyled.div(templateObject_6$
|
|
12769
|
+
var TopTagContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12770
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12771
|
+
var MarginTopContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12771
12772
|
var ProductItemMobile = function (_a) {
|
|
12772
12773
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading;
|
|
12773
12774
|
var theme = useTheme();
|
|
@@ -12784,32 +12785,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12784
12785
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12785
12786
|
};
|
|
12786
12787
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12787
|
-
return (jsxs(Container$
|
|
12788
|
+
return (jsxs(Container$p, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
|
|
12788
12789
|
};
|
|
12789
|
-
var templateObject_1$
|
|
12790
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12790
12791
|
|
|
12791
|
-
var Container$
|
|
12792
|
+
var Container$o = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12792
12793
|
function withProductGrid(ProductItemComponent, data) {
|
|
12793
12794
|
function WithProductGrid(props) {
|
|
12794
|
-
return (jsxRuntime.jsx(Container$
|
|
12795
|
+
return (jsxRuntime.jsx(Container$o, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12795
12796
|
}
|
|
12796
12797
|
/* istanbul ignore next */
|
|
12797
12798
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12798
12799
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12799
12800
|
return WithProductGrid;
|
|
12800
12801
|
}
|
|
12801
|
-
var templateObject_1$
|
|
12802
|
+
var templateObject_1$u;
|
|
12802
12803
|
|
|
12803
12804
|
var Collection = {
|
|
12804
12805
|
ProductItemMobile: ProductItemMobile,
|
|
12805
12806
|
withProductGrid: withProductGrid,
|
|
12806
12807
|
};
|
|
12807
12808
|
|
|
12808
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12809
|
+
var Backdrop = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
12809
12810
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12810
12811
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12811
12812
|
});
|
|
12812
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12813
|
+
var Sidebar = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
12813
12814
|
var width = _a.width;
|
|
12814
12815
|
return width;
|
|
12815
12816
|
}, function (_a) {
|
|
@@ -12850,28 +12851,28 @@ var Drawer = function (_a) {
|
|
|
12850
12851
|
}, [isOpen, onClose, onOpen]);
|
|
12851
12852
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12852
12853
|
};
|
|
12853
|
-
var templateObject_1$
|
|
12854
|
+
var templateObject_1$t, templateObject_2$k;
|
|
12854
12855
|
|
|
12855
|
-
var Container$
|
|
12856
|
+
var Container$n = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12856
12857
|
var size = _a.size;
|
|
12857
12858
|
return (size ? size : '100%');
|
|
12858
12859
|
}, function (_a) {
|
|
12859
12860
|
var size = _a.size;
|
|
12860
12861
|
return (size ? size : '100%');
|
|
12861
12862
|
});
|
|
12862
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12863
|
+
var Animation = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
12863
12864
|
var animationDuration = _a.animationDuration;
|
|
12864
12865
|
return animationDuration;
|
|
12865
12866
|
});
|
|
12866
12867
|
var Spinner = function (_a) {
|
|
12867
12868
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12868
|
-
return (jsxRuntime.jsx(Container$
|
|
12869
|
+
return (jsxRuntime.jsx(Container$n, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12869
12870
|
};
|
|
12870
|
-
var templateObject_1$
|
|
12871
|
+
var templateObject_1$s, templateObject_2$j;
|
|
12871
12872
|
|
|
12872
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12873
|
-
var LI = newStyled.li(templateObject_2$
|
|
12874
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12873
|
+
var UL = newStyled.ul(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
12874
|
+
var LI = newStyled.li(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
12875
|
+
var CloseIconContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
12875
12876
|
var Tags = function (_a) {
|
|
12876
12877
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12877
12878
|
var theme = useTheme();
|
|
@@ -12879,7 +12880,7 @@ var Tags = function (_a) {
|
|
|
12879
12880
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12880
12881
|
}) }), void 0));
|
|
12881
12882
|
};
|
|
12882
|
-
var templateObject_1$
|
|
12883
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$i;
|
|
12883
12884
|
|
|
12884
12885
|
function FilteringDropdown(_a) {
|
|
12885
12886
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -12912,12 +12913,12 @@ function FilteringDropdown(_a) {
|
|
|
12912
12913
|
}) }, void 0)] }), void 0));
|
|
12913
12914
|
}
|
|
12914
12915
|
|
|
12915
|
-
var Container$
|
|
12916
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12917
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12916
|
+
var Container$m = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
12917
|
+
var IconContainer$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12918
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12918
12919
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12919
12920
|
}));
|
|
12920
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12921
|
+
var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
12921
12922
|
var bold = _a.bold;
|
|
12922
12923
|
return (bold ? '700' : '500');
|
|
12923
12924
|
}, function (_a) {
|
|
@@ -12929,12 +12930,12 @@ var PageNumber = newStyled.span(templateObject_4$a || (templateObject_4$a = __ma
|
|
|
12929
12930
|
}, mediaQueries({
|
|
12930
12931
|
fontSize: ['1rem', '1.25rem'],
|
|
12931
12932
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12932
|
-
|
|
12933
|
+
minWidth: ['1.5rem', '1.875rem'],
|
|
12933
12934
|
}), function (_a) {
|
|
12934
12935
|
var background = _a.background;
|
|
12935
12936
|
return background || 'unset';
|
|
12936
12937
|
});
|
|
12937
|
-
var templateObject_1$
|
|
12938
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$h, templateObject_4$b;
|
|
12938
12939
|
|
|
12939
12940
|
var Pagination = function (_a) {
|
|
12940
12941
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -12980,7 +12981,7 @@ var Pagination = function (_a) {
|
|
|
12980
12981
|
}
|
|
12981
12982
|
return pages;
|
|
12982
12983
|
}, [from, page, showReducedPages, to]);
|
|
12983
|
-
return (jsxRuntime.jsxs(Container$
|
|
12984
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12984
12985
|
};
|
|
12985
12986
|
|
|
12986
12987
|
var PaginatorBlog = function (_a) {
|
|
@@ -12994,12 +12995,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12994
12995
|
setPage(page);
|
|
12995
12996
|
onChange(page);
|
|
12996
12997
|
};
|
|
12997
|
-
return (jsxRuntime.jsxs(Container$
|
|
12998
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
12998
12999
|
? theme.colors.shades['white'].color
|
|
12999
13000
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13000
13001
|
};
|
|
13001
13002
|
|
|
13002
|
-
var Container$
|
|
13003
|
+
var Container$l = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
13003
13004
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13004
13005
|
}));
|
|
13005
13006
|
var Description$1 = newStyled.div({
|
|
@@ -13016,25 +13017,25 @@ var Description$1 = newStyled.div({
|
|
|
13016
13017
|
var ProductItem = function (_a) {
|
|
13017
13018
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13018
13019
|
var theme = useTheme();
|
|
13019
|
-
return (jsxRuntime.jsxs(Container$
|
|
13020
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13020
13021
|
};
|
|
13021
|
-
var templateObject_1$
|
|
13022
|
+
var templateObject_1$p;
|
|
13022
13023
|
|
|
13023
|
-
var Container$
|
|
13024
|
+
var Container$k = newStyled.div({
|
|
13024
13025
|
display: 'flex',
|
|
13025
13026
|
justifyContent: 'center',
|
|
13026
13027
|
padding: '1rem',
|
|
13027
13028
|
});
|
|
13028
13029
|
var Footer = function (_a) {
|
|
13029
13030
|
var text = _a.text, onClick = _a.onClick;
|
|
13030
|
-
return (jsxRuntime.jsx(Container$
|
|
13031
|
+
return (jsxRuntime.jsx(Container$k, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13031
13032
|
};
|
|
13032
13033
|
|
|
13033
13034
|
var Ul = newStyled.ul({
|
|
13034
13035
|
margin: '0px',
|
|
13035
13036
|
padding: '0px',
|
|
13036
13037
|
});
|
|
13037
|
-
var Li = newStyled.li(templateObject_1$
|
|
13038
|
+
var Li = newStyled.li(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
13038
13039
|
padding: [0, '0rem 1rem'],
|
|
13039
13040
|
borderRadius: [0, '0.5rem'],
|
|
13040
13041
|
}));
|
|
@@ -13046,20 +13047,20 @@ var Anchor = newStyled.a({
|
|
|
13046
13047
|
padding: 0,
|
|
13047
13048
|
textDecoration: 'none',
|
|
13048
13049
|
});
|
|
13049
|
-
var Container$
|
|
13050
|
+
var Container$j = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
13050
13051
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13051
13052
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13052
13053
|
borderRadius: ['0', '0.5rem'],
|
|
13053
13054
|
}));
|
|
13054
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13055
|
+
var Header$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13055
13056
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13056
13057
|
}));
|
|
13057
13058
|
var ResultsPanel = function (_a) {
|
|
13058
13059
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13059
13060
|
var theme = useTheme();
|
|
13060
|
-
return (jsxRuntime.jsxs(Container$
|
|
13061
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13061
13062
|
};
|
|
13062
|
-
var templateObject_1$
|
|
13063
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$g;
|
|
13063
13064
|
|
|
13064
13065
|
var Input = newStyled.input(function (props) { return ({
|
|
13065
13066
|
padding: props.theme.component.input.padding,
|
|
@@ -13090,7 +13091,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13090
13091
|
},
|
|
13091
13092
|
}); });
|
|
13092
13093
|
|
|
13093
|
-
var Button = newStyled.button(templateObject_1$
|
|
13094
|
+
var Button = newStyled.button(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13094
13095
|
right: ['1rem', '7.75rem'],
|
|
13095
13096
|
top: ['0.75rem', '0.75rem'],
|
|
13096
13097
|
}));
|
|
@@ -13099,7 +13100,7 @@ var ClearButton = function (_a) {
|
|
|
13099
13100
|
var theme = useTheme();
|
|
13100
13101
|
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13101
13102
|
};
|
|
13102
|
-
var templateObject_1$
|
|
13103
|
+
var templateObject_1$n;
|
|
13103
13104
|
|
|
13104
13105
|
var useOnClickOutside = function (ref, handler) {
|
|
13105
13106
|
React$2.useEffect(function () {
|
|
@@ -13188,7 +13189,7 @@ var reducer = function (state, action) {
|
|
|
13188
13189
|
}
|
|
13189
13190
|
}
|
|
13190
13191
|
};
|
|
13191
|
-
var Container$
|
|
13192
|
+
var Container$i = newStyled.div({
|
|
13192
13193
|
position: 'relative',
|
|
13193
13194
|
display: 'flex',
|
|
13194
13195
|
});
|
|
@@ -13224,7 +13225,7 @@ var SearchBar = function (_a) {
|
|
|
13224
13225
|
onClose();
|
|
13225
13226
|
}
|
|
13226
13227
|
};
|
|
13227
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13228
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13228
13229
|
if (e.key === 'Enter') {
|
|
13229
13230
|
e.preventDefault();
|
|
13230
13231
|
e.stopPropagation();
|
|
@@ -13233,14 +13234,14 @@ var SearchBar = function (_a) {
|
|
|
13233
13234
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13234
13235
|
};
|
|
13235
13236
|
|
|
13236
|
-
var Container$
|
|
13237
|
+
var Container$h = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13237
13238
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13238
13239
|
return borderRadiusVariant &&
|
|
13239
13240
|
"\n border-radius: 40px;\n ";
|
|
13240
13241
|
});
|
|
13241
13242
|
// max-height: 31.875rem;
|
|
13242
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13243
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13243
|
+
var TopTagContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13244
|
+
var BottomTagContainer = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13244
13245
|
var settings = {
|
|
13245
13246
|
dots: true,
|
|
13246
13247
|
infinite: false,
|
|
@@ -13256,18 +13257,18 @@ var ImageProductWithTags = function (_a) {
|
|
|
13256
13257
|
var _a;
|
|
13257
13258
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
13258
13259
|
}, [slick]);
|
|
13259
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13260
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$h, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13260
13261
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13261
13262
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13262
13263
|
};
|
|
13263
|
-
var templateObject_1$
|
|
13264
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f;
|
|
13264
13265
|
|
|
13265
|
-
var Container$
|
|
13266
|
+
var Container$g = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13266
13267
|
var ProductGalleryMobile = function (_a) {
|
|
13267
13268
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13268
|
-
return (jsxRuntime.jsx(Container$
|
|
13269
|
+
return (jsxRuntime.jsx(Container$g, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }, void 0) }, void 0));
|
|
13269
13270
|
};
|
|
13270
|
-
var templateObject_1$
|
|
13271
|
+
var templateObject_1$l;
|
|
13271
13272
|
|
|
13272
13273
|
var Portal = function (_a) {
|
|
13273
13274
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13400,19 +13401,19 @@ var react = __toCommonJS(react_exports);
|
|
|
13400
13401
|
var visibleStyle = function (_a) {
|
|
13401
13402
|
var opened = _a.opened;
|
|
13402
13403
|
return opened
|
|
13403
|
-
? css(templateObject_1$
|
|
13404
|
+
? css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13404
13405
|
};
|
|
13405
13406
|
var transformStyle = function (_a) {
|
|
13406
13407
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13407
13408
|
return opened
|
|
13408
|
-
? css(templateObject_3$
|
|
13409
|
+
? css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13409
13410
|
};
|
|
13410
|
-
var Container$
|
|
13411
|
+
var Container$f = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13411
13412
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13412
13413
|
}), visibleStyle, transformStyle);
|
|
13413
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
13414
|
+
var Overlay = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
13414
13415
|
var Modal = function (_a) {
|
|
13415
|
-
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c;
|
|
13416
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
13416
13417
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
13417
13418
|
var onDismiss = function () {
|
|
13418
13419
|
if (!dismissable) {
|
|
@@ -13420,7 +13421,7 @@ var Modal = function (_a) {
|
|
|
13420
13421
|
}
|
|
13421
13422
|
close();
|
|
13422
13423
|
};
|
|
13423
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13424
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$f, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13424
13425
|
};
|
|
13425
13426
|
var modalEvent = function (id, detail) {
|
|
13426
13427
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13448,52 +13449,52 @@ var useModal = function (id) {
|
|
|
13448
13449
|
close: close,
|
|
13449
13450
|
}); }, [close, open, opened]);
|
|
13450
13451
|
};
|
|
13451
|
-
var templateObject_1$
|
|
13452
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
13452
13453
|
|
|
13453
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13454
|
+
var Text$2 = newStyled.span(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13454
13455
|
var Title$1 = function (_a) {
|
|
13455
13456
|
var title = _a.title;
|
|
13456
13457
|
var theme = useTheme();
|
|
13457
13458
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13458
13459
|
};
|
|
13459
|
-
var templateObject_1$
|
|
13460
|
+
var templateObject_1$j;
|
|
13460
13461
|
|
|
13461
|
-
var P = newStyled.p(templateObject_1$
|
|
13462
|
+
var P = newStyled.p(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13462
13463
|
var Promo = function (_a) {
|
|
13463
13464
|
var text = _a.text;
|
|
13464
13465
|
var theme = useTheme();
|
|
13465
13466
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13466
13467
|
};
|
|
13467
|
-
var templateObject_1$
|
|
13468
|
+
var templateObject_1$i;
|
|
13468
13469
|
|
|
13469
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13470
|
+
var Text$1 = newStyled.span(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13470
13471
|
var Description = function (_a) {
|
|
13471
13472
|
var text = _a.text;
|
|
13472
13473
|
var theme = useTheme();
|
|
13473
13474
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13474
13475
|
};
|
|
13475
|
-
var templateObject_1$
|
|
13476
|
+
var templateObject_1$h;
|
|
13476
13477
|
|
|
13477
|
-
var Container$
|
|
13478
|
-
var CloseButton = function (_a) {
|
|
13478
|
+
var Container$e = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13479
|
+
var CloseButton$1 = function (_a) {
|
|
13479
13480
|
var onClick = _a.onClick, size = _a.size;
|
|
13480
13481
|
var theme = useTheme();
|
|
13481
|
-
return (jsxRuntime.jsx(Container$
|
|
13482
|
+
return (jsxRuntime.jsx(Container$e, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13482
13483
|
};
|
|
13483
|
-
var templateObject_1$
|
|
13484
|
+
var templateObject_1$g;
|
|
13484
13485
|
|
|
13485
13486
|
var CartProductItem = {
|
|
13486
13487
|
Title: Title$1,
|
|
13487
13488
|
Tag: OfferBanner,
|
|
13488
13489
|
Promo: Promo,
|
|
13489
13490
|
Description: Description,
|
|
13490
|
-
CloseButton: CloseButton,
|
|
13491
|
+
CloseButton: CloseButton$1,
|
|
13491
13492
|
};
|
|
13492
13493
|
|
|
13493
|
-
var Container$
|
|
13494
|
-
var Item = newStyled.span(templateObject_2$
|
|
13495
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13496
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13494
|
+
var Container$d = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13495
|
+
var Item = newStyled.span(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13496
|
+
var Number$1 = newStyled(Item)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13497
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
13497
13498
|
var QuantityPicker = function (_a) {
|
|
13498
13499
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
13499
13500
|
var theme = useTheme();
|
|
@@ -13516,9 +13517,9 @@ var QuantityPicker = function (_a) {
|
|
|
13516
13517
|
return clamp(value);
|
|
13517
13518
|
});
|
|
13518
13519
|
}, [value, clamp]);
|
|
13519
|
-
return (jsxRuntime.jsxs(Container$
|
|
13520
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13520
13521
|
};
|
|
13521
|
-
var templateObject_1$
|
|
13522
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$d, templateObject_4$9;
|
|
13522
13523
|
|
|
13523
13524
|
var htmlReactParser = {exports: {}};
|
|
13524
13525
|
|
|
@@ -17299,17 +17300,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17299
17300
|
HTMLReactParser$1.attributesToProps;
|
|
17300
17301
|
HTMLReactParser$1.Element;
|
|
17301
17302
|
|
|
17302
|
-
var Container$
|
|
17303
|
-
var Card = newStyled.div(templateObject_2$
|
|
17304
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17305
|
-
var Label = newStyled.div(templateObject_4$
|
|
17306
|
-
var Check = newStyled.div(templateObject_5$
|
|
17307
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
17308
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17309
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17303
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17304
|
+
var Card = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17305
|
+
var Tag = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17306
|
+
var Label = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
17307
|
+
var Check = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
17308
|
+
var IconContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
17309
|
+
var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17310
|
+
var DiscountContainer = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17310
17311
|
var PackSelector = function (_a) {
|
|
17311
17312
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17312
|
-
return (jsxRuntime.jsx(Container$
|
|
17313
|
+
return (jsxRuntime.jsx(Container$c, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17313
17314
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17314
17315
|
}) }), void 0));
|
|
17315
17316
|
};
|
|
@@ -17335,31 +17336,31 @@ var PackCard = function (_a) {
|
|
|
17335
17336
|
currency: currencyCode || 'USD',
|
|
17336
17337
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17337
17338
|
};
|
|
17338
|
-
var templateObject_1$
|
|
17339
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$c, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3;
|
|
17339
17340
|
|
|
17340
|
-
var Title = newStyled.div(templateObject_1$
|
|
17341
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17342
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17343
|
-
var Container$
|
|
17341
|
+
var Title = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
17342
|
+
var H2 = newStyled.h2(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17343
|
+
var ArrowContainer = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17344
|
+
var Container$b = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17344
17345
|
var Accordion = function (_a) {
|
|
17345
17346
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
17346
17347
|
var theme = useTheme();
|
|
17347
17348
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17348
|
-
return (jsxRuntime.jsxs(Container$
|
|
17349
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17349
17350
|
};
|
|
17350
|
-
var templateObject_1$
|
|
17351
|
-
|
|
17352
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17353
|
-
var Header = newStyled.div(templateObject_2$
|
|
17354
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17355
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17356
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
17357
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
17358
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
17359
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
17360
|
-
var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17361
|
-
var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
17362
|
-
var templateObject_1$
|
|
17351
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$7;
|
|
17352
|
+
|
|
17353
|
+
var SectionContent = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17354
|
+
var Header = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
17355
|
+
var MobileHeader = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
17356
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
17357
|
+
var H4 = newStyled.h4(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
17358
|
+
var FilterLink = newStyled.a(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
17359
|
+
var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17360
|
+
var ClearAll = newStyled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
17361
|
+
var MobileFooter = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17362
|
+
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
17363
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17363
17364
|
|
|
17364
17365
|
var Filters = function (_a) {
|
|
17365
17366
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17457,20 +17458,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17457
17458
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
|
|
17458
17459
|
};
|
|
17459
17460
|
|
|
17460
|
-
var Container$
|
|
17461
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17462
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17463
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17464
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
17461
|
+
var Container$a = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17462
|
+
var BackArrow = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17463
|
+
var BoldSpan = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17464
|
+
var NormalSpan = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
17465
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17465
17466
|
var SearchNavigation = function (_a) {
|
|
17466
17467
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17467
|
-
return (jsxRuntime.jsxs(Container$
|
|
17468
|
+
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17468
17469
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17469
17470
|
}) }, void 0)] }, void 0));
|
|
17470
17471
|
};
|
|
17471
|
-
var templateObject_1$
|
|
17472
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$9, templateObject_4$5, templateObject_5$3;
|
|
17472
17473
|
|
|
17473
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17474
|
+
var TabContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17474
17475
|
var titleSize = _a.titleSize;
|
|
17475
17476
|
return titleSize;
|
|
17476
17477
|
}, function (_a) {
|
|
@@ -17487,15 +17488,15 @@ var Tab = function (_a) {
|
|
|
17487
17488
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17488
17489
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17489
17490
|
};
|
|
17490
|
-
var templateObject_1$
|
|
17491
|
+
var templateObject_1$a;
|
|
17491
17492
|
|
|
17492
|
-
var Container$
|
|
17493
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17493
|
+
var Container$9 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17494
|
+
var TabList = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17494
17495
|
var backgroundColor = _a.backgroundColor;
|
|
17495
17496
|
return backgroundColor;
|
|
17496
17497
|
});
|
|
17497
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17498
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17498
|
+
var TabContent = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17499
|
+
var TabSeparator = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17499
17500
|
var Tabs = function (_a) {
|
|
17500
17501
|
var _b;
|
|
17501
17502
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17504,11 +17505,11 @@ var Tabs = function (_a) {
|
|
|
17504
17505
|
return null;
|
|
17505
17506
|
}
|
|
17506
17507
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17507
|
-
return (jsxRuntime.jsxs(Container$
|
|
17508
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17508
17509
|
};
|
|
17509
|
-
var templateObject_1$
|
|
17510
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$4;
|
|
17510
17511
|
|
|
17511
|
-
var Container$
|
|
17512
|
+
var Container$8 = newStyled.div(function (props) { return ({
|
|
17512
17513
|
height: 'auto',
|
|
17513
17514
|
textAlign: 'center',
|
|
17514
17515
|
justifyContent: 'center',
|
|
@@ -17558,12 +17559,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17558
17559
|
textAlign: 'center',
|
|
17559
17560
|
lineHeight: '18px',
|
|
17560
17561
|
};
|
|
17561
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17562
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$8, __assign$1({ textPosition: iconTitlePosition }, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
17562
17563
|
};
|
|
17563
17564
|
|
|
17564
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17565
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17566
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17565
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17566
|
+
var VideoOverlay = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17567
|
+
var FullscreenVideo = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17567
17568
|
var ImageVideo = function (_a) {
|
|
17568
17569
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17569
17570
|
var video = React$2.useRef(null);
|
|
@@ -17571,7 +17572,7 @@ var ImageVideo = function (_a) {
|
|
|
17571
17572
|
var handleOnClick = function () {
|
|
17572
17573
|
setOpened(true);
|
|
17573
17574
|
};
|
|
17574
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", style: {
|
|
17575
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper$1, { children: [jsxRuntime.jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", style: {
|
|
17575
17576
|
position: 'absolute',
|
|
17576
17577
|
top: '10px',
|
|
17577
17578
|
right: '10px',
|
|
@@ -17583,12 +17584,12 @@ var ImageVideo = function (_a) {
|
|
|
17583
17584
|
height: '100%',
|
|
17584
17585
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17585
17586
|
};
|
|
17586
|
-
var templateObject_1$
|
|
17587
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7;
|
|
17587
17588
|
|
|
17588
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17589
|
-
var ContainerMobile = css(templateObject_2$
|
|
17590
|
-
var Container$
|
|
17591
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
17589
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17590
|
+
var ContainerMobile = css(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
17591
|
+
var Container$7 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17592
|
+
var TextContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17592
17593
|
var TextWithImage = function (_a) {
|
|
17593
17594
|
var _b, _c, _d, _e;
|
|
17594
17595
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -17608,7 +17609,7 @@ var TextWithImage = function (_a) {
|
|
|
17608
17609
|
// @ts-ignore
|
|
17609
17610
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17610
17611
|
};
|
|
17611
|
-
return (jsxs(Container$
|
|
17612
|
+
return (jsxs(Container$7, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17612
17613
|
backgroundColor: props.btnBGColor,
|
|
17613
17614
|
color: '#ffffff',
|
|
17614
17615
|
border: props.btnBGColor,
|
|
@@ -17618,9 +17619,9 @@ var TextWithImage = function (_a) {
|
|
|
17618
17619
|
},
|
|
17619
17620
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17620
17621
|
};
|
|
17621
|
-
var templateObject_1$
|
|
17622
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$3;
|
|
17622
17623
|
|
|
17623
|
-
var Container$
|
|
17624
|
+
var Container$6 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17624
17625
|
var AccordionOptions = function (_a) {
|
|
17625
17626
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17626
17627
|
var _b = React$2.useState({
|
|
@@ -17633,7 +17634,7 @@ var AccordionOptions = function (_a) {
|
|
|
17633
17634
|
}
|
|
17634
17635
|
return false;
|
|
17635
17636
|
};
|
|
17636
|
-
return (jsxRuntime.jsx(Container$
|
|
17637
|
+
return (jsxRuntime.jsx(Container$6, { children: accordions.map(function (accordion, index) {
|
|
17637
17638
|
var forceOpenValue = getForceOpen(index);
|
|
17638
17639
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17639
17640
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17644,9 +17645,9 @@ var AccordionOptions = function (_a) {
|
|
|
17644
17645
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17645
17646
|
}) }, void 0));
|
|
17646
17647
|
};
|
|
17647
|
-
var templateObject_1$
|
|
17648
|
+
var templateObject_1$6;
|
|
17648
17649
|
|
|
17649
|
-
var Container$
|
|
17650
|
+
var Container$5 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
17650
17651
|
var alignCenter = _a.alignCenter;
|
|
17651
17652
|
return alignCenter &&
|
|
17652
17653
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17656,14 +17657,14 @@ var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __ma
|
|
|
17656
17657
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17657
17658
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17658
17659
|
});
|
|
17659
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17660
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17660
|
+
var TitleText = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
17661
|
+
var BannerText = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
17661
17662
|
var ShortBanner = function (_a) {
|
|
17662
17663
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
17663
17664
|
var theme = useTheme();
|
|
17664
|
-
return (jsxRuntime.jsxs(Container$
|
|
17665
|
+
return (jsxRuntime.jsxs(Container$5, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17665
17666
|
};
|
|
17666
|
-
var templateObject_1$
|
|
17667
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
17667
17668
|
|
|
17668
17669
|
/* base styles & size variants */
|
|
17669
17670
|
var UserInfoTextStyles = {
|
|
@@ -17731,13 +17732,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17731
17732
|
}
|
|
17732
17733
|
};
|
|
17733
17734
|
|
|
17734
|
-
var Container$
|
|
17735
|
+
var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) {
|
|
17735
17736
|
return props.isMobile
|
|
17736
17737
|
? props.styles.imageContainerMobileMaxWidth
|
|
17737
17738
|
: props.styles.imageContainerMaxWidth;
|
|
17738
17739
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17739
|
-
var ImageContainer$
|
|
17740
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17740
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
17741
|
+
var ImageCard = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"])), function (props) {
|
|
17741
17742
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17742
17743
|
}, function (props) {
|
|
17743
17744
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17755,13 +17756,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17755
17756
|
var theme = useTheme();
|
|
17756
17757
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17757
17758
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17758
|
-
return (jsxRuntime.jsxs(Container$
|
|
17759
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, alignCenter: alignCenter, fontSize: isMobile ? stylesBySize.userInfoTextMobileFontSize : stylesBySize.userInfoTextFontSize }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17759
17760
|
};
|
|
17760
|
-
var templateObject_1$
|
|
17761
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
17761
17762
|
|
|
17762
|
-
var Container$
|
|
17763
|
-
var ImageContainer = newStyled.div(templateObject_2$
|
|
17764
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17763
|
+
var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17764
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17765
|
+
var StyledTitle = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17765
17766
|
var titlePosition = _a.titlePosition;
|
|
17766
17767
|
return titlePosition == 'center' &&
|
|
17767
17768
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17769,20 +17770,20 @@ var StyledTitle = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __ma
|
|
|
17769
17770
|
var ImageCardWithDescription = function (_a) {
|
|
17770
17771
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17771
17772
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17772
|
-
return (jsxRuntime.jsxs(Container$
|
|
17773
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17773
17774
|
};
|
|
17774
|
-
var templateObject_1$
|
|
17775
|
-
|
|
17776
|
-
var Container$
|
|
17777
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17778
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17779
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
17780
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
17781
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
17775
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
17776
|
+
|
|
17777
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17778
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17779
|
+
var CheckpointDate = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
17780
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
17781
|
+
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
17782
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
17782
17783
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
17783
17784
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
17784
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
17785
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
17785
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
17786
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
17786
17787
|
var TrackingProgress = function (_a) {
|
|
17787
17788
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
17788
17789
|
var theme = useTheme();
|
|
@@ -17802,7 +17803,7 @@ var TrackingProgress = function (_a) {
|
|
|
17802
17803
|
}
|
|
17803
17804
|
return '30px';
|
|
17804
17805
|
};
|
|
17805
|
-
return (jsxRuntime.jsxs(Container$
|
|
17806
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17806
17807
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17807
17808
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
17808
17809
|
? theme.colors.semantic.informative.color
|
|
@@ -17811,15 +17812,15 @@ var TrackingProgress = function (_a) {
|
|
|
17811
17812
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
17812
17813
|
})] }), void 0));
|
|
17813
17814
|
};
|
|
17814
|
-
var templateObject_1$
|
|
17815
|
-
|
|
17816
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
17817
|
-
var ReviewsContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
17818
|
-
var ReviewsCount = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
17819
|
-
var ReviewsStars = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
17820
|
-
var ReviewsTextCount = newStyled(Text$6)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
17821
|
-
var ReviewsImages = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
17822
|
-
var SummaryItem = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
17815
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
17816
|
+
|
|
17817
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
17818
|
+
var ReviewsContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
17819
|
+
var ReviewsCount = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
17820
|
+
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
17821
|
+
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
17822
|
+
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
17823
|
+
var SummaryItem = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
17823
17824
|
var backgroundUrl = _a.backgroundUrl;
|
|
17824
17825
|
return "url(".concat(backgroundUrl, ")");
|
|
17825
17826
|
});
|
|
@@ -17827,9 +17828,37 @@ var ReviewsHeader = function (_a) {
|
|
|
17827
17828
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
17828
17829
|
var starsNumber = 5;
|
|
17829
17830
|
var theme = useTheme();
|
|
17830
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17831
|
+
return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17832
|
+
};
|
|
17833
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
17834
|
+
|
|
17835
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
17836
|
+
var Content = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
17837
|
+
var StarsContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
17838
|
+
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
17839
|
+
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
17840
|
+
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
17841
|
+
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
17842
|
+
var ReviewTitle = newStyled.h2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
17843
|
+
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"])));
|
|
17844
|
+
var ImageContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
17845
|
+
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
17846
|
+
var ProductContainer = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
17847
|
+
var ProductTitle = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
17848
|
+
var ProductImage = newStyled(Image)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n max-height: 100px;\n height: auto;\n width: auto;\n"], ["\n max-height: 100px;\n height: auto;\n width: auto;\n"])));
|
|
17849
|
+
var ProductImageWrapper = newStyled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"], ["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"])));
|
|
17850
|
+
var DescriptionContainer = newStyled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
|
|
17851
|
+
var CloseButton = newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"], ["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"])));
|
|
17852
|
+
var Review = function (_a) {
|
|
17853
|
+
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, modalId = _a.modalId, _b = _a.maxFullScreen, maxFullScreen = _b === void 0 ? false : _b, verified = _a.verified, productImage = _a.productImage, productTitle = _a.productTitle, productLink = _a.productLink;
|
|
17854
|
+
var handleCloseClick = function () {
|
|
17855
|
+
modalEvent(modalId, {
|
|
17856
|
+
type: 'close',
|
|
17857
|
+
});
|
|
17858
|
+
};
|
|
17859
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: handleCloseClick }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image && jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17831
17860
|
};
|
|
17832
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
17861
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
17833
17862
|
|
|
17834
17863
|
exports.Accordion = Accordion$1;
|
|
17835
17864
|
exports.AccordionOptions = AccordionOptions;
|
|
@@ -17882,7 +17911,8 @@ exports.QuantityPicker = QuantityPicker;
|
|
|
17882
17911
|
exports.RadioGroupInput = RadioGroupInput;
|
|
17883
17912
|
exports.RadioInput = RadioInput;
|
|
17884
17913
|
exports.Rating = Rating;
|
|
17885
|
-
exports.Review = Review;
|
|
17914
|
+
exports.Review = Review$1;
|
|
17915
|
+
exports.ReviewDetail = Review;
|
|
17886
17916
|
exports.ReviewsHeader = ReviewsHeader;
|
|
17887
17917
|
exports.ScrollToTop = ScrollToTop;
|
|
17888
17918
|
exports.SearchBar = SearchBar;
|