@trafilea/afrodita-components 5.0.0-beta.175 → 5.0.0-beta.176
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.css +2 -1
- package/build/index.d.ts +14 -3
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +709 -371
- package/build/index.esm.js.map +1 -1
- package/build/index.js +709 -370
- package/build/index.js.map +1 -1
- package/package.json +2 -1
package/build/index.js
CHANGED
|
@@ -1045,7 +1045,7 @@ var SlideDot = function (_a) {
|
|
|
1045
1045
|
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
1046
1046
|
};
|
|
1047
1047
|
|
|
1048
|
-
var SlideDots = /*#__PURE__*/Object.freeze({
|
|
1048
|
+
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
1049
1049
|
__proto__: null,
|
|
1050
1050
|
SlideDot: SlideDot
|
|
1051
1051
|
});
|
|
@@ -1165,13 +1165,13 @@ var Icon = {
|
|
|
1165
1165
|
Messaging: Messaging,
|
|
1166
1166
|
Download: Download,
|
|
1167
1167
|
Payment: Payment,
|
|
1168
|
-
SlideDots: SlideDots,
|
|
1168
|
+
SlideDots: SlideDots$1,
|
|
1169
1169
|
Emoji: Emoji,
|
|
1170
1170
|
MyAccount: MyAccount,
|
|
1171
1171
|
};
|
|
1172
1172
|
|
|
1173
|
-
function _extends$
|
|
1174
|
-
_extends$
|
|
1173
|
+
function _extends$2() {
|
|
1174
|
+
_extends$2 = Object.assign || function (target) {
|
|
1175
1175
|
for (var i = 1; i < arguments.length; i++) {
|
|
1176
1176
|
var source = arguments[i];
|
|
1177
1177
|
|
|
@@ -1185,7 +1185,7 @@ function _extends$1() {
|
|
|
1185
1185
|
return target;
|
|
1186
1186
|
};
|
|
1187
1187
|
|
|
1188
|
-
return _extends$
|
|
1188
|
+
return _extends$2.apply(this, arguments);
|
|
1189
1189
|
}
|
|
1190
1190
|
|
|
1191
1191
|
function memoize(fn) {
|
|
@@ -3283,7 +3283,7 @@ var getTheme = function getTheme(outerTheme, theme) {
|
|
|
3283
3283
|
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
|
|
3284
3284
|
}
|
|
3285
3285
|
|
|
3286
|
-
return _extends$
|
|
3286
|
+
return _extends$2({}, outerTheme, theme);
|
|
3287
3287
|
};
|
|
3288
3288
|
|
|
3289
3289
|
var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
|
|
@@ -4010,7 +4010,7 @@ var createStyled = function createStyled(tag, options) {
|
|
|
4010
4010
|
});
|
|
4011
4011
|
|
|
4012
4012
|
Styled.withComponent = function (nextTag, nextOptions) {
|
|
4013
|
-
return createStyled(nextTag, _extends$
|
|
4013
|
+
return createStyled(nextTag, _extends$2({}, options, nextOptions, {
|
|
4014
4014
|
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
|
|
4015
4015
|
})).apply(void 0, styles);
|
|
4016
4016
|
};
|
|
@@ -4054,7 +4054,7 @@ exports.InputValidationType = void 0;
|
|
|
4054
4054
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4055
4055
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4056
4056
|
|
|
4057
|
-
var Section = newStyled.div(templateObject_1$
|
|
4057
|
+
var Section = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
4058
4058
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4059
4059
|
});
|
|
4060
4060
|
var CardHeader = function (_a) {
|
|
@@ -4065,14 +4065,14 @@ var CardFooter = function (_a) {
|
|
|
4065
4065
|
var children = _a.children;
|
|
4066
4066
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4067
4067
|
};
|
|
4068
|
-
var templateObject_1$
|
|
4068
|
+
var templateObject_1$1q;
|
|
4069
4069
|
|
|
4070
|
-
var Body = newStyled.div(templateObject_1$
|
|
4070
|
+
var Body = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
4071
4071
|
var CardBody = function (_a) {
|
|
4072
4072
|
var children = _a.children;
|
|
4073
4073
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4074
4074
|
};
|
|
4075
|
-
var templateObject_1$
|
|
4075
|
+
var templateObject_1$1p;
|
|
4076
4076
|
|
|
4077
4077
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4078
4078
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4217,7 +4217,7 @@ var AssetsProvider = function (_a) {
|
|
|
4217
4217
|
};
|
|
4218
4218
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4219
4219
|
|
|
4220
|
-
var Container$
|
|
4220
|
+
var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
4221
4221
|
var flex = _a.flex;
|
|
4222
4222
|
return flex &&
|
|
4223
4223
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4232,14 +4232,14 @@ var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4232
4232
|
var Card$1 = function (_a) {
|
|
4233
4233
|
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;
|
|
4234
4234
|
var theme = useTheme();
|
|
4235
|
-
return (jsxRuntime.jsx(Container$
|
|
4235
|
+
return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4236
4236
|
};
|
|
4237
4237
|
var Card$2 = Object.assign(Card$1, {
|
|
4238
4238
|
Header: CardHeader,
|
|
4239
4239
|
Footer: CardFooter,
|
|
4240
4240
|
Body: CardBody,
|
|
4241
4241
|
});
|
|
4242
|
-
var templateObject_1$
|
|
4242
|
+
var templateObject_1$1o;
|
|
4243
4243
|
|
|
4244
4244
|
var Fragment = jsxRuntime.Fragment;
|
|
4245
4245
|
function jsx(type, props, key) {
|
|
@@ -4385,7 +4385,7 @@ function BaseSelectOption(_a) {
|
|
|
4385
4385
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4386
4386
|
}
|
|
4387
4387
|
|
|
4388
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4388
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4389
4389
|
function BaseSelect(_a) {
|
|
4390
4390
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4391
4391
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4395,7 +4395,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4395
4395
|
Options: BaseSelectOptions,
|
|
4396
4396
|
Option: BaseSelectOption,
|
|
4397
4397
|
});
|
|
4398
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1n;
|
|
4399
4399
|
|
|
4400
4400
|
var CustomButton = newStyled.button(function (_a) {
|
|
4401
4401
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4610,12 +4610,12 @@ var CustomCheckboxStyles = {
|
|
|
4610
4610
|
},
|
|
4611
4611
|
};
|
|
4612
4612
|
|
|
4613
|
-
var Container$
|
|
4613
|
+
var Container$U = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
4614
4614
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4615
4615
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4616
4616
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4617
4617
|
]; });
|
|
4618
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4618
|
+
var Input$3 = newStyled.input(templateObject_2$U || (templateObject_2$U = __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) {
|
|
4619
4619
|
var disabled = _a.disabled;
|
|
4620
4620
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4621
4621
|
});
|
|
@@ -4644,9 +4644,9 @@ var Checkbox = function (_a) {
|
|
|
4644
4644
|
React$2.useEffect(function () {
|
|
4645
4645
|
mounted.current = true;
|
|
4646
4646
|
}, []);
|
|
4647
|
-
return (jsxRuntime.jsxs(Container$
|
|
4647
|
+
return (jsxRuntime.jsxs(Container$U, { 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));
|
|
4648
4648
|
};
|
|
4649
|
-
var templateObject_1$
|
|
4649
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
4650
4650
|
|
|
4651
4651
|
var CustomOption = newStyled.li(function (_a) {
|
|
4652
4652
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4725,9 +4725,9 @@ function SimpleDropdown(_a) {
|
|
|
4725
4725
|
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));
|
|
4726
4726
|
}
|
|
4727
4727
|
|
|
4728
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4729
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4730
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4728
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
4729
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$T || (templateObject_2$T = __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; });
|
|
4730
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
4731
4731
|
var DialogDropdownLink = newStyled.a(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
4732
4732
|
var DropdownDialog = function (_a) {
|
|
4733
4733
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4736,7 +4736,7 @@ var DropdownDialog = function (_a) {
|
|
|
4736
4736
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4737
4737
|
}) }), void 0) }), void 0));
|
|
4738
4738
|
};
|
|
4739
|
-
var templateObject_1$
|
|
4739
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$H, templateObject_4$u;
|
|
4740
4740
|
|
|
4741
4741
|
var getStylesBySize$9 = function (size, theme) {
|
|
4742
4742
|
switch (size) {
|
|
@@ -4804,9 +4804,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4804
4804
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4805
4805
|
// `variants` styles that are consistent through all themes.
|
|
4806
4806
|
var TAGS = {
|
|
4807
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4808
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4809
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4807
|
+
hero1: newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""]))),
|
|
4808
|
+
hero2: newStyled.h2(templateObject_2$S || (templateObject_2$S = __makeTemplateObject([""], [""]))),
|
|
4809
|
+
hero3: newStyled.h3(templateObject_3$G || (templateObject_3$G = __makeTemplateObject([""], [""]))),
|
|
4810
4810
|
display1: newStyled.h1(templateObject_4$t || (templateObject_4$t = __makeTemplateObject([""], [""]))),
|
|
4811
4811
|
display2: newStyled.h2(templateObject_5$h || (templateObject_5$h = __makeTemplateObject([""], [""]))),
|
|
4812
4812
|
heading1: newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject([""], [""]))),
|
|
@@ -4930,9 +4930,9 @@ var DEFAULTS = {
|
|
|
4930
4930
|
size: 'regular',
|
|
4931
4931
|
},
|
|
4932
4932
|
};
|
|
4933
|
-
var templateObject_1$
|
|
4933
|
+
var templateObject_1$1k, templateObject_2$S, templateObject_3$G, templateObject_4$t, templateObject_5$h, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
4934
4934
|
|
|
4935
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4935
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
4936
4936
|
var inline = _a.inline;
|
|
4937
4937
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4938
4938
|
});
|
|
@@ -4951,7 +4951,7 @@ var SizeSelector = function (_a) {
|
|
|
4951
4951
|
}, 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));
|
|
4952
4952
|
}) }), void 0)] }), void 0));
|
|
4953
4953
|
};
|
|
4954
|
-
var templateObject_1$
|
|
4954
|
+
var templateObject_1$1j;
|
|
4955
4955
|
|
|
4956
4956
|
var getStylesBySize$8 = function (size) {
|
|
4957
4957
|
switch (size) {
|
|
@@ -4978,7 +4978,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4978
4978
|
} });
|
|
4979
4979
|
};
|
|
4980
4980
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4981
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4981
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1i || (templateObject_1$1i = __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));
|
|
4982
4982
|
};
|
|
4983
4983
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4984
4984
|
if (disabled)
|
|
@@ -4994,16 +4994,16 @@ var TextButton = function (_a) {
|
|
|
4994
4994
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4995
4995
|
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));
|
|
4996
4996
|
};
|
|
4997
|
-
var templateObject_1$
|
|
4997
|
+
var templateObject_1$1i;
|
|
4998
4998
|
|
|
4999
|
-
var Container$
|
|
5000
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5001
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4999
|
+
var Container$T = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
5000
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5001
|
+
var PercentageSpan = newStyled.span(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
5002
5002
|
var SizeFitGuide = function (_a) {
|
|
5003
5003
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5004
|
-
return (jsxRuntime.jsxs(Container$
|
|
5004
|
+
return (jsxRuntime.jsxs(Container$T, { 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));
|
|
5005
5005
|
};
|
|
5006
|
-
var templateObject_1$
|
|
5006
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$F;
|
|
5007
5007
|
|
|
5008
5008
|
var getStylesBySize$7 = function (size) {
|
|
5009
5009
|
switch (size) {
|
|
@@ -5033,7 +5033,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5033
5033
|
};
|
|
5034
5034
|
}
|
|
5035
5035
|
};
|
|
5036
|
-
var Container$
|
|
5036
|
+
var Container$S = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
5037
5037
|
var backgroundColor = _a.backgroundColor;
|
|
5038
5038
|
return backgroundColor;
|
|
5039
5039
|
}, function (_a) {
|
|
@@ -5055,7 +5055,7 @@ var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
|
|
|
5055
5055
|
var size = _a.size;
|
|
5056
5056
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5057
5057
|
});
|
|
5058
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5058
|
+
var H3$1 = newStyled.h3(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
5059
5059
|
var textColor = _a.textColor;
|
|
5060
5060
|
return textColor;
|
|
5061
5061
|
}, function (_a) {
|
|
@@ -5070,9 +5070,9 @@ var H3$1 = newStyled.h3(templateObject_2$O || (templateObject_2$O = __makeTempla
|
|
|
5070
5070
|
var DiscountTag = function (_a) {
|
|
5071
5071
|
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;
|
|
5072
5072
|
var theme = useTheme();
|
|
5073
|
-
return (jsxRuntime.jsx(Container$
|
|
5073
|
+
return (jsxRuntime.jsx(Container$S, __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));
|
|
5074
5074
|
};
|
|
5075
|
-
var templateObject_1$
|
|
5075
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
5076
5076
|
|
|
5077
5077
|
var getStylesBySize$6 = function (size) {
|
|
5078
5078
|
switch (size) {
|
|
@@ -5102,8 +5102,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5102
5102
|
};
|
|
5103
5103
|
}
|
|
5104
5104
|
};
|
|
5105
|
-
var Container$
|
|
5106
|
-
var Price = newStyled.p(templateObject_2$
|
|
5105
|
+
var Container$R = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5106
|
+
var Price = newStyled.p(templateObject_2$P || (templateObject_2$P = __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) {
|
|
5107
5107
|
var weight = _a.weight;
|
|
5108
5108
|
return (weight ? weight : '400');
|
|
5109
5109
|
}, function (_a) {
|
|
@@ -5132,7 +5132,7 @@ var Price = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5132
5132
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5133
5133
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5134
5134
|
});
|
|
5135
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5135
|
+
var TagContainer = newStyled.p(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5136
5136
|
var _b;
|
|
5137
5137
|
var size = _a.size;
|
|
5138
5138
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5153,11 +5153,11 @@ var PriceLabel = function (_a) {
|
|
|
5153
5153
|
weight: 700,
|
|
5154
5154
|
};
|
|
5155
5155
|
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)); };
|
|
5156
|
-
return (jsxRuntime.jsxs(Container$
|
|
5156
|
+
return (jsxRuntime.jsxs(Container$R, { 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));
|
|
5157
5157
|
};
|
|
5158
|
-
var templateObject_1$
|
|
5158
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$E;
|
|
5159
5159
|
|
|
5160
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5160
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5161
5161
|
var PriceLabelV2 = function (_a) {
|
|
5162
5162
|
var _b;
|
|
5163
5163
|
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;
|
|
@@ -5185,9 +5185,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5185
5185
|
weight: 700,
|
|
5186
5186
|
};
|
|
5187
5187
|
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)); };
|
|
5188
|
-
return (jsxRuntime.jsxs(Container$
|
|
5188
|
+
return (jsxRuntime.jsxs(Container$R, { 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));
|
|
5189
5189
|
};
|
|
5190
|
-
var templateObject_1$
|
|
5190
|
+
var templateObject_1$1e;
|
|
5191
5191
|
|
|
5192
5192
|
var OneColorSelector = function (_a) {
|
|
5193
5193
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5228,9 +5228,9 @@ var OutOfStock = function (_a) {
|
|
|
5228
5228
|
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));
|
|
5229
5229
|
};
|
|
5230
5230
|
|
|
5231
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5232
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5233
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5231
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5232
|
+
newStyled(lt.Label)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5233
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
5234
5234
|
var Span = newStyled.span(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5235
5235
|
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"])));
|
|
5236
5236
|
var Label$2 = function (_a) {
|
|
@@ -5250,23 +5250,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5250
5250
|
Option: Option,
|
|
5251
5251
|
OptionsContainer: OptionsContainer,
|
|
5252
5252
|
});
|
|
5253
|
-
var templateObject_1$
|
|
5253
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$g;
|
|
5254
5254
|
|
|
5255
|
-
var Container$
|
|
5255
|
+
var Container$Q = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
5256
5256
|
var borderColor = _a.borderColor;
|
|
5257
5257
|
return borderColor;
|
|
5258
5258
|
}, function (_a) {
|
|
5259
5259
|
var noStock = _a.noStock;
|
|
5260
5260
|
return (noStock ? '0.4' : '1');
|
|
5261
5261
|
});
|
|
5262
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5262
|
+
var Image$3 = newStyled.img(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5263
5263
|
var PatternSelector = function (_a) {
|
|
5264
5264
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5265
5265
|
var theme = useTheme();
|
|
5266
5266
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5267
|
-
return (jsxRuntime.jsx(Container$
|
|
5267
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5268
5268
|
};
|
|
5269
|
-
var templateObject_1$
|
|
5269
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5270
5270
|
|
|
5271
5271
|
var renderOptions$1 = function (options) {
|
|
5272
5272
|
if (options.length === 0) {
|
|
@@ -5324,7 +5324,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5324
5324
|
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));
|
|
5325
5325
|
};
|
|
5326
5326
|
|
|
5327
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5327
|
+
var Image$2 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
5328
5328
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5329
5329
|
return borderRadiusVariant &&
|
|
5330
5330
|
"\nborder-radius: 20px;\n";
|
|
@@ -5339,9 +5339,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
5339
5339
|
var theme = useTheme();
|
|
5340
5340
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5341
5341
|
};
|
|
5342
|
-
var templateObject_1$
|
|
5342
|
+
var templateObject_1$1b;
|
|
5343
5343
|
|
|
5344
|
-
var Button$
|
|
5344
|
+
var Button$4 = newStyled.button(function () { return ({
|
|
5345
5345
|
background: 'transparent',
|
|
5346
5346
|
border: 'none',
|
|
5347
5347
|
cursor: 'pointer',
|
|
@@ -5351,9 +5351,9 @@ var Direction;
|
|
|
5351
5351
|
Direction[Direction["Left"] = 0] = "Left";
|
|
5352
5352
|
Direction[Direction["Right"] = 1] = "Right";
|
|
5353
5353
|
})(Direction || (Direction = {}));
|
|
5354
|
-
var ArrowButton = function (_a) {
|
|
5354
|
+
var ArrowButton$1 = function (_a) {
|
|
5355
5355
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
5356
|
-
return (jsxRuntime.jsx(Button$
|
|
5356
|
+
return (jsxRuntime.jsx(Button$4, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
5357
5357
|
};
|
|
5358
5358
|
|
|
5359
5359
|
function _defineProperty(obj, key, value) {
|
|
@@ -5548,7 +5548,7 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
5548
5548
|
return target;
|
|
5549
5549
|
}
|
|
5550
5550
|
|
|
5551
|
-
var initialState$
|
|
5551
|
+
var initialState$2 = {
|
|
5552
5552
|
animating: false,
|
|
5553
5553
|
autoplaying: null,
|
|
5554
5554
|
currentDirection: 0,
|
|
@@ -7232,7 +7232,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
7232
7232
|
onMouseOver: onMouseOver,
|
|
7233
7233
|
onMouseLeave: onMouseLeave
|
|
7234
7234
|
};
|
|
7235
|
-
return /*#__PURE__*/React__default["default"].createElement("div", _extends$
|
|
7235
|
+
return /*#__PURE__*/React__default["default"].createElement("div", _extends$2({
|
|
7236
7236
|
ref: this.handleRef,
|
|
7237
7237
|
className: "slick-track",
|
|
7238
7238
|
style: this.props.trackStyle
|
|
@@ -7388,7 +7388,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
7388
7388
|
if (this.props.prevArrow) {
|
|
7389
7389
|
prevArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
|
|
7390
7390
|
} else {
|
|
7391
|
-
prevArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$
|
|
7391
|
+
prevArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$2({
|
|
7392
7392
|
key: "0",
|
|
7393
7393
|
type: "button"
|
|
7394
7394
|
}, prevArrowProps), " ", "Previous");
|
|
@@ -7454,7 +7454,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
|
|
|
7454
7454
|
if (this.props.nextArrow) {
|
|
7455
7455
|
nextArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
|
|
7456
7456
|
} else {
|
|
7457
|
-
nextArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$
|
|
7457
|
+
nextArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$2({
|
|
7458
7458
|
key: "1",
|
|
7459
7459
|
type: "button"
|
|
7460
7460
|
}, nextArrowProps), " ", "Next");
|
|
@@ -9158,16 +9158,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
9158
9158
|
};
|
|
9159
9159
|
}
|
|
9160
9160
|
|
|
9161
|
-
return /*#__PURE__*/React__default["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default["default"].createElement("div", _extends$
|
|
9161
|
+
return /*#__PURE__*/React__default["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default["default"].createElement("div", _extends$2({
|
|
9162
9162
|
ref: _this.listRefHandler
|
|
9163
|
-
}, listProps), /*#__PURE__*/React__default["default"].createElement(Track, _extends$
|
|
9163
|
+
}, listProps), /*#__PURE__*/React__default["default"].createElement(Track, _extends$2({
|
|
9164
9164
|
ref: _this.trackRefHandler
|
|
9165
9165
|
}, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
|
|
9166
9166
|
});
|
|
9167
9167
|
|
|
9168
9168
|
_this.list = null;
|
|
9169
9169
|
_this.track = null;
|
|
9170
|
-
_this.state = _objectSpread2(_objectSpread2({}, initialState$
|
|
9170
|
+
_this.state = _objectSpread2(_objectSpread2({}, initialState$2), {}, {
|
|
9171
9171
|
currentSlide: _this.props.initialSlide,
|
|
9172
9172
|
slideCount: React__default["default"].Children.count(_this.props.children)
|
|
9173
9173
|
});
|
|
@@ -9274,7 +9274,7 @@ var json2mq = function (query) {
|
|
|
9274
9274
|
|
|
9275
9275
|
var json2mq_1 = json2mq;
|
|
9276
9276
|
|
|
9277
|
-
var defaultProps = {
|
|
9277
|
+
var defaultProps$1 = {
|
|
9278
9278
|
accessibility: true,
|
|
9279
9279
|
adaptiveHeight: false,
|
|
9280
9280
|
afterChange: null,
|
|
@@ -9475,9 +9475,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9475
9475
|
newProps = this.props.responsive.filter(function (resp) {
|
|
9476
9476
|
return resp.breakpoint === _this3.state.breakpoint;
|
|
9477
9477
|
});
|
|
9478
|
-
settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps), this.props), newProps[0].settings);
|
|
9478
|
+
settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps$1), this.props), newProps[0].settings);
|
|
9479
9479
|
} else {
|
|
9480
|
-
settings = _objectSpread2(_objectSpread2({}, defaultProps), this.props);
|
|
9480
|
+
settings = _objectSpread2(_objectSpread2({}, defaultProps$1), this.props);
|
|
9481
9481
|
} // force scrolling by one if centerMode is on
|
|
9482
9482
|
|
|
9483
9483
|
|
|
@@ -9573,7 +9573,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9573
9573
|
settings.unslick = true;
|
|
9574
9574
|
}
|
|
9575
9575
|
|
|
9576
|
-
return /*#__PURE__*/React__default["default"].createElement(InnerSlider, _extends$
|
|
9576
|
+
return /*#__PURE__*/React__default["default"].createElement(InnerSlider, _extends$2({
|
|
9577
9577
|
style: this.props.style,
|
|
9578
9578
|
ref: this.innerSliderRefHandler
|
|
9579
9579
|
}, settings), newChildren);
|
|
@@ -9583,14 +9583,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9583
9583
|
return Slider;
|
|
9584
9584
|
}(React__default["default"].Component);
|
|
9585
9585
|
|
|
9586
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9586
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
9587
9587
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9588
9588
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9589
9589
|
}, function (_a) {
|
|
9590
9590
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9591
9591
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9592
9592
|
});
|
|
9593
|
-
var templateObject_1$
|
|
9593
|
+
var templateObject_1$1a;
|
|
9594
9594
|
|
|
9595
9595
|
var getStylesBySize$5 = function (size) {
|
|
9596
9596
|
// rem units
|
|
@@ -9626,8 +9626,8 @@ var SliderNavigation = function (_a) {
|
|
|
9626
9626
|
var _f = React$2.useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
9627
9627
|
var styles = dotsSize && getStylesBySize$5(dotsSize);
|
|
9628
9628
|
var theme = useTheme();
|
|
9629
|
-
var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9630
|
-
var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9629
|
+
var nextArrow = arrows && (jsx(ArrowButton$1, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9630
|
+
var prevArrow = arrows && (jsx(ArrowButton$1, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9631
9631
|
var settings = {
|
|
9632
9632
|
arrows: !!arrows,
|
|
9633
9633
|
dots: dots,
|
|
@@ -9649,22 +9649,22 @@ var SliderNavigation = function (_a) {
|
|
|
9649
9649
|
} }, { 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));
|
|
9650
9650
|
};
|
|
9651
9651
|
|
|
9652
|
-
var horizontalStyles = css(templateObject_1$
|
|
9653
|
-
var verticalStyles = css(templateObject_2$
|
|
9654
|
-
var Container$
|
|
9652
|
+
var horizontalStyles = css(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
9653
|
+
var verticalStyles = css(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
9654
|
+
var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __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) {
|
|
9655
9655
|
var position = _a.position;
|
|
9656
9656
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9657
9657
|
});
|
|
9658
|
-
var Button$
|
|
9658
|
+
var Button$3 = newStyled.button(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
9659
9659
|
var ImagePreviewList = function (_a) {
|
|
9660
9660
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9661
|
-
return (jsxRuntime.jsx(Container$
|
|
9661
|
+
return (jsxRuntime.jsx(Container$P, __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: {
|
|
9662
9662
|
arrowWidth: 0.75,
|
|
9663
9663
|
arrowHeight: 1.25,
|
|
9664
9664
|
arrowPadding: 1.625,
|
|
9665
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$
|
|
9665
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9666
9666
|
};
|
|
9667
|
-
var templateObject_1$
|
|
9667
|
+
var templateObject_1$19, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
9668
9668
|
|
|
9669
9669
|
var propTypes = {exports: {}};
|
|
9670
9670
|
|
|
@@ -10771,7 +10771,7 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
10771
10771
|
|
|
10772
10772
|
var PropTypes = propTypes.exports;
|
|
10773
10773
|
|
|
10774
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
10774
|
+
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
10775
10775
|
|
|
10776
10776
|
var Image$1 = function Image(_ref) {
|
|
10777
10777
|
var src = _ref.src,
|
|
@@ -10791,7 +10791,7 @@ var Image$1 = function Image(_ref) {
|
|
|
10791
10791
|
return /*#__PURE__*/React__default["default"].createElement(React$2.Fragment, {
|
|
10792
10792
|
key: i
|
|
10793
10793
|
}, source.srcSet && /*#__PURE__*/React__default["default"].createElement("source", source));
|
|
10794
|
-
}), /*#__PURE__*/React__default["default"].createElement("img", _extends({}, imgAttributes, {
|
|
10794
|
+
}), /*#__PURE__*/React__default["default"].createElement("img", _extends$1({}, imgAttributes, {
|
|
10795
10795
|
className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
|
|
10796
10796
|
style: {
|
|
10797
10797
|
transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
|
|
@@ -10799,7 +10799,7 @@ var Image$1 = function Image(_ref) {
|
|
|
10799
10799
|
src: src,
|
|
10800
10800
|
width: width,
|
|
10801
10801
|
height: height
|
|
10802
|
-
}))) : /*#__PURE__*/React__default["default"].createElement("img", _extends({}, imgAttributes, {
|
|
10802
|
+
}))) : /*#__PURE__*/React__default["default"].createElement("img", _extends$1({}, imgAttributes, {
|
|
10803
10803
|
className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
|
|
10804
10804
|
style: {
|
|
10805
10805
|
transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
|
|
@@ -11257,24 +11257,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11257
11257
|
afterZoomOut: PropTypes.func
|
|
11258
11258
|
} : {};
|
|
11259
11259
|
|
|
11260
|
-
var Container$
|
|
11260
|
+
var Container$O = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
11261
11261
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11262
11262
|
return borderRadiusVariant &&
|
|
11263
11263
|
"\n border-radius: 40px;\n ";
|
|
11264
11264
|
});
|
|
11265
|
-
var TopTagContainer$
|
|
11266
|
-
var BottomTagContainer$
|
|
11265
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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'); });
|
|
11266
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11267
11267
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11268
11268
|
var ImageProductWithTags$1 = function (_a) {
|
|
11269
11269
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction;
|
|
11270
|
-
return (jsxRuntime.jsxs(Container$
|
|
11270
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11271
11271
|
alt: image.alt,
|
|
11272
11272
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11273
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
11273
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11274
11274
|
};
|
|
11275
|
-
var templateObject_1$
|
|
11275
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
11276
11276
|
|
|
11277
|
-
var Container$
|
|
11277
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
11278
11278
|
var ProductGallery = function (_a) {
|
|
11279
11279
|
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, ctaText = _a.ctaText, ctaAction = _a.ctaAction;
|
|
11280
11280
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11282,11 +11282,11 @@ var ProductGallery = function (_a) {
|
|
|
11282
11282
|
React$2.useEffect(function () {
|
|
11283
11283
|
setSelectedImage(initialValue);
|
|
11284
11284
|
}, [initialValue]);
|
|
11285
|
-
return (jsxRuntime.jsxs(Container$
|
|
11285
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11286
11286
|
setSelectedImage(value);
|
|
11287
11287
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction }, void 0)] }, void 0));
|
|
11288
11288
|
};
|
|
11289
|
-
var templateObject_1$
|
|
11289
|
+
var templateObject_1$17;
|
|
11290
11290
|
|
|
11291
11291
|
/* base styles & size variants */
|
|
11292
11292
|
var StarStyles = {
|
|
@@ -11332,8 +11332,8 @@ var StarStyles = {
|
|
|
11332
11332
|
});
|
|
11333
11333
|
},
|
|
11334
11334
|
};
|
|
11335
|
-
var Container$
|
|
11336
|
-
var templateObject_1$
|
|
11335
|
+
var Container$M = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11336
|
+
var templateObject_1$16;
|
|
11337
11337
|
|
|
11338
11338
|
var StarContainer = newStyled.div(function (_a) {
|
|
11339
11339
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11351,7 +11351,7 @@ var sizes = {
|
|
|
11351
11351
|
var StarList = function (_a) {
|
|
11352
11352
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11353
11353
|
var theme = useTheme();
|
|
11354
|
-
return (jsxRuntime.jsx(Container$
|
|
11354
|
+
return (jsxRuntime.jsx(Container$M, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11355
11355
|
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));
|
|
11356
11356
|
}) }, void 0));
|
|
11357
11357
|
};
|
|
@@ -11395,8 +11395,8 @@ var LabelStyles = {
|
|
|
11395
11395
|
});
|
|
11396
11396
|
},
|
|
11397
11397
|
};
|
|
11398
|
-
var Container$
|
|
11399
|
-
var templateObject_1$
|
|
11398
|
+
var Container$L = newStyled.a(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11399
|
+
var templateObject_1$15;
|
|
11400
11400
|
|
|
11401
11401
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11402
11402
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11434,11 +11434,11 @@ var Rating = function (_a) {
|
|
|
11434
11434
|
href: reviewsContainerId,
|
|
11435
11435
|
}
|
|
11436
11436
|
: {};
|
|
11437
|
-
return (jsxRuntime.jsxs(Container$
|
|
11437
|
+
return (jsxRuntime.jsxs(Container$L, __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));
|
|
11438
11438
|
};
|
|
11439
11439
|
|
|
11440
|
-
var Container$
|
|
11441
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11440
|
+
var Container$K = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
11441
|
+
var P$1 = newStyled.p(templateObject_2$K || (templateObject_2$K = __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; });
|
|
11442
11442
|
var textButtonStyles = function (theme) { return ({
|
|
11443
11443
|
border: 'none',
|
|
11444
11444
|
background: 'transparent',
|
|
@@ -11451,9 +11451,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11451
11451
|
var FitPredictor = function (_a) {
|
|
11452
11452
|
var onClick = _a.onClick;
|
|
11453
11453
|
var theme = useTheme();
|
|
11454
|
-
return (jsxs(Container$
|
|
11454
|
+
return (jsxs(Container$K, __assign$1({ theme: theme }, { children: [jsx(Container$K, { 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));
|
|
11455
11455
|
};
|
|
11456
|
-
var templateObject_1
|
|
11456
|
+
var templateObject_1$14, templateObject_2$K;
|
|
11457
11457
|
|
|
11458
11458
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11459
11459
|
var color = _a.color;
|
|
@@ -11467,7 +11467,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11467
11467
|
margin: '0.938rem 4.188rem',
|
|
11468
11468
|
});
|
|
11469
11469
|
});
|
|
11470
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11470
|
+
var Bar = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
11471
11471
|
var backgroundColor = _a.backgroundColor;
|
|
11472
11472
|
return backgroundColor;
|
|
11473
11473
|
}, function (_a) {
|
|
@@ -11490,7 +11490,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11490
11490
|
position: 'absolute',
|
|
11491
11491
|
});
|
|
11492
11492
|
});
|
|
11493
|
-
var Container$
|
|
11493
|
+
var Container$J = newStyled.div(function (_a) {
|
|
11494
11494
|
var widthAuto = _a.widthAuto;
|
|
11495
11495
|
return ({
|
|
11496
11496
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11504,9 +11504,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11504
11504
|
var ProgressBar = function (_a) {
|
|
11505
11505
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11506
11506
|
var theme = useTheme();
|
|
11507
|
-
return (jsxRuntime.jsxs(Container$
|
|
11507
|
+
return (jsxRuntime.jsxs(Container$J, __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));
|
|
11508
11508
|
};
|
|
11509
|
-
var templateObject_1$
|
|
11509
|
+
var templateObject_1$13;
|
|
11510
11510
|
|
|
11511
11511
|
var getStylesBySize$4 = function (size) {
|
|
11512
11512
|
switch (size) {
|
|
@@ -11527,7 +11527,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11527
11527
|
};
|
|
11528
11528
|
}
|
|
11529
11529
|
};
|
|
11530
|
-
var Container$
|
|
11530
|
+
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
11531
11531
|
var backgroundColor = _a.backgroundColor;
|
|
11532
11532
|
return backgroundColor;
|
|
11533
11533
|
}, function (_a) {
|
|
@@ -11555,9 +11555,9 @@ var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
11555
11555
|
var IconButton = function (_a) {
|
|
11556
11556
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11557
11557
|
var theme = useTheme();
|
|
11558
|
-
return (jsxRuntime.jsx(Container$
|
|
11558
|
+
return (jsxRuntime.jsx(Container$I, __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));
|
|
11559
11559
|
};
|
|
11560
|
-
var templateObject_1$
|
|
11560
|
+
var templateObject_1$12;
|
|
11561
11561
|
|
|
11562
11562
|
var TooltipArrow = function (_a) {
|
|
11563
11563
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11637,7 +11637,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11637
11637
|
}
|
|
11638
11638
|
};
|
|
11639
11639
|
|
|
11640
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11640
|
+
var Wrapper$5 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
11641
11641
|
var position = _a.position;
|
|
11642
11642
|
return getWrapperFlexDirection(position);
|
|
11643
11643
|
});
|
|
@@ -11661,11 +11661,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11661
11661
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11662
11662
|
return actual === expected ? margin : '0';
|
|
11663
11663
|
};
|
|
11664
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11664
|
+
var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __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) {
|
|
11665
11665
|
var borderColor = _a.borderColor;
|
|
11666
11666
|
return borderColor;
|
|
11667
11667
|
});
|
|
11668
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11668
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __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) {
|
|
11669
11669
|
var position = _a.position;
|
|
11670
11670
|
return getArrowRotation(position);
|
|
11671
11671
|
}, function (_a) {
|
|
@@ -11685,7 +11685,7 @@ var Title$6 = newStyled.h1(templateObject_6$c || (templateObject_6$c = __makeTem
|
|
|
11685
11685
|
return color;
|
|
11686
11686
|
});
|
|
11687
11687
|
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"])));
|
|
11688
|
-
var templateObject_1$
|
|
11688
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
|
|
11689
11689
|
|
|
11690
11690
|
var Tooltip = function (_a) {
|
|
11691
11691
|
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;
|
|
@@ -11843,9 +11843,9 @@ var ContainerStyles = {
|
|
|
11843
11843
|
},
|
|
11844
11844
|
};
|
|
11845
11845
|
|
|
11846
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11847
|
-
var Container$
|
|
11848
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11846
|
+
var Wrapper$4 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11847
|
+
var Container$H = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11848
|
+
var Input$2 = newStyled.input(templateObject_2$I || (templateObject_2$I = __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) {
|
|
11849
11849
|
var disabled = _a.disabled;
|
|
11850
11850
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11851
11851
|
});
|
|
@@ -11853,7 +11853,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11853
11853
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11854
11854
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11855
11855
|
]; });
|
|
11856
|
-
var StyledLabel = newStyled(Label$3)(templateObject_3$
|
|
11856
|
+
var StyledLabel = newStyled(Label$3)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11857
11857
|
var theme = _a.theme;
|
|
11858
11858
|
return theme.component.radio.textSize;
|
|
11859
11859
|
}, function (_a) {
|
|
@@ -11867,9 +11867,9 @@ var RadioInput = function (_a) {
|
|
|
11867
11867
|
var value = event.currentTarget.value;
|
|
11868
11868
|
onChange({ value: value, label: label });
|
|
11869
11869
|
};
|
|
11870
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11870
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$H, __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));
|
|
11871
11871
|
};
|
|
11872
|
-
var templateObject_1$
|
|
11872
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$z;
|
|
11873
11873
|
|
|
11874
11874
|
var RadioGroupInput = function (_a) {
|
|
11875
11875
|
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;
|
|
@@ -11883,37 +11883,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11883
11883
|
}) }), void 0));
|
|
11884
11884
|
};
|
|
11885
11885
|
|
|
11886
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11887
|
-
var Container$
|
|
11886
|
+
var Wrapper$3 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
11887
|
+
var Container$G = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
11888
11888
|
var Minimalistic = function (_a) {
|
|
11889
11889
|
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;
|
|
11890
11890
|
var theme = useTheme();
|
|
11891
|
-
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$
|
|
11891
|
+
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$G, __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$G, __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));
|
|
11892
11892
|
};
|
|
11893
|
-
var templateObject_1
|
|
11893
|
+
var templateObject_1$$, templateObject_2$H;
|
|
11894
11894
|
|
|
11895
|
-
var Container$
|
|
11896
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11897
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11895
|
+
var Container$F = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11896
|
+
var Title$5 = newStyled.h1(templateObject_2$G || (templateObject_2$G = __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; });
|
|
11897
|
+
var Details$1 = newStyled.span(templateObject_3$y || (templateObject_3$y = __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; });
|
|
11898
11898
|
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"])));
|
|
11899
11899
|
var Simple = function (_a) {
|
|
11900
11900
|
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;
|
|
11901
11901
|
var theme = useTheme();
|
|
11902
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11902
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$F, { 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));
|
|
11903
11903
|
};
|
|
11904
|
-
var templateObject_1$
|
|
11904
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$y, templateObject_4$o;
|
|
11905
11905
|
|
|
11906
11906
|
var Bundle = {
|
|
11907
11907
|
Minimalistic: Minimalistic,
|
|
11908
11908
|
Simple: Simple,
|
|
11909
11909
|
};
|
|
11910
11910
|
|
|
11911
|
-
var Container$
|
|
11911
|
+
var Container$E = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
11912
11912
|
var Tag$1 = function (_a) {
|
|
11913
11913
|
var text = _a.text, className = _a.className;
|
|
11914
|
-
return jsxRuntime.jsx(Container$
|
|
11914
|
+
return jsxRuntime.jsx(Container$E, __assign$1({ className: className }, { children: text }), void 0);
|
|
11915
11915
|
};
|
|
11916
|
-
var templateObject_1$
|
|
11916
|
+
var templateObject_1$Z;
|
|
11917
11917
|
|
|
11918
11918
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11919
11919
|
switch (size) {
|
|
@@ -12016,11 +12016,11 @@ var Timer = function (_a) {
|
|
|
12016
12016
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12017
12017
|
};
|
|
12018
12018
|
|
|
12019
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
12019
|
+
var Label$1 = newStyled.span(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
12020
12020
|
var color = _a.color;
|
|
12021
12021
|
return color;
|
|
12022
12022
|
});
|
|
12023
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12023
|
+
var MandatoryIcon = newStyled.span(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12024
12024
|
var color = _a.color;
|
|
12025
12025
|
return color;
|
|
12026
12026
|
});
|
|
@@ -12029,7 +12029,7 @@ var InputLabel = function (_a) {
|
|
|
12029
12029
|
var theme = useTheme();
|
|
12030
12030
|
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));
|
|
12031
12031
|
};
|
|
12032
|
-
var templateObject_1$
|
|
12032
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12033
12033
|
|
|
12034
12034
|
/**
|
|
12035
12035
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12083,14 +12083,14 @@ var formatPrice = function (value, _a) {
|
|
|
12083
12083
|
}).format(valueToFormat);
|
|
12084
12084
|
};
|
|
12085
12085
|
|
|
12086
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12087
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12086
|
+
var ErrorText = newStyled.h3(templateObject_1$X || (templateObject_1$X = __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; });
|
|
12087
|
+
var ErrorContainer = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
12088
12088
|
var Error$1 = function (_a) {
|
|
12089
12089
|
var error = _a.error;
|
|
12090
12090
|
var theme = useTheme();
|
|
12091
12091
|
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));
|
|
12092
12092
|
};
|
|
12093
|
-
var templateObject_1$
|
|
12093
|
+
var templateObject_1$X, templateObject_2$E;
|
|
12094
12094
|
|
|
12095
12095
|
var containerByStatus = function (theme, status) {
|
|
12096
12096
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12099,11 +12099,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12099
12099
|
return theme.colors.semantic.urgent.color;
|
|
12100
12100
|
return '';
|
|
12101
12101
|
};
|
|
12102
|
-
var Container$
|
|
12102
|
+
var Container$D = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12103
12103
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12104
12104
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12105
12105
|
});
|
|
12106
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12106
|
+
var StyledInput = newStyled.input(templateObject_2$D || (templateObject_2$D = __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) {
|
|
12107
12107
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12108
12108
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12158,13 +12158,13 @@ var StyledInput = newStyled.input(templateObject_2$B || (templateObject_2$B = __
|
|
|
12158
12158
|
return hasValue &&
|
|
12159
12159
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12160
12160
|
});
|
|
12161
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12161
|
+
var InputWrapper = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12162
12162
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12163
12163
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12164
12164
|
});
|
|
12165
12165
|
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"])));
|
|
12166
12166
|
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"])));
|
|
12167
|
-
var templateObject_1$
|
|
12167
|
+
var templateObject_1$W, templateObject_2$D, templateObject_3$x, templateObject_4$n, templateObject_5$e;
|
|
12168
12168
|
|
|
12169
12169
|
var BaseInput = function (_a) {
|
|
12170
12170
|
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"]);
|
|
@@ -12187,14 +12187,14 @@ var BaseInput = function (_a) {
|
|
|
12187
12187
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12188
12188
|
}, [status]);
|
|
12189
12189
|
var hasValue = Boolean(value);
|
|
12190
|
-
return (jsxRuntime.jsxs(Container$
|
|
12190
|
+
return (jsxRuntime.jsxs(Container$D, __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) {
|
|
12191
12191
|
onChange(event.target.value, event);
|
|
12192
12192
|
}, 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 () {
|
|
12193
12193
|
onChange('', { target: { value: '' } });
|
|
12194
12194
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
12195
12195
|
};
|
|
12196
12196
|
|
|
12197
|
-
var Button$
|
|
12197
|
+
var Button$2 = function (_a) {
|
|
12198
12198
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
12199
12199
|
if (variant === 'primary') {
|
|
12200
12200
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -12208,11 +12208,11 @@ var Button$1 = function (_a) {
|
|
|
12208
12208
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12209
12209
|
};
|
|
12210
12210
|
|
|
12211
|
-
var Container$
|
|
12211
|
+
var Container$C = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
12212
12212
|
var theme = _a.theme;
|
|
12213
12213
|
return theme.component.inputCustom.input.borderRadius;
|
|
12214
12214
|
});
|
|
12215
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12215
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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) {
|
|
12216
12216
|
var theme = _a.theme;
|
|
12217
12217
|
return theme.component.inputCustom.button.borderRadius;
|
|
12218
12218
|
});
|
|
@@ -12225,23 +12225,23 @@ var Custom = function (_a) {
|
|
|
12225
12225
|
text: text,
|
|
12226
12226
|
disabled: rest.disabled,
|
|
12227
12227
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12228
|
-
return (jsxRuntime.jsx(Container$
|
|
12228
|
+
return (jsxRuntime.jsx(Container$C, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12229
12229
|
};
|
|
12230
|
-
var templateObject_1$
|
|
12230
|
+
var templateObject_1$V, templateObject_2$C;
|
|
12231
12231
|
|
|
12232
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12232
|
+
var SuccessContainer = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12233
12233
|
var size = _a.size;
|
|
12234
12234
|
return (size === 'small' ? '36px' : '');
|
|
12235
12235
|
});
|
|
12236
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12237
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12236
|
+
var SuccessMessage = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
12237
|
+
var SuccessText = newStyled.span(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
12238
12238
|
var Success = function (_a) {
|
|
12239
12239
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12240
12240
|
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));
|
|
12241
12241
|
};
|
|
12242
|
-
var templateObject_1$
|
|
12242
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$w;
|
|
12243
12243
|
|
|
12244
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12244
|
+
var ButtonContainer = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
12245
12245
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12246
12246
|
return status === exports.InputValidationType.Empty &&
|
|
12247
12247
|
type === 'primary' &&
|
|
@@ -12258,21 +12258,21 @@ var BasePlusButton = function (_a) {
|
|
|
12258
12258
|
}
|
|
12259
12259
|
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));
|
|
12260
12260
|
};
|
|
12261
|
-
var templateObject_1$
|
|
12261
|
+
var templateObject_1$T;
|
|
12262
12262
|
|
|
12263
|
-
var Container$
|
|
12264
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12263
|
+
var Container$B = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12264
|
+
var IconContainer$4 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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; });
|
|
12265
12265
|
var BasePlusIcon = function (_a) {
|
|
12266
12266
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12267
12267
|
var theme = useTheme();
|
|
12268
12268
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12269
|
-
return (jsxRuntime.jsx(Container$
|
|
12269
|
+
return (jsxRuntime.jsx(Container$B, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12270
12270
|
? theme.colors.shades['700'].color
|
|
12271
12271
|
: status === exports.InputValidationType.Error
|
|
12272
12272
|
? theme.colors.semantic.urgent.color
|
|
12273
12273
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12274
12274
|
};
|
|
12275
|
-
var templateObject_1$
|
|
12275
|
+
var templateObject_1$S, templateObject_2$A;
|
|
12276
12276
|
|
|
12277
12277
|
var Input$1 = {
|
|
12278
12278
|
Simple: BaseInput,
|
|
@@ -12281,7 +12281,7 @@ var Input$1 = {
|
|
|
12281
12281
|
SimplePlusIcon: BasePlusIcon,
|
|
12282
12282
|
};
|
|
12283
12283
|
|
|
12284
|
-
var Container$
|
|
12284
|
+
var Container$A = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
12285
12285
|
var width = _a.width;
|
|
12286
12286
|
return width;
|
|
12287
12287
|
}, function (_a) {
|
|
@@ -12297,11 +12297,11 @@ var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
12297
12297
|
var PaymentMethod = function (_a) {
|
|
12298
12298
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12299
12299
|
var theme = useTheme();
|
|
12300
|
-
return (jsxRuntime.jsx(Container$
|
|
12300
|
+
return (jsxRuntime.jsx(Container$A, __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));
|
|
12301
12301
|
};
|
|
12302
|
-
var templateObject_1$
|
|
12302
|
+
var templateObject_1$R;
|
|
12303
12303
|
|
|
12304
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12304
|
+
var Text$5 = newStyled.h3(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
12305
12305
|
var backgroundColor = _a.backgroundColor;
|
|
12306
12306
|
return backgroundColor;
|
|
12307
12307
|
}, function (_a) {
|
|
@@ -12313,11 +12313,11 @@ var OfferBanner = function (_a) {
|
|
|
12313
12313
|
var theme = useTheme();
|
|
12314
12314
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12315
12315
|
};
|
|
12316
|
-
var templateObject_1$
|
|
12316
|
+
var templateObject_1$Q;
|
|
12317
12317
|
|
|
12318
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12319
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12320
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12318
|
+
var Wrapper$2 = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
12319
|
+
var GrandTotal = newStyled.h1(templateObject_2$z || (templateObject_2$z = __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; });
|
|
12320
|
+
var Currency = newStyled.span(templateObject_3$v || (templateObject_3$v = __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) {
|
|
12321
12321
|
var theme = _a.theme;
|
|
12322
12322
|
return theme.component.total.basicTotal.currency.color;
|
|
12323
12323
|
}, function (_a) {
|
|
@@ -12330,7 +12330,7 @@ var Currency = newStyled.span(templateObject_3$t || (templateObject_3$t = __make
|
|
|
12330
12330
|
var theme = _a.theme;
|
|
12331
12331
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12332
12332
|
});
|
|
12333
|
-
var Container$
|
|
12333
|
+
var Container$z = 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; });
|
|
12334
12334
|
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) {
|
|
12335
12335
|
var theme = _a.theme;
|
|
12336
12336
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
@@ -12351,16 +12351,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$b || (templateObject_6$b = __
|
|
|
12351
12351
|
var Total = function (_a) {
|
|
12352
12352
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12353
12353
|
var theme = useTheme();
|
|
12354
|
-
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$
|
|
12354
|
+
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$z, __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));
|
|
12355
12355
|
};
|
|
12356
|
-
var templateObject_1$
|
|
12356
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$b;
|
|
12357
12357
|
|
|
12358
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12358
|
+
var Wrapper$1 = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12359
12359
|
var color = _a.color;
|
|
12360
12360
|
return color;
|
|
12361
12361
|
});
|
|
12362
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12363
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12362
|
+
var ItemContainer = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
12363
|
+
var Item$2 = newStyled.h4(templateObject_3$u || (templateObject_3$u = __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) {
|
|
12364
12364
|
var theme = _a.theme;
|
|
12365
12365
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12366
12366
|
}, function (_a) {
|
|
@@ -12380,23 +12380,23 @@ var Subtotal = function (_a) {
|
|
|
12380
12380
|
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));
|
|
12381
12381
|
})] }), void 0));
|
|
12382
12382
|
};
|
|
12383
|
-
var templateObject_1$
|
|
12383
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$u, templateObject_4$l;
|
|
12384
12384
|
|
|
12385
12385
|
var Totals = {
|
|
12386
12386
|
Total: Total,
|
|
12387
12387
|
Subtotal: Subtotal,
|
|
12388
12388
|
};
|
|
12389
12389
|
|
|
12390
|
-
var Container$
|
|
12391
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12392
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12390
|
+
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __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; });
|
|
12391
|
+
var IconContainer$3 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
12392
|
+
var Text$4 = newStyled.p(templateObject_3$t || (templateObject_3$t = __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; });
|
|
12393
12393
|
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; });
|
|
12394
12394
|
var Note = function (_a) {
|
|
12395
12395
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12396
12396
|
var theme = useTheme();
|
|
12397
|
-
return (jsxRuntime.jsxs(Container$
|
|
12397
|
+
return (jsxRuntime.jsxs(Container$y, __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));
|
|
12398
12398
|
};
|
|
12399
|
-
var templateObject_1$
|
|
12399
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$k;
|
|
12400
12400
|
|
|
12401
12401
|
/* eslint-disable no-param-reassign */
|
|
12402
12402
|
var index$1 = function (breakpoints) {
|
|
@@ -12482,9 +12482,9 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12482
12482
|
literal: true,
|
|
12483
12483
|
});
|
|
12484
12484
|
|
|
12485
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12486
|
-
var Line = newStyled.div(templateObject_2$
|
|
12487
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12485
|
+
var Title$4 = newStyled.h1(templateObject_1$M || (templateObject_1$M = __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; });
|
|
12486
|
+
var Line = newStyled.div(templateObject_2$w || (templateObject_2$w = __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; });
|
|
12487
|
+
var Row$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __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({
|
|
12488
12488
|
flexDirection: ['column', 'row'],
|
|
12489
12489
|
}));
|
|
12490
12490
|
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({
|
|
@@ -12519,45 +12519,45 @@ var DeliveryDetails = function (_a) {
|
|
|
12519
12519
|
var theme = useTheme();
|
|
12520
12520
|
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));
|
|
12521
12521
|
};
|
|
12522
|
-
var templateObject_1$
|
|
12522
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
12523
12523
|
|
|
12524
|
-
var Container$
|
|
12525
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12524
|
+
var Container$x = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
12525
|
+
var Text$3 = newStyled.p(templateObject_2$v || (templateObject_2$v = __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; });
|
|
12526
12526
|
var ScrollToTop = function (_a) {
|
|
12527
12527
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12528
12528
|
var theme = useTheme();
|
|
12529
12529
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12530
|
-
return (jsxRuntime.jsxs(Container$
|
|
12530
|
+
return (jsxRuntime.jsxs(Container$x, __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));
|
|
12531
12531
|
};
|
|
12532
|
-
var templateObject_1$
|
|
12532
|
+
var templateObject_1$L, templateObject_2$v;
|
|
12533
12533
|
|
|
12534
12534
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12535
|
-
var Container$
|
|
12535
|
+
var Container$w = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
12536
12536
|
var color = _a.color;
|
|
12537
12537
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12538
12538
|
});
|
|
12539
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12539
|
+
var H1 = newStyled.h1(templateObject_2$u || (templateObject_2$u = __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; });
|
|
12540
12540
|
var OrderBar = function (_a) {
|
|
12541
12541
|
var message = _a.message, color = _a.color;
|
|
12542
12542
|
var theme = useTheme();
|
|
12543
|
-
return (jsxRuntime.jsxs(Container$
|
|
12543
|
+
return (jsxRuntime.jsxs(Container$w, __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));
|
|
12544
12544
|
};
|
|
12545
|
-
var templateObject_1$
|
|
12545
|
+
var templateObject_1$K, templateObject_2$u;
|
|
12546
12546
|
|
|
12547
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12548
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12549
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12547
|
+
var TableElement$1 = newStyled.table(templateObject_1$J || (templateObject_1$J = __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; });
|
|
12548
|
+
var TableCell$1 = newStyled.td(templateObject_2$t || (templateObject_2$t = __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; });
|
|
12549
|
+
var TableHead$1 = newStyled.th(templateObject_3$r || (templateObject_3$r = __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; });
|
|
12550
12550
|
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; });
|
|
12551
12551
|
var SizeTable = function (_a) {
|
|
12552
12552
|
var headers = _a.headers, data = _a.data;
|
|
12553
12553
|
var theme = useTheme();
|
|
12554
12554
|
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));
|
|
12555
12555
|
};
|
|
12556
|
-
var templateObject_1$
|
|
12556
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$r, templateObject_4$i;
|
|
12557
12557
|
|
|
12558
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12559
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12560
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12558
|
+
var TableElement = newStyled.table(templateObject_1$I || (templateObject_1$I = __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; });
|
|
12559
|
+
var TableCell = newStyled.td(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12560
|
+
var TableHead = newStyled.th(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12561
12561
|
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; });
|
|
12562
12562
|
var SizeChartTable = function (_a) {
|
|
12563
12563
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -12589,18 +12589,18 @@ var SizeChartTable = function (_a) {
|
|
|
12589
12589
|
backgroundColor: getCellColor(index, cell),
|
|
12590
12590
|
}, 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));
|
|
12591
12591
|
};
|
|
12592
|
-
var templateObject_1$
|
|
12592
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$q, templateObject_4$h;
|
|
12593
12593
|
|
|
12594
|
-
var Img = newStyled.img(templateObject_1$
|
|
12594
|
+
var Img = newStyled.img(templateObject_1$H || (templateObject_1$H = __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; });
|
|
12595
12595
|
var Image = function (_a) {
|
|
12596
12596
|
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;
|
|
12597
12597
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12598
12598
|
};
|
|
12599
|
-
var templateObject_1$
|
|
12599
|
+
var templateObject_1$H;
|
|
12600
12600
|
|
|
12601
|
-
var Container$
|
|
12602
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12603
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12601
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12602
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12603
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __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({
|
|
12604
12604
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12605
12605
|
}));
|
|
12606
12606
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12636,9 +12636,9 @@ var Quantity = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeT
|
|
|
12636
12636
|
var SimpleOrderItem = function (_a) {
|
|
12637
12637
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12638
12638
|
var theme = useTheme();
|
|
12639
|
-
return (jsxRuntime.jsxs(Container$
|
|
12639
|
+
return (jsxRuntime.jsxs(Container$v, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { 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));
|
|
12640
12640
|
};
|
|
12641
|
-
var templateObject_1$
|
|
12641
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$p, templateObject_4$g, templateObject_5$b;
|
|
12642
12642
|
|
|
12643
12643
|
function formatDate(date) {
|
|
12644
12644
|
var day = date.getDate();
|
|
@@ -12647,9 +12647,9 @@ function formatDate(date) {
|
|
|
12647
12647
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12648
12648
|
}
|
|
12649
12649
|
|
|
12650
|
-
var Container$
|
|
12651
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12652
|
-
var Content$1 = newStyled.div(templateObject_3$
|
|
12650
|
+
var Container$u = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
12651
|
+
var Heading = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
12652
|
+
var Content$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12653
12653
|
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"])));
|
|
12654
12654
|
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"])));
|
|
12655
12655
|
var VariantText = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\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\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -12668,17 +12668,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12668
12668
|
var Review$1 = function (_a) {
|
|
12669
12669
|
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage, helpfulActionText = _a.helpfulActionText, helpfulAction = _a.helpfulAction, helpfulCount = _a.helpfulCount;
|
|
12670
12670
|
var theme = useTheme();
|
|
12671
|
-
return (jsxRuntime.jsxs(Container$
|
|
12671
|
+
return (jsxRuntime.jsxs(Container$u, { 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), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12672
12672
|
};
|
|
12673
|
-
var templateObject_1$
|
|
12673
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$o, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12674
12674
|
|
|
12675
|
-
var List = newStyled.ul(templateObject_1$
|
|
12676
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12677
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12675
|
+
var List = newStyled.ul(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12676
|
+
var Item$1 = newStyled.li(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
12677
|
+
var DropdownWrapper = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
12678
12678
|
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"])));
|
|
12679
12679
|
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; });
|
|
12680
12680
|
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; });
|
|
12681
|
-
var templateObject_1$
|
|
12681
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12682
12682
|
|
|
12683
12683
|
var DropdownListIcons = function (_a) {
|
|
12684
12684
|
var items = _a.items;
|
|
@@ -12691,7 +12691,7 @@ var Dropdown = function (_a) {
|
|
|
12691
12691
|
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));
|
|
12692
12692
|
};
|
|
12693
12693
|
|
|
12694
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12694
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$D || (templateObject_1$D = __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; });
|
|
12695
12695
|
var AmazonButton = function (_a) {
|
|
12696
12696
|
var onClick = _a.onClick;
|
|
12697
12697
|
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));
|
|
@@ -12700,11 +12700,11 @@ var PaypalButton = function (_a) {
|
|
|
12700
12700
|
var onClick = _a.onClick;
|
|
12701
12701
|
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));
|
|
12702
12702
|
};
|
|
12703
|
-
var templateObject_1$
|
|
12703
|
+
var templateObject_1$D;
|
|
12704
12704
|
|
|
12705
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12706
|
-
var Col = newStyled.div(templateObject_2$
|
|
12707
|
-
var Row = newStyled.div(templateObject_3$
|
|
12705
|
+
var Wrapper = newStyled.div(templateObject_1$C || (templateObject_1$C = __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'); });
|
|
12706
|
+
var Col = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12707
|
+
var Row = newStyled.div(templateObject_3$m || (templateObject_3$m = __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) {
|
|
12708
12708
|
return props.rightToLeft &&
|
|
12709
12709
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12710
12710
|
});
|
|
@@ -12716,7 +12716,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12716
12716
|
var theme = useTheme();
|
|
12717
12717
|
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));
|
|
12718
12718
|
};
|
|
12719
|
-
var templateObject_1$
|
|
12719
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
12720
12720
|
|
|
12721
12721
|
var index = /*#__PURE__*/Object.freeze({
|
|
12722
12722
|
__proto__: null,
|
|
@@ -12729,7 +12729,7 @@ var Spacing = function (_a) {
|
|
|
12729
12729
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12730
12730
|
};
|
|
12731
12731
|
|
|
12732
|
-
var Container$
|
|
12732
|
+
var Container$t = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
12733
12733
|
var height = _a.height;
|
|
12734
12734
|
return (height ? height : '1.5em');
|
|
12735
12735
|
}, function (_a) {
|
|
@@ -12754,9 +12754,9 @@ var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
12754
12754
|
var SkeletonBox = function (_a) {
|
|
12755
12755
|
var width = _a.width, height = _a.height;
|
|
12756
12756
|
var theme = useTheme();
|
|
12757
|
-
return jsxRuntime.jsx(Container$
|
|
12757
|
+
return jsxRuntime.jsx(Container$t, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12758
12758
|
};
|
|
12759
|
-
var templateObject_1$
|
|
12759
|
+
var templateObject_1$B;
|
|
12760
12760
|
|
|
12761
12761
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12762
12762
|
var width = _a.width, height = _a.height;
|
|
@@ -12766,9 +12766,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12766
12766
|
height: height,
|
|
12767
12767
|
});
|
|
12768
12768
|
});
|
|
12769
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12770
|
-
var Container$
|
|
12771
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12769
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
12770
|
+
var Container$s = newStyled.a(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
12771
|
+
var Title$2 = newStyled.p(templateObject_3$l || (templateObject_3$l = __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; });
|
|
12772
12772
|
var getStylesBySize$1 = function (size) {
|
|
12773
12773
|
switch (size) {
|
|
12774
12774
|
case exports.ComponentSize.Medium:
|
|
@@ -12794,8 +12794,8 @@ var getStylesBySize$1 = function (size) {
|
|
|
12794
12794
|
};
|
|
12795
12795
|
}
|
|
12796
12796
|
};
|
|
12797
|
-
var TopTagContainer$
|
|
12798
|
-
var BottomTagContainer$
|
|
12797
|
+
var TopTagContainer$2 = 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"])));
|
|
12798
|
+
var BottomTagContainer$2 = 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"])));
|
|
12799
12799
|
var MarginTopContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12800
12800
|
var ProductItemMobile = function (_a) {
|
|
12801
12801
|
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;
|
|
@@ -12813,32 +12813,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12813
12813
|
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));
|
|
12814
12814
|
};
|
|
12815
12815
|
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)); };
|
|
12816
|
-
return (jsxs(Container$
|
|
12816
|
+
return (jsxs(Container$s, __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$2, { children: topTag }, void 0), jsx(BottomTagContainer$2, { 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));
|
|
12817
12817
|
};
|
|
12818
|
-
var templateObject_1$
|
|
12818
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12819
12819
|
|
|
12820
|
-
var Container$
|
|
12820
|
+
var Container$r = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
12821
12821
|
function withProductGrid(ProductItemComponent, data) {
|
|
12822
12822
|
function WithProductGrid(props) {
|
|
12823
|
-
return (jsxRuntime.jsx(Container$
|
|
12823
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12824
12824
|
}
|
|
12825
12825
|
/* istanbul ignore next */
|
|
12826
12826
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12827
12827
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12828
12828
|
return WithProductGrid;
|
|
12829
12829
|
}
|
|
12830
|
-
var templateObject_1$
|
|
12830
|
+
var templateObject_1$z;
|
|
12831
12831
|
|
|
12832
12832
|
var Collection = {
|
|
12833
12833
|
ProductItemMobile: ProductItemMobile,
|
|
12834
12834
|
withProductGrid: withProductGrid,
|
|
12835
12835
|
};
|
|
12836
12836
|
|
|
12837
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12837
|
+
var Backdrop = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
12838
12838
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12839
12839
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12840
12840
|
});
|
|
12841
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12841
|
+
var Sidebar = newStyled.div(templateObject_2$m || (templateObject_2$m = __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) {
|
|
12842
12842
|
var width = _a.width;
|
|
12843
12843
|
return width;
|
|
12844
12844
|
}, function (_a) {
|
|
@@ -12879,28 +12879,28 @@ var Drawer = function (_a) {
|
|
|
12879
12879
|
}, [isOpen, onClose, onOpen]);
|
|
12880
12880
|
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;
|
|
12881
12881
|
};
|
|
12882
|
-
var templateObject_1$
|
|
12882
|
+
var templateObject_1$y, templateObject_2$m;
|
|
12883
12883
|
|
|
12884
|
-
var Container$
|
|
12884
|
+
var Container$q = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12885
12885
|
var size = _a.size;
|
|
12886
12886
|
return (size ? size : '100%');
|
|
12887
12887
|
}, function (_a) {
|
|
12888
12888
|
var size = _a.size;
|
|
12889
12889
|
return (size ? size : '100%');
|
|
12890
12890
|
});
|
|
12891
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12891
|
+
var Animation = newStyled.div(templateObject_2$l || (templateObject_2$l = __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) {
|
|
12892
12892
|
var animationDuration = _a.animationDuration;
|
|
12893
12893
|
return animationDuration;
|
|
12894
12894
|
});
|
|
12895
12895
|
var Spinner = function (_a) {
|
|
12896
12896
|
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;
|
|
12897
|
-
return (jsxRuntime.jsx(Container$
|
|
12897
|
+
return (jsxRuntime.jsx(Container$q, __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));
|
|
12898
12898
|
};
|
|
12899
|
-
var templateObject_1$
|
|
12899
|
+
var templateObject_1$x, templateObject_2$l;
|
|
12900
12900
|
|
|
12901
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12902
|
-
var LI = newStyled.li(templateObject_2$
|
|
12903
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12901
|
+
var UL = newStyled.ul(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
12902
|
+
var LI = newStyled.li(templateObject_2$k || (templateObject_2$k = __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; });
|
|
12903
|
+
var CloseIconContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
12904
12904
|
var Tags = function (_a) {
|
|
12905
12905
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12906
12906
|
var theme = useTheme();
|
|
@@ -12908,7 +12908,7 @@ var Tags = function (_a) {
|
|
|
12908
12908
|
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));
|
|
12909
12909
|
}) }), void 0));
|
|
12910
12910
|
};
|
|
12911
|
-
var templateObject_1$
|
|
12911
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$k;
|
|
12912
12912
|
|
|
12913
12913
|
function FilteringDropdown(_a) {
|
|
12914
12914
|
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;
|
|
@@ -12941,9 +12941,9 @@ function FilteringDropdown(_a) {
|
|
|
12941
12941
|
}) }, void 0)] }), void 0));
|
|
12942
12942
|
}
|
|
12943
12943
|
|
|
12944
|
-
var Container$
|
|
12945
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12946
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12944
|
+
var Container$p = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
12945
|
+
var IconContainer$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
12946
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12947
12947
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12948
12948
|
}));
|
|
12949
12949
|
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) {
|
|
@@ -12963,7 +12963,7 @@ var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __ma
|
|
|
12963
12963
|
var background = _a.background;
|
|
12964
12964
|
return background || 'unset';
|
|
12965
12965
|
});
|
|
12966
|
-
var templateObject_1$
|
|
12966
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$j, templateObject_4$b;
|
|
12967
12967
|
|
|
12968
12968
|
var Pagination = function (_a) {
|
|
12969
12969
|
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;
|
|
@@ -13009,7 +13009,7 @@ var Pagination = function (_a) {
|
|
|
13009
13009
|
}
|
|
13010
13010
|
return pages;
|
|
13011
13011
|
}, [from, page, showReducedPages, to]);
|
|
13012
|
-
return (jsxRuntime.jsxs(Container$
|
|
13012
|
+
return (jsxRuntime.jsxs(Container$p, __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));
|
|
13013
13013
|
};
|
|
13014
13014
|
|
|
13015
13015
|
var PaginatorBlog = function (_a) {
|
|
@@ -13023,12 +13023,12 @@ var PaginatorBlog = function (_a) {
|
|
|
13023
13023
|
setPage(page);
|
|
13024
13024
|
onChange(page);
|
|
13025
13025
|
};
|
|
13026
|
-
return (jsxRuntime.jsxs(Container$
|
|
13026
|
+
return (jsxRuntime.jsxs(Container$p, __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
|
|
13027
13027
|
? theme.colors.shades['white'].color
|
|
13028
13028
|
: 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));
|
|
13029
13029
|
};
|
|
13030
13030
|
|
|
13031
|
-
var Container$
|
|
13031
|
+
var Container$o = newStyled.div(templateObject_1$u || (templateObject_1$u = __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({
|
|
13032
13032
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13033
13033
|
}));
|
|
13034
13034
|
var Description$1 = newStyled.div({
|
|
@@ -13045,25 +13045,25 @@ var Description$1 = newStyled.div({
|
|
|
13045
13045
|
var ProductItem = function (_a) {
|
|
13046
13046
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13047
13047
|
var theme = useTheme();
|
|
13048
|
-
return (jsxRuntime.jsxs(Container$
|
|
13048
|
+
return (jsxRuntime.jsxs(Container$o, __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));
|
|
13049
13049
|
};
|
|
13050
|
-
var templateObject_1$
|
|
13050
|
+
var templateObject_1$u;
|
|
13051
13051
|
|
|
13052
|
-
var Container$
|
|
13052
|
+
var Container$n = newStyled.div({
|
|
13053
13053
|
display: 'flex',
|
|
13054
13054
|
justifyContent: 'center',
|
|
13055
13055
|
padding: '1rem',
|
|
13056
13056
|
});
|
|
13057
13057
|
var Footer = function (_a) {
|
|
13058
13058
|
var text = _a.text, onClick = _a.onClick;
|
|
13059
|
-
return (jsxRuntime.jsx(Container$
|
|
13059
|
+
return (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13060
13060
|
};
|
|
13061
13061
|
|
|
13062
13062
|
var Ul = newStyled.ul({
|
|
13063
13063
|
margin: '0px',
|
|
13064
13064
|
padding: '0px',
|
|
13065
13065
|
});
|
|
13066
|
-
var Li = newStyled.li(templateObject_1$
|
|
13066
|
+
var Li = newStyled.li(templateObject_1$t || (templateObject_1$t = __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({
|
|
13067
13067
|
padding: [0, '0rem 1rem'],
|
|
13068
13068
|
borderRadius: [0, '0.5rem'],
|
|
13069
13069
|
}));
|
|
@@ -13075,20 +13075,20 @@ var Anchor = newStyled.a({
|
|
|
13075
13075
|
padding: 0,
|
|
13076
13076
|
textDecoration: 'none',
|
|
13077
13077
|
});
|
|
13078
|
-
var Container$
|
|
13078
|
+
var Container$m = newStyled.div(templateObject_2$i || (templateObject_2$i = __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({
|
|
13079
13079
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13080
13080
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13081
13081
|
borderRadius: ['0', '0.5rem'],
|
|
13082
13082
|
}));
|
|
13083
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13083
|
+
var Header$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13084
13084
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13085
13085
|
}));
|
|
13086
13086
|
var ResultsPanel = function (_a) {
|
|
13087
13087
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13088
13088
|
var theme = useTheme();
|
|
13089
|
-
return (jsxRuntime.jsxs(Container$
|
|
13089
|
+
return (jsxRuntime.jsxs(Container$m, __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));
|
|
13090
13090
|
};
|
|
13091
|
-
var templateObject_1$
|
|
13091
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$i;
|
|
13092
13092
|
|
|
13093
13093
|
var Input = newStyled.input(function (props) { return ({
|
|
13094
13094
|
padding: props.theme.component.input.padding,
|
|
@@ -13119,16 +13119,16 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13119
13119
|
},
|
|
13120
13120
|
}); });
|
|
13121
13121
|
|
|
13122
|
-
var Button = newStyled.button(templateObject_1$
|
|
13122
|
+
var Button$1 = newStyled.button(templateObject_1$s || (templateObject_1$s = __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({
|
|
13123
13123
|
right: ['1rem', '7.75rem'],
|
|
13124
13124
|
top: ['0.75rem', '0.75rem'],
|
|
13125
13125
|
}));
|
|
13126
13126
|
var ClearButton = function (_a) {
|
|
13127
13127
|
var onClick = _a.onClick;
|
|
13128
13128
|
var theme = useTheme();
|
|
13129
|
-
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));
|
|
13129
|
+
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13130
13130
|
};
|
|
13131
|
-
var templateObject_1$
|
|
13131
|
+
var templateObject_1$s;
|
|
13132
13132
|
|
|
13133
13133
|
var useOnClickOutside = function (ref, handler) {
|
|
13134
13134
|
React$2.useEffect(function () {
|
|
@@ -13203,7 +13203,7 @@ var SearchControl = function (_a) {
|
|
|
13203
13203
|
}
|
|
13204
13204
|
};
|
|
13205
13205
|
|
|
13206
|
-
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
13206
|
+
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
13207
13207
|
var reducer = function (state, action) {
|
|
13208
13208
|
switch (action.type) {
|
|
13209
13209
|
case 'UPDATE_TERM': {
|
|
@@ -13217,7 +13217,7 @@ var reducer = function (state, action) {
|
|
|
13217
13217
|
}
|
|
13218
13218
|
}
|
|
13219
13219
|
};
|
|
13220
|
-
var Container$
|
|
13220
|
+
var Container$l = newStyled.div({
|
|
13221
13221
|
position: 'relative',
|
|
13222
13222
|
display: 'flex',
|
|
13223
13223
|
});
|
|
@@ -13225,9 +13225,9 @@ var SearchBar = function (_a) {
|
|
|
13225
13225
|
var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b, _c = _a.isBlogSearchBar, isBlogSearchBar = _c === void 0 ? false : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? 'Search for products' : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Search for products' : _e, _f = _a.id, id = _f === void 0 ? 'search' : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g;
|
|
13226
13226
|
var theme = useTheme();
|
|
13227
13227
|
if (initialTerm) {
|
|
13228
|
-
initialState.term = initialTerm;
|
|
13228
|
+
initialState$1.term = initialTerm;
|
|
13229
13229
|
}
|
|
13230
|
-
var _h = React$2.useReducer(reducer, initialState), state = _h[0], dispatch = _h[1];
|
|
13230
|
+
var _h = React$2.useReducer(reducer, initialState$1), state = _h[0], dispatch = _h[1];
|
|
13231
13231
|
var ref = React$2.useRef(null);
|
|
13232
13232
|
var shouldDisplaySuggestion = function () {
|
|
13233
13233
|
return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
|
|
@@ -13253,7 +13253,7 @@ var SearchBar = function (_a) {
|
|
|
13253
13253
|
onClose();
|
|
13254
13254
|
}
|
|
13255
13255
|
};
|
|
13256
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13256
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$l, __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) {
|
|
13257
13257
|
if (e.key === 'Enter') {
|
|
13258
13258
|
e.preventDefault();
|
|
13259
13259
|
e.stopPropagation();
|
|
@@ -13262,14 +13262,14 @@ var SearchBar = function (_a) {
|
|
|
13262
13262
|
} }, 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));
|
|
13263
13263
|
};
|
|
13264
13264
|
|
|
13265
|
-
var Container$
|
|
13265
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
13266
13266
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13267
13267
|
return borderRadiusVariant &&
|
|
13268
13268
|
"\n border-radius: 40px;\n ";
|
|
13269
13269
|
});
|
|
13270
13270
|
// max-height: 31.875rem;
|
|
13271
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13272
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13271
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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'); });
|
|
13272
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13273
13273
|
var settings = {
|
|
13274
13274
|
dots: true,
|
|
13275
13275
|
infinite: false,
|
|
@@ -13296,8 +13296,8 @@ var ImageProductWithTags = function (_a) {
|
|
|
13296
13296
|
}
|
|
13297
13297
|
}
|
|
13298
13298
|
}, [images, selectedValue]);
|
|
13299
|
-
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$
|
|
13300
|
-
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));
|
|
13299
|
+
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$k, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13300
|
+
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$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13301
13301
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13302
13302
|
};
|
|
13303
13303
|
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
@@ -13333,14 +13333,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13333
13333
|
};
|
|
13334
13334
|
}, [preventTouch, ref, touchStart]);
|
|
13335
13335
|
}
|
|
13336
|
-
var templateObject_1$
|
|
13336
|
+
var templateObject_1$r, templateObject_2$h, templateObject_3$h;
|
|
13337
13337
|
|
|
13338
|
-
var Container$
|
|
13338
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
13339
13339
|
var ProductGalleryMobile = function (_a) {
|
|
13340
13340
|
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, selectedValue = _a.selectedValue;
|
|
13341
|
-
return (jsxRuntime.jsx(Container$
|
|
13341
|
+
return (jsxRuntime.jsx(Container$j, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13342
13342
|
};
|
|
13343
|
-
var templateObject_1$
|
|
13343
|
+
var templateObject_1$q;
|
|
13344
13344
|
|
|
13345
13345
|
var Portal = function (_a) {
|
|
13346
13346
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13473,14 +13473,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13473
13473
|
var visibleStyle = function (_a) {
|
|
13474
13474
|
var opened = _a.opened;
|
|
13475
13475
|
return opened
|
|
13476
|
-
? css(templateObject_1$
|
|
13476
|
+
? css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13477
13477
|
};
|
|
13478
13478
|
var transformStyle = function (_a) {
|
|
13479
13479
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13480
13480
|
return opened
|
|
13481
|
-
? css(templateObject_3$
|
|
13481
|
+
? css(templateObject_3$g || (templateObject_3$g = __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%)');
|
|
13482
13482
|
};
|
|
13483
|
-
var Container$
|
|
13483
|
+
var Container$i = 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({
|
|
13484
13484
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13485
13485
|
}), visibleStyle, transformStyle);
|
|
13486
13486
|
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);
|
|
@@ -13493,7 +13493,7 @@ var Modal = function (_a) {
|
|
|
13493
13493
|
}
|
|
13494
13494
|
close();
|
|
13495
13495
|
};
|
|
13496
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13496
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$i, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13497
13497
|
};
|
|
13498
13498
|
var modalEvent = function (id, detail) {
|
|
13499
13499
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13521,39 +13521,39 @@ var useModal = function (id) {
|
|
|
13521
13521
|
close: close,
|
|
13522
13522
|
}); }, [close, open, opened]);
|
|
13523
13523
|
};
|
|
13524
|
-
var templateObject_1$
|
|
13524
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
13525
13525
|
|
|
13526
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13526
|
+
var Text$2 = newStyled.span(templateObject_1$o || (templateObject_1$o = __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; });
|
|
13527
13527
|
var Title$1 = function (_a) {
|
|
13528
13528
|
var title = _a.title;
|
|
13529
13529
|
var theme = useTheme();
|
|
13530
13530
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13531
13531
|
};
|
|
13532
|
-
var templateObject_1$
|
|
13532
|
+
var templateObject_1$o;
|
|
13533
13533
|
|
|
13534
|
-
var P = newStyled.p(templateObject_1$
|
|
13534
|
+
var P = newStyled.p(templateObject_1$n || (templateObject_1$n = __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; });
|
|
13535
13535
|
var Promo = function (_a) {
|
|
13536
13536
|
var text = _a.text;
|
|
13537
13537
|
var theme = useTheme();
|
|
13538
13538
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13539
13539
|
};
|
|
13540
|
-
var templateObject_1$
|
|
13540
|
+
var templateObject_1$n;
|
|
13541
13541
|
|
|
13542
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13542
|
+
var Text$1 = newStyled.span(templateObject_1$m || (templateObject_1$m = __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; });
|
|
13543
13543
|
var Description = function (_a) {
|
|
13544
13544
|
var text = _a.text;
|
|
13545
13545
|
var theme = useTheme();
|
|
13546
13546
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13547
13547
|
};
|
|
13548
|
-
var templateObject_1$
|
|
13548
|
+
var templateObject_1$m;
|
|
13549
13549
|
|
|
13550
|
-
var Container$
|
|
13550
|
+
var Container$h = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"); });
|
|
13551
13551
|
var CloseButton$1 = function (_a) {
|
|
13552
13552
|
var onClick = _a.onClick, size = _a.size;
|
|
13553
13553
|
var theme = useTheme();
|
|
13554
|
-
return (jsxRuntime.jsx(Container$
|
|
13554
|
+
return (jsxRuntime.jsx(Container$h, __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));
|
|
13555
13555
|
};
|
|
13556
|
-
var templateObject_1$
|
|
13556
|
+
var templateObject_1$l;
|
|
13557
13557
|
|
|
13558
13558
|
var CartProductItem = {
|
|
13559
13559
|
Title: Title$1,
|
|
@@ -13563,9 +13563,9 @@ var CartProductItem = {
|
|
|
13563
13563
|
CloseButton: CloseButton$1,
|
|
13564
13564
|
};
|
|
13565
13565
|
|
|
13566
|
-
var Container$
|
|
13567
|
-
var Item = newStyled.span(templateObject_2$
|
|
13568
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13566
|
+
var Container$g = newStyled.div(templateObject_1$k || (templateObject_1$k = __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; });
|
|
13567
|
+
var Item = newStyled.span(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
13568
|
+
var Number$1 = newStyled(Item)(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
13569
13569
|
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"])));
|
|
13570
13570
|
var QuantityPicker = function (_a) {
|
|
13571
13571
|
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;
|
|
@@ -13589,9 +13589,9 @@ var QuantityPicker = function (_a) {
|
|
|
13589
13589
|
return clamp(value);
|
|
13590
13590
|
});
|
|
13591
13591
|
}, [value, clamp]);
|
|
13592
|
-
return (jsxRuntime.jsxs(Container$
|
|
13592
|
+
return (jsxRuntime.jsxs(Container$g, __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));
|
|
13593
13593
|
};
|
|
13594
|
-
var templateObject_1$
|
|
13594
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$f, templateObject_4$9;
|
|
13595
13595
|
|
|
13596
13596
|
var htmlReactParser = {exports: {}};
|
|
13597
13597
|
|
|
@@ -17372,9 +17372,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17372
17372
|
HTMLReactParser$1.attributesToProps;
|
|
17373
17373
|
HTMLReactParser$1.Element;
|
|
17374
17374
|
|
|
17375
|
-
var Container$
|
|
17376
|
-
var Card = newStyled.div(templateObject_2$
|
|
17377
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17375
|
+
var Container$f = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
17376
|
+
var Card = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
17377
|
+
var Tag = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
17378
17378
|
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"])));
|
|
17379
17379
|
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"])));
|
|
17380
17380
|
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"])));
|
|
@@ -17382,7 +17382,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 =
|
|
|
17382
17382
|
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"])));
|
|
17383
17383
|
var PackSelector = function (_a) {
|
|
17384
17384
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17385
|
-
return (jsxRuntime.jsx(Container$
|
|
17385
|
+
return (jsxRuntime.jsx(Container$f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17386
17386
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17387
17387
|
}) }), void 0));
|
|
17388
17388
|
};
|
|
@@ -17408,23 +17408,23 @@ var PackCard = function (_a) {
|
|
|
17408
17408
|
currency: currencyCode || 'USD',
|
|
17409
17409
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17410
17410
|
};
|
|
17411
|
-
var templateObject_1$
|
|
17411
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$e, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3;
|
|
17412
17412
|
|
|
17413
|
-
var Title = newStyled.div(templateObject_1$
|
|
17414
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17415
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17416
|
-
var Container$
|
|
17413
|
+
var Title = newStyled.div(templateObject_1$i || (templateObject_1$i = __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; });
|
|
17414
|
+
var H2 = newStyled.h2(templateObject_2$d || (templateObject_2$d = __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; });
|
|
17415
|
+
var ArrowContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17416
|
+
var Container$e = 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'); });
|
|
17417
17417
|
var Accordion = function (_a) {
|
|
17418
17418
|
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;
|
|
17419
17419
|
var theme = useTheme();
|
|
17420
17420
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17421
|
-
return (jsxRuntime.jsxs(Container$
|
|
17421
|
+
return (jsxRuntime.jsxs(Container$e, __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));
|
|
17422
17422
|
};
|
|
17423
|
-
var templateObject_1$
|
|
17423
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$d, templateObject_4$7;
|
|
17424
17424
|
|
|
17425
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17426
|
-
var Header = newStyled.div(templateObject_2$
|
|
17427
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17425
|
+
var SectionContent = newStyled.div(templateObject_1$h || (templateObject_1$h = __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; });
|
|
17426
|
+
var Header = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
17427
|
+
var MobileHeader = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
17428
17428
|
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"])));
|
|
17429
17429
|
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; });
|
|
17430
17430
|
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; });
|
|
@@ -17432,7 +17432,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17432
17432
|
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; });
|
|
17433
17433
|
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"])));
|
|
17434
17434
|
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"])));
|
|
17435
|
-
var templateObject_1$
|
|
17435
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$c, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17436
17436
|
|
|
17437
17437
|
var Filters = function (_a) {
|
|
17438
17438
|
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;
|
|
@@ -17530,20 +17530,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17530
17530
|
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));
|
|
17531
17531
|
};
|
|
17532
17532
|
|
|
17533
|
-
var Container$
|
|
17534
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17535
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17533
|
+
var Container$d = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
17534
|
+
var BackArrow = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17535
|
+
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
17536
17536
|
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"])));
|
|
17537
17537
|
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"])));
|
|
17538
17538
|
var SearchNavigation = function (_a) {
|
|
17539
17539
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17540
|
-
return (jsxRuntime.jsxs(Container$
|
|
17540
|
+
return (jsxRuntime.jsxs(Container$d, { 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) {
|
|
17541
17541
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17542
17542
|
}) }, void 0)] }, void 0));
|
|
17543
17543
|
};
|
|
17544
|
-
var templateObject_1$
|
|
17544
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$b, templateObject_4$5, templateObject_5$3;
|
|
17545
17545
|
|
|
17546
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17546
|
+
var TabContainer = newStyled.div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
17547
17547
|
var titleSize = _a.titleSize;
|
|
17548
17548
|
return titleSize;
|
|
17549
17549
|
}, function (_a) {
|
|
@@ -17560,14 +17560,14 @@ var Tab = function (_a) {
|
|
|
17560
17560
|
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;
|
|
17561
17561
|
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));
|
|
17562
17562
|
};
|
|
17563
|
-
var templateObject_1$
|
|
17563
|
+
var templateObject_1$f;
|
|
17564
17564
|
|
|
17565
|
-
var Container$
|
|
17566
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17565
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17566
|
+
var TabList = newStyled.div(templateObject_2$a || (templateObject_2$a = __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) {
|
|
17567
17567
|
var backgroundColor = _a.backgroundColor;
|
|
17568
17568
|
return backgroundColor;
|
|
17569
17569
|
});
|
|
17570
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17570
|
+
var TabContent = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17571
17571
|
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"])));
|
|
17572
17572
|
var Tabs = function (_a) {
|
|
17573
17573
|
var _b;
|
|
@@ -17577,11 +17577,11 @@ var Tabs = function (_a) {
|
|
|
17577
17577
|
return null;
|
|
17578
17578
|
}
|
|
17579
17579
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17580
|
-
return (jsxRuntime.jsxs(Container$
|
|
17580
|
+
return (jsxRuntime.jsxs(Container$c, __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));
|
|
17581
17581
|
};
|
|
17582
|
-
var templateObject_1$
|
|
17582
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$4;
|
|
17583
17583
|
|
|
17584
|
-
var Container$
|
|
17584
|
+
var Container$b = newStyled.div(function (props) { return ({
|
|
17585
17585
|
height: 'auto',
|
|
17586
17586
|
textAlign: 'center',
|
|
17587
17587
|
justifyContent: 'center',
|
|
@@ -17631,12 +17631,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17631
17631
|
textAlign: 'center',
|
|
17632
17632
|
lineHeight: '18px',
|
|
17633
17633
|
};
|
|
17634
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17634
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$b, __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));
|
|
17635
17635
|
};
|
|
17636
17636
|
|
|
17637
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17638
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17639
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17637
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
17638
|
+
var VideoOverlay = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
17639
|
+
var FullscreenVideo = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
17640
17640
|
var ImageVideo = function (_a) {
|
|
17641
17641
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17642
17642
|
var video = React$2.useRef(null);
|
|
@@ -17656,11 +17656,11 @@ var ImageVideo = function (_a) {
|
|
|
17656
17656
|
height: '100%',
|
|
17657
17657
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17658
17658
|
};
|
|
17659
|
-
var templateObject_1$
|
|
17659
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9;
|
|
17660
17660
|
|
|
17661
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17662
|
-
var ContainerMobile = css(templateObject_2$
|
|
17663
|
-
var Container$
|
|
17661
|
+
var ContainerDesktop = css(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
17662
|
+
var ContainerMobile = css(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
17663
|
+
var Container$a = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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);
|
|
17664
17664
|
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"])));
|
|
17665
17665
|
var TextWithImage = function (_a) {
|
|
17666
17666
|
var _b, _c, _d, _e;
|
|
@@ -17681,7 +17681,7 @@ var TextWithImage = function (_a) {
|
|
|
17681
17681
|
// @ts-ignore
|
|
17682
17682
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17683
17683
|
};
|
|
17684
|
-
return (jsxs(Container$
|
|
17684
|
+
return (jsxs(Container$a, __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: {
|
|
17685
17685
|
backgroundColor: props.btnBGColor,
|
|
17686
17686
|
color: '#ffffff',
|
|
17687
17687
|
border: props.btnBGColor,
|
|
@@ -17691,9 +17691,9 @@ var TextWithImage = function (_a) {
|
|
|
17691
17691
|
},
|
|
17692
17692
|
} }, 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));
|
|
17693
17693
|
};
|
|
17694
|
-
var templateObject_1$
|
|
17694
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
17695
17695
|
|
|
17696
|
-
var Container$
|
|
17696
|
+
var Container$9 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17697
17697
|
var AccordionOptions = function (_a) {
|
|
17698
17698
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17699
17699
|
var _b = React$2.useState({
|
|
@@ -17706,7 +17706,7 @@ var AccordionOptions = function (_a) {
|
|
|
17706
17706
|
}
|
|
17707
17707
|
return false;
|
|
17708
17708
|
};
|
|
17709
|
-
return (jsxRuntime.jsx(Container$
|
|
17709
|
+
return (jsxRuntime.jsx(Container$9, { children: accordions.map(function (accordion, index) {
|
|
17710
17710
|
var forceOpenValue = getForceOpen(index);
|
|
17711
17711
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17712
17712
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17717,9 +17717,9 @@ var AccordionOptions = function (_a) {
|
|
|
17717
17717
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17718
17718
|
}) }, void 0));
|
|
17719
17719
|
};
|
|
17720
|
-
var templateObject_1$
|
|
17720
|
+
var templateObject_1$b;
|
|
17721
17721
|
|
|
17722
|
-
var Container$
|
|
17722
|
+
var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
17723
17723
|
var alignCenter = _a.alignCenter;
|
|
17724
17724
|
return alignCenter &&
|
|
17725
17725
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17729,14 +17729,14 @@ var Container$5 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __ma
|
|
|
17729
17729
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17730
17730
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17731
17731
|
});
|
|
17732
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17733
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17732
|
+
var TitleText = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
17733
|
+
var BannerText = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
17734
17734
|
var ShortBanner = function (_a) {
|
|
17735
17735
|
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;
|
|
17736
17736
|
var theme = useTheme();
|
|
17737
|
-
return (jsxRuntime.jsxs(Container$
|
|
17737
|
+
return (jsxRuntime.jsxs(Container$8, __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));
|
|
17738
17738
|
};
|
|
17739
|
-
var templateObject_1$
|
|
17739
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$7;
|
|
17740
17740
|
|
|
17741
17741
|
/* base styles & size variants */
|
|
17742
17742
|
var UserInfoTextStyles = {
|
|
@@ -17804,13 +17804,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17804
17804
|
}
|
|
17805
17805
|
};
|
|
17806
17806
|
|
|
17807
|
-
var Container$
|
|
17807
|
+
var Container$7 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
17808
17808
|
return props.isMobile
|
|
17809
17809
|
? props.styles.imageContainerMobileMaxWidth
|
|
17810
17810
|
: props.styles.imageContainerMaxWidth;
|
|
17811
17811
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17812
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
17813
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17812
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
17813
|
+
var ImageCard = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
17814
17814
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17815
17815
|
}, function (props) {
|
|
17816
17816
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17828,13 +17828,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17828
17828
|
var theme = useTheme();
|
|
17829
17829
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17830
17830
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17831
|
-
return (jsxRuntime.jsxs(Container$
|
|
17831
|
+
return (jsxRuntime.jsxs(Container$7, __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));
|
|
17832
17832
|
};
|
|
17833
|
-
var templateObject_1$
|
|
17833
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$6;
|
|
17834
17834
|
|
|
17835
|
-
var Container$
|
|
17836
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17837
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17835
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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'); });
|
|
17836
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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'); });
|
|
17837
|
+
var StyledTitle = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17838
17838
|
var titlePosition = _a.titlePosition;
|
|
17839
17839
|
return titlePosition == 'center' &&
|
|
17840
17840
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17842,13 +17842,13 @@ var StyledTitle = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __ma
|
|
|
17842
17842
|
var ImageCardWithDescription = function (_a) {
|
|
17843
17843
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17844
17844
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17845
|
-
return (jsxRuntime.jsxs(Container$
|
|
17845
|
+
return (jsxRuntime.jsxs(Container$6, __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));
|
|
17846
17846
|
};
|
|
17847
|
-
var templateObject_1$
|
|
17847
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$5;
|
|
17848
17848
|
|
|
17849
|
-
var Container$
|
|
17850
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17851
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17849
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17850
|
+
var CheckpointContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17851
|
+
var CheckpointDate = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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; });
|
|
17852
17852
|
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'); });
|
|
17853
17853
|
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 text-align: left;\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 text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
17854
17854
|
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) {
|
|
@@ -17875,7 +17875,7 @@ var TrackingProgress = function (_a) {
|
|
|
17875
17875
|
}
|
|
17876
17876
|
return '30px';
|
|
17877
17877
|
};
|
|
17878
|
-
return (jsxRuntime.jsxs(Container$
|
|
17878
|
+
return (jsxRuntime.jsxs(Container$5, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17879
17879
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17880
17880
|
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
|
|
17881
17881
|
? theme.colors.semantic.informative.color
|
|
@@ -17884,11 +17884,11 @@ var TrackingProgress = function (_a) {
|
|
|
17884
17884
|
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));
|
|
17885
17885
|
})] }), void 0));
|
|
17886
17886
|
};
|
|
17887
|
-
var templateObject_1$
|
|
17887
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
17888
17888
|
|
|
17889
|
-
var Container$
|
|
17890
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
17891
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
17889
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
17890
|
+
var ReviewsContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
17891
|
+
var ReviewsCount = newStyled.div(templateObject_3$3 || (templateObject_3$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"])));
|
|
17892
17892
|
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"])));
|
|
17893
17893
|
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"])));
|
|
17894
17894
|
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"])));
|
|
@@ -17900,13 +17900,13 @@ var ReviewsHeader = function (_a) {
|
|
|
17900
17900
|
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;
|
|
17901
17901
|
var starsNumber = 5;
|
|
17902
17902
|
var theme = useTheme();
|
|
17903
|
-
return (jsxRuntime.jsxs(Container$
|
|
17903
|
+
return (jsxRuntime.jsxs(Container$4, { 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));
|
|
17904
17904
|
};
|
|
17905
|
-
var templateObject_1$
|
|
17905
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
17906
17906
|
|
|
17907
|
-
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"])));
|
|
17908
|
-
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"])));
|
|
17909
|
-
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"])));
|
|
17907
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
17908
|
+
var Content = newStyled.div(templateObject_2$2 || (templateObject_2$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"])));
|
|
17909
|
+
var StarsContent = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
17910
17910
|
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"])));
|
|
17911
17911
|
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"])));
|
|
17912
17912
|
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"])));
|
|
@@ -17942,10 +17942,348 @@ var Review = function (_a) {
|
|
|
17942
17942
|
}
|
|
17943
17943
|
}
|
|
17944
17944
|
}, [opened]);
|
|
17945
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
17945
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
17946
17946
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, 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), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), 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));
|
|
17947
17947
|
};
|
|
17948
|
-
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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
17948
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$2, 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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
17949
|
+
|
|
17950
|
+
function _extends() {
|
|
17951
|
+
_extends = Object.assign || function (target) {
|
|
17952
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
17953
|
+
var source = arguments[i];
|
|
17954
|
+
|
|
17955
|
+
for (var key in source) {
|
|
17956
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
17957
|
+
target[key] = source[key];
|
|
17958
|
+
}
|
|
17959
|
+
}
|
|
17960
|
+
}
|
|
17961
|
+
|
|
17962
|
+
return target;
|
|
17963
|
+
};
|
|
17964
|
+
|
|
17965
|
+
return _extends.apply(this, arguments);
|
|
17966
|
+
}
|
|
17967
|
+
|
|
17968
|
+
var LEFT = "Left";
|
|
17969
|
+
var RIGHT = "Right";
|
|
17970
|
+
var UP = "Up";
|
|
17971
|
+
var DOWN = "Down";
|
|
17972
|
+
|
|
17973
|
+
var defaultProps = {
|
|
17974
|
+
delta: 10,
|
|
17975
|
+
preventDefaultTouchmoveEvent: false,
|
|
17976
|
+
rotationAngle: 0,
|
|
17977
|
+
trackMouse: false,
|
|
17978
|
+
trackTouch: true
|
|
17979
|
+
};
|
|
17980
|
+
var initialState = {
|
|
17981
|
+
first: true,
|
|
17982
|
+
initial: [0, 0],
|
|
17983
|
+
start: 0,
|
|
17984
|
+
swiping: false,
|
|
17985
|
+
xy: [0, 0]
|
|
17986
|
+
};
|
|
17987
|
+
var mouseMove = "mousemove";
|
|
17988
|
+
var mouseUp = "mouseup";
|
|
17989
|
+
var touchEnd = "touchend";
|
|
17990
|
+
var touchMove = "touchmove";
|
|
17991
|
+
var touchStart = "touchstart";
|
|
17992
|
+
|
|
17993
|
+
function getDirection(absX, absY, deltaX, deltaY) {
|
|
17994
|
+
if (absX > absY) {
|
|
17995
|
+
if (deltaX > 0) {
|
|
17996
|
+
return RIGHT;
|
|
17997
|
+
}
|
|
17998
|
+
|
|
17999
|
+
return LEFT;
|
|
18000
|
+
} else if (deltaY > 0) {
|
|
18001
|
+
return DOWN;
|
|
18002
|
+
}
|
|
18003
|
+
|
|
18004
|
+
return UP;
|
|
18005
|
+
}
|
|
18006
|
+
|
|
18007
|
+
function rotateXYByAngle(pos, angle) {
|
|
18008
|
+
if (angle === 0) return pos;
|
|
18009
|
+
var angleInRadians = Math.PI / 180 * angle;
|
|
18010
|
+
var x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
|
|
18011
|
+
var y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
|
|
18012
|
+
return [x, y];
|
|
18013
|
+
}
|
|
18014
|
+
|
|
18015
|
+
function getHandlers(set, handlerProps) {
|
|
18016
|
+
var onStart = function onStart(event) {
|
|
18017
|
+
if (event && "touches" in event && event.touches.length > 1) return;
|
|
18018
|
+
set(function (state, props) {
|
|
18019
|
+
if (props.trackMouse) {
|
|
18020
|
+
document.addEventListener(mouseMove, onMove);
|
|
18021
|
+
document.addEventListener(mouseUp, onUp);
|
|
18022
|
+
}
|
|
18023
|
+
|
|
18024
|
+
var _ref = "touches" in event ? event.touches[0] : event,
|
|
18025
|
+
clientX = _ref.clientX,
|
|
18026
|
+
clientY = _ref.clientY;
|
|
18027
|
+
|
|
18028
|
+
var xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
|
|
18029
|
+
return _extends({}, state, initialState, {
|
|
18030
|
+
initial: [].concat(xy),
|
|
18031
|
+
xy: xy,
|
|
18032
|
+
start: event.timeStamp || 0
|
|
18033
|
+
});
|
|
18034
|
+
});
|
|
18035
|
+
};
|
|
18036
|
+
|
|
18037
|
+
var onMove = function onMove(event) {
|
|
18038
|
+
set(function (state, props) {
|
|
18039
|
+
if ("touches" in event && event.touches.length > 1) {
|
|
18040
|
+
return state;
|
|
18041
|
+
}
|
|
18042
|
+
|
|
18043
|
+
var _ref2 = "touches" in event ? event.touches[0] : event,
|
|
18044
|
+
clientX = _ref2.clientX,
|
|
18045
|
+
clientY = _ref2.clientY;
|
|
18046
|
+
|
|
18047
|
+
var _rotateXYByAngle = rotateXYByAngle([clientX, clientY], props.rotationAngle),
|
|
18048
|
+
x = _rotateXYByAngle[0],
|
|
18049
|
+
y = _rotateXYByAngle[1];
|
|
18050
|
+
|
|
18051
|
+
var deltaX = x - state.xy[0];
|
|
18052
|
+
var deltaY = y - state.xy[1];
|
|
18053
|
+
var absX = Math.abs(deltaX);
|
|
18054
|
+
var absY = Math.abs(deltaY);
|
|
18055
|
+
var time = (event.timeStamp || 0) - state.start;
|
|
18056
|
+
var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
|
|
18057
|
+
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
|
|
18058
|
+
var dir = getDirection(absX, absY, deltaX, deltaY);
|
|
18059
|
+
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
|
|
18060
|
+
if (absX < delta && absY < delta && !state.swiping) return state;
|
|
18061
|
+
var eventData = {
|
|
18062
|
+
absX: absX,
|
|
18063
|
+
absY: absY,
|
|
18064
|
+
deltaX: deltaX,
|
|
18065
|
+
deltaY: deltaY,
|
|
18066
|
+
dir: dir,
|
|
18067
|
+
event: event,
|
|
18068
|
+
first: state.first,
|
|
18069
|
+
initial: state.initial,
|
|
18070
|
+
velocity: velocity,
|
|
18071
|
+
vxvy: vxvy
|
|
18072
|
+
};
|
|
18073
|
+
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
|
|
18074
|
+
props.onSwiping && props.onSwiping(eventData);
|
|
18075
|
+
var cancelablePageSwipe = false;
|
|
18076
|
+
|
|
18077
|
+
if (props.onSwiping || props.onSwiped || "onSwiped" + dir in props) {
|
|
18078
|
+
cancelablePageSwipe = true;
|
|
18079
|
+
}
|
|
18080
|
+
|
|
18081
|
+
if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch && event.cancelable) event.preventDefault();
|
|
18082
|
+
return _extends({}, state, {
|
|
18083
|
+
first: false,
|
|
18084
|
+
eventData: eventData,
|
|
18085
|
+
swiping: true
|
|
18086
|
+
});
|
|
18087
|
+
});
|
|
18088
|
+
};
|
|
18089
|
+
|
|
18090
|
+
var onEnd = function onEnd(event) {
|
|
18091
|
+
set(function (state, props) {
|
|
18092
|
+
var eventData;
|
|
18093
|
+
|
|
18094
|
+
if (state.swiping && state.eventData) {
|
|
18095
|
+
eventData = _extends({}, state.eventData, {
|
|
18096
|
+
event: event
|
|
18097
|
+
});
|
|
18098
|
+
props.onSwiped && props.onSwiped(eventData);
|
|
18099
|
+
var onSwipedDir = props["onSwiped" + eventData.dir];
|
|
18100
|
+
onSwipedDir && onSwipedDir(eventData);
|
|
18101
|
+
} else {
|
|
18102
|
+
props.onTap && props.onTap({
|
|
18103
|
+
event: event
|
|
18104
|
+
});
|
|
18105
|
+
}
|
|
18106
|
+
|
|
18107
|
+
return _extends({}, state, initialState, {
|
|
18108
|
+
eventData: eventData
|
|
18109
|
+
});
|
|
18110
|
+
});
|
|
18111
|
+
};
|
|
18112
|
+
|
|
18113
|
+
var cleanUpMouse = function cleanUpMouse() {
|
|
18114
|
+
document.removeEventListener(mouseMove, onMove);
|
|
18115
|
+
document.removeEventListener(mouseUp, onUp);
|
|
18116
|
+
};
|
|
18117
|
+
|
|
18118
|
+
var onUp = function onUp(e) {
|
|
18119
|
+
cleanUpMouse();
|
|
18120
|
+
onEnd(e);
|
|
18121
|
+
};
|
|
18122
|
+
|
|
18123
|
+
var attachTouch = function attachTouch(el, passive) {
|
|
18124
|
+
var cleanup = function cleanup() {};
|
|
18125
|
+
|
|
18126
|
+
if (el && el.addEventListener) {
|
|
18127
|
+
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];
|
|
18128
|
+
tls.forEach(function (_ref3) {
|
|
18129
|
+
var e = _ref3[0],
|
|
18130
|
+
h = _ref3[1];
|
|
18131
|
+
return el.addEventListener(e, h, {
|
|
18132
|
+
passive: passive
|
|
18133
|
+
});
|
|
18134
|
+
});
|
|
18135
|
+
|
|
18136
|
+
cleanup = function cleanup() {
|
|
18137
|
+
return tls.forEach(function (_ref4) {
|
|
18138
|
+
var e = _ref4[0],
|
|
18139
|
+
h = _ref4[1];
|
|
18140
|
+
return el.removeEventListener(e, h);
|
|
18141
|
+
});
|
|
18142
|
+
};
|
|
18143
|
+
}
|
|
18144
|
+
|
|
18145
|
+
return cleanup;
|
|
18146
|
+
};
|
|
18147
|
+
|
|
18148
|
+
var onRef = function onRef(el) {
|
|
18149
|
+
if (el === null) return;
|
|
18150
|
+
set(function (state, props) {
|
|
18151
|
+
if (state.el === el) return state;
|
|
18152
|
+
var addState = {};
|
|
18153
|
+
|
|
18154
|
+
if (state.el && state.el !== el && state.cleanUpTouch) {
|
|
18155
|
+
state.cleanUpTouch();
|
|
18156
|
+
addState.cleanUpTouch = undefined;
|
|
18157
|
+
}
|
|
18158
|
+
|
|
18159
|
+
if (props.trackTouch && el) {
|
|
18160
|
+
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
|
|
18161
|
+
}
|
|
18162
|
+
|
|
18163
|
+
return _extends({}, state, {
|
|
18164
|
+
el: el
|
|
18165
|
+
}, addState);
|
|
18166
|
+
});
|
|
18167
|
+
};
|
|
18168
|
+
|
|
18169
|
+
var output = {
|
|
18170
|
+
ref: onRef
|
|
18171
|
+
};
|
|
18172
|
+
|
|
18173
|
+
if (handlerProps.trackMouse) {
|
|
18174
|
+
output.onMouseDown = onStart;
|
|
18175
|
+
}
|
|
18176
|
+
|
|
18177
|
+
return [output, attachTouch];
|
|
18178
|
+
}
|
|
18179
|
+
|
|
18180
|
+
function updateTransientState(state, props, attachTouch) {
|
|
18181
|
+
var addState = {};
|
|
18182
|
+
|
|
18183
|
+
if (!props.trackTouch && state.cleanUpTouch) {
|
|
18184
|
+
state.cleanUpTouch();
|
|
18185
|
+
addState.cleanUpTouch = undefined;
|
|
18186
|
+
} else if (props.trackTouch && !state.cleanUpTouch) {
|
|
18187
|
+
if (state.el) {
|
|
18188
|
+
addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);
|
|
18189
|
+
}
|
|
18190
|
+
}
|
|
18191
|
+
|
|
18192
|
+
return _extends({}, state, addState);
|
|
18193
|
+
}
|
|
18194
|
+
|
|
18195
|
+
function useSwipeable(options) {
|
|
18196
|
+
var trackMouse = options.trackMouse;
|
|
18197
|
+
var transientState = React__namespace.useRef(_extends({}, initialState));
|
|
18198
|
+
var transientProps = React__namespace.useRef(_extends({}, defaultProps));
|
|
18199
|
+
transientProps.current = _extends({}, defaultProps, options);
|
|
18200
|
+
|
|
18201
|
+
var _React$useMemo = React__namespace.useMemo(function () {
|
|
18202
|
+
return getHandlers(function (stateSetter) {
|
|
18203
|
+
return transientState.current = stateSetter(transientState.current, transientProps.current);
|
|
18204
|
+
}, {
|
|
18205
|
+
trackMouse: trackMouse
|
|
18206
|
+
});
|
|
18207
|
+
}, [trackMouse]),
|
|
18208
|
+
handlers = _React$useMemo[0],
|
|
18209
|
+
attachTouch = _React$useMemo[1];
|
|
18210
|
+
|
|
18211
|
+
transientState.current = updateTransientState(transientState.current, transientProps.current, attachTouch);
|
|
18212
|
+
return handlers;
|
|
18213
|
+
}
|
|
18214
|
+
|
|
18215
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
18216
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18217
|
+
return borderRadiusVariant &&
|
|
18218
|
+
"\n border-radius: 40px;\n ";
|
|
18219
|
+
});
|
|
18220
|
+
var TopTagContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __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'); });
|
|
18221
|
+
var BottomTagContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18222
|
+
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18223
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18224
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { 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 }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18225
|
+
});
|
|
18226
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3$1;
|
|
18227
|
+
|
|
18228
|
+
var Button = newStyled.button(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
18229
|
+
var ArrowButton = function (_a) {
|
|
18230
|
+
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18231
|
+
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18232
|
+
};
|
|
18233
|
+
var templateObject_1$3;
|
|
18234
|
+
|
|
18235
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
18236
|
+
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18237
|
+
var SlideDots = function (_a) {
|
|
18238
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18239
|
+
var theme = useTheme();
|
|
18240
|
+
return (jsxRuntime.jsx(Container$1, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18241
|
+
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18242
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18243
|
+
};
|
|
18244
|
+
var templateObject_1$2;
|
|
18245
|
+
|
|
18246
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18247
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18248
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18249
|
+
var SlideNavigation = function (_a) {
|
|
18250
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18251
|
+
var theme = useTheme();
|
|
18252
|
+
var upperLimit = quantity - 1;
|
|
18253
|
+
var lowerLimit = 0;
|
|
18254
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedIndex > lowerLimit && (jsxRuntime.jsx(LeftButton, { Icon: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
18255
|
+
onNavigate(selectedIndex - 1);
|
|
18256
|
+
} }, void 0)), selectedIndex < upperLimit && (jsxRuntime.jsx(RightButton, { Icon: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
18257
|
+
onNavigate(selectedIndex + 1);
|
|
18258
|
+
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18259
|
+
};
|
|
18260
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18261
|
+
|
|
18262
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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"])));
|
|
18263
|
+
var ProductGalleryMobileV2 = function (_a) {
|
|
18264
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
18265
|
+
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
18266
|
+
React$2.useEffect(function () {
|
|
18267
|
+
if (selectedValue == null) {
|
|
18268
|
+
return;
|
|
18269
|
+
}
|
|
18270
|
+
setIndex(Math.max(0, images.indexOf(selectedValue)));
|
|
18271
|
+
}, [selectedValue, images]);
|
|
18272
|
+
var _d = React$2.useState(function () { return images[index]; }), selectedImage = _d[0], setSelectedImage = _d[1];
|
|
18273
|
+
var handlers = useSwipeable({
|
|
18274
|
+
onSwipedLeft: React$2.useCallback(function () {
|
|
18275
|
+
setIndex(function (index) { return Math.min(index + 1, images.length - 1); });
|
|
18276
|
+
}, [images.length]),
|
|
18277
|
+
onSwipedRight: React$2.useCallback(function () {
|
|
18278
|
+
setIndex(function (index) { return Math.max(index - 1, 0); });
|
|
18279
|
+
}, []),
|
|
18280
|
+
});
|
|
18281
|
+
React$2.useEffect(function () {
|
|
18282
|
+
setSelectedImage(images[index]);
|
|
18283
|
+
}, [index, images]);
|
|
18284
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18285
|
+
};
|
|
18286
|
+
var templateObject_1;
|
|
17949
18287
|
|
|
17950
18288
|
exports.Accordion = Accordion$1;
|
|
17951
18289
|
exports.AccordionOptions = AccordionOptions;
|
|
@@ -17993,6 +18331,7 @@ exports.PriceLabel = PriceLabel;
|
|
|
17993
18331
|
exports.PriceLabelV2 = PriceLabelV2;
|
|
17994
18332
|
exports.ProductGallery = ProductGallery;
|
|
17995
18333
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
18334
|
+
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
17996
18335
|
exports.ProgressBar = ProgressBar;
|
|
17997
18336
|
exports.QuantityPicker = QuantityPicker;
|
|
17998
18337
|
exports.RadioGroupInput = RadioGroupInput;
|