@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.esm.js
CHANGED
|
@@ -1019,7 +1019,7 @@ var SlideDot = function (_a) {
|
|
|
1019
1019
|
return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
1020
1020
|
};
|
|
1021
1021
|
|
|
1022
|
-
var SlideDots = /*#__PURE__*/Object.freeze({
|
|
1022
|
+
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
1023
1023
|
__proto__: null,
|
|
1024
1024
|
SlideDot: SlideDot
|
|
1025
1025
|
});
|
|
@@ -1139,13 +1139,13 @@ var Icon = {
|
|
|
1139
1139
|
Messaging: Messaging,
|
|
1140
1140
|
Download: Download,
|
|
1141
1141
|
Payment: Payment,
|
|
1142
|
-
SlideDots: SlideDots,
|
|
1142
|
+
SlideDots: SlideDots$1,
|
|
1143
1143
|
Emoji: Emoji,
|
|
1144
1144
|
MyAccount: MyAccount,
|
|
1145
1145
|
};
|
|
1146
1146
|
|
|
1147
|
-
function _extends$
|
|
1148
|
-
_extends$
|
|
1147
|
+
function _extends$2() {
|
|
1148
|
+
_extends$2 = Object.assign || function (target) {
|
|
1149
1149
|
for (var i = 1; i < arguments.length; i++) {
|
|
1150
1150
|
var source = arguments[i];
|
|
1151
1151
|
|
|
@@ -1159,7 +1159,7 @@ function _extends$1() {
|
|
|
1159
1159
|
return target;
|
|
1160
1160
|
};
|
|
1161
1161
|
|
|
1162
|
-
return _extends$
|
|
1162
|
+
return _extends$2.apply(this, arguments);
|
|
1163
1163
|
}
|
|
1164
1164
|
|
|
1165
1165
|
function memoize(fn) {
|
|
@@ -3257,7 +3257,7 @@ var getTheme = function getTheme(outerTheme, theme) {
|
|
|
3257
3257
|
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
|
|
3258
3258
|
}
|
|
3259
3259
|
|
|
3260
|
-
return _extends$
|
|
3260
|
+
return _extends$2({}, outerTheme, theme);
|
|
3261
3261
|
};
|
|
3262
3262
|
|
|
3263
3263
|
var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
|
|
@@ -3984,7 +3984,7 @@ var createStyled = function createStyled(tag, options) {
|
|
|
3984
3984
|
});
|
|
3985
3985
|
|
|
3986
3986
|
Styled.withComponent = function (nextTag, nextOptions) {
|
|
3987
|
-
return createStyled(nextTag, _extends$
|
|
3987
|
+
return createStyled(nextTag, _extends$2({}, options, nextOptions, {
|
|
3988
3988
|
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
|
|
3989
3989
|
})).apply(void 0, styles);
|
|
3990
3990
|
};
|
|
@@ -4028,7 +4028,7 @@ var InputValidationType;
|
|
|
4028
4028
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4029
4029
|
})(InputValidationType || (InputValidationType = {}));
|
|
4030
4030
|
|
|
4031
|
-
var Section = newStyled.div(templateObject_1$
|
|
4031
|
+
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) {
|
|
4032
4032
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4033
4033
|
});
|
|
4034
4034
|
var CardHeader = function (_a) {
|
|
@@ -4039,14 +4039,14 @@ var CardFooter = function (_a) {
|
|
|
4039
4039
|
var children = _a.children;
|
|
4040
4040
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4041
4041
|
};
|
|
4042
|
-
var templateObject_1$
|
|
4042
|
+
var templateObject_1$1q;
|
|
4043
4043
|
|
|
4044
|
-
var Body = newStyled.div(templateObject_1$
|
|
4044
|
+
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"])));
|
|
4045
4045
|
var CardBody = function (_a) {
|
|
4046
4046
|
var children = _a.children;
|
|
4047
4047
|
return jsx$1(Body, { children: children }, void 0);
|
|
4048
4048
|
};
|
|
4049
|
-
var templateObject_1$
|
|
4049
|
+
var templateObject_1$1p;
|
|
4050
4050
|
|
|
4051
4051
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4052
4052
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4191,7 +4191,7 @@ var AssetsProvider = function (_a) {
|
|
|
4191
4191
|
};
|
|
4192
4192
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4193
4193
|
|
|
4194
|
-
var Container$
|
|
4194
|
+
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) {
|
|
4195
4195
|
var flex = _a.flex;
|
|
4196
4196
|
return flex &&
|
|
4197
4197
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4206,14 +4206,14 @@ var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
4206
4206
|
var Card$1 = function (_a) {
|
|
4207
4207
|
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;
|
|
4208
4208
|
var theme = useTheme();
|
|
4209
|
-
return (jsx$1(Container$
|
|
4209
|
+
return (jsx$1(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));
|
|
4210
4210
|
};
|
|
4211
4211
|
var Card$2 = Object.assign(Card$1, {
|
|
4212
4212
|
Header: CardHeader,
|
|
4213
4213
|
Footer: CardFooter,
|
|
4214
4214
|
Body: CardBody,
|
|
4215
4215
|
});
|
|
4216
|
-
var templateObject_1$
|
|
4216
|
+
var templateObject_1$1o;
|
|
4217
4217
|
|
|
4218
4218
|
var Fragment = Fragment$1;
|
|
4219
4219
|
function jsx(type, props, key) {
|
|
@@ -4359,7 +4359,7 @@ function BaseSelectOption(_a) {
|
|
|
4359
4359
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4360
4360
|
}
|
|
4361
4361
|
|
|
4362
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4362
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4363
4363
|
function BaseSelect(_a) {
|
|
4364
4364
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4365
4365
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4369,7 +4369,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4369
4369
|
Options: BaseSelectOptions,
|
|
4370
4370
|
Option: BaseSelectOption,
|
|
4371
4371
|
});
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1n;
|
|
4373
4373
|
|
|
4374
4374
|
var CustomButton = newStyled.button(function (_a) {
|
|
4375
4375
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4584,12 +4584,12 @@ var CustomCheckboxStyles = {
|
|
|
4584
4584
|
},
|
|
4585
4585
|
};
|
|
4586
4586
|
|
|
4587
|
-
var Container$
|
|
4587
|
+
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"])));
|
|
4588
4588
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4589
4589
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4590
4590
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4591
4591
|
]; });
|
|
4592
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4592
|
+
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) {
|
|
4593
4593
|
var disabled = _a.disabled;
|
|
4594
4594
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4595
4595
|
});
|
|
@@ -4618,9 +4618,9 @@ var Checkbox = function (_a) {
|
|
|
4618
4618
|
useEffect(function () {
|
|
4619
4619
|
mounted.current = true;
|
|
4620
4620
|
}, []);
|
|
4621
|
-
return (jsxs$1(Container$
|
|
4621
|
+
return (jsxs$1(Container$U, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4622
4622
|
};
|
|
4623
|
-
var templateObject_1$
|
|
4623
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
4624
4624
|
|
|
4625
4625
|
var CustomOption = newStyled.li(function (_a) {
|
|
4626
4626
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4699,9 +4699,9 @@ function SimpleDropdown(_a) {
|
|
|
4699
4699
|
return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4700
4700
|
}
|
|
4701
4701
|
|
|
4702
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4703
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4704
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4702
|
+
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; });
|
|
4703
|
+
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; });
|
|
4704
|
+
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"])));
|
|
4705
4705
|
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"])));
|
|
4706
4706
|
var DropdownDialog = function (_a) {
|
|
4707
4707
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4710,7 +4710,7 @@ var DropdownDialog = function (_a) {
|
|
|
4710
4710
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4711
4711
|
}) }), void 0) }), void 0));
|
|
4712
4712
|
};
|
|
4713
|
-
var templateObject_1$
|
|
4713
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$H, templateObject_4$u;
|
|
4714
4714
|
|
|
4715
4715
|
var getStylesBySize$9 = function (size, theme) {
|
|
4716
4716
|
switch (size) {
|
|
@@ -4778,9 +4778,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4778
4778
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4779
4779
|
// `variants` styles that are consistent through all themes.
|
|
4780
4780
|
var TAGS = {
|
|
4781
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4782
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4783
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4781
|
+
hero1: newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""]))),
|
|
4782
|
+
hero2: newStyled.h2(templateObject_2$S || (templateObject_2$S = __makeTemplateObject([""], [""]))),
|
|
4783
|
+
hero3: newStyled.h3(templateObject_3$G || (templateObject_3$G = __makeTemplateObject([""], [""]))),
|
|
4784
4784
|
display1: newStyled.h1(templateObject_4$t || (templateObject_4$t = __makeTemplateObject([""], [""]))),
|
|
4785
4785
|
display2: newStyled.h2(templateObject_5$h || (templateObject_5$h = __makeTemplateObject([""], [""]))),
|
|
4786
4786
|
heading1: newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject([""], [""]))),
|
|
@@ -4904,9 +4904,9 @@ var DEFAULTS = {
|
|
|
4904
4904
|
size: 'regular',
|
|
4905
4905
|
},
|
|
4906
4906
|
};
|
|
4907
|
-
var templateObject_1$
|
|
4907
|
+
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;
|
|
4908
4908
|
|
|
4909
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4909
|
+
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) {
|
|
4910
4910
|
var inline = _a.inline;
|
|
4911
4911
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4912
4912
|
});
|
|
@@ -4925,7 +4925,7 @@ var SizeSelector = function (_a) {
|
|
|
4925
4925
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
4926
4926
|
}) }), void 0)] }), void 0));
|
|
4927
4927
|
};
|
|
4928
|
-
var templateObject_1$
|
|
4928
|
+
var templateObject_1$1j;
|
|
4929
4929
|
|
|
4930
4930
|
var getStylesBySize$8 = function (size) {
|
|
4931
4931
|
switch (size) {
|
|
@@ -4952,7 +4952,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4952
4952
|
} });
|
|
4953
4953
|
};
|
|
4954
4954
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4955
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4955
|
+
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));
|
|
4956
4956
|
};
|
|
4957
4957
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4958
4958
|
if (disabled)
|
|
@@ -4968,16 +4968,16 @@ var TextButton = function (_a) {
|
|
|
4968
4968
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4969
4969
|
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));
|
|
4970
4970
|
};
|
|
4971
|
-
var templateObject_1$
|
|
4971
|
+
var templateObject_1$1i;
|
|
4972
4972
|
|
|
4973
|
-
var Container$
|
|
4974
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4975
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4973
|
+
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"])));
|
|
4974
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4975
|
+
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"])));
|
|
4976
4976
|
var SizeFitGuide = function (_a) {
|
|
4977
4977
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4978
|
-
return (jsxs$1(Container$
|
|
4978
|
+
return (jsxs$1(Container$T, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$2, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4979
4979
|
};
|
|
4980
|
-
var templateObject_1$
|
|
4980
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$F;
|
|
4981
4981
|
|
|
4982
4982
|
var getStylesBySize$7 = function (size) {
|
|
4983
4983
|
switch (size) {
|
|
@@ -5007,7 +5007,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5007
5007
|
};
|
|
5008
5008
|
}
|
|
5009
5009
|
};
|
|
5010
|
-
var Container$
|
|
5010
|
+
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) {
|
|
5011
5011
|
var backgroundColor = _a.backgroundColor;
|
|
5012
5012
|
return backgroundColor;
|
|
5013
5013
|
}, function (_a) {
|
|
@@ -5029,7 +5029,7 @@ var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
|
|
|
5029
5029
|
var size = _a.size;
|
|
5030
5030
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5031
5031
|
});
|
|
5032
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5032
|
+
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) {
|
|
5033
5033
|
var textColor = _a.textColor;
|
|
5034
5034
|
return textColor;
|
|
5035
5035
|
}, function (_a) {
|
|
@@ -5044,9 +5044,9 @@ var H3$1 = newStyled.h3(templateObject_2$O || (templateObject_2$O = __makeTempla
|
|
|
5044
5044
|
var DiscountTag = function (_a) {
|
|
5045
5045
|
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 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5046
5046
|
var theme = useTheme();
|
|
5047
|
-
return (jsx$1(Container$
|
|
5047
|
+
return (jsx$1(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: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5048
5048
|
};
|
|
5049
|
-
var templateObject_1$
|
|
5049
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
5050
5050
|
|
|
5051
5051
|
var getStylesBySize$6 = function (size) {
|
|
5052
5052
|
switch (size) {
|
|
@@ -5076,8 +5076,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5076
5076
|
};
|
|
5077
5077
|
}
|
|
5078
5078
|
};
|
|
5079
|
-
var Container$
|
|
5080
|
-
var Price = newStyled.p(templateObject_2$
|
|
5079
|
+
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"])));
|
|
5080
|
+
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) {
|
|
5081
5081
|
var weight = _a.weight;
|
|
5082
5082
|
return (weight ? weight : '400');
|
|
5083
5083
|
}, function (_a) {
|
|
@@ -5106,7 +5106,7 @@ var Price = newStyled.p(templateObject_2$N || (templateObject_2$N = __makeTempla
|
|
|
5106
5106
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5107
5107
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5108
5108
|
});
|
|
5109
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5109
|
+
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) {
|
|
5110
5110
|
var _b;
|
|
5111
5111
|
var size = _a.size;
|
|
5112
5112
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5127,11 +5127,11 @@ var PriceLabel = function (_a) {
|
|
|
5127
5127
|
weight: 700,
|
|
5128
5128
|
};
|
|
5129
5129
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5130
|
-
return (jsxs$1(Container$
|
|
5130
|
+
return (jsxs$1(Container$R, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5131
5131
|
};
|
|
5132
|
-
var templateObject_1$
|
|
5132
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$E;
|
|
5133
5133
|
|
|
5134
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5134
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5135
5135
|
var PriceLabelV2 = function (_a) {
|
|
5136
5136
|
var _b;
|
|
5137
5137
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5159,9 +5159,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5159
5159
|
weight: 700,
|
|
5160
5160
|
};
|
|
5161
5161
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5162
|
-
return (jsxs$1(Container$
|
|
5162
|
+
return (jsxs$1(Container$R, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5163
5163
|
};
|
|
5164
|
-
var templateObject_1$
|
|
5164
|
+
var templateObject_1$1e;
|
|
5165
5165
|
|
|
5166
5166
|
var OneColorSelector = function (_a) {
|
|
5167
5167
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5202,9 +5202,9 @@ var OutOfStock = function (_a) {
|
|
|
5202
5202
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5203
5203
|
};
|
|
5204
5204
|
|
|
5205
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5206
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5207
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5205
|
+
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"])));
|
|
5206
|
+
newStyled(lt.Label)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5207
|
+
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"])));
|
|
5208
5208
|
var Span = newStyled.span(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5209
5209
|
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"])));
|
|
5210
5210
|
var Label$2 = function (_a) {
|
|
@@ -5224,23 +5224,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5224
5224
|
Option: Option,
|
|
5225
5225
|
OptionsContainer: OptionsContainer,
|
|
5226
5226
|
});
|
|
5227
|
-
var templateObject_1$
|
|
5227
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$g;
|
|
5228
5228
|
|
|
5229
|
-
var Container$
|
|
5229
|
+
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) {
|
|
5230
5230
|
var borderColor = _a.borderColor;
|
|
5231
5231
|
return borderColor;
|
|
5232
5232
|
}, function (_a) {
|
|
5233
5233
|
var noStock = _a.noStock;
|
|
5234
5234
|
return (noStock ? '0.4' : '1');
|
|
5235
5235
|
});
|
|
5236
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5236
|
+
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"])));
|
|
5237
5237
|
var PatternSelector = function (_a) {
|
|
5238
5238
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5239
5239
|
var theme = useTheme();
|
|
5240
5240
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5241
|
-
return (jsx$1(Container$
|
|
5241
|
+
return (jsx$1(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5242
5242
|
};
|
|
5243
|
-
var templateObject_1$
|
|
5243
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5244
5244
|
|
|
5245
5245
|
var renderOptions$1 = function (options) {
|
|
5246
5246
|
if (options.length === 0) {
|
|
@@ -5298,7 +5298,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5298
5298
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5299
5299
|
};
|
|
5300
5300
|
|
|
5301
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5301
|
+
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) {
|
|
5302
5302
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5303
5303
|
return borderRadiusVariant &&
|
|
5304
5304
|
"\nborder-radius: 20px;\n";
|
|
@@ -5313,9 +5313,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
5313
5313
|
var theme = useTheme();
|
|
5314
5314
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5315
5315
|
};
|
|
5316
|
-
var templateObject_1$
|
|
5316
|
+
var templateObject_1$1b;
|
|
5317
5317
|
|
|
5318
|
-
var Button$
|
|
5318
|
+
var Button$4 = newStyled.button(function () { return ({
|
|
5319
5319
|
background: 'transparent',
|
|
5320
5320
|
border: 'none',
|
|
5321
5321
|
cursor: 'pointer',
|
|
@@ -5325,9 +5325,9 @@ var Direction;
|
|
|
5325
5325
|
Direction[Direction["Left"] = 0] = "Left";
|
|
5326
5326
|
Direction[Direction["Right"] = 1] = "Right";
|
|
5327
5327
|
})(Direction || (Direction = {}));
|
|
5328
|
-
var ArrowButton = function (_a) {
|
|
5328
|
+
var ArrowButton$1 = function (_a) {
|
|
5329
5329
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
5330
|
-
return (jsx$1(Button$
|
|
5330
|
+
return (jsx$1(Button$4, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
5331
5331
|
};
|
|
5332
5332
|
|
|
5333
5333
|
function _defineProperty(obj, key, value) {
|
|
@@ -5522,7 +5522,7 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
5522
5522
|
return target;
|
|
5523
5523
|
}
|
|
5524
5524
|
|
|
5525
|
-
var initialState$
|
|
5525
|
+
var initialState$2 = {
|
|
5526
5526
|
animating: false,
|
|
5527
5527
|
autoplaying: null,
|
|
5528
5528
|
currentDirection: 0,
|
|
@@ -7206,7 +7206,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
7206
7206
|
onMouseOver: onMouseOver,
|
|
7207
7207
|
onMouseLeave: onMouseLeave
|
|
7208
7208
|
};
|
|
7209
|
-
return /*#__PURE__*/React__default.createElement("div", _extends$
|
|
7209
|
+
return /*#__PURE__*/React__default.createElement("div", _extends$2({
|
|
7210
7210
|
ref: this.handleRef,
|
|
7211
7211
|
className: "slick-track",
|
|
7212
7212
|
style: this.props.trackStyle
|
|
@@ -7362,7 +7362,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
7362
7362
|
if (this.props.prevArrow) {
|
|
7363
7363
|
prevArrow = /*#__PURE__*/React__default.cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
|
|
7364
7364
|
} else {
|
|
7365
|
-
prevArrow = /*#__PURE__*/React__default.createElement("button", _extends$
|
|
7365
|
+
prevArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
|
|
7366
7366
|
key: "0",
|
|
7367
7367
|
type: "button"
|
|
7368
7368
|
}, prevArrowProps), " ", "Previous");
|
|
@@ -7428,7 +7428,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
|
|
|
7428
7428
|
if (this.props.nextArrow) {
|
|
7429
7429
|
nextArrow = /*#__PURE__*/React__default.cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
|
|
7430
7430
|
} else {
|
|
7431
|
-
nextArrow = /*#__PURE__*/React__default.createElement("button", _extends$
|
|
7431
|
+
nextArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
|
|
7432
7432
|
key: "1",
|
|
7433
7433
|
type: "button"
|
|
7434
7434
|
}, nextArrowProps), " ", "Next");
|
|
@@ -9132,16 +9132,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
9132
9132
|
};
|
|
9133
9133
|
}
|
|
9134
9134
|
|
|
9135
|
-
return /*#__PURE__*/React__default.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default.createElement("div", _extends$
|
|
9135
|
+
return /*#__PURE__*/React__default.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default.createElement("div", _extends$2({
|
|
9136
9136
|
ref: _this.listRefHandler
|
|
9137
|
-
}, listProps), /*#__PURE__*/React__default.createElement(Track, _extends$
|
|
9137
|
+
}, listProps), /*#__PURE__*/React__default.createElement(Track, _extends$2({
|
|
9138
9138
|
ref: _this.trackRefHandler
|
|
9139
9139
|
}, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
|
|
9140
9140
|
});
|
|
9141
9141
|
|
|
9142
9142
|
_this.list = null;
|
|
9143
9143
|
_this.track = null;
|
|
9144
|
-
_this.state = _objectSpread2(_objectSpread2({}, initialState$
|
|
9144
|
+
_this.state = _objectSpread2(_objectSpread2({}, initialState$2), {}, {
|
|
9145
9145
|
currentSlide: _this.props.initialSlide,
|
|
9146
9146
|
slideCount: React__default.Children.count(_this.props.children)
|
|
9147
9147
|
});
|
|
@@ -9248,7 +9248,7 @@ var json2mq = function (query) {
|
|
|
9248
9248
|
|
|
9249
9249
|
var json2mq_1 = json2mq;
|
|
9250
9250
|
|
|
9251
|
-
var defaultProps = {
|
|
9251
|
+
var defaultProps$1 = {
|
|
9252
9252
|
accessibility: true,
|
|
9253
9253
|
adaptiveHeight: false,
|
|
9254
9254
|
afterChange: null,
|
|
@@ -9449,9 +9449,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9449
9449
|
newProps = this.props.responsive.filter(function (resp) {
|
|
9450
9450
|
return resp.breakpoint === _this3.state.breakpoint;
|
|
9451
9451
|
});
|
|
9452
|
-
settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps), this.props), newProps[0].settings);
|
|
9452
|
+
settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps$1), this.props), newProps[0].settings);
|
|
9453
9453
|
} else {
|
|
9454
|
-
settings = _objectSpread2(_objectSpread2({}, defaultProps), this.props);
|
|
9454
|
+
settings = _objectSpread2(_objectSpread2({}, defaultProps$1), this.props);
|
|
9455
9455
|
} // force scrolling by one if centerMode is on
|
|
9456
9456
|
|
|
9457
9457
|
|
|
@@ -9547,7 +9547,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9547
9547
|
settings.unslick = true;
|
|
9548
9548
|
}
|
|
9549
9549
|
|
|
9550
|
-
return /*#__PURE__*/React__default.createElement(InnerSlider, _extends$
|
|
9550
|
+
return /*#__PURE__*/React__default.createElement(InnerSlider, _extends$2({
|
|
9551
9551
|
style: this.props.style,
|
|
9552
9552
|
ref: this.innerSliderRefHandler
|
|
9553
9553
|
}, settings), newChildren);
|
|
@@ -9557,14 +9557,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9557
9557
|
return Slider;
|
|
9558
9558
|
}(React__default.Component);
|
|
9559
9559
|
|
|
9560
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9560
|
+
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) {
|
|
9561
9561
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9562
9562
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9563
9563
|
}, function (_a) {
|
|
9564
9564
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9565
9565
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9566
9566
|
});
|
|
9567
|
-
var templateObject_1$
|
|
9567
|
+
var templateObject_1$1a;
|
|
9568
9568
|
|
|
9569
9569
|
var getStylesBySize$5 = function (size) {
|
|
9570
9570
|
// rem units
|
|
@@ -9600,8 +9600,8 @@ var SliderNavigation = function (_a) {
|
|
|
9600
9600
|
var _f = useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
9601
9601
|
var styles = dotsSize && getStylesBySize$5(dotsSize);
|
|
9602
9602
|
var theme = useTheme();
|
|
9603
|
-
var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9604
|
-
var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9603
|
+
var nextArrow = arrows && (jsx(ArrowButton$1, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9604
|
+
var prevArrow = arrows && (jsx(ArrowButton$1, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
9605
9605
|
var settings = {
|
|
9606
9606
|
arrows: !!arrows,
|
|
9607
9607
|
dots: dots,
|
|
@@ -9623,22 +9623,22 @@ var SliderNavigation = function (_a) {
|
|
|
9623
9623
|
} }, { 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));
|
|
9624
9624
|
};
|
|
9625
9625
|
|
|
9626
|
-
var horizontalStyles = css(templateObject_1$
|
|
9627
|
-
var verticalStyles = css(templateObject_2$
|
|
9628
|
-
var Container$
|
|
9626
|
+
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"])));
|
|
9627
|
+
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"])));
|
|
9628
|
+
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) {
|
|
9629
9629
|
var position = _a.position;
|
|
9630
9630
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9631
9631
|
});
|
|
9632
|
-
var Button$
|
|
9632
|
+
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"])));
|
|
9633
9633
|
var ImagePreviewList = function (_a) {
|
|
9634
9634
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9635
|
-
return (jsx$1(Container$
|
|
9635
|
+
return (jsx$1(Container$P, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9636
9636
|
arrowWidth: 0.75,
|
|
9637
9637
|
arrowHeight: 1.25,
|
|
9638
9638
|
arrowPadding: 1.625,
|
|
9639
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$
|
|
9639
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9640
9640
|
};
|
|
9641
|
-
var templateObject_1$
|
|
9641
|
+
var templateObject_1$19, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
9642
9642
|
|
|
9643
9643
|
var propTypes = {exports: {}};
|
|
9644
9644
|
|
|
@@ -10745,7 +10745,7 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
10745
10745
|
|
|
10746
10746
|
var PropTypes = propTypes.exports;
|
|
10747
10747
|
|
|
10748
|
-
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); }
|
|
10748
|
+
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); }
|
|
10749
10749
|
|
|
10750
10750
|
var Image$1 = function Image(_ref) {
|
|
10751
10751
|
var src = _ref.src,
|
|
@@ -10765,7 +10765,7 @@ var Image$1 = function Image(_ref) {
|
|
|
10765
10765
|
return /*#__PURE__*/React__default.createElement(Fragment$2, {
|
|
10766
10766
|
key: i
|
|
10767
10767
|
}, source.srcSet && /*#__PURE__*/React__default.createElement("source", source));
|
|
10768
|
-
}), /*#__PURE__*/React__default.createElement("img", _extends({}, imgAttributes, {
|
|
10768
|
+
}), /*#__PURE__*/React__default.createElement("img", _extends$1({}, imgAttributes, {
|
|
10769
10769
|
className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
|
|
10770
10770
|
style: {
|
|
10771
10771
|
transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
|
|
@@ -10773,7 +10773,7 @@ var Image$1 = function Image(_ref) {
|
|
|
10773
10773
|
src: src,
|
|
10774
10774
|
width: width,
|
|
10775
10775
|
height: height
|
|
10776
|
-
}))) : /*#__PURE__*/React__default.createElement("img", _extends({}, imgAttributes, {
|
|
10776
|
+
}))) : /*#__PURE__*/React__default.createElement("img", _extends$1({}, imgAttributes, {
|
|
10777
10777
|
className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
|
|
10778
10778
|
style: {
|
|
10779
10779
|
transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
|
|
@@ -11231,24 +11231,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11231
11231
|
afterZoomOut: PropTypes.func
|
|
11232
11232
|
} : {};
|
|
11233
11233
|
|
|
11234
|
-
var Container$
|
|
11234
|
+
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) {
|
|
11235
11235
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11236
11236
|
return borderRadiusVariant &&
|
|
11237
11237
|
"\n border-radius: 40px;\n ";
|
|
11238
11238
|
});
|
|
11239
|
-
var TopTagContainer$
|
|
11240
|
-
var BottomTagContainer$
|
|
11239
|
+
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'); });
|
|
11240
|
+
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"])));
|
|
11241
11241
|
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"])));
|
|
11242
11242
|
var ImageProductWithTags$1 = function (_a) {
|
|
11243
11243
|
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;
|
|
11244
|
-
return (jsxs$1(Container$
|
|
11244
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11245
11245
|
alt: image.alt,
|
|
11246
11246
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11247
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
11247
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11248
11248
|
};
|
|
11249
|
-
var templateObject_1$
|
|
11249
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
11250
11250
|
|
|
11251
|
-
var Container$
|
|
11251
|
+
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"])));
|
|
11252
11252
|
var ProductGallery = function (_a) {
|
|
11253
11253
|
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;
|
|
11254
11254
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11256,11 +11256,11 @@ var ProductGallery = function (_a) {
|
|
|
11256
11256
|
useEffect(function () {
|
|
11257
11257
|
setSelectedImage(initialValue);
|
|
11258
11258
|
}, [initialValue]);
|
|
11259
|
-
return (jsxs$1(Container$
|
|
11259
|
+
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11260
11260
|
setSelectedImage(value);
|
|
11261
11261
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction }, void 0)] }, void 0));
|
|
11262
11262
|
};
|
|
11263
|
-
var templateObject_1$
|
|
11263
|
+
var templateObject_1$17;
|
|
11264
11264
|
|
|
11265
11265
|
/* base styles & size variants */
|
|
11266
11266
|
var StarStyles = {
|
|
@@ -11306,8 +11306,8 @@ var StarStyles = {
|
|
|
11306
11306
|
});
|
|
11307
11307
|
},
|
|
11308
11308
|
};
|
|
11309
|
-
var Container$
|
|
11310
|
-
var templateObject_1$
|
|
11309
|
+
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"])));
|
|
11310
|
+
var templateObject_1$16;
|
|
11311
11311
|
|
|
11312
11312
|
var StarContainer = newStyled.div(function (_a) {
|
|
11313
11313
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11325,7 +11325,7 @@ var sizes = {
|
|
|
11325
11325
|
var StarList = function (_a) {
|
|
11326
11326
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11327
11327
|
var theme = useTheme();
|
|
11328
|
-
return (jsx$1(Container$
|
|
11328
|
+
return (jsx$1(Container$M, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11329
11329
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11330
11330
|
}) }, void 0));
|
|
11331
11331
|
};
|
|
@@ -11369,8 +11369,8 @@ var LabelStyles = {
|
|
|
11369
11369
|
});
|
|
11370
11370
|
},
|
|
11371
11371
|
};
|
|
11372
|
-
var Container$
|
|
11373
|
-
var templateObject_1$
|
|
11372
|
+
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"])));
|
|
11373
|
+
var templateObject_1$15;
|
|
11374
11374
|
|
|
11375
11375
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11376
11376
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11408,11 +11408,11 @@ var Rating = function (_a) {
|
|
|
11408
11408
|
href: reviewsContainerId,
|
|
11409
11409
|
}
|
|
11410
11410
|
: {};
|
|
11411
|
-
return (jsxs$1(Container$
|
|
11411
|
+
return (jsxs$1(Container$L, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11412
11412
|
};
|
|
11413
11413
|
|
|
11414
|
-
var Container$
|
|
11415
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11414
|
+
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"])));
|
|
11415
|
+
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; });
|
|
11416
11416
|
var textButtonStyles = function (theme) { return ({
|
|
11417
11417
|
border: 'none',
|
|
11418
11418
|
background: 'transparent',
|
|
@@ -11425,9 +11425,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11425
11425
|
var FitPredictor = function (_a) {
|
|
11426
11426
|
var onClick = _a.onClick;
|
|
11427
11427
|
var theme = useTheme();
|
|
11428
|
-
return (jsxs(Container$
|
|
11428
|
+
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));
|
|
11429
11429
|
};
|
|
11430
|
-
var templateObject_1
|
|
11430
|
+
var templateObject_1$14, templateObject_2$K;
|
|
11431
11431
|
|
|
11432
11432
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11433
11433
|
var color = _a.color;
|
|
@@ -11441,7 +11441,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11441
11441
|
margin: '0.938rem 4.188rem',
|
|
11442
11442
|
});
|
|
11443
11443
|
});
|
|
11444
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11444
|
+
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) {
|
|
11445
11445
|
var backgroundColor = _a.backgroundColor;
|
|
11446
11446
|
return backgroundColor;
|
|
11447
11447
|
}, function (_a) {
|
|
@@ -11464,7 +11464,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11464
11464
|
position: 'absolute',
|
|
11465
11465
|
});
|
|
11466
11466
|
});
|
|
11467
|
-
var Container$
|
|
11467
|
+
var Container$J = newStyled.div(function (_a) {
|
|
11468
11468
|
var widthAuto = _a.widthAuto;
|
|
11469
11469
|
return ({
|
|
11470
11470
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11478,9 +11478,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11478
11478
|
var ProgressBar = function (_a) {
|
|
11479
11479
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11480
11480
|
var theme = useTheme();
|
|
11481
|
-
return (jsxs$1(Container$
|
|
11481
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11482
11482
|
};
|
|
11483
|
-
var templateObject_1$
|
|
11483
|
+
var templateObject_1$13;
|
|
11484
11484
|
|
|
11485
11485
|
var getStylesBySize$4 = function (size) {
|
|
11486
11486
|
switch (size) {
|
|
@@ -11501,7 +11501,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11501
11501
|
};
|
|
11502
11502
|
}
|
|
11503
11503
|
};
|
|
11504
|
-
var Container$
|
|
11504
|
+
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) {
|
|
11505
11505
|
var backgroundColor = _a.backgroundColor;
|
|
11506
11506
|
return backgroundColor;
|
|
11507
11507
|
}, function (_a) {
|
|
@@ -11529,9 +11529,9 @@ var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
11529
11529
|
var IconButton = function (_a) {
|
|
11530
11530
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11531
11531
|
var theme = useTheme();
|
|
11532
|
-
return (jsx$1(Container$
|
|
11532
|
+
return (jsx$1(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));
|
|
11533
11533
|
};
|
|
11534
|
-
var templateObject_1$
|
|
11534
|
+
var templateObject_1$12;
|
|
11535
11535
|
|
|
11536
11536
|
var TooltipArrow = function (_a) {
|
|
11537
11537
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11611,7 +11611,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11611
11611
|
}
|
|
11612
11612
|
};
|
|
11613
11613
|
|
|
11614
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11614
|
+
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) {
|
|
11615
11615
|
var position = _a.position;
|
|
11616
11616
|
return getWrapperFlexDirection(position);
|
|
11617
11617
|
});
|
|
@@ -11635,11 +11635,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11635
11635
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11636
11636
|
return actual === expected ? margin : '0';
|
|
11637
11637
|
};
|
|
11638
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11638
|
+
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) {
|
|
11639
11639
|
var borderColor = _a.borderColor;
|
|
11640
11640
|
return borderColor;
|
|
11641
11641
|
});
|
|
11642
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11642
|
+
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) {
|
|
11643
11643
|
var position = _a.position;
|
|
11644
11644
|
return getArrowRotation(position);
|
|
11645
11645
|
}, function (_a) {
|
|
@@ -11659,7 +11659,7 @@ var Title$6 = newStyled.h1(templateObject_6$c || (templateObject_6$c = __makeTem
|
|
|
11659
11659
|
return color;
|
|
11660
11660
|
});
|
|
11661
11661
|
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"])));
|
|
11662
|
-
var templateObject_1$
|
|
11662
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
|
|
11663
11663
|
|
|
11664
11664
|
var Tooltip = function (_a) {
|
|
11665
11665
|
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;
|
|
@@ -11817,9 +11817,9 @@ var ContainerStyles = {
|
|
|
11817
11817
|
},
|
|
11818
11818
|
};
|
|
11819
11819
|
|
|
11820
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11821
|
-
var Container$
|
|
11822
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11820
|
+
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"])));
|
|
11821
|
+
var Container$H = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11822
|
+
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) {
|
|
11823
11823
|
var disabled = _a.disabled;
|
|
11824
11824
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11825
11825
|
});
|
|
@@ -11827,7 +11827,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11827
11827
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11828
11828
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11829
11829
|
]; });
|
|
11830
|
-
var StyledLabel = newStyled(Label$3)(templateObject_3$
|
|
11830
|
+
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) {
|
|
11831
11831
|
var theme = _a.theme;
|
|
11832
11832
|
return theme.component.radio.textSize;
|
|
11833
11833
|
}, function (_a) {
|
|
@@ -11841,9 +11841,9 @@ var RadioInput = function (_a) {
|
|
|
11841
11841
|
var value = event.currentTarget.value;
|
|
11842
11842
|
onChange({ value: value, label: label });
|
|
11843
11843
|
};
|
|
11844
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11844
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$H, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11845
11845
|
};
|
|
11846
|
-
var templateObject_1$
|
|
11846
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$z;
|
|
11847
11847
|
|
|
11848
11848
|
var RadioGroupInput = function (_a) {
|
|
11849
11849
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11857,37 +11857,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11857
11857
|
}) }), void 0));
|
|
11858
11858
|
};
|
|
11859
11859
|
|
|
11860
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11861
|
-
var Container$
|
|
11860
|
+
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"])));
|
|
11861
|
+
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"])));
|
|
11862
11862
|
var Minimalistic = function (_a) {
|
|
11863
11863
|
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;
|
|
11864
11864
|
var theme = useTheme();
|
|
11865
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11865
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$G, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$G, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11866
11866
|
};
|
|
11867
|
-
var templateObject_1
|
|
11867
|
+
var templateObject_1$$, templateObject_2$H;
|
|
11868
11868
|
|
|
11869
|
-
var Container$
|
|
11870
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11871
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11869
|
+
var Container$F = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11870
|
+
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; });
|
|
11871
|
+
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; });
|
|
11872
11872
|
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"])));
|
|
11873
11873
|
var Simple = function (_a) {
|
|
11874
11874
|
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;
|
|
11875
11875
|
var theme = useTheme();
|
|
11876
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11876
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$F, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11877
11877
|
};
|
|
11878
|
-
var templateObject_1$
|
|
11878
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$y, templateObject_4$o;
|
|
11879
11879
|
|
|
11880
11880
|
var Bundle = {
|
|
11881
11881
|
Minimalistic: Minimalistic,
|
|
11882
11882
|
Simple: Simple,
|
|
11883
11883
|
};
|
|
11884
11884
|
|
|
11885
|
-
var Container$
|
|
11885
|
+
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"])));
|
|
11886
11886
|
var Tag$1 = function (_a) {
|
|
11887
11887
|
var text = _a.text, className = _a.className;
|
|
11888
|
-
return jsx$1(Container$
|
|
11888
|
+
return jsx$1(Container$E, __assign$1({ className: className }, { children: text }), void 0);
|
|
11889
11889
|
};
|
|
11890
|
-
var templateObject_1$
|
|
11890
|
+
var templateObject_1$Z;
|
|
11891
11891
|
|
|
11892
11892
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11893
11893
|
switch (size) {
|
|
@@ -11990,11 +11990,11 @@ var Timer = function (_a) {
|
|
|
11990
11990
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11991
11991
|
};
|
|
11992
11992
|
|
|
11993
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11993
|
+
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) {
|
|
11994
11994
|
var color = _a.color;
|
|
11995
11995
|
return color;
|
|
11996
11996
|
});
|
|
11997
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11997
|
+
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) {
|
|
11998
11998
|
var color = _a.color;
|
|
11999
11999
|
return color;
|
|
12000
12000
|
});
|
|
@@ -12003,7 +12003,7 @@ var InputLabel = function (_a) {
|
|
|
12003
12003
|
var theme = useTheme();
|
|
12004
12004
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12005
12005
|
};
|
|
12006
|
-
var templateObject_1$
|
|
12006
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12007
12007
|
|
|
12008
12008
|
/**
|
|
12009
12009
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12057,14 +12057,14 @@ var formatPrice = function (value, _a) {
|
|
|
12057
12057
|
}).format(valueToFormat);
|
|
12058
12058
|
};
|
|
12059
12059
|
|
|
12060
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12061
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12060
|
+
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; });
|
|
12061
|
+
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"])));
|
|
12062
12062
|
var Error$1 = function (_a) {
|
|
12063
12063
|
var error = _a.error;
|
|
12064
12064
|
var theme = useTheme();
|
|
12065
12065
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12066
12066
|
};
|
|
12067
|
-
var templateObject_1$
|
|
12067
|
+
var templateObject_1$X, templateObject_2$E;
|
|
12068
12068
|
|
|
12069
12069
|
var containerByStatus = function (theme, status) {
|
|
12070
12070
|
if (status === InputValidationType.Valid)
|
|
@@ -12073,11 +12073,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12073
12073
|
return theme.colors.semantic.urgent.color;
|
|
12074
12074
|
return '';
|
|
12075
12075
|
};
|
|
12076
|
-
var Container$
|
|
12076
|
+
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) {
|
|
12077
12077
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12078
12078
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12079
12079
|
});
|
|
12080
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12080
|
+
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) {
|
|
12081
12081
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12082
12082
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12083
12083
|
}, function (_a) {
|
|
@@ -12132,13 +12132,13 @@ var StyledInput = newStyled.input(templateObject_2$B || (templateObject_2$B = __
|
|
|
12132
12132
|
return hasValue &&
|
|
12133
12133
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12134
12134
|
});
|
|
12135
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12135
|
+
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) {
|
|
12136
12136
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12137
12137
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12138
12138
|
});
|
|
12139
12139
|
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"])));
|
|
12140
12140
|
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"])));
|
|
12141
|
-
var templateObject_1$
|
|
12141
|
+
var templateObject_1$W, templateObject_2$D, templateObject_3$x, templateObject_4$n, templateObject_5$e;
|
|
12142
12142
|
|
|
12143
12143
|
var BaseInput = function (_a) {
|
|
12144
12144
|
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"]);
|
|
@@ -12161,14 +12161,14 @@ var BaseInput = function (_a) {
|
|
|
12161
12161
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12162
12162
|
}, [status]);
|
|
12163
12163
|
var hasValue = Boolean(value);
|
|
12164
|
-
return (jsxs$1(Container$
|
|
12164
|
+
return (jsxs$1(Container$D, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12165
12165
|
onChange(event.target.value, event);
|
|
12166
12166
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12167
12167
|
onChange('', { target: { value: '' } });
|
|
12168
12168
|
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
12169
12169
|
};
|
|
12170
12170
|
|
|
12171
|
-
var Button$
|
|
12171
|
+
var Button$2 = function (_a) {
|
|
12172
12172
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
12173
12173
|
if (variant === 'primary') {
|
|
12174
12174
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -12182,11 +12182,11 @@ var Button$1 = function (_a) {
|
|
|
12182
12182
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12183
12183
|
};
|
|
12184
12184
|
|
|
12185
|
-
var Container$
|
|
12185
|
+
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) {
|
|
12186
12186
|
var theme = _a.theme;
|
|
12187
12187
|
return theme.component.inputCustom.input.borderRadius;
|
|
12188
12188
|
});
|
|
12189
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12189
|
+
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) {
|
|
12190
12190
|
var theme = _a.theme;
|
|
12191
12191
|
return theme.component.inputCustom.button.borderRadius;
|
|
12192
12192
|
});
|
|
@@ -12199,23 +12199,23 @@ var Custom = function (_a) {
|
|
|
12199
12199
|
text: text,
|
|
12200
12200
|
disabled: rest.disabled,
|
|
12201
12201
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12202
|
-
return (jsx$1(Container$
|
|
12202
|
+
return (jsx$1(Container$C, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12203
12203
|
};
|
|
12204
|
-
var templateObject_1$
|
|
12204
|
+
var templateObject_1$V, templateObject_2$C;
|
|
12205
12205
|
|
|
12206
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12206
|
+
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) {
|
|
12207
12207
|
var size = _a.size;
|
|
12208
12208
|
return (size === 'small' ? '36px' : '');
|
|
12209
12209
|
});
|
|
12210
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12211
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12210
|
+
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"])));
|
|
12211
|
+
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"])));
|
|
12212
12212
|
var Success = function (_a) {
|
|
12213
12213
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12214
12214
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12215
12215
|
};
|
|
12216
|
-
var templateObject_1$
|
|
12216
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$w;
|
|
12217
12217
|
|
|
12218
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12218
|
+
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) {
|
|
12219
12219
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12220
12220
|
return status === InputValidationType.Empty &&
|
|
12221
12221
|
type === 'primary' &&
|
|
@@ -12232,21 +12232,21 @@ var BasePlusButton = function (_a) {
|
|
|
12232
12232
|
}
|
|
12233
12233
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12234
12234
|
};
|
|
12235
|
-
var templateObject_1$
|
|
12235
|
+
var templateObject_1$T;
|
|
12236
12236
|
|
|
12237
|
-
var Container$
|
|
12238
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12237
|
+
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"])));
|
|
12238
|
+
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; });
|
|
12239
12239
|
var BasePlusIcon = function (_a) {
|
|
12240
12240
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12241
12241
|
var theme = useTheme();
|
|
12242
12242
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12243
|
-
return (jsx$1(Container$
|
|
12243
|
+
return (jsx$1(Container$B, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12244
12244
|
? theme.colors.shades['700'].color
|
|
12245
12245
|
: status === InputValidationType.Error
|
|
12246
12246
|
? theme.colors.semantic.urgent.color
|
|
12247
12247
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12248
12248
|
};
|
|
12249
|
-
var templateObject_1$
|
|
12249
|
+
var templateObject_1$S, templateObject_2$A;
|
|
12250
12250
|
|
|
12251
12251
|
var Input$1 = {
|
|
12252
12252
|
Simple: BaseInput,
|
|
@@ -12255,7 +12255,7 @@ var Input$1 = {
|
|
|
12255
12255
|
SimplePlusIcon: BasePlusIcon,
|
|
12256
12256
|
};
|
|
12257
12257
|
|
|
12258
|
-
var Container$
|
|
12258
|
+
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) {
|
|
12259
12259
|
var width = _a.width;
|
|
12260
12260
|
return width;
|
|
12261
12261
|
}, function (_a) {
|
|
@@ -12271,11 +12271,11 @@ var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
12271
12271
|
var PaymentMethod = function (_a) {
|
|
12272
12272
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12273
12273
|
var theme = useTheme();
|
|
12274
|
-
return (jsx$1(Container$
|
|
12274
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
12275
12275
|
};
|
|
12276
|
-
var templateObject_1$
|
|
12276
|
+
var templateObject_1$R;
|
|
12277
12277
|
|
|
12278
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12278
|
+
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) {
|
|
12279
12279
|
var backgroundColor = _a.backgroundColor;
|
|
12280
12280
|
return backgroundColor;
|
|
12281
12281
|
}, function (_a) {
|
|
@@ -12287,11 +12287,11 @@ var OfferBanner = function (_a) {
|
|
|
12287
12287
|
var theme = useTheme();
|
|
12288
12288
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12289
12289
|
};
|
|
12290
|
-
var templateObject_1$
|
|
12290
|
+
var templateObject_1$Q;
|
|
12291
12291
|
|
|
12292
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12293
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12294
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12292
|
+
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"])));
|
|
12293
|
+
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; });
|
|
12294
|
+
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) {
|
|
12295
12295
|
var theme = _a.theme;
|
|
12296
12296
|
return theme.component.total.basicTotal.currency.color;
|
|
12297
12297
|
}, function (_a) {
|
|
@@ -12304,7 +12304,7 @@ var Currency = newStyled.span(templateObject_3$t || (templateObject_3$t = __make
|
|
|
12304
12304
|
var theme = _a.theme;
|
|
12305
12305
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12306
12306
|
});
|
|
12307
|
-
var Container$
|
|
12307
|
+
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; });
|
|
12308
12308
|
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) {
|
|
12309
12309
|
var theme = _a.theme;
|
|
12310
12310
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
@@ -12325,16 +12325,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$b || (templateObject_6$b = __
|
|
|
12325
12325
|
var Total = function (_a) {
|
|
12326
12326
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12327
12327
|
var theme = useTheme();
|
|
12328
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12328
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$z, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12329
12329
|
};
|
|
12330
|
-
var templateObject_1$
|
|
12330
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$b;
|
|
12331
12331
|
|
|
12332
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12332
|
+
var Wrapper$1 = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12333
12333
|
var color = _a.color;
|
|
12334
12334
|
return color;
|
|
12335
12335
|
});
|
|
12336
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12337
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12336
|
+
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"])));
|
|
12337
|
+
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) {
|
|
12338
12338
|
var theme = _a.theme;
|
|
12339
12339
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12340
12340
|
}, function (_a) {
|
|
@@ -12354,23 +12354,23 @@ var Subtotal = function (_a) {
|
|
|
12354
12354
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12355
12355
|
})] }), void 0));
|
|
12356
12356
|
};
|
|
12357
|
-
var templateObject_1$
|
|
12357
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$u, templateObject_4$l;
|
|
12358
12358
|
|
|
12359
12359
|
var Totals = {
|
|
12360
12360
|
Total: Total,
|
|
12361
12361
|
Subtotal: Subtotal,
|
|
12362
12362
|
};
|
|
12363
12363
|
|
|
12364
|
-
var Container$
|
|
12365
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12366
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12364
|
+
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; });
|
|
12365
|
+
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"])));
|
|
12366
|
+
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; });
|
|
12367
12367
|
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; });
|
|
12368
12368
|
var Note = function (_a) {
|
|
12369
12369
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12370
12370
|
var theme = useTheme();
|
|
12371
|
-
return (jsxs$1(Container$
|
|
12371
|
+
return (jsxs$1(Container$y, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12372
12372
|
};
|
|
12373
|
-
var templateObject_1$
|
|
12373
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$k;
|
|
12374
12374
|
|
|
12375
12375
|
/* eslint-disable no-param-reassign */
|
|
12376
12376
|
var index$1 = function (breakpoints) {
|
|
@@ -12456,9 +12456,9 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12456
12456
|
literal: true,
|
|
12457
12457
|
});
|
|
12458
12458
|
|
|
12459
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12460
|
-
var Line = newStyled.div(templateObject_2$
|
|
12461
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12459
|
+
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; });
|
|
12460
|
+
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; });
|
|
12461
|
+
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({
|
|
12462
12462
|
flexDirection: ['column', 'row'],
|
|
12463
12463
|
}));
|
|
12464
12464
|
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({
|
|
@@ -12493,45 +12493,45 @@ var DeliveryDetails = function (_a) {
|
|
|
12493
12493
|
var theme = useTheme();
|
|
12494
12494
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12495
12495
|
};
|
|
12496
|
-
var templateObject_1$
|
|
12496
|
+
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;
|
|
12497
12497
|
|
|
12498
|
-
var Container$
|
|
12499
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12498
|
+
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"])));
|
|
12499
|
+
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; });
|
|
12500
12500
|
var ScrollToTop = function (_a) {
|
|
12501
12501
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12502
12502
|
var theme = useTheme();
|
|
12503
12503
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12504
|
-
return (jsxs$1(Container$
|
|
12504
|
+
return (jsxs$1(Container$x, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12505
12505
|
};
|
|
12506
|
-
var templateObject_1$
|
|
12506
|
+
var templateObject_1$L, templateObject_2$v;
|
|
12507
12507
|
|
|
12508
12508
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12509
|
-
var Container$
|
|
12509
|
+
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) {
|
|
12510
12510
|
var color = _a.color;
|
|
12511
12511
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12512
12512
|
});
|
|
12513
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12513
|
+
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; });
|
|
12514
12514
|
var OrderBar = function (_a) {
|
|
12515
12515
|
var message = _a.message, color = _a.color;
|
|
12516
12516
|
var theme = useTheme();
|
|
12517
|
-
return (jsxs$1(Container$
|
|
12517
|
+
return (jsxs$1(Container$w, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12518
12518
|
};
|
|
12519
|
-
var templateObject_1$
|
|
12519
|
+
var templateObject_1$K, templateObject_2$u;
|
|
12520
12520
|
|
|
12521
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12522
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12523
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12521
|
+
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; });
|
|
12522
|
+
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; });
|
|
12523
|
+
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; });
|
|
12524
12524
|
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; });
|
|
12525
12525
|
var SizeTable = function (_a) {
|
|
12526
12526
|
var headers = _a.headers, data = _a.data;
|
|
12527
12527
|
var theme = useTheme();
|
|
12528
12528
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12529
12529
|
};
|
|
12530
|
-
var templateObject_1$
|
|
12530
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$r, templateObject_4$i;
|
|
12531
12531
|
|
|
12532
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12533
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12534
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12532
|
+
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; });
|
|
12533
|
+
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; });
|
|
12534
|
+
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; });
|
|
12535
12535
|
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; });
|
|
12536
12536
|
var SizeChartTable = function (_a) {
|
|
12537
12537
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -12563,18 +12563,18 @@ var SizeChartTable = function (_a) {
|
|
|
12563
12563
|
backgroundColor: getCellColor(index, cell),
|
|
12564
12564
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12565
12565
|
};
|
|
12566
|
-
var templateObject_1$
|
|
12566
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$q, templateObject_4$h;
|
|
12567
12567
|
|
|
12568
|
-
var Img = newStyled.img(templateObject_1$
|
|
12568
|
+
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; });
|
|
12569
12569
|
var Image = function (_a) {
|
|
12570
12570
|
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;
|
|
12571
12571
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12572
12572
|
};
|
|
12573
|
-
var templateObject_1$
|
|
12573
|
+
var templateObject_1$H;
|
|
12574
12574
|
|
|
12575
|
-
var Container$
|
|
12576
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12577
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12575
|
+
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"])));
|
|
12576
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12577
|
+
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({
|
|
12578
12578
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12579
12579
|
}));
|
|
12580
12580
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12610,9 +12610,9 @@ var Quantity = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeT
|
|
|
12610
12610
|
var SimpleOrderItem = function (_a) {
|
|
12611
12611
|
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;
|
|
12612
12612
|
var theme = useTheme();
|
|
12613
|
-
return (jsxs$1(Container$
|
|
12613
|
+
return (jsxs$1(Container$v, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(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));
|
|
12614
12614
|
};
|
|
12615
|
-
var templateObject_1$
|
|
12615
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$p, templateObject_4$g, templateObject_5$b;
|
|
12616
12616
|
|
|
12617
12617
|
function formatDate(date) {
|
|
12618
12618
|
var day = date.getDate();
|
|
@@ -12621,9 +12621,9 @@ function formatDate(date) {
|
|
|
12621
12621
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12622
12622
|
}
|
|
12623
12623
|
|
|
12624
|
-
var Container$
|
|
12625
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12626
|
-
var Content$1 = newStyled.div(templateObject_3$
|
|
12624
|
+
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"])));
|
|
12625
|
+
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"])));
|
|
12626
|
+
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"])));
|
|
12627
12627
|
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"])));
|
|
12628
12628
|
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"])));
|
|
12629
12629
|
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"])));
|
|
@@ -12642,17 +12642,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12642
12642
|
var Review$1 = function (_a) {
|
|
12643
12643
|
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;
|
|
12644
12644
|
var theme = useTheme();
|
|
12645
|
-
return (jsxs$1(Container$
|
|
12645
|
+
return (jsxs$1(Container$u, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxs$1(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12646
12646
|
};
|
|
12647
|
-
var templateObject_1$
|
|
12647
|
+
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;
|
|
12648
12648
|
|
|
12649
|
-
var List = newStyled.ul(templateObject_1$
|
|
12650
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12651
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12649
|
+
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"])));
|
|
12650
|
+
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"])));
|
|
12651
|
+
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"])));
|
|
12652
12652
|
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"])));
|
|
12653
12653
|
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; });
|
|
12654
12654
|
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; });
|
|
12655
|
-
var templateObject_1$
|
|
12655
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$n, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12656
12656
|
|
|
12657
12657
|
var DropdownListIcons = function (_a) {
|
|
12658
12658
|
var items = _a.items;
|
|
@@ -12665,7 +12665,7 @@ var Dropdown = function (_a) {
|
|
|
12665
12665
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
12666
12666
|
};
|
|
12667
12667
|
|
|
12668
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12668
|
+
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; });
|
|
12669
12669
|
var AmazonButton = function (_a) {
|
|
12670
12670
|
var onClick = _a.onClick;
|
|
12671
12671
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12674,11 +12674,11 @@ var PaypalButton = function (_a) {
|
|
|
12674
12674
|
var onClick = _a.onClick;
|
|
12675
12675
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12676
12676
|
};
|
|
12677
|
-
var templateObject_1$
|
|
12677
|
+
var templateObject_1$D;
|
|
12678
12678
|
|
|
12679
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12680
|
-
var Col = newStyled.div(templateObject_2$
|
|
12681
|
-
var Row = newStyled.div(templateObject_3$
|
|
12679
|
+
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'); });
|
|
12680
|
+
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"])));
|
|
12681
|
+
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) {
|
|
12682
12682
|
return props.rightToLeft &&
|
|
12683
12683
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12684
12684
|
});
|
|
@@ -12690,7 +12690,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12690
12690
|
var theme = useTheme();
|
|
12691
12691
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12692
12692
|
};
|
|
12693
|
-
var templateObject_1$
|
|
12693
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
12694
12694
|
|
|
12695
12695
|
var index = /*#__PURE__*/Object.freeze({
|
|
12696
12696
|
__proto__: null,
|
|
@@ -12703,7 +12703,7 @@ var Spacing = function (_a) {
|
|
|
12703
12703
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12704
12704
|
};
|
|
12705
12705
|
|
|
12706
|
-
var Container$
|
|
12706
|
+
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) {
|
|
12707
12707
|
var height = _a.height;
|
|
12708
12708
|
return (height ? height : '1.5em');
|
|
12709
12709
|
}, function (_a) {
|
|
@@ -12728,9 +12728,9 @@ var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
12728
12728
|
var SkeletonBox = function (_a) {
|
|
12729
12729
|
var width = _a.width, height = _a.height;
|
|
12730
12730
|
var theme = useTheme();
|
|
12731
|
-
return jsx$1(Container$
|
|
12731
|
+
return jsx$1(Container$t, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12732
12732
|
};
|
|
12733
|
-
var templateObject_1$
|
|
12733
|
+
var templateObject_1$B;
|
|
12734
12734
|
|
|
12735
12735
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12736
12736
|
var width = _a.width, height = _a.height;
|
|
@@ -12740,9 +12740,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12740
12740
|
height: height,
|
|
12741
12741
|
});
|
|
12742
12742
|
});
|
|
12743
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12744
|
-
var Container$
|
|
12745
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12743
|
+
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"])));
|
|
12744
|
+
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"])));
|
|
12745
|
+
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; });
|
|
12746
12746
|
var getStylesBySize$1 = function (size) {
|
|
12747
12747
|
switch (size) {
|
|
12748
12748
|
case ComponentSize.Medium:
|
|
@@ -12768,8 +12768,8 @@ var getStylesBySize$1 = function (size) {
|
|
|
12768
12768
|
};
|
|
12769
12769
|
}
|
|
12770
12770
|
};
|
|
12771
|
-
var TopTagContainer$
|
|
12772
|
-
var BottomTagContainer$
|
|
12771
|
+
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"])));
|
|
12772
|
+
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"])));
|
|
12773
12773
|
var MarginTopContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12774
12774
|
var ProductItemMobile = function (_a) {
|
|
12775
12775
|
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;
|
|
@@ -12787,32 +12787,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12787
12787
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12788
12788
|
};
|
|
12789
12789
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12790
|
-
return (jsxs(Container$
|
|
12790
|
+
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));
|
|
12791
12791
|
};
|
|
12792
|
-
var templateObject_1$
|
|
12792
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12793
12793
|
|
|
12794
|
-
var Container$
|
|
12794
|
+
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"])));
|
|
12795
12795
|
function withProductGrid(ProductItemComponent, data) {
|
|
12796
12796
|
function WithProductGrid(props) {
|
|
12797
|
-
return (jsx$1(Container$
|
|
12797
|
+
return (jsx$1(Container$r, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12798
12798
|
}
|
|
12799
12799
|
/* istanbul ignore next */
|
|
12800
12800
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12801
12801
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12802
12802
|
return WithProductGrid;
|
|
12803
12803
|
}
|
|
12804
|
-
var templateObject_1$
|
|
12804
|
+
var templateObject_1$z;
|
|
12805
12805
|
|
|
12806
12806
|
var Collection = {
|
|
12807
12807
|
ProductItemMobile: ProductItemMobile,
|
|
12808
12808
|
withProductGrid: withProductGrid,
|
|
12809
12809
|
};
|
|
12810
12810
|
|
|
12811
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12811
|
+
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) {
|
|
12812
12812
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12813
12813
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12814
12814
|
});
|
|
12815
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12815
|
+
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) {
|
|
12816
12816
|
var width = _a.width;
|
|
12817
12817
|
return width;
|
|
12818
12818
|
}, function (_a) {
|
|
@@ -12853,28 +12853,28 @@ var Drawer = function (_a) {
|
|
|
12853
12853
|
}, [isOpen, onClose, onOpen]);
|
|
12854
12854
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12855
12855
|
};
|
|
12856
|
-
var templateObject_1$
|
|
12856
|
+
var templateObject_1$y, templateObject_2$m;
|
|
12857
12857
|
|
|
12858
|
-
var Container$
|
|
12858
|
+
var Container$q = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12859
12859
|
var size = _a.size;
|
|
12860
12860
|
return (size ? size : '100%');
|
|
12861
12861
|
}, function (_a) {
|
|
12862
12862
|
var size = _a.size;
|
|
12863
12863
|
return (size ? size : '100%');
|
|
12864
12864
|
});
|
|
12865
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12865
|
+
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) {
|
|
12866
12866
|
var animationDuration = _a.animationDuration;
|
|
12867
12867
|
return animationDuration;
|
|
12868
12868
|
});
|
|
12869
12869
|
var Spinner = function (_a) {
|
|
12870
12870
|
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;
|
|
12871
|
-
return (jsx$1(Container$
|
|
12871
|
+
return (jsx$1(Container$q, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12872
12872
|
};
|
|
12873
|
-
var templateObject_1$
|
|
12873
|
+
var templateObject_1$x, templateObject_2$l;
|
|
12874
12874
|
|
|
12875
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12876
|
-
var LI = newStyled.li(templateObject_2$
|
|
12877
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12875
|
+
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"])));
|
|
12876
|
+
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; });
|
|
12877
|
+
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"])));
|
|
12878
12878
|
var Tags = function (_a) {
|
|
12879
12879
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12880
12880
|
var theme = useTheme();
|
|
@@ -12882,7 +12882,7 @@ var Tags = function (_a) {
|
|
|
12882
12882
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12883
12883
|
}) }), void 0));
|
|
12884
12884
|
};
|
|
12885
|
-
var templateObject_1$
|
|
12885
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$k;
|
|
12886
12886
|
|
|
12887
12887
|
function FilteringDropdown(_a) {
|
|
12888
12888
|
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;
|
|
@@ -12915,9 +12915,9 @@ function FilteringDropdown(_a) {
|
|
|
12915
12915
|
}) }, void 0)] }), void 0));
|
|
12916
12916
|
}
|
|
12917
12917
|
|
|
12918
|
-
var Container$
|
|
12919
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12920
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12918
|
+
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"])));
|
|
12919
|
+
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"])));
|
|
12920
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12921
12921
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12922
12922
|
}));
|
|
12923
12923
|
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) {
|
|
@@ -12937,7 +12937,7 @@ var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __ma
|
|
|
12937
12937
|
var background = _a.background;
|
|
12938
12938
|
return background || 'unset';
|
|
12939
12939
|
});
|
|
12940
|
-
var templateObject_1$
|
|
12940
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$j, templateObject_4$b;
|
|
12941
12941
|
|
|
12942
12942
|
var Pagination = function (_a) {
|
|
12943
12943
|
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;
|
|
@@ -12983,7 +12983,7 @@ var Pagination = function (_a) {
|
|
|
12983
12983
|
}
|
|
12984
12984
|
return pages;
|
|
12985
12985
|
}, [from, page, showReducedPages, to]);
|
|
12986
|
-
return (jsxs$1(Container$
|
|
12986
|
+
return (jsxs$1(Container$p, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(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 && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(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)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12987
12987
|
};
|
|
12988
12988
|
|
|
12989
12989
|
var PaginatorBlog = function (_a) {
|
|
@@ -12997,12 +12997,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12997
12997
|
setPage(page);
|
|
12998
12998
|
onChange(page);
|
|
12999
12999
|
};
|
|
13000
|
-
return (jsxs$1(Container$
|
|
13000
|
+
return (jsxs$1(Container$p, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13001
13001
|
? theme.colors.shades['white'].color
|
|
13002
13002
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13003
13003
|
};
|
|
13004
13004
|
|
|
13005
|
-
var Container$
|
|
13005
|
+
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({
|
|
13006
13006
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13007
13007
|
}));
|
|
13008
13008
|
var Description$1 = newStyled.div({
|
|
@@ -13019,25 +13019,25 @@ var Description$1 = newStyled.div({
|
|
|
13019
13019
|
var ProductItem = function (_a) {
|
|
13020
13020
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13021
13021
|
var theme = useTheme();
|
|
13022
|
-
return (jsxs$1(Container$
|
|
13022
|
+
return (jsxs$1(Container$o, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13023
13023
|
};
|
|
13024
|
-
var templateObject_1$
|
|
13024
|
+
var templateObject_1$u;
|
|
13025
13025
|
|
|
13026
|
-
var Container$
|
|
13026
|
+
var Container$n = newStyled.div({
|
|
13027
13027
|
display: 'flex',
|
|
13028
13028
|
justifyContent: 'center',
|
|
13029
13029
|
padding: '1rem',
|
|
13030
13030
|
});
|
|
13031
13031
|
var Footer = function (_a) {
|
|
13032
13032
|
var text = _a.text, onClick = _a.onClick;
|
|
13033
|
-
return (jsx$1(Container$
|
|
13033
|
+
return (jsx$1(Container$n, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13034
13034
|
};
|
|
13035
13035
|
|
|
13036
13036
|
var Ul = newStyled.ul({
|
|
13037
13037
|
margin: '0px',
|
|
13038
13038
|
padding: '0px',
|
|
13039
13039
|
});
|
|
13040
|
-
var Li = newStyled.li(templateObject_1$
|
|
13040
|
+
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({
|
|
13041
13041
|
padding: [0, '0rem 1rem'],
|
|
13042
13042
|
borderRadius: [0, '0.5rem'],
|
|
13043
13043
|
}));
|
|
@@ -13049,20 +13049,20 @@ var Anchor = newStyled.a({
|
|
|
13049
13049
|
padding: 0,
|
|
13050
13050
|
textDecoration: 'none',
|
|
13051
13051
|
});
|
|
13052
|
-
var Container$
|
|
13052
|
+
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({
|
|
13053
13053
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13054
13054
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13055
13055
|
borderRadius: ['0', '0.5rem'],
|
|
13056
13056
|
}));
|
|
13057
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13057
|
+
var Header$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13058
13058
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13059
13059
|
}));
|
|
13060
13060
|
var ResultsPanel = function (_a) {
|
|
13061
13061
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13062
13062
|
var theme = useTheme();
|
|
13063
|
-
return (jsxs$1(Container$
|
|
13063
|
+
return (jsxs$1(Container$m, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13064
13064
|
};
|
|
13065
|
-
var templateObject_1$
|
|
13065
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$i;
|
|
13066
13066
|
|
|
13067
13067
|
var Input = newStyled.input(function (props) { return ({
|
|
13068
13068
|
padding: props.theme.component.input.padding,
|
|
@@ -13093,16 +13093,16 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13093
13093
|
},
|
|
13094
13094
|
}); });
|
|
13095
13095
|
|
|
13096
|
-
var Button = newStyled.button(templateObject_1$
|
|
13096
|
+
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({
|
|
13097
13097
|
right: ['1rem', '7.75rem'],
|
|
13098
13098
|
top: ['0.75rem', '0.75rem'],
|
|
13099
13099
|
}));
|
|
13100
13100
|
var ClearButton = function (_a) {
|
|
13101
13101
|
var onClick = _a.onClick;
|
|
13102
13102
|
var theme = useTheme();
|
|
13103
|
-
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13103
|
+
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13104
13104
|
};
|
|
13105
|
-
var templateObject_1$
|
|
13105
|
+
var templateObject_1$s;
|
|
13106
13106
|
|
|
13107
13107
|
var useOnClickOutside = function (ref, handler) {
|
|
13108
13108
|
useEffect(function () {
|
|
@@ -13177,7 +13177,7 @@ var SearchControl = function (_a) {
|
|
|
13177
13177
|
}
|
|
13178
13178
|
};
|
|
13179
13179
|
|
|
13180
|
-
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
13180
|
+
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
13181
13181
|
var reducer = function (state, action) {
|
|
13182
13182
|
switch (action.type) {
|
|
13183
13183
|
case 'UPDATE_TERM': {
|
|
@@ -13191,7 +13191,7 @@ var reducer = function (state, action) {
|
|
|
13191
13191
|
}
|
|
13192
13192
|
}
|
|
13193
13193
|
};
|
|
13194
|
-
var Container$
|
|
13194
|
+
var Container$l = newStyled.div({
|
|
13195
13195
|
position: 'relative',
|
|
13196
13196
|
display: 'flex',
|
|
13197
13197
|
});
|
|
@@ -13199,9 +13199,9 @@ var SearchBar = function (_a) {
|
|
|
13199
13199
|
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;
|
|
13200
13200
|
var theme = useTheme();
|
|
13201
13201
|
if (initialTerm) {
|
|
13202
|
-
initialState.term = initialTerm;
|
|
13202
|
+
initialState$1.term = initialTerm;
|
|
13203
13203
|
}
|
|
13204
|
-
var _h = useReducer(reducer, initialState), state = _h[0], dispatch = _h[1];
|
|
13204
|
+
var _h = useReducer(reducer, initialState$1), state = _h[0], dispatch = _h[1];
|
|
13205
13205
|
var ref = useRef(null);
|
|
13206
13206
|
var shouldDisplaySuggestion = function () {
|
|
13207
13207
|
return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
|
|
@@ -13227,7 +13227,7 @@ var SearchBar = function (_a) {
|
|
|
13227
13227
|
onClose();
|
|
13228
13228
|
}
|
|
13229
13229
|
};
|
|
13230
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13230
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$l, __assign$1({ theme: theme }, { children: [jsx$1(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) {
|
|
13231
13231
|
if (e.key === 'Enter') {
|
|
13232
13232
|
e.preventDefault();
|
|
13233
13233
|
e.stopPropagation();
|
|
@@ -13236,14 +13236,14 @@ var SearchBar = function (_a) {
|
|
|
13236
13236
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(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));
|
|
13237
13237
|
};
|
|
13238
13238
|
|
|
13239
|
-
var Container$
|
|
13239
|
+
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) {
|
|
13240
13240
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13241
13241
|
return borderRadiusVariant &&
|
|
13242
13242
|
"\n border-radius: 40px;\n ";
|
|
13243
13243
|
});
|
|
13244
13244
|
// max-height: 31.875rem;
|
|
13245
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13246
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13245
|
+
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'); });
|
|
13246
|
+
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"])));
|
|
13247
13247
|
var settings = {
|
|
13248
13248
|
dots: true,
|
|
13249
13249
|
infinite: false,
|
|
@@ -13270,8 +13270,8 @@ var ImageProductWithTags = function (_a) {
|
|
|
13270
13270
|
}
|
|
13271
13271
|
}
|
|
13272
13272
|
}, [images, selectedValue]);
|
|
13273
|
-
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13274
|
-
return (jsxs$1("div", { children: [jsx$1(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), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13273
|
+
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$k, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13274
|
+
return (jsxs$1("div", { children: [jsx$1(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), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13275
13275
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13276
13276
|
};
|
|
13277
13277
|
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
@@ -13307,14 +13307,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13307
13307
|
};
|
|
13308
13308
|
}, [preventTouch, ref, touchStart]);
|
|
13309
13309
|
}
|
|
13310
|
-
var templateObject_1$
|
|
13310
|
+
var templateObject_1$r, templateObject_2$h, templateObject_3$h;
|
|
13311
13311
|
|
|
13312
|
-
var Container$
|
|
13312
|
+
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"])));
|
|
13313
13313
|
var ProductGalleryMobile = function (_a) {
|
|
13314
13314
|
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;
|
|
13315
|
-
return (jsx$1(Container$
|
|
13315
|
+
return (jsx$1(Container$j, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13316
13316
|
};
|
|
13317
|
-
var templateObject_1$
|
|
13317
|
+
var templateObject_1$q;
|
|
13318
13318
|
|
|
13319
13319
|
var Portal = function (_a) {
|
|
13320
13320
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13447,14 +13447,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13447
13447
|
var visibleStyle = function (_a) {
|
|
13448
13448
|
var opened = _a.opened;
|
|
13449
13449
|
return opened
|
|
13450
|
-
? css(templateObject_1$
|
|
13450
|
+
? 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 "])));
|
|
13451
13451
|
};
|
|
13452
13452
|
var transformStyle = function (_a) {
|
|
13453
13453
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13454
13454
|
return opened
|
|
13455
|
-
? css(templateObject_3$
|
|
13455
|
+
? 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%)');
|
|
13456
13456
|
};
|
|
13457
|
-
var Container$
|
|
13457
|
+
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({
|
|
13458
13458
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13459
13459
|
}), visibleStyle, transformStyle);
|
|
13460
13460
|
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);
|
|
@@ -13467,7 +13467,7 @@ var Modal = function (_a) {
|
|
|
13467
13467
|
}
|
|
13468
13468
|
close();
|
|
13469
13469
|
};
|
|
13470
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13470
|
+
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));
|
|
13471
13471
|
};
|
|
13472
13472
|
var modalEvent = function (id, detail) {
|
|
13473
13473
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13495,39 +13495,39 @@ var useModal = function (id) {
|
|
|
13495
13495
|
close: close,
|
|
13496
13496
|
}); }, [close, open, opened]);
|
|
13497
13497
|
};
|
|
13498
|
-
var templateObject_1$
|
|
13498
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
13499
13499
|
|
|
13500
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13500
|
+
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; });
|
|
13501
13501
|
var Title$1 = function (_a) {
|
|
13502
13502
|
var title = _a.title;
|
|
13503
13503
|
var theme = useTheme();
|
|
13504
13504
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13505
13505
|
};
|
|
13506
|
-
var templateObject_1$
|
|
13506
|
+
var templateObject_1$o;
|
|
13507
13507
|
|
|
13508
|
-
var P = newStyled.p(templateObject_1$
|
|
13508
|
+
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; });
|
|
13509
13509
|
var Promo = function (_a) {
|
|
13510
13510
|
var text = _a.text;
|
|
13511
13511
|
var theme = useTheme();
|
|
13512
13512
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13513
13513
|
};
|
|
13514
|
-
var templateObject_1$
|
|
13514
|
+
var templateObject_1$n;
|
|
13515
13515
|
|
|
13516
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13516
|
+
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; });
|
|
13517
13517
|
var Description = function (_a) {
|
|
13518
13518
|
var text = _a.text;
|
|
13519
13519
|
var theme = useTheme();
|
|
13520
13520
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13521
13521
|
};
|
|
13522
|
-
var templateObject_1$
|
|
13522
|
+
var templateObject_1$m;
|
|
13523
13523
|
|
|
13524
|
-
var Container$
|
|
13524
|
+
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"); });
|
|
13525
13525
|
var CloseButton$1 = function (_a) {
|
|
13526
13526
|
var onClick = _a.onClick, size = _a.size;
|
|
13527
13527
|
var theme = useTheme();
|
|
13528
|
-
return (jsx$1(Container$
|
|
13528
|
+
return (jsx$1(Container$h, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13529
13529
|
};
|
|
13530
|
-
var templateObject_1$
|
|
13530
|
+
var templateObject_1$l;
|
|
13531
13531
|
|
|
13532
13532
|
var CartProductItem = {
|
|
13533
13533
|
Title: Title$1,
|
|
@@ -13537,9 +13537,9 @@ var CartProductItem = {
|
|
|
13537
13537
|
CloseButton: CloseButton$1,
|
|
13538
13538
|
};
|
|
13539
13539
|
|
|
13540
|
-
var Container$
|
|
13541
|
-
var Item = newStyled.span(templateObject_2$
|
|
13542
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13540
|
+
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; });
|
|
13541
|
+
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"])));
|
|
13542
|
+
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"])));
|
|
13543
13543
|
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"])));
|
|
13544
13544
|
var QuantityPicker = function (_a) {
|
|
13545
13545
|
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;
|
|
@@ -13563,9 +13563,9 @@ var QuantityPicker = function (_a) {
|
|
|
13563
13563
|
return clamp(value);
|
|
13564
13564
|
});
|
|
13565
13565
|
}, [value, clamp]);
|
|
13566
|
-
return (jsxs$1(Container$
|
|
13566
|
+
return (jsxs$1(Container$g, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13567
13567
|
};
|
|
13568
|
-
var templateObject_1$
|
|
13568
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$f, templateObject_4$9;
|
|
13569
13569
|
|
|
13570
13570
|
var htmlReactParser = {exports: {}};
|
|
13571
13571
|
|
|
@@ -17346,9 +17346,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17346
17346
|
HTMLReactParser$1.attributesToProps;
|
|
17347
17347
|
HTMLReactParser$1.Element;
|
|
17348
17348
|
|
|
17349
|
-
var Container$
|
|
17350
|
-
var Card = newStyled.div(templateObject_2$
|
|
17351
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17349
|
+
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"])));
|
|
17350
|
+
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"])));
|
|
17351
|
+
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"])));
|
|
17352
17352
|
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"])));
|
|
17353
17353
|
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"])));
|
|
17354
17354
|
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"])));
|
|
@@ -17356,7 +17356,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 =
|
|
|
17356
17356
|
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"])));
|
|
17357
17357
|
var PackSelector = function (_a) {
|
|
17358
17358
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17359
|
-
return (jsx$1(Container$
|
|
17359
|
+
return (jsx$1(Container$f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17360
17360
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17361
17361
|
}) }), void 0));
|
|
17362
17362
|
};
|
|
@@ -17382,23 +17382,23 @@ var PackCard = function (_a) {
|
|
|
17382
17382
|
currency: currencyCode || 'USD',
|
|
17383
17383
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17384
17384
|
};
|
|
17385
|
-
var templateObject_1$
|
|
17385
|
+
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;
|
|
17386
17386
|
|
|
17387
|
-
var Title = newStyled.div(templateObject_1$
|
|
17388
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17389
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17390
|
-
var Container$
|
|
17387
|
+
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; });
|
|
17388
|
+
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; });
|
|
17389
|
+
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"])));
|
|
17390
|
+
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'); });
|
|
17391
17391
|
var Accordion = function (_a) {
|
|
17392
17392
|
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;
|
|
17393
17393
|
var theme = useTheme();
|
|
17394
17394
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17395
|
-
return (jsxs$1(Container$
|
|
17395
|
+
return (jsxs$1(Container$e, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17396
17396
|
};
|
|
17397
|
-
var templateObject_1$
|
|
17397
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$d, templateObject_4$7;
|
|
17398
17398
|
|
|
17399
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17400
|
-
var Header = newStyled.div(templateObject_2$
|
|
17401
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17399
|
+
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; });
|
|
17400
|
+
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"])));
|
|
17401
|
+
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"])));
|
|
17402
17402
|
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"])));
|
|
17403
17403
|
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; });
|
|
17404
17404
|
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; });
|
|
@@ -17406,7 +17406,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17406
17406
|
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; });
|
|
17407
17407
|
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"])));
|
|
17408
17408
|
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"])));
|
|
17409
|
-
var templateObject_1$
|
|
17409
|
+
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;
|
|
17410
17410
|
|
|
17411
17411
|
var Filters = function (_a) {
|
|
17412
17412
|
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;
|
|
@@ -17504,20 +17504,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17504
17504
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
|
|
17505
17505
|
};
|
|
17506
17506
|
|
|
17507
|
-
var Container$
|
|
17508
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17509
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17507
|
+
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"])));
|
|
17508
|
+
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"])));
|
|
17509
|
+
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"])));
|
|
17510
17510
|
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"])));
|
|
17511
17511
|
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"])));
|
|
17512
17512
|
var SearchNavigation = function (_a) {
|
|
17513
17513
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17514
|
-
return (jsxs$1(Container$
|
|
17514
|
+
return (jsxs$1(Container$d, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17515
17515
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17516
17516
|
}) }, void 0)] }, void 0));
|
|
17517
17517
|
};
|
|
17518
|
-
var templateObject_1$
|
|
17518
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$b, templateObject_4$5, templateObject_5$3;
|
|
17519
17519
|
|
|
17520
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17520
|
+
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) {
|
|
17521
17521
|
var titleSize = _a.titleSize;
|
|
17522
17522
|
return titleSize;
|
|
17523
17523
|
}, function (_a) {
|
|
@@ -17534,14 +17534,14 @@ var Tab = function (_a) {
|
|
|
17534
17534
|
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;
|
|
17535
17535
|
return (jsx$1(Fragment$1, { children: jsx$1(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));
|
|
17536
17536
|
};
|
|
17537
|
-
var templateObject_1$
|
|
17537
|
+
var templateObject_1$f;
|
|
17538
17538
|
|
|
17539
|
-
var Container$
|
|
17540
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17539
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17540
|
+
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) {
|
|
17541
17541
|
var backgroundColor = _a.backgroundColor;
|
|
17542
17542
|
return backgroundColor;
|
|
17543
17543
|
});
|
|
17544
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17544
|
+
var TabContent = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17545
17545
|
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"])));
|
|
17546
17546
|
var Tabs = function (_a) {
|
|
17547
17547
|
var _b;
|
|
@@ -17551,11 +17551,11 @@ var Tabs = function (_a) {
|
|
|
17551
17551
|
return null;
|
|
17552
17552
|
}
|
|
17553
17553
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17554
|
-
return (jsxs$1(Container$
|
|
17554
|
+
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17555
17555
|
};
|
|
17556
|
-
var templateObject_1$
|
|
17556
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$4;
|
|
17557
17557
|
|
|
17558
|
-
var Container$
|
|
17558
|
+
var Container$b = newStyled.div(function (props) { return ({
|
|
17559
17559
|
height: 'auto',
|
|
17560
17560
|
textAlign: 'center',
|
|
17561
17561
|
justifyContent: 'center',
|
|
@@ -17605,12 +17605,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17605
17605
|
textAlign: 'center',
|
|
17606
17606
|
lineHeight: '18px',
|
|
17607
17607
|
};
|
|
17608
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
17608
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$b, __assign$1({ textPosition: iconTitlePosition }, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsx$1(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));
|
|
17609
17609
|
};
|
|
17610
17610
|
|
|
17611
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17612
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17613
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17611
|
+
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"])));
|
|
17612
|
+
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"])));
|
|
17613
|
+
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"])));
|
|
17614
17614
|
var ImageVideo = function (_a) {
|
|
17615
17615
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17616
17616
|
var video = useRef(null);
|
|
@@ -17630,11 +17630,11 @@ var ImageVideo = function (_a) {
|
|
|
17630
17630
|
height: '100%',
|
|
17631
17631
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17632
17632
|
};
|
|
17633
|
-
var templateObject_1$
|
|
17633
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9;
|
|
17634
17634
|
|
|
17635
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17636
|
-
var ContainerMobile = css(templateObject_2$
|
|
17637
|
-
var Container$
|
|
17635
|
+
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"])));
|
|
17636
|
+
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"])));
|
|
17637
|
+
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);
|
|
17638
17638
|
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"])));
|
|
17639
17639
|
var TextWithImage = function (_a) {
|
|
17640
17640
|
var _b, _c, _d, _e;
|
|
@@ -17655,7 +17655,7 @@ var TextWithImage = function (_a) {
|
|
|
17655
17655
|
// @ts-ignore
|
|
17656
17656
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17657
17657
|
};
|
|
17658
|
-
return (jsxs(Container$
|
|
17658
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17659
17659
|
backgroundColor: props.btnBGColor,
|
|
17660
17660
|
color: '#ffffff',
|
|
17661
17661
|
border: props.btnBGColor,
|
|
@@ -17665,9 +17665,9 @@ var TextWithImage = function (_a) {
|
|
|
17665
17665
|
},
|
|
17666
17666
|
} }, 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));
|
|
17667
17667
|
};
|
|
17668
|
-
var templateObject_1$
|
|
17668
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
17669
17669
|
|
|
17670
|
-
var Container$
|
|
17670
|
+
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"])));
|
|
17671
17671
|
var AccordionOptions = function (_a) {
|
|
17672
17672
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17673
17673
|
var _b = useState({
|
|
@@ -17680,7 +17680,7 @@ var AccordionOptions = function (_a) {
|
|
|
17680
17680
|
}
|
|
17681
17681
|
return false;
|
|
17682
17682
|
};
|
|
17683
|
-
return (jsx$1(Container$
|
|
17683
|
+
return (jsx$1(Container$9, { children: accordions.map(function (accordion, index) {
|
|
17684
17684
|
var forceOpenValue = getForceOpen(index);
|
|
17685
17685
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17686
17686
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17691,9 +17691,9 @@ var AccordionOptions = function (_a) {
|
|
|
17691
17691
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17692
17692
|
}) }, void 0));
|
|
17693
17693
|
};
|
|
17694
|
-
var templateObject_1$
|
|
17694
|
+
var templateObject_1$b;
|
|
17695
17695
|
|
|
17696
|
-
var Container$
|
|
17696
|
+
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) {
|
|
17697
17697
|
var alignCenter = _a.alignCenter;
|
|
17698
17698
|
return alignCenter &&
|
|
17699
17699
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17703,14 +17703,14 @@ var Container$5 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __ma
|
|
|
17703
17703
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17704
17704
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17705
17705
|
});
|
|
17706
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17707
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17706
|
+
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"])));
|
|
17707
|
+
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"])));
|
|
17708
17708
|
var ShortBanner = function (_a) {
|
|
17709
17709
|
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;
|
|
17710
17710
|
var theme = useTheme();
|
|
17711
|
-
return (jsxs$1(Container$
|
|
17711
|
+
return (jsxs$1(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17712
17712
|
};
|
|
17713
|
-
var templateObject_1$
|
|
17713
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$7;
|
|
17714
17714
|
|
|
17715
17715
|
/* base styles & size variants */
|
|
17716
17716
|
var UserInfoTextStyles = {
|
|
@@ -17778,13 +17778,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17778
17778
|
}
|
|
17779
17779
|
};
|
|
17780
17780
|
|
|
17781
|
-
var Container$
|
|
17781
|
+
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) {
|
|
17782
17782
|
return props.isMobile
|
|
17783
17783
|
? props.styles.imageContainerMobileMaxWidth
|
|
17784
17784
|
: props.styles.imageContainerMaxWidth;
|
|
17785
17785
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17786
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
17787
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17786
|
+
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"])));
|
|
17787
|
+
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) {
|
|
17788
17788
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17789
17789
|
}, function (props) {
|
|
17790
17790
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17802,13 +17802,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17802
17802
|
var theme = useTheme();
|
|
17803
17803
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17804
17804
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17805
|
-
return (jsxs$1(Container$
|
|
17805
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxs$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(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));
|
|
17806
17806
|
};
|
|
17807
|
-
var templateObject_1$
|
|
17807
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$6;
|
|
17808
17808
|
|
|
17809
|
-
var Container$
|
|
17810
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17811
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17809
|
+
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'); });
|
|
17810
|
+
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'); });
|
|
17811
|
+
var StyledTitle = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17812
17812
|
var titlePosition = _a.titlePosition;
|
|
17813
17813
|
return titlePosition == 'center' &&
|
|
17814
17814
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17816,13 +17816,13 @@ var StyledTitle = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __ma
|
|
|
17816
17816
|
var ImageCardWithDescription = function (_a) {
|
|
17817
17817
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17818
17818
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17819
|
-
return (jsxs$1(Container$
|
|
17819
|
+
return (jsxs$1(Container$6, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17820
17820
|
};
|
|
17821
|
-
var templateObject_1$
|
|
17821
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$5;
|
|
17822
17822
|
|
|
17823
|
-
var Container$
|
|
17824
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17825
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17823
|
+
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"])));
|
|
17824
|
+
var CheckpointContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17825
|
+
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; });
|
|
17826
17826
|
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'); });
|
|
17827
17827
|
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'); });
|
|
17828
17828
|
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) {
|
|
@@ -17849,7 +17849,7 @@ var TrackingProgress = function (_a) {
|
|
|
17849
17849
|
}
|
|
17850
17850
|
return '30px';
|
|
17851
17851
|
};
|
|
17852
|
-
return (jsxs$1(Container$
|
|
17852
|
+
return (jsxs$1(Container$5, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17853
17853
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17854
17854
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
17855
17855
|
? theme.colors.semantic.informative.color
|
|
@@ -17858,11 +17858,11 @@ var TrackingProgress = function (_a) {
|
|
|
17858
17858
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
17859
17859
|
})] }), void 0));
|
|
17860
17860
|
};
|
|
17861
|
-
var templateObject_1$
|
|
17861
|
+
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;
|
|
17862
17862
|
|
|
17863
|
-
var Container$
|
|
17864
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
17865
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
17863
|
+
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"])));
|
|
17864
|
+
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"])));
|
|
17865
|
+
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"])));
|
|
17866
17866
|
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"])));
|
|
17867
17867
|
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"])));
|
|
17868
17868
|
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"])));
|
|
@@ -17874,13 +17874,13 @@ var ReviewsHeader = function (_a) {
|
|
|
17874
17874
|
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;
|
|
17875
17875
|
var starsNumber = 5;
|
|
17876
17876
|
var theme = useTheme();
|
|
17877
|
-
return (jsxs$1(Container$
|
|
17877
|
+
return (jsxs$1(Container$4, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17878
17878
|
};
|
|
17879
|
-
var templateObject_1$
|
|
17879
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
17880
17880
|
|
|
17881
|
-
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"])));
|
|
17882
|
-
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"])));
|
|
17883
|
-
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"])));
|
|
17881
|
+
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"])));
|
|
17882
|
+
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"])));
|
|
17883
|
+
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"])));
|
|
17884
17884
|
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"])));
|
|
17885
17885
|
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"])));
|
|
17886
17886
|
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"])));
|
|
@@ -17916,10 +17916,348 @@ var Review = function (_a) {
|
|
|
17916
17916
|
}
|
|
17917
17917
|
}
|
|
17918
17918
|
}, [opened]);
|
|
17919
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
17919
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$3, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
17920
17920
|
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17921
17921
|
};
|
|
17922
|
-
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;
|
|
17922
|
+
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;
|
|
17923
|
+
|
|
17924
|
+
function _extends() {
|
|
17925
|
+
_extends = Object.assign || function (target) {
|
|
17926
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
17927
|
+
var source = arguments[i];
|
|
17928
|
+
|
|
17929
|
+
for (var key in source) {
|
|
17930
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
17931
|
+
target[key] = source[key];
|
|
17932
|
+
}
|
|
17933
|
+
}
|
|
17934
|
+
}
|
|
17935
|
+
|
|
17936
|
+
return target;
|
|
17937
|
+
};
|
|
17938
|
+
|
|
17939
|
+
return _extends.apply(this, arguments);
|
|
17940
|
+
}
|
|
17941
|
+
|
|
17942
|
+
var LEFT = "Left";
|
|
17943
|
+
var RIGHT = "Right";
|
|
17944
|
+
var UP = "Up";
|
|
17945
|
+
var DOWN = "Down";
|
|
17946
|
+
|
|
17947
|
+
var defaultProps = {
|
|
17948
|
+
delta: 10,
|
|
17949
|
+
preventDefaultTouchmoveEvent: false,
|
|
17950
|
+
rotationAngle: 0,
|
|
17951
|
+
trackMouse: false,
|
|
17952
|
+
trackTouch: true
|
|
17953
|
+
};
|
|
17954
|
+
var initialState = {
|
|
17955
|
+
first: true,
|
|
17956
|
+
initial: [0, 0],
|
|
17957
|
+
start: 0,
|
|
17958
|
+
swiping: false,
|
|
17959
|
+
xy: [0, 0]
|
|
17960
|
+
};
|
|
17961
|
+
var mouseMove = "mousemove";
|
|
17962
|
+
var mouseUp = "mouseup";
|
|
17963
|
+
var touchEnd = "touchend";
|
|
17964
|
+
var touchMove = "touchmove";
|
|
17965
|
+
var touchStart = "touchstart";
|
|
17966
|
+
|
|
17967
|
+
function getDirection(absX, absY, deltaX, deltaY) {
|
|
17968
|
+
if (absX > absY) {
|
|
17969
|
+
if (deltaX > 0) {
|
|
17970
|
+
return RIGHT;
|
|
17971
|
+
}
|
|
17972
|
+
|
|
17973
|
+
return LEFT;
|
|
17974
|
+
} else if (deltaY > 0) {
|
|
17975
|
+
return DOWN;
|
|
17976
|
+
}
|
|
17977
|
+
|
|
17978
|
+
return UP;
|
|
17979
|
+
}
|
|
17980
|
+
|
|
17981
|
+
function rotateXYByAngle(pos, angle) {
|
|
17982
|
+
if (angle === 0) return pos;
|
|
17983
|
+
var angleInRadians = Math.PI / 180 * angle;
|
|
17984
|
+
var x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
|
|
17985
|
+
var y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
|
|
17986
|
+
return [x, y];
|
|
17987
|
+
}
|
|
17988
|
+
|
|
17989
|
+
function getHandlers(set, handlerProps) {
|
|
17990
|
+
var onStart = function onStart(event) {
|
|
17991
|
+
if (event && "touches" in event && event.touches.length > 1) return;
|
|
17992
|
+
set(function (state, props) {
|
|
17993
|
+
if (props.trackMouse) {
|
|
17994
|
+
document.addEventListener(mouseMove, onMove);
|
|
17995
|
+
document.addEventListener(mouseUp, onUp);
|
|
17996
|
+
}
|
|
17997
|
+
|
|
17998
|
+
var _ref = "touches" in event ? event.touches[0] : event,
|
|
17999
|
+
clientX = _ref.clientX,
|
|
18000
|
+
clientY = _ref.clientY;
|
|
18001
|
+
|
|
18002
|
+
var xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
|
|
18003
|
+
return _extends({}, state, initialState, {
|
|
18004
|
+
initial: [].concat(xy),
|
|
18005
|
+
xy: xy,
|
|
18006
|
+
start: event.timeStamp || 0
|
|
18007
|
+
});
|
|
18008
|
+
});
|
|
18009
|
+
};
|
|
18010
|
+
|
|
18011
|
+
var onMove = function onMove(event) {
|
|
18012
|
+
set(function (state, props) {
|
|
18013
|
+
if ("touches" in event && event.touches.length > 1) {
|
|
18014
|
+
return state;
|
|
18015
|
+
}
|
|
18016
|
+
|
|
18017
|
+
var _ref2 = "touches" in event ? event.touches[0] : event,
|
|
18018
|
+
clientX = _ref2.clientX,
|
|
18019
|
+
clientY = _ref2.clientY;
|
|
18020
|
+
|
|
18021
|
+
var _rotateXYByAngle = rotateXYByAngle([clientX, clientY], props.rotationAngle),
|
|
18022
|
+
x = _rotateXYByAngle[0],
|
|
18023
|
+
y = _rotateXYByAngle[1];
|
|
18024
|
+
|
|
18025
|
+
var deltaX = x - state.xy[0];
|
|
18026
|
+
var deltaY = y - state.xy[1];
|
|
18027
|
+
var absX = Math.abs(deltaX);
|
|
18028
|
+
var absY = Math.abs(deltaY);
|
|
18029
|
+
var time = (event.timeStamp || 0) - state.start;
|
|
18030
|
+
var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
|
|
18031
|
+
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
|
|
18032
|
+
var dir = getDirection(absX, absY, deltaX, deltaY);
|
|
18033
|
+
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
|
|
18034
|
+
if (absX < delta && absY < delta && !state.swiping) return state;
|
|
18035
|
+
var eventData = {
|
|
18036
|
+
absX: absX,
|
|
18037
|
+
absY: absY,
|
|
18038
|
+
deltaX: deltaX,
|
|
18039
|
+
deltaY: deltaY,
|
|
18040
|
+
dir: dir,
|
|
18041
|
+
event: event,
|
|
18042
|
+
first: state.first,
|
|
18043
|
+
initial: state.initial,
|
|
18044
|
+
velocity: velocity,
|
|
18045
|
+
vxvy: vxvy
|
|
18046
|
+
};
|
|
18047
|
+
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
|
|
18048
|
+
props.onSwiping && props.onSwiping(eventData);
|
|
18049
|
+
var cancelablePageSwipe = false;
|
|
18050
|
+
|
|
18051
|
+
if (props.onSwiping || props.onSwiped || "onSwiped" + dir in props) {
|
|
18052
|
+
cancelablePageSwipe = true;
|
|
18053
|
+
}
|
|
18054
|
+
|
|
18055
|
+
if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch && event.cancelable) event.preventDefault();
|
|
18056
|
+
return _extends({}, state, {
|
|
18057
|
+
first: false,
|
|
18058
|
+
eventData: eventData,
|
|
18059
|
+
swiping: true
|
|
18060
|
+
});
|
|
18061
|
+
});
|
|
18062
|
+
};
|
|
18063
|
+
|
|
18064
|
+
var onEnd = function onEnd(event) {
|
|
18065
|
+
set(function (state, props) {
|
|
18066
|
+
var eventData;
|
|
18067
|
+
|
|
18068
|
+
if (state.swiping && state.eventData) {
|
|
18069
|
+
eventData = _extends({}, state.eventData, {
|
|
18070
|
+
event: event
|
|
18071
|
+
});
|
|
18072
|
+
props.onSwiped && props.onSwiped(eventData);
|
|
18073
|
+
var onSwipedDir = props["onSwiped" + eventData.dir];
|
|
18074
|
+
onSwipedDir && onSwipedDir(eventData);
|
|
18075
|
+
} else {
|
|
18076
|
+
props.onTap && props.onTap({
|
|
18077
|
+
event: event
|
|
18078
|
+
});
|
|
18079
|
+
}
|
|
18080
|
+
|
|
18081
|
+
return _extends({}, state, initialState, {
|
|
18082
|
+
eventData: eventData
|
|
18083
|
+
});
|
|
18084
|
+
});
|
|
18085
|
+
};
|
|
18086
|
+
|
|
18087
|
+
var cleanUpMouse = function cleanUpMouse() {
|
|
18088
|
+
document.removeEventListener(mouseMove, onMove);
|
|
18089
|
+
document.removeEventListener(mouseUp, onUp);
|
|
18090
|
+
};
|
|
18091
|
+
|
|
18092
|
+
var onUp = function onUp(e) {
|
|
18093
|
+
cleanUpMouse();
|
|
18094
|
+
onEnd(e);
|
|
18095
|
+
};
|
|
18096
|
+
|
|
18097
|
+
var attachTouch = function attachTouch(el, passive) {
|
|
18098
|
+
var cleanup = function cleanup() {};
|
|
18099
|
+
|
|
18100
|
+
if (el && el.addEventListener) {
|
|
18101
|
+
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];
|
|
18102
|
+
tls.forEach(function (_ref3) {
|
|
18103
|
+
var e = _ref3[0],
|
|
18104
|
+
h = _ref3[1];
|
|
18105
|
+
return el.addEventListener(e, h, {
|
|
18106
|
+
passive: passive
|
|
18107
|
+
});
|
|
18108
|
+
});
|
|
18109
|
+
|
|
18110
|
+
cleanup = function cleanup() {
|
|
18111
|
+
return tls.forEach(function (_ref4) {
|
|
18112
|
+
var e = _ref4[0],
|
|
18113
|
+
h = _ref4[1];
|
|
18114
|
+
return el.removeEventListener(e, h);
|
|
18115
|
+
});
|
|
18116
|
+
};
|
|
18117
|
+
}
|
|
18118
|
+
|
|
18119
|
+
return cleanup;
|
|
18120
|
+
};
|
|
18121
|
+
|
|
18122
|
+
var onRef = function onRef(el) {
|
|
18123
|
+
if (el === null) return;
|
|
18124
|
+
set(function (state, props) {
|
|
18125
|
+
if (state.el === el) return state;
|
|
18126
|
+
var addState = {};
|
|
18127
|
+
|
|
18128
|
+
if (state.el && state.el !== el && state.cleanUpTouch) {
|
|
18129
|
+
state.cleanUpTouch();
|
|
18130
|
+
addState.cleanUpTouch = undefined;
|
|
18131
|
+
}
|
|
18132
|
+
|
|
18133
|
+
if (props.trackTouch && el) {
|
|
18134
|
+
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
|
|
18135
|
+
}
|
|
18136
|
+
|
|
18137
|
+
return _extends({}, state, {
|
|
18138
|
+
el: el
|
|
18139
|
+
}, addState);
|
|
18140
|
+
});
|
|
18141
|
+
};
|
|
18142
|
+
|
|
18143
|
+
var output = {
|
|
18144
|
+
ref: onRef
|
|
18145
|
+
};
|
|
18146
|
+
|
|
18147
|
+
if (handlerProps.trackMouse) {
|
|
18148
|
+
output.onMouseDown = onStart;
|
|
18149
|
+
}
|
|
18150
|
+
|
|
18151
|
+
return [output, attachTouch];
|
|
18152
|
+
}
|
|
18153
|
+
|
|
18154
|
+
function updateTransientState(state, props, attachTouch) {
|
|
18155
|
+
var addState = {};
|
|
18156
|
+
|
|
18157
|
+
if (!props.trackTouch && state.cleanUpTouch) {
|
|
18158
|
+
state.cleanUpTouch();
|
|
18159
|
+
addState.cleanUpTouch = undefined;
|
|
18160
|
+
} else if (props.trackTouch && !state.cleanUpTouch) {
|
|
18161
|
+
if (state.el) {
|
|
18162
|
+
addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);
|
|
18163
|
+
}
|
|
18164
|
+
}
|
|
18165
|
+
|
|
18166
|
+
return _extends({}, state, addState);
|
|
18167
|
+
}
|
|
18168
|
+
|
|
18169
|
+
function useSwipeable(options) {
|
|
18170
|
+
var trackMouse = options.trackMouse;
|
|
18171
|
+
var transientState = React$2.useRef(_extends({}, initialState));
|
|
18172
|
+
var transientProps = React$2.useRef(_extends({}, defaultProps));
|
|
18173
|
+
transientProps.current = _extends({}, defaultProps, options);
|
|
18174
|
+
|
|
18175
|
+
var _React$useMemo = React$2.useMemo(function () {
|
|
18176
|
+
return getHandlers(function (stateSetter) {
|
|
18177
|
+
return transientState.current = stateSetter(transientState.current, transientProps.current);
|
|
18178
|
+
}, {
|
|
18179
|
+
trackMouse: trackMouse
|
|
18180
|
+
});
|
|
18181
|
+
}, [trackMouse]),
|
|
18182
|
+
handlers = _React$useMemo[0],
|
|
18183
|
+
attachTouch = _React$useMemo[1];
|
|
18184
|
+
|
|
18185
|
+
transientState.current = updateTransientState(transientState.current, transientProps.current, attachTouch);
|
|
18186
|
+
return handlers;
|
|
18187
|
+
}
|
|
18188
|
+
|
|
18189
|
+
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) {
|
|
18190
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18191
|
+
return borderRadiusVariant &&
|
|
18192
|
+
"\n border-radius: 40px;\n ";
|
|
18193
|
+
});
|
|
18194
|
+
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'); });
|
|
18195
|
+
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"])));
|
|
18196
|
+
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18197
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18198
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(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), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18199
|
+
});
|
|
18200
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3$1;
|
|
18201
|
+
|
|
18202
|
+
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"])));
|
|
18203
|
+
var ArrowButton = function (_a) {
|
|
18204
|
+
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18205
|
+
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18206
|
+
};
|
|
18207
|
+
var templateObject_1$3;
|
|
18208
|
+
|
|
18209
|
+
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"])));
|
|
18210
|
+
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18211
|
+
var SlideDots = function (_a) {
|
|
18212
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18213
|
+
var theme = useTheme();
|
|
18214
|
+
return (jsx$1(Container$1, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18215
|
+
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18216
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18217
|
+
};
|
|
18218
|
+
var templateObject_1$2;
|
|
18219
|
+
|
|
18220
|
+
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"])));
|
|
18221
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18222
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18223
|
+
var SlideNavigation = function (_a) {
|
|
18224
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18225
|
+
var theme = useTheme();
|
|
18226
|
+
var upperLimit = quantity - 1;
|
|
18227
|
+
var lowerLimit = 0;
|
|
18228
|
+
return (jsxs$1(Fragment$1, { children: [selectedIndex > lowerLimit && (jsx$1(LeftButton, { Icon: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
18229
|
+
onNavigate(selectedIndex - 1);
|
|
18230
|
+
} }, void 0)), selectedIndex < upperLimit && (jsx$1(RightButton, { Icon: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
18231
|
+
onNavigate(selectedIndex + 1);
|
|
18232
|
+
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18233
|
+
};
|
|
18234
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18235
|
+
|
|
18236
|
+
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"])));
|
|
18237
|
+
var ProductGalleryMobileV2 = function (_a) {
|
|
18238
|
+
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;
|
|
18239
|
+
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
18240
|
+
useEffect(function () {
|
|
18241
|
+
if (selectedValue == null) {
|
|
18242
|
+
return;
|
|
18243
|
+
}
|
|
18244
|
+
setIndex(Math.max(0, images.indexOf(selectedValue)));
|
|
18245
|
+
}, [selectedValue, images]);
|
|
18246
|
+
var _d = useState(function () { return images[index]; }), selectedImage = _d[0], setSelectedImage = _d[1];
|
|
18247
|
+
var handlers = useSwipeable({
|
|
18248
|
+
onSwipedLeft: useCallback(function () {
|
|
18249
|
+
setIndex(function (index) { return Math.min(index + 1, images.length - 1); });
|
|
18250
|
+
}, [images.length]),
|
|
18251
|
+
onSwipedRight: useCallback(function () {
|
|
18252
|
+
setIndex(function (index) { return Math.max(index - 1, 0); });
|
|
18253
|
+
}, []),
|
|
18254
|
+
});
|
|
18255
|
+
useEffect(function () {
|
|
18256
|
+
setSelectedImage(images[index]);
|
|
18257
|
+
}, [index, images]);
|
|
18258
|
+
return (jsxs$1(Container, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18259
|
+
};
|
|
18260
|
+
var templateObject_1;
|
|
17923
18261
|
|
|
17924
|
-
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18262
|
+
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17925
18263
|
//# sourceMappingURL=index.esm.js.map
|