@trafilea/afrodita-components 5.0.0-beta.175 → 5.0.0-beta.177
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 +20 -4
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +714 -372
- package/build/index.esm.js.map +1 -1
- package/build/index.js +714 -371
- 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,11 +12768,15 @@ 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
|
-
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
|
|
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, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
|
|
12776
|
+
display: false,
|
|
12777
|
+
position: 'top',
|
|
12778
|
+
component: undefined,
|
|
12779
|
+
} : _d;
|
|
12776
12780
|
var theme = useTheme();
|
|
12777
12781
|
var styles = getStylesBySize$1(size);
|
|
12778
12782
|
var space = useMemo(function () {
|
|
@@ -12787,32 +12791,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12787
12791
|
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
12792
|
};
|
|
12789
12793
|
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$
|
|
12794
|
+
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, colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position && colorPicker.component] }, void 0)), 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)), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position && colorPicker.component] }, void 0))] }), void 0));
|
|
12791
12795
|
};
|
|
12792
|
-
var templateObject_1$
|
|
12796
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
12793
12797
|
|
|
12794
|
-
var Container$
|
|
12798
|
+
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
12799
|
function withProductGrid(ProductItemComponent, data) {
|
|
12796
12800
|
function WithProductGrid(props) {
|
|
12797
|
-
return (jsx$1(Container$
|
|
12801
|
+
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
12802
|
}
|
|
12799
12803
|
/* istanbul ignore next */
|
|
12800
12804
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12801
12805
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12802
12806
|
return WithProductGrid;
|
|
12803
12807
|
}
|
|
12804
|
-
var templateObject_1$
|
|
12808
|
+
var templateObject_1$z;
|
|
12805
12809
|
|
|
12806
12810
|
var Collection = {
|
|
12807
12811
|
ProductItemMobile: ProductItemMobile,
|
|
12808
12812
|
withProductGrid: withProductGrid,
|
|
12809
12813
|
};
|
|
12810
12814
|
|
|
12811
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12815
|
+
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
12816
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12813
12817
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12814
12818
|
});
|
|
12815
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12819
|
+
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
12820
|
var width = _a.width;
|
|
12817
12821
|
return width;
|
|
12818
12822
|
}, function (_a) {
|
|
@@ -12853,28 +12857,28 @@ var Drawer = function (_a) {
|
|
|
12853
12857
|
}, [isOpen, onClose, onOpen]);
|
|
12854
12858
|
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
12859
|
};
|
|
12856
|
-
var templateObject_1$
|
|
12860
|
+
var templateObject_1$y, templateObject_2$m;
|
|
12857
12861
|
|
|
12858
|
-
var Container$
|
|
12862
|
+
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
12863
|
var size = _a.size;
|
|
12860
12864
|
return (size ? size : '100%');
|
|
12861
12865
|
}, function (_a) {
|
|
12862
12866
|
var size = _a.size;
|
|
12863
12867
|
return (size ? size : '100%');
|
|
12864
12868
|
});
|
|
12865
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12869
|
+
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
12870
|
var animationDuration = _a.animationDuration;
|
|
12867
12871
|
return animationDuration;
|
|
12868
12872
|
});
|
|
12869
12873
|
var Spinner = function (_a) {
|
|
12870
12874
|
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$
|
|
12875
|
+
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
12876
|
};
|
|
12873
|
-
var templateObject_1$
|
|
12877
|
+
var templateObject_1$x, templateObject_2$l;
|
|
12874
12878
|
|
|
12875
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12876
|
-
var LI = newStyled.li(templateObject_2$
|
|
12877
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12879
|
+
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"])));
|
|
12880
|
+
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; });
|
|
12881
|
+
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
12882
|
var Tags = function (_a) {
|
|
12879
12883
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12880
12884
|
var theme = useTheme();
|
|
@@ -12882,7 +12886,7 @@ var Tags = function (_a) {
|
|
|
12882
12886
|
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
12887
|
}) }), void 0));
|
|
12884
12888
|
};
|
|
12885
|
-
var templateObject_1$
|
|
12889
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$k;
|
|
12886
12890
|
|
|
12887
12891
|
function FilteringDropdown(_a) {
|
|
12888
12892
|
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 +12919,9 @@ function FilteringDropdown(_a) {
|
|
|
12915
12919
|
}) }, void 0)] }), void 0));
|
|
12916
12920
|
}
|
|
12917
12921
|
|
|
12918
|
-
var Container$
|
|
12919
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12920
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12922
|
+
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"])));
|
|
12923
|
+
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"])));
|
|
12924
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12921
12925
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12922
12926
|
}));
|
|
12923
12927
|
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 +12941,7 @@ var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __ma
|
|
|
12937
12941
|
var background = _a.background;
|
|
12938
12942
|
return background || 'unset';
|
|
12939
12943
|
});
|
|
12940
|
-
var templateObject_1$
|
|
12944
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$j, templateObject_4$b;
|
|
12941
12945
|
|
|
12942
12946
|
var Pagination = function (_a) {
|
|
12943
12947
|
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 +12987,7 @@ var Pagination = function (_a) {
|
|
|
12983
12987
|
}
|
|
12984
12988
|
return pages;
|
|
12985
12989
|
}, [from, page, showReducedPages, to]);
|
|
12986
|
-
return (jsxs$1(Container$
|
|
12990
|
+
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
12991
|
};
|
|
12988
12992
|
|
|
12989
12993
|
var PaginatorBlog = function (_a) {
|
|
@@ -12997,12 +13001,12 @@ var PaginatorBlog = function (_a) {
|
|
|
12997
13001
|
setPage(page);
|
|
12998
13002
|
onChange(page);
|
|
12999
13003
|
};
|
|
13000
|
-
return (jsxs$1(Container$
|
|
13004
|
+
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
13005
|
? theme.colors.shades['white'].color
|
|
13002
13006
|
: 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
13007
|
};
|
|
13004
13008
|
|
|
13005
|
-
var Container$
|
|
13009
|
+
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
13010
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13007
13011
|
}));
|
|
13008
13012
|
var Description$1 = newStyled.div({
|
|
@@ -13019,25 +13023,25 @@ var Description$1 = newStyled.div({
|
|
|
13019
13023
|
var ProductItem = function (_a) {
|
|
13020
13024
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13021
13025
|
var theme = useTheme();
|
|
13022
|
-
return (jsxs$1(Container$
|
|
13026
|
+
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
13027
|
};
|
|
13024
|
-
var templateObject_1$
|
|
13028
|
+
var templateObject_1$u;
|
|
13025
13029
|
|
|
13026
|
-
var Container$
|
|
13030
|
+
var Container$n = newStyled.div({
|
|
13027
13031
|
display: 'flex',
|
|
13028
13032
|
justifyContent: 'center',
|
|
13029
13033
|
padding: '1rem',
|
|
13030
13034
|
});
|
|
13031
13035
|
var Footer = function (_a) {
|
|
13032
13036
|
var text = _a.text, onClick = _a.onClick;
|
|
13033
|
-
return (jsx$1(Container$
|
|
13037
|
+
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
13038
|
};
|
|
13035
13039
|
|
|
13036
13040
|
var Ul = newStyled.ul({
|
|
13037
13041
|
margin: '0px',
|
|
13038
13042
|
padding: '0px',
|
|
13039
13043
|
});
|
|
13040
|
-
var Li = newStyled.li(templateObject_1$
|
|
13044
|
+
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
13045
|
padding: [0, '0rem 1rem'],
|
|
13042
13046
|
borderRadius: [0, '0.5rem'],
|
|
13043
13047
|
}));
|
|
@@ -13049,20 +13053,20 @@ var Anchor = newStyled.a({
|
|
|
13049
13053
|
padding: 0,
|
|
13050
13054
|
textDecoration: 'none',
|
|
13051
13055
|
});
|
|
13052
|
-
var Container$
|
|
13056
|
+
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
13057
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13054
13058
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13055
13059
|
borderRadius: ['0', '0.5rem'],
|
|
13056
13060
|
}));
|
|
13057
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13061
|
+
var Header$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13058
13062
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13059
13063
|
}));
|
|
13060
13064
|
var ResultsPanel = function (_a) {
|
|
13061
13065
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13062
13066
|
var theme = useTheme();
|
|
13063
|
-
return (jsxs$1(Container$
|
|
13067
|
+
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
13068
|
};
|
|
13065
|
-
var templateObject_1$
|
|
13069
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$i;
|
|
13066
13070
|
|
|
13067
13071
|
var Input = newStyled.input(function (props) { return ({
|
|
13068
13072
|
padding: props.theme.component.input.padding,
|
|
@@ -13093,16 +13097,16 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13093
13097
|
},
|
|
13094
13098
|
}); });
|
|
13095
13099
|
|
|
13096
|
-
var Button = newStyled.button(templateObject_1$
|
|
13100
|
+
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
13101
|
right: ['1rem', '7.75rem'],
|
|
13098
13102
|
top: ['0.75rem', '0.75rem'],
|
|
13099
13103
|
}));
|
|
13100
13104
|
var ClearButton = function (_a) {
|
|
13101
13105
|
var onClick = _a.onClick;
|
|
13102
13106
|
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));
|
|
13107
|
+
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
13108
|
};
|
|
13105
|
-
var templateObject_1$
|
|
13109
|
+
var templateObject_1$s;
|
|
13106
13110
|
|
|
13107
13111
|
var useOnClickOutside = function (ref, handler) {
|
|
13108
13112
|
useEffect(function () {
|
|
@@ -13177,7 +13181,7 @@ var SearchControl = function (_a) {
|
|
|
13177
13181
|
}
|
|
13178
13182
|
};
|
|
13179
13183
|
|
|
13180
|
-
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
13184
|
+
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
13181
13185
|
var reducer = function (state, action) {
|
|
13182
13186
|
switch (action.type) {
|
|
13183
13187
|
case 'UPDATE_TERM': {
|
|
@@ -13191,7 +13195,7 @@ var reducer = function (state, action) {
|
|
|
13191
13195
|
}
|
|
13192
13196
|
}
|
|
13193
13197
|
};
|
|
13194
|
-
var Container$
|
|
13198
|
+
var Container$l = newStyled.div({
|
|
13195
13199
|
position: 'relative',
|
|
13196
13200
|
display: 'flex',
|
|
13197
13201
|
});
|
|
@@ -13199,9 +13203,9 @@ var SearchBar = function (_a) {
|
|
|
13199
13203
|
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
13204
|
var theme = useTheme();
|
|
13201
13205
|
if (initialTerm) {
|
|
13202
|
-
initialState.term = initialTerm;
|
|
13206
|
+
initialState$1.term = initialTerm;
|
|
13203
13207
|
}
|
|
13204
|
-
var _h = useReducer(reducer, initialState), state = _h[0], dispatch = _h[1];
|
|
13208
|
+
var _h = useReducer(reducer, initialState$1), state = _h[0], dispatch = _h[1];
|
|
13205
13209
|
var ref = useRef(null);
|
|
13206
13210
|
var shouldDisplaySuggestion = function () {
|
|
13207
13211
|
return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
|
|
@@ -13227,7 +13231,7 @@ var SearchBar = function (_a) {
|
|
|
13227
13231
|
onClose();
|
|
13228
13232
|
}
|
|
13229
13233
|
};
|
|
13230
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13234
|
+
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
13235
|
if (e.key === 'Enter') {
|
|
13232
13236
|
e.preventDefault();
|
|
13233
13237
|
e.stopPropagation();
|
|
@@ -13236,14 +13240,14 @@ var SearchBar = function (_a) {
|
|
|
13236
13240
|
} }, 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
13241
|
};
|
|
13238
13242
|
|
|
13239
|
-
var Container$
|
|
13243
|
+
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
13244
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13241
13245
|
return borderRadiusVariant &&
|
|
13242
13246
|
"\n border-radius: 40px;\n ";
|
|
13243
13247
|
});
|
|
13244
13248
|
// max-height: 31.875rem;
|
|
13245
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13246
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13249
|
+
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'); });
|
|
13250
|
+
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
13251
|
var settings = {
|
|
13248
13252
|
dots: true,
|
|
13249
13253
|
infinite: false,
|
|
@@ -13270,8 +13274,8 @@ var ImageProductWithTags = function (_a) {
|
|
|
13270
13274
|
}
|
|
13271
13275
|
}
|
|
13272
13276
|
}, [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));
|
|
13277
|
+
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) {
|
|
13278
|
+
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
13279
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13276
13280
|
};
|
|
13277
13281
|
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
@@ -13307,14 +13311,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13307
13311
|
};
|
|
13308
13312
|
}, [preventTouch, ref, touchStart]);
|
|
13309
13313
|
}
|
|
13310
|
-
var templateObject_1$
|
|
13314
|
+
var templateObject_1$r, templateObject_2$h, templateObject_3$h;
|
|
13311
13315
|
|
|
13312
|
-
var Container$
|
|
13316
|
+
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
13317
|
var ProductGalleryMobile = function (_a) {
|
|
13314
13318
|
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$
|
|
13319
|
+
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
13320
|
};
|
|
13317
|
-
var templateObject_1$
|
|
13321
|
+
var templateObject_1$q;
|
|
13318
13322
|
|
|
13319
13323
|
var Portal = function (_a) {
|
|
13320
13324
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13447,14 +13451,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13447
13451
|
var visibleStyle = function (_a) {
|
|
13448
13452
|
var opened = _a.opened;
|
|
13449
13453
|
return opened
|
|
13450
|
-
? css(templateObject_1$
|
|
13454
|
+
? 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
13455
|
};
|
|
13452
13456
|
var transformStyle = function (_a) {
|
|
13453
13457
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13454
13458
|
return opened
|
|
13455
|
-
? css(templateObject_3$
|
|
13459
|
+
? 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
13460
|
};
|
|
13457
|
-
var Container$
|
|
13461
|
+
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
13462
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13459
13463
|
}), visibleStyle, transformStyle);
|
|
13460
13464
|
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 +13471,7 @@ var Modal = function (_a) {
|
|
|
13467
13471
|
}
|
|
13468
13472
|
close();
|
|
13469
13473
|
};
|
|
13470
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13474
|
+
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
13475
|
};
|
|
13472
13476
|
var modalEvent = function (id, detail) {
|
|
13473
13477
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13495,39 +13499,39 @@ var useModal = function (id) {
|
|
|
13495
13499
|
close: close,
|
|
13496
13500
|
}); }, [close, open, opened]);
|
|
13497
13501
|
};
|
|
13498
|
-
var templateObject_1$
|
|
13502
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5;
|
|
13499
13503
|
|
|
13500
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13504
|
+
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
13505
|
var Title$1 = function (_a) {
|
|
13502
13506
|
var title = _a.title;
|
|
13503
13507
|
var theme = useTheme();
|
|
13504
13508
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13505
13509
|
};
|
|
13506
|
-
var templateObject_1$
|
|
13510
|
+
var templateObject_1$o;
|
|
13507
13511
|
|
|
13508
|
-
var P = newStyled.p(templateObject_1$
|
|
13512
|
+
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
13513
|
var Promo = function (_a) {
|
|
13510
13514
|
var text = _a.text;
|
|
13511
13515
|
var theme = useTheme();
|
|
13512
13516
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13513
13517
|
};
|
|
13514
|
-
var templateObject_1$
|
|
13518
|
+
var templateObject_1$n;
|
|
13515
13519
|
|
|
13516
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13520
|
+
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
13521
|
var Description = function (_a) {
|
|
13518
13522
|
var text = _a.text;
|
|
13519
13523
|
var theme = useTheme();
|
|
13520
13524
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13521
13525
|
};
|
|
13522
|
-
var templateObject_1$
|
|
13526
|
+
var templateObject_1$m;
|
|
13523
13527
|
|
|
13524
|
-
var Container$
|
|
13528
|
+
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
13529
|
var CloseButton$1 = function (_a) {
|
|
13526
13530
|
var onClick = _a.onClick, size = _a.size;
|
|
13527
13531
|
var theme = useTheme();
|
|
13528
|
-
return (jsx$1(Container$
|
|
13532
|
+
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
13533
|
};
|
|
13530
|
-
var templateObject_1$
|
|
13534
|
+
var templateObject_1$l;
|
|
13531
13535
|
|
|
13532
13536
|
var CartProductItem = {
|
|
13533
13537
|
Title: Title$1,
|
|
@@ -13537,9 +13541,9 @@ var CartProductItem = {
|
|
|
13537
13541
|
CloseButton: CloseButton$1,
|
|
13538
13542
|
};
|
|
13539
13543
|
|
|
13540
|
-
var Container$
|
|
13541
|
-
var Item = newStyled.span(templateObject_2$
|
|
13542
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13544
|
+
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; });
|
|
13545
|
+
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"])));
|
|
13546
|
+
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
13547
|
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
13548
|
var QuantityPicker = function (_a) {
|
|
13545
13549
|
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 +13567,9 @@ var QuantityPicker = function (_a) {
|
|
|
13563
13567
|
return clamp(value);
|
|
13564
13568
|
});
|
|
13565
13569
|
}, [value, clamp]);
|
|
13566
|
-
return (jsxs$1(Container$
|
|
13570
|
+
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
13571
|
};
|
|
13568
|
-
var templateObject_1$
|
|
13572
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$f, templateObject_4$9;
|
|
13569
13573
|
|
|
13570
13574
|
var htmlReactParser = {exports: {}};
|
|
13571
13575
|
|
|
@@ -17346,9 +17350,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17346
17350
|
HTMLReactParser$1.attributesToProps;
|
|
17347
17351
|
HTMLReactParser$1.Element;
|
|
17348
17352
|
|
|
17349
|
-
var Container$
|
|
17350
|
-
var Card = newStyled.div(templateObject_2$
|
|
17351
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17353
|
+
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"])));
|
|
17354
|
+
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"])));
|
|
17355
|
+
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
17356
|
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
17357
|
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
17358
|
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 +17360,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 =
|
|
|
17356
17360
|
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
17361
|
var PackSelector = function (_a) {
|
|
17358
17362
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17359
|
-
return (jsx$1(Container$
|
|
17363
|
+
return (jsx$1(Container$f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17360
17364
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17361
17365
|
}) }), void 0));
|
|
17362
17366
|
};
|
|
@@ -17382,23 +17386,23 @@ var PackCard = function (_a) {
|
|
|
17382
17386
|
currency: currencyCode || 'USD',
|
|
17383
17387
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17384
17388
|
};
|
|
17385
|
-
var templateObject_1$
|
|
17389
|
+
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
17390
|
|
|
17387
|
-
var Title = newStyled.div(templateObject_1$
|
|
17388
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17389
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17390
|
-
var Container$
|
|
17391
|
+
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; });
|
|
17392
|
+
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; });
|
|
17393
|
+
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"])));
|
|
17394
|
+
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
17395
|
var Accordion = function (_a) {
|
|
17392
17396
|
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
17397
|
var theme = useTheme();
|
|
17394
17398
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17395
|
-
return (jsxs$1(Container$
|
|
17399
|
+
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
17400
|
};
|
|
17397
|
-
var templateObject_1$
|
|
17401
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$d, templateObject_4$7;
|
|
17398
17402
|
|
|
17399
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17400
|
-
var Header = newStyled.div(templateObject_2$
|
|
17401
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17403
|
+
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; });
|
|
17404
|
+
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"])));
|
|
17405
|
+
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
17406
|
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
17407
|
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
17408
|
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 +17410,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17406
17410
|
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
17411
|
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
17412
|
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$
|
|
17413
|
+
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
17414
|
|
|
17411
17415
|
var Filters = function (_a) {
|
|
17412
17416
|
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 +17508,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17504
17508
|
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
17509
|
};
|
|
17506
17510
|
|
|
17507
|
-
var Container$
|
|
17508
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17509
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17511
|
+
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"])));
|
|
17512
|
+
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"])));
|
|
17513
|
+
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
17514
|
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
17515
|
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
17516
|
var SearchNavigation = function (_a) {
|
|
17513
17517
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17514
|
-
return (jsxs$1(Container$
|
|
17518
|
+
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
17519
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17516
17520
|
}) }, void 0)] }, void 0));
|
|
17517
17521
|
};
|
|
17518
|
-
var templateObject_1$
|
|
17522
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$b, templateObject_4$5, templateObject_5$3;
|
|
17519
17523
|
|
|
17520
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17524
|
+
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
17525
|
var titleSize = _a.titleSize;
|
|
17522
17526
|
return titleSize;
|
|
17523
17527
|
}, function (_a) {
|
|
@@ -17534,14 +17538,14 @@ var Tab = function (_a) {
|
|
|
17534
17538
|
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
17539
|
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
17540
|
};
|
|
17537
|
-
var templateObject_1$
|
|
17541
|
+
var templateObject_1$f;
|
|
17538
17542
|
|
|
17539
|
-
var Container$
|
|
17540
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17543
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17544
|
+
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
17545
|
var backgroundColor = _a.backgroundColor;
|
|
17542
17546
|
return backgroundColor;
|
|
17543
17547
|
});
|
|
17544
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17548
|
+
var TabContent = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17545
17549
|
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
17550
|
var Tabs = function (_a) {
|
|
17547
17551
|
var _b;
|
|
@@ -17551,11 +17555,11 @@ var Tabs = function (_a) {
|
|
|
17551
17555
|
return null;
|
|
17552
17556
|
}
|
|
17553
17557
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17554
|
-
return (jsxs$1(Container$
|
|
17558
|
+
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
17559
|
};
|
|
17556
|
-
var templateObject_1$
|
|
17560
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$4;
|
|
17557
17561
|
|
|
17558
|
-
var Container$
|
|
17562
|
+
var Container$b = newStyled.div(function (props) { return ({
|
|
17559
17563
|
height: 'auto',
|
|
17560
17564
|
textAlign: 'center',
|
|
17561
17565
|
justifyContent: 'center',
|
|
@@ -17605,12 +17609,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17605
17609
|
textAlign: 'center',
|
|
17606
17610
|
lineHeight: '18px',
|
|
17607
17611
|
};
|
|
17608
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
17612
|
+
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
17613
|
};
|
|
17610
17614
|
|
|
17611
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17612
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17613
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17615
|
+
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"])));
|
|
17616
|
+
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"])));
|
|
17617
|
+
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
17618
|
var ImageVideo = function (_a) {
|
|
17615
17619
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17616
17620
|
var video = useRef(null);
|
|
@@ -17630,11 +17634,11 @@ var ImageVideo = function (_a) {
|
|
|
17630
17634
|
height: '100%',
|
|
17631
17635
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17632
17636
|
};
|
|
17633
|
-
var templateObject_1$
|
|
17637
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9;
|
|
17634
17638
|
|
|
17635
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17636
|
-
var ContainerMobile = css(templateObject_2$
|
|
17637
|
-
var Container$
|
|
17639
|
+
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"])));
|
|
17640
|
+
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"])));
|
|
17641
|
+
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
17642
|
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
17643
|
var TextWithImage = function (_a) {
|
|
17640
17644
|
var _b, _c, _d, _e;
|
|
@@ -17655,7 +17659,7 @@ var TextWithImage = function (_a) {
|
|
|
17655
17659
|
// @ts-ignore
|
|
17656
17660
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17657
17661
|
};
|
|
17658
|
-
return (jsxs(Container$
|
|
17662
|
+
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
17663
|
backgroundColor: props.btnBGColor,
|
|
17660
17664
|
color: '#ffffff',
|
|
17661
17665
|
border: props.btnBGColor,
|
|
@@ -17665,9 +17669,9 @@ var TextWithImage = function (_a) {
|
|
|
17665
17669
|
},
|
|
17666
17670
|
} }, 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
17671
|
};
|
|
17668
|
-
var templateObject_1$
|
|
17672
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
17669
17673
|
|
|
17670
|
-
var Container$
|
|
17674
|
+
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
17675
|
var AccordionOptions = function (_a) {
|
|
17672
17676
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17673
17677
|
var _b = useState({
|
|
@@ -17680,7 +17684,7 @@ var AccordionOptions = function (_a) {
|
|
|
17680
17684
|
}
|
|
17681
17685
|
return false;
|
|
17682
17686
|
};
|
|
17683
|
-
return (jsx$1(Container$
|
|
17687
|
+
return (jsx$1(Container$9, { children: accordions.map(function (accordion, index) {
|
|
17684
17688
|
var forceOpenValue = getForceOpen(index);
|
|
17685
17689
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17686
17690
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17691,9 +17695,9 @@ var AccordionOptions = function (_a) {
|
|
|
17691
17695
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17692
17696
|
}) }, void 0));
|
|
17693
17697
|
};
|
|
17694
|
-
var templateObject_1$
|
|
17698
|
+
var templateObject_1$b;
|
|
17695
17699
|
|
|
17696
|
-
var Container$
|
|
17700
|
+
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
17701
|
var alignCenter = _a.alignCenter;
|
|
17698
17702
|
return alignCenter &&
|
|
17699
17703
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17703,14 +17707,14 @@ var Container$5 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __ma
|
|
|
17703
17707
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17704
17708
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17705
17709
|
});
|
|
17706
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17707
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17710
|
+
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"])));
|
|
17711
|
+
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
17712
|
var ShortBanner = function (_a) {
|
|
17709
17713
|
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
17714
|
var theme = useTheme();
|
|
17711
|
-
return (jsxs$1(Container$
|
|
17715
|
+
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
17716
|
};
|
|
17713
|
-
var templateObject_1$
|
|
17717
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$7;
|
|
17714
17718
|
|
|
17715
17719
|
/* base styles & size variants */
|
|
17716
17720
|
var UserInfoTextStyles = {
|
|
@@ -17778,13 +17782,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17778
17782
|
}
|
|
17779
17783
|
};
|
|
17780
17784
|
|
|
17781
|
-
var Container$
|
|
17785
|
+
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
17786
|
return props.isMobile
|
|
17783
17787
|
? props.styles.imageContainerMobileMaxWidth
|
|
17784
17788
|
: props.styles.imageContainerMaxWidth;
|
|
17785
17789
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17786
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
17787
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17790
|
+
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"])));
|
|
17791
|
+
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
17792
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17789
17793
|
}, function (props) {
|
|
17790
17794
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17802,13 +17806,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17802
17806
|
var theme = useTheme();
|
|
17803
17807
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17804
17808
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17805
|
-
return (jsxs$1(Container$
|
|
17809
|
+
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
17810
|
};
|
|
17807
|
-
var templateObject_1$
|
|
17811
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$6;
|
|
17808
17812
|
|
|
17809
|
-
var Container$
|
|
17810
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17811
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17813
|
+
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'); });
|
|
17814
|
+
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'); });
|
|
17815
|
+
var StyledTitle = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17812
17816
|
var titlePosition = _a.titlePosition;
|
|
17813
17817
|
return titlePosition == 'center' &&
|
|
17814
17818
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17816,13 +17820,13 @@ var StyledTitle = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __ma
|
|
|
17816
17820
|
var ImageCardWithDescription = function (_a) {
|
|
17817
17821
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17818
17822
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17819
|
-
return (jsxs$1(Container$
|
|
17823
|
+
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
17824
|
};
|
|
17821
|
-
var templateObject_1$
|
|
17825
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$5;
|
|
17822
17826
|
|
|
17823
|
-
var Container$
|
|
17824
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17825
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17827
|
+
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"])));
|
|
17828
|
+
var CheckpointContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17829
|
+
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
17830
|
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
17831
|
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
17832
|
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 +17853,7 @@ var TrackingProgress = function (_a) {
|
|
|
17849
17853
|
}
|
|
17850
17854
|
return '30px';
|
|
17851
17855
|
};
|
|
17852
|
-
return (jsxs$1(Container$
|
|
17856
|
+
return (jsxs$1(Container$5, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17853
17857
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17854
17858
|
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
17859
|
? theme.colors.semantic.informative.color
|
|
@@ -17858,11 +17862,11 @@ var TrackingProgress = function (_a) {
|
|
|
17858
17862
|
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
17863
|
})] }), void 0));
|
|
17860
17864
|
};
|
|
17861
|
-
var templateObject_1$
|
|
17865
|
+
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
17866
|
|
|
17863
|
-
var Container$
|
|
17864
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
17865
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
17867
|
+
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"])));
|
|
17868
|
+
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"])));
|
|
17869
|
+
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
17870
|
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
17871
|
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
17872
|
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 +17878,13 @@ var ReviewsHeader = function (_a) {
|
|
|
17874
17878
|
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
17879
|
var starsNumber = 5;
|
|
17876
17880
|
var theme = useTheme();
|
|
17877
|
-
return (jsxs$1(Container$
|
|
17881
|
+
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
17882
|
};
|
|
17879
|
-
var templateObject_1$
|
|
17883
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
17880
17884
|
|
|
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"])));
|
|
17885
|
+
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"])));
|
|
17886
|
+
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"])));
|
|
17887
|
+
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
17888
|
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
17889
|
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
17890
|
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 +17920,348 @@ var Review = function (_a) {
|
|
|
17916
17920
|
}
|
|
17917
17921
|
}
|
|
17918
17922
|
}, [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 &&
|
|
17923
|
+
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
17924
|
(!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
17925
|
};
|
|
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;
|
|
17926
|
+
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;
|
|
17927
|
+
|
|
17928
|
+
function _extends() {
|
|
17929
|
+
_extends = Object.assign || function (target) {
|
|
17930
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
17931
|
+
var source = arguments[i];
|
|
17932
|
+
|
|
17933
|
+
for (var key in source) {
|
|
17934
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
17935
|
+
target[key] = source[key];
|
|
17936
|
+
}
|
|
17937
|
+
}
|
|
17938
|
+
}
|
|
17939
|
+
|
|
17940
|
+
return target;
|
|
17941
|
+
};
|
|
17942
|
+
|
|
17943
|
+
return _extends.apply(this, arguments);
|
|
17944
|
+
}
|
|
17945
|
+
|
|
17946
|
+
var LEFT = "Left";
|
|
17947
|
+
var RIGHT = "Right";
|
|
17948
|
+
var UP = "Up";
|
|
17949
|
+
var DOWN = "Down";
|
|
17950
|
+
|
|
17951
|
+
var defaultProps = {
|
|
17952
|
+
delta: 10,
|
|
17953
|
+
preventDefaultTouchmoveEvent: false,
|
|
17954
|
+
rotationAngle: 0,
|
|
17955
|
+
trackMouse: false,
|
|
17956
|
+
trackTouch: true
|
|
17957
|
+
};
|
|
17958
|
+
var initialState = {
|
|
17959
|
+
first: true,
|
|
17960
|
+
initial: [0, 0],
|
|
17961
|
+
start: 0,
|
|
17962
|
+
swiping: false,
|
|
17963
|
+
xy: [0, 0]
|
|
17964
|
+
};
|
|
17965
|
+
var mouseMove = "mousemove";
|
|
17966
|
+
var mouseUp = "mouseup";
|
|
17967
|
+
var touchEnd = "touchend";
|
|
17968
|
+
var touchMove = "touchmove";
|
|
17969
|
+
var touchStart = "touchstart";
|
|
17970
|
+
|
|
17971
|
+
function getDirection(absX, absY, deltaX, deltaY) {
|
|
17972
|
+
if (absX > absY) {
|
|
17973
|
+
if (deltaX > 0) {
|
|
17974
|
+
return RIGHT;
|
|
17975
|
+
}
|
|
17976
|
+
|
|
17977
|
+
return LEFT;
|
|
17978
|
+
} else if (deltaY > 0) {
|
|
17979
|
+
return DOWN;
|
|
17980
|
+
}
|
|
17981
|
+
|
|
17982
|
+
return UP;
|
|
17983
|
+
}
|
|
17984
|
+
|
|
17985
|
+
function rotateXYByAngle(pos, angle) {
|
|
17986
|
+
if (angle === 0) return pos;
|
|
17987
|
+
var angleInRadians = Math.PI / 180 * angle;
|
|
17988
|
+
var x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
|
|
17989
|
+
var y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
|
|
17990
|
+
return [x, y];
|
|
17991
|
+
}
|
|
17992
|
+
|
|
17993
|
+
function getHandlers(set, handlerProps) {
|
|
17994
|
+
var onStart = function onStart(event) {
|
|
17995
|
+
if (event && "touches" in event && event.touches.length > 1) return;
|
|
17996
|
+
set(function (state, props) {
|
|
17997
|
+
if (props.trackMouse) {
|
|
17998
|
+
document.addEventListener(mouseMove, onMove);
|
|
17999
|
+
document.addEventListener(mouseUp, onUp);
|
|
18000
|
+
}
|
|
18001
|
+
|
|
18002
|
+
var _ref = "touches" in event ? event.touches[0] : event,
|
|
18003
|
+
clientX = _ref.clientX,
|
|
18004
|
+
clientY = _ref.clientY;
|
|
18005
|
+
|
|
18006
|
+
var xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
|
|
18007
|
+
return _extends({}, state, initialState, {
|
|
18008
|
+
initial: [].concat(xy),
|
|
18009
|
+
xy: xy,
|
|
18010
|
+
start: event.timeStamp || 0
|
|
18011
|
+
});
|
|
18012
|
+
});
|
|
18013
|
+
};
|
|
18014
|
+
|
|
18015
|
+
var onMove = function onMove(event) {
|
|
18016
|
+
set(function (state, props) {
|
|
18017
|
+
if ("touches" in event && event.touches.length > 1) {
|
|
18018
|
+
return state;
|
|
18019
|
+
}
|
|
18020
|
+
|
|
18021
|
+
var _ref2 = "touches" in event ? event.touches[0] : event,
|
|
18022
|
+
clientX = _ref2.clientX,
|
|
18023
|
+
clientY = _ref2.clientY;
|
|
18024
|
+
|
|
18025
|
+
var _rotateXYByAngle = rotateXYByAngle([clientX, clientY], props.rotationAngle),
|
|
18026
|
+
x = _rotateXYByAngle[0],
|
|
18027
|
+
y = _rotateXYByAngle[1];
|
|
18028
|
+
|
|
18029
|
+
var deltaX = x - state.xy[0];
|
|
18030
|
+
var deltaY = y - state.xy[1];
|
|
18031
|
+
var absX = Math.abs(deltaX);
|
|
18032
|
+
var absY = Math.abs(deltaY);
|
|
18033
|
+
var time = (event.timeStamp || 0) - state.start;
|
|
18034
|
+
var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
|
|
18035
|
+
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
|
|
18036
|
+
var dir = getDirection(absX, absY, deltaX, deltaY);
|
|
18037
|
+
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
|
|
18038
|
+
if (absX < delta && absY < delta && !state.swiping) return state;
|
|
18039
|
+
var eventData = {
|
|
18040
|
+
absX: absX,
|
|
18041
|
+
absY: absY,
|
|
18042
|
+
deltaX: deltaX,
|
|
18043
|
+
deltaY: deltaY,
|
|
18044
|
+
dir: dir,
|
|
18045
|
+
event: event,
|
|
18046
|
+
first: state.first,
|
|
18047
|
+
initial: state.initial,
|
|
18048
|
+
velocity: velocity,
|
|
18049
|
+
vxvy: vxvy
|
|
18050
|
+
};
|
|
18051
|
+
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
|
|
18052
|
+
props.onSwiping && props.onSwiping(eventData);
|
|
18053
|
+
var cancelablePageSwipe = false;
|
|
18054
|
+
|
|
18055
|
+
if (props.onSwiping || props.onSwiped || "onSwiped" + dir in props) {
|
|
18056
|
+
cancelablePageSwipe = true;
|
|
18057
|
+
}
|
|
18058
|
+
|
|
18059
|
+
if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch && event.cancelable) event.preventDefault();
|
|
18060
|
+
return _extends({}, state, {
|
|
18061
|
+
first: false,
|
|
18062
|
+
eventData: eventData,
|
|
18063
|
+
swiping: true
|
|
18064
|
+
});
|
|
18065
|
+
});
|
|
18066
|
+
};
|
|
18067
|
+
|
|
18068
|
+
var onEnd = function onEnd(event) {
|
|
18069
|
+
set(function (state, props) {
|
|
18070
|
+
var eventData;
|
|
18071
|
+
|
|
18072
|
+
if (state.swiping && state.eventData) {
|
|
18073
|
+
eventData = _extends({}, state.eventData, {
|
|
18074
|
+
event: event
|
|
18075
|
+
});
|
|
18076
|
+
props.onSwiped && props.onSwiped(eventData);
|
|
18077
|
+
var onSwipedDir = props["onSwiped" + eventData.dir];
|
|
18078
|
+
onSwipedDir && onSwipedDir(eventData);
|
|
18079
|
+
} else {
|
|
18080
|
+
props.onTap && props.onTap({
|
|
18081
|
+
event: event
|
|
18082
|
+
});
|
|
18083
|
+
}
|
|
18084
|
+
|
|
18085
|
+
return _extends({}, state, initialState, {
|
|
18086
|
+
eventData: eventData
|
|
18087
|
+
});
|
|
18088
|
+
});
|
|
18089
|
+
};
|
|
18090
|
+
|
|
18091
|
+
var cleanUpMouse = function cleanUpMouse() {
|
|
18092
|
+
document.removeEventListener(mouseMove, onMove);
|
|
18093
|
+
document.removeEventListener(mouseUp, onUp);
|
|
18094
|
+
};
|
|
18095
|
+
|
|
18096
|
+
var onUp = function onUp(e) {
|
|
18097
|
+
cleanUpMouse();
|
|
18098
|
+
onEnd(e);
|
|
18099
|
+
};
|
|
18100
|
+
|
|
18101
|
+
var attachTouch = function attachTouch(el, passive) {
|
|
18102
|
+
var cleanup = function cleanup() {};
|
|
18103
|
+
|
|
18104
|
+
if (el && el.addEventListener) {
|
|
18105
|
+
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];
|
|
18106
|
+
tls.forEach(function (_ref3) {
|
|
18107
|
+
var e = _ref3[0],
|
|
18108
|
+
h = _ref3[1];
|
|
18109
|
+
return el.addEventListener(e, h, {
|
|
18110
|
+
passive: passive
|
|
18111
|
+
});
|
|
18112
|
+
});
|
|
18113
|
+
|
|
18114
|
+
cleanup = function cleanup() {
|
|
18115
|
+
return tls.forEach(function (_ref4) {
|
|
18116
|
+
var e = _ref4[0],
|
|
18117
|
+
h = _ref4[1];
|
|
18118
|
+
return el.removeEventListener(e, h);
|
|
18119
|
+
});
|
|
18120
|
+
};
|
|
18121
|
+
}
|
|
18122
|
+
|
|
18123
|
+
return cleanup;
|
|
18124
|
+
};
|
|
18125
|
+
|
|
18126
|
+
var onRef = function onRef(el) {
|
|
18127
|
+
if (el === null) return;
|
|
18128
|
+
set(function (state, props) {
|
|
18129
|
+
if (state.el === el) return state;
|
|
18130
|
+
var addState = {};
|
|
18131
|
+
|
|
18132
|
+
if (state.el && state.el !== el && state.cleanUpTouch) {
|
|
18133
|
+
state.cleanUpTouch();
|
|
18134
|
+
addState.cleanUpTouch = undefined;
|
|
18135
|
+
}
|
|
18136
|
+
|
|
18137
|
+
if (props.trackTouch && el) {
|
|
18138
|
+
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
|
|
18139
|
+
}
|
|
18140
|
+
|
|
18141
|
+
return _extends({}, state, {
|
|
18142
|
+
el: el
|
|
18143
|
+
}, addState);
|
|
18144
|
+
});
|
|
18145
|
+
};
|
|
18146
|
+
|
|
18147
|
+
var output = {
|
|
18148
|
+
ref: onRef
|
|
18149
|
+
};
|
|
18150
|
+
|
|
18151
|
+
if (handlerProps.trackMouse) {
|
|
18152
|
+
output.onMouseDown = onStart;
|
|
18153
|
+
}
|
|
18154
|
+
|
|
18155
|
+
return [output, attachTouch];
|
|
18156
|
+
}
|
|
18157
|
+
|
|
18158
|
+
function updateTransientState(state, props, attachTouch) {
|
|
18159
|
+
var addState = {};
|
|
18160
|
+
|
|
18161
|
+
if (!props.trackTouch && state.cleanUpTouch) {
|
|
18162
|
+
state.cleanUpTouch();
|
|
18163
|
+
addState.cleanUpTouch = undefined;
|
|
18164
|
+
} else if (props.trackTouch && !state.cleanUpTouch) {
|
|
18165
|
+
if (state.el) {
|
|
18166
|
+
addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);
|
|
18167
|
+
}
|
|
18168
|
+
}
|
|
18169
|
+
|
|
18170
|
+
return _extends({}, state, addState);
|
|
18171
|
+
}
|
|
18172
|
+
|
|
18173
|
+
function useSwipeable(options) {
|
|
18174
|
+
var trackMouse = options.trackMouse;
|
|
18175
|
+
var transientState = React$2.useRef(_extends({}, initialState));
|
|
18176
|
+
var transientProps = React$2.useRef(_extends({}, defaultProps));
|
|
18177
|
+
transientProps.current = _extends({}, defaultProps, options);
|
|
18178
|
+
|
|
18179
|
+
var _React$useMemo = React$2.useMemo(function () {
|
|
18180
|
+
return getHandlers(function (stateSetter) {
|
|
18181
|
+
return transientState.current = stateSetter(transientState.current, transientProps.current);
|
|
18182
|
+
}, {
|
|
18183
|
+
trackMouse: trackMouse
|
|
18184
|
+
});
|
|
18185
|
+
}, [trackMouse]),
|
|
18186
|
+
handlers = _React$useMemo[0],
|
|
18187
|
+
attachTouch = _React$useMemo[1];
|
|
18188
|
+
|
|
18189
|
+
transientState.current = updateTransientState(transientState.current, transientProps.current, attachTouch);
|
|
18190
|
+
return handlers;
|
|
18191
|
+
}
|
|
18192
|
+
|
|
18193
|
+
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) {
|
|
18194
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18195
|
+
return borderRadiusVariant &&
|
|
18196
|
+
"\n border-radius: 40px;\n ";
|
|
18197
|
+
});
|
|
18198
|
+
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'); });
|
|
18199
|
+
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"])));
|
|
18200
|
+
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18201
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18202
|
+
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));
|
|
18203
|
+
});
|
|
18204
|
+
var templateObject_1$4, templateObject_2$1, templateObject_3$1;
|
|
18205
|
+
|
|
18206
|
+
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"])));
|
|
18207
|
+
var ArrowButton = function (_a) {
|
|
18208
|
+
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18209
|
+
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18210
|
+
};
|
|
18211
|
+
var templateObject_1$3;
|
|
18212
|
+
|
|
18213
|
+
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"])));
|
|
18214
|
+
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18215
|
+
var SlideDots = function (_a) {
|
|
18216
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18217
|
+
var theme = useTheme();
|
|
18218
|
+
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
|
|
18219
|
+
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18220
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18221
|
+
};
|
|
18222
|
+
var templateObject_1$2;
|
|
18223
|
+
|
|
18224
|
+
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"])));
|
|
18225
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18226
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18227
|
+
var SlideNavigation = function (_a) {
|
|
18228
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18229
|
+
var theme = useTheme();
|
|
18230
|
+
var upperLimit = quantity - 1;
|
|
18231
|
+
var lowerLimit = 0;
|
|
18232
|
+
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 () {
|
|
18233
|
+
onNavigate(selectedIndex - 1);
|
|
18234
|
+
} }, 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 () {
|
|
18235
|
+
onNavigate(selectedIndex + 1);
|
|
18236
|
+
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18237
|
+
};
|
|
18238
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18239
|
+
|
|
18240
|
+
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"])));
|
|
18241
|
+
var ProductGalleryMobileV2 = function (_a) {
|
|
18242
|
+
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;
|
|
18243
|
+
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
18244
|
+
useEffect(function () {
|
|
18245
|
+
if (selectedValue == null) {
|
|
18246
|
+
return;
|
|
18247
|
+
}
|
|
18248
|
+
setIndex(Math.max(0, images.indexOf(selectedValue)));
|
|
18249
|
+
}, [selectedValue, images]);
|
|
18250
|
+
var _d = useState(function () { return images[index]; }), selectedImage = _d[0], setSelectedImage = _d[1];
|
|
18251
|
+
var handlers = useSwipeable({
|
|
18252
|
+
onSwipedLeft: useCallback(function () {
|
|
18253
|
+
setIndex(function (index) { return Math.min(index + 1, images.length - 1); });
|
|
18254
|
+
}, [images.length]),
|
|
18255
|
+
onSwipedRight: useCallback(function () {
|
|
18256
|
+
setIndex(function (index) { return Math.max(index - 1, 0); });
|
|
18257
|
+
}, []),
|
|
18258
|
+
});
|
|
18259
|
+
useEffect(function () {
|
|
18260
|
+
setSelectedImage(images[index]);
|
|
18261
|
+
}, [index, images]);
|
|
18262
|
+
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));
|
|
18263
|
+
};
|
|
18264
|
+
var templateObject_1;
|
|
17923
18265
|
|
|
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 };
|
|
18266
|
+
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
18267
|
//# sourceMappingURL=index.esm.js.map
|