@trafilea/afrodita-components 5.0.0-beta.181 → 5.0.0-beta.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +22 -2
- package/build/index.esm.js +358 -327
- package/build/index.esm.js.map +1 -1
- package/build/index.js +359 -327
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -139,7 +139,7 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
139
139
|
ThumbsDown: ThumbsDown
|
|
140
140
|
});
|
|
141
141
|
|
|
142
|
-
var Check$
|
|
142
|
+
var Check$2 = function (_a) {
|
|
143
143
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
144
144
|
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 36, viewBoxY: 28, title: "check" }, { children: jsxRuntime.jsx("path", { d: "M32.1602 0.279485L11.4497 21.1977L3.83983 13.5116C3.47088 13.1389 2.87266 13.1389 2.50363 13.5116L0.276712 15.7608C-0.0922372 16.1335 -0.0922372 16.7377 0.276712 17.1104L10.7815 27.7205C11.1505 28.0932 11.7487 28.0932 12.1177 27.7205L35.7233 3.87832C36.0922 3.50568 36.0922 2.90146 35.7233 2.52873L33.4964 0.279485C33.1274 -0.0931618 32.5292 -0.0931618 32.1602 0.279485Z", fill: fill }, void 0) }), void 0));
|
|
145
145
|
};
|
|
@@ -331,7 +331,7 @@ var CircleSolidStyledCheck = function (_a) {
|
|
|
331
331
|
|
|
332
332
|
var Actions = /*#__PURE__*/Object.freeze({
|
|
333
333
|
__proto__: null,
|
|
334
|
-
Check: Check$
|
|
334
|
+
Check: Check$2,
|
|
335
335
|
ClearLight: ClearLight,
|
|
336
336
|
LightExclamation: LightExclamation,
|
|
337
337
|
LightCheck: LightCheck,
|
|
@@ -4054,7 +4054,7 @@ exports.InputValidationType = void 0;
|
|
|
4054
4054
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4055
4055
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4056
4056
|
|
|
4057
|
-
var Section = newStyled.div(templateObject_1$
|
|
4057
|
+
var Section = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
4058
4058
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4059
4059
|
});
|
|
4060
4060
|
var CardHeader = function (_a) {
|
|
@@ -4065,14 +4065,14 @@ var CardFooter = function (_a) {
|
|
|
4065
4065
|
var children = _a.children;
|
|
4066
4066
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4067
4067
|
};
|
|
4068
|
-
var templateObject_1$
|
|
4068
|
+
var templateObject_1$1r;
|
|
4069
4069
|
|
|
4070
|
-
var Body = newStyled.div(templateObject_1$
|
|
4070
|
+
var Body = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4071
4071
|
var CardBody = function (_a) {
|
|
4072
4072
|
var children = _a.children;
|
|
4073
4073
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4074
4074
|
};
|
|
4075
|
-
var templateObject_1$
|
|
4075
|
+
var templateObject_1$1q;
|
|
4076
4076
|
|
|
4077
4077
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4078
4078
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4217,7 +4217,7 @@ var AssetsProvider = function (_a) {
|
|
|
4217
4217
|
};
|
|
4218
4218
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4219
4219
|
|
|
4220
|
-
var Container$
|
|
4220
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4221
4221
|
var flex = _a.flex;
|
|
4222
4222
|
return flex &&
|
|
4223
4223
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4229,17 +4229,17 @@ var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __
|
|
|
4229
4229
|
}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
|
|
4230
4230
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
4231
4231
|
});
|
|
4232
|
-
var Card$
|
|
4232
|
+
var Card$2 = function (_a) {
|
|
4233
4233
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4234
4234
|
var theme = useTheme();
|
|
4235
|
-
return (jsxRuntime.jsx(Container$
|
|
4235
|
+
return (jsxRuntime.jsx(Container$W, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4236
4236
|
};
|
|
4237
|
-
var Card$
|
|
4237
|
+
var Card$3 = Object.assign(Card$2, {
|
|
4238
4238
|
Header: CardHeader,
|
|
4239
4239
|
Footer: CardFooter,
|
|
4240
4240
|
Body: CardBody,
|
|
4241
4241
|
});
|
|
4242
|
-
var templateObject_1$
|
|
4242
|
+
var templateObject_1$1p;
|
|
4243
4243
|
|
|
4244
4244
|
var Fragment = jsxRuntime.Fragment;
|
|
4245
4245
|
function jsx(type, props, key) {
|
|
@@ -4385,7 +4385,7 @@ function BaseSelectOption(_a) {
|
|
|
4385
4385
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4386
4386
|
}
|
|
4387
4387
|
|
|
4388
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4388
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4389
4389
|
function BaseSelect(_a) {
|
|
4390
4390
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4391
4391
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4395,7 +4395,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4395
4395
|
Options: BaseSelectOptions,
|
|
4396
4396
|
Option: BaseSelectOption,
|
|
4397
4397
|
});
|
|
4398
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1o;
|
|
4399
4399
|
|
|
4400
4400
|
var CustomButton = newStyled.button(function (_a) {
|
|
4401
4401
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4527,7 +4527,7 @@ var StyledLabel$1 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4527
4527
|
Styles[props.variant](props.theme),
|
|
4528
4528
|
Styles[props.size](props.theme),
|
|
4529
4529
|
]; });
|
|
4530
|
-
var Label$
|
|
4530
|
+
var Label$4 = function (_a) {
|
|
4531
4531
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4532
4532
|
var theme = useTheme();
|
|
4533
4533
|
return (jsxRuntime.jsx(StyledLabel$1, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -4616,7 +4616,7 @@ var CustomCheckboxStyles = {
|
|
|
4616
4616
|
},
|
|
4617
4617
|
};
|
|
4618
4618
|
|
|
4619
|
-
var Container$
|
|
4619
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
4620
4620
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4621
4621
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4622
4622
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4627,7 +4627,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4627
4627
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4628
4628
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4629
4629
|
]; });
|
|
4630
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4630
|
+
var Input$3 = newStyled.input(templateObject_2$V || (templateObject_2$V = __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) {
|
|
4631
4631
|
var disabled = _a.disabled;
|
|
4632
4632
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4633
4633
|
});
|
|
@@ -4656,9 +4656,9 @@ var Checkbox = function (_a) {
|
|
|
4656
4656
|
React$2.useEffect(function () {
|
|
4657
4657
|
mounted.current = true;
|
|
4658
4658
|
}, []);
|
|
4659
|
-
return (jsxRuntime.jsxs(Container$
|
|
4659
|
+
return (jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4660
4660
|
};
|
|
4661
|
-
var templateObject_1$
|
|
4661
|
+
var templateObject_1$1n, templateObject_2$V;
|
|
4662
4662
|
|
|
4663
4663
|
var CustomOption = newStyled.li(function (_a) {
|
|
4664
4664
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4737,10 +4737,10 @@ function SimpleDropdown(_a) {
|
|
|
4737
4737
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4738
4738
|
}
|
|
4739
4739
|
|
|
4740
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4741
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4742
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4743
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4740
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
4741
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$U || (templateObject_2$U = __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; });
|
|
4742
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
4743
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
4744
4744
|
var DropdownDialog = function (_a) {
|
|
4745
4745
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4746
4746
|
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4748,7 +4748,7 @@ var DropdownDialog = function (_a) {
|
|
|
4748
4748
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4749
4749
|
}) }), void 0) }), void 0));
|
|
4750
4750
|
};
|
|
4751
|
-
var templateObject_1$
|
|
4751
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$v;
|
|
4752
4752
|
|
|
4753
4753
|
var getStylesBySize$9 = function (size, theme) {
|
|
4754
4754
|
switch (size) {
|
|
@@ -4816,12 +4816,12 @@ var SelectorSecondary = function (_a) {
|
|
|
4816
4816
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4817
4817
|
// `variants` styles that are consistent through all themes.
|
|
4818
4818
|
var TAGS = {
|
|
4819
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4820
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4821
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4822
|
-
display1: newStyled.h1(templateObject_4$
|
|
4823
|
-
display2: newStyled.h2(templateObject_5$
|
|
4824
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4819
|
+
hero1: newStyled.h1(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject([""], [""]))),
|
|
4820
|
+
hero2: newStyled.h2(templateObject_2$T || (templateObject_2$T = __makeTemplateObject([""], [""]))),
|
|
4821
|
+
hero3: newStyled.h3(templateObject_3$H || (templateObject_3$H = __makeTemplateObject([""], [""]))),
|
|
4822
|
+
display1: newStyled.h1(templateObject_4$u || (templateObject_4$u = __makeTemplateObject([""], [""]))),
|
|
4823
|
+
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4824
|
+
heading1: newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTemplateObject([""], [""]))),
|
|
4825
4825
|
heading2: newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject([""], [""]))),
|
|
4826
4826
|
heading3: newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject([""], [""]))),
|
|
4827
4827
|
heading4: newStyled.h4(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4942,9 +4942,9 @@ var DEFAULTS = {
|
|
|
4942
4942
|
size: 'regular',
|
|
4943
4943
|
},
|
|
4944
4944
|
};
|
|
4945
|
-
var templateObject_1$
|
|
4945
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$e, 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;
|
|
4946
4946
|
|
|
4947
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4947
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
4948
4948
|
var inline = _a.inline;
|
|
4949
4949
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4950
4950
|
});
|
|
@@ -4963,7 +4963,7 @@ var SizeSelector = function (_a) {
|
|
|
4963
4963
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
4964
4964
|
}) }), void 0)] }), void 0));
|
|
4965
4965
|
};
|
|
4966
|
-
var templateObject_1$
|
|
4966
|
+
var templateObject_1$1k;
|
|
4967
4967
|
|
|
4968
4968
|
var getStylesBySize$8 = function (size) {
|
|
4969
4969
|
switch (size) {
|
|
@@ -4990,7 +4990,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4990
4990
|
} });
|
|
4991
4991
|
};
|
|
4992
4992
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4993
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4993
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1j || (templateObject_1$1j = __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));
|
|
4994
4994
|
};
|
|
4995
4995
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4996
4996
|
if (disabled)
|
|
@@ -5006,16 +5006,16 @@ var TextButton = function (_a) {
|
|
|
5006
5006
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5007
5007
|
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));
|
|
5008
5008
|
};
|
|
5009
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$1j;
|
|
5010
5010
|
|
|
5011
|
-
var Container$
|
|
5012
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5013
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5011
|
+
var Container$U = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
5012
|
+
var P$2 = newStyled.p(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5013
|
+
var PercentageSpan = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
5014
5014
|
var SizeFitGuide = function (_a) {
|
|
5015
5015
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5016
|
-
return (jsxRuntime.jsxs(Container$
|
|
5016
|
+
return (jsxRuntime.jsxs(Container$U, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$2, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5017
5017
|
};
|
|
5018
|
-
var templateObject_1$
|
|
5018
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$G;
|
|
5019
5019
|
|
|
5020
5020
|
var getStylesBySize$7 = function (size) {
|
|
5021
5021
|
switch (size) {
|
|
@@ -5045,7 +5045,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5045
5045
|
};
|
|
5046
5046
|
}
|
|
5047
5047
|
};
|
|
5048
|
-
var Container$
|
|
5048
|
+
var Container$T = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
5049
5049
|
var backgroundColor = _a.backgroundColor;
|
|
5050
5050
|
return backgroundColor;
|
|
5051
5051
|
}, function (_a) {
|
|
@@ -5067,7 +5067,7 @@ var Container$S = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __
|
|
|
5067
5067
|
var size = _a.size;
|
|
5068
5068
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5069
5069
|
});
|
|
5070
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5070
|
+
var H3$1 = newStyled.h3(templateObject_2$R || (templateObject_2$R = __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) {
|
|
5071
5071
|
var textColor = _a.textColor;
|
|
5072
5072
|
return textColor;
|
|
5073
5073
|
}, function (_a) {
|
|
@@ -5082,9 +5082,9 @@ var H3$1 = newStyled.h3(templateObject_2$Q || (templateObject_2$Q = __makeTempla
|
|
|
5082
5082
|
var DiscountTag = function (_a) {
|
|
5083
5083
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5084
5084
|
var theme = useTheme();
|
|
5085
|
-
return (jsxRuntime.jsx(Container$
|
|
5085
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5086
5086
|
};
|
|
5087
|
-
var templateObject_1$
|
|
5087
|
+
var templateObject_1$1h, templateObject_2$R;
|
|
5088
5088
|
|
|
5089
5089
|
var getStylesBySize$6 = function (size) {
|
|
5090
5090
|
switch (size) {
|
|
@@ -5114,8 +5114,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5114
5114
|
};
|
|
5115
5115
|
}
|
|
5116
5116
|
};
|
|
5117
|
-
var Container$
|
|
5118
|
-
var Price = newStyled.p(templateObject_2$
|
|
5117
|
+
var Container$S = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5118
|
+
var Price = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
5119
5119
|
var weight = _a.weight;
|
|
5120
5120
|
return (weight ? weight : '400');
|
|
5121
5121
|
}, function (_a) {
|
|
@@ -5144,7 +5144,7 @@ var Price = newStyled.p(templateObject_2$P || (templateObject_2$P = __makeTempla
|
|
|
5144
5144
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5145
5145
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5146
5146
|
});
|
|
5147
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5147
|
+
var TagContainer = newStyled.p(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5148
5148
|
var _b;
|
|
5149
5149
|
var size = _a.size;
|
|
5150
5150
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5165,11 +5165,11 @@ var PriceLabel = function (_a) {
|
|
|
5165
5165
|
weight: 700,
|
|
5166
5166
|
};
|
|
5167
5167
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5168
|
-
return (jsxRuntime.jsxs(Container$
|
|
5168
|
+
return (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5169
5169
|
};
|
|
5170
|
-
var templateObject_1$
|
|
5170
|
+
var templateObject_1$1g, templateObject_2$Q, templateObject_3$F;
|
|
5171
5171
|
|
|
5172
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5172
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5173
5173
|
var PriceLabelV2 = function (_a) {
|
|
5174
5174
|
var _b;
|
|
5175
5175
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5197,9 +5197,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5197
5197
|
weight: 700,
|
|
5198
5198
|
};
|
|
5199
5199
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5200
|
-
return (jsxRuntime.jsxs(Container$
|
|
5200
|
+
return (jsxRuntime.jsxs(Container$S, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5201
5201
|
};
|
|
5202
|
-
var templateObject_1$
|
|
5202
|
+
var templateObject_1$1f;
|
|
5203
5203
|
|
|
5204
5204
|
var OneColorSelector = function (_a) {
|
|
5205
5205
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5240,12 +5240,12 @@ var OutOfStock = function (_a) {
|
|
|
5240
5240
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5241
5241
|
};
|
|
5242
5242
|
|
|
5243
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5244
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5245
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5246
|
-
var Span = newStyled.span(templateObject_4$
|
|
5247
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5248
|
-
var Label$
|
|
5243
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5244
|
+
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5245
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
5246
|
+
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5247
|
+
var OptionsContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
5248
|
+
var Label$3 = function (_a) {
|
|
5249
5249
|
var label = _a.label, values = _a.values;
|
|
5250
5250
|
return (jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
5251
5251
|
};
|
|
@@ -5258,27 +5258,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
5258
5258
|
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
5259
5259
|
};
|
|
5260
5260
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
5261
|
-
Label: Label$
|
|
5261
|
+
Label: Label$3,
|
|
5262
5262
|
Option: Option,
|
|
5263
5263
|
OptionsContainer: OptionsContainer,
|
|
5264
5264
|
});
|
|
5265
|
-
var templateObject_1$
|
|
5265
|
+
var templateObject_1$1e, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$h;
|
|
5266
5266
|
|
|
5267
|
-
var Container$
|
|
5267
|
+
var Container$R = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
5268
5268
|
var borderColor = _a.borderColor;
|
|
5269
5269
|
return borderColor;
|
|
5270
5270
|
}, function (_a) {
|
|
5271
5271
|
var noStock = _a.noStock;
|
|
5272
5272
|
return (noStock ? '0.4' : '1');
|
|
5273
5273
|
});
|
|
5274
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5274
|
+
var Image$3 = newStyled.img(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5275
5275
|
var PatternSelector = function (_a) {
|
|
5276
5276
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5277
5277
|
var theme = useTheme();
|
|
5278
5278
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5279
|
-
return (jsxRuntime.jsx(Container$
|
|
5279
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5280
5280
|
};
|
|
5281
|
-
var templateObject_1$
|
|
5281
|
+
var templateObject_1$1d, templateObject_2$O;
|
|
5282
5282
|
|
|
5283
5283
|
var renderOptions$1 = function (options) {
|
|
5284
5284
|
if (options.length === 0) {
|
|
@@ -5336,7 +5336,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5336
5336
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5337
5337
|
};
|
|
5338
5338
|
|
|
5339
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5339
|
+
var Image$2 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
5340
5340
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5341
5341
|
return borderRadiusVariant &&
|
|
5342
5342
|
"\nborder-radius: 20px;\n";
|
|
@@ -5351,7 +5351,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5351
5351
|
var theme = useTheme();
|
|
5352
5352
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5353
5353
|
};
|
|
5354
|
-
var templateObject_1$
|
|
5354
|
+
var templateObject_1$1c;
|
|
5355
5355
|
|
|
5356
5356
|
var Button$4 = newStyled.button(function () { return ({
|
|
5357
5357
|
background: 'transparent',
|
|
@@ -9595,14 +9595,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9595
9595
|
return Slider;
|
|
9596
9596
|
}(React__default["default"].Component);
|
|
9597
9597
|
|
|
9598
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9598
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
9599
9599
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9600
9600
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9601
9601
|
}, function (_a) {
|
|
9602
9602
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9603
9603
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9604
9604
|
});
|
|
9605
|
-
var templateObject_1$
|
|
9605
|
+
var templateObject_1$1b;
|
|
9606
9606
|
|
|
9607
9607
|
var getStylesBySize$5 = function (size) {
|
|
9608
9608
|
// rem units
|
|
@@ -9661,22 +9661,22 @@ var SliderNavigation = function (_a) {
|
|
|
9661
9661
|
} }, { 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));
|
|
9662
9662
|
};
|
|
9663
9663
|
|
|
9664
|
-
var horizontalStyles = css(templateObject_1$
|
|
9665
|
-
var verticalStyles = css(templateObject_2$
|
|
9666
|
-
var Container$
|
|
9664
|
+
var horizontalStyles = css(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
9665
|
+
var verticalStyles = css(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
9666
|
+
var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __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) {
|
|
9667
9667
|
var position = _a.position;
|
|
9668
9668
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9669
9669
|
});
|
|
9670
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9670
|
+
var Button$3 = newStyled.button(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
9671
9671
|
var ImagePreviewList = function (_a) {
|
|
9672
9672
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9673
|
-
return (jsxRuntime.jsx(Container$
|
|
9673
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9674
9674
|
arrowWidth: 0.75,
|
|
9675
9675
|
arrowHeight: 1.25,
|
|
9676
9676
|
arrowPadding: 1.625,
|
|
9677
9677
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9678
9678
|
};
|
|
9679
|
-
var templateObject_1$
|
|
9679
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$s;
|
|
9680
9680
|
|
|
9681
9681
|
var propTypes = {exports: {}};
|
|
9682
9682
|
|
|
@@ -11269,24 +11269,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11269
11269
|
afterZoomOut: PropTypes.func
|
|
11270
11270
|
} : {};
|
|
11271
11271
|
|
|
11272
|
-
var Container$
|
|
11272
|
+
var Container$P = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
11273
11273
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11274
11274
|
return borderRadiusVariant &&
|
|
11275
11275
|
"\n border-radius: 40px;\n ";
|
|
11276
11276
|
});
|
|
11277
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11278
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11279
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11277
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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'); });
|
|
11278
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11279
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
11280
11280
|
var ImageProductWithTags$1 = function (_a) {
|
|
11281
11281
|
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;
|
|
11282
|
-
return (jsxRuntime.jsxs(Container$
|
|
11282
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11283
11283
|
alt: image.alt,
|
|
11284
11284
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11285
11285
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11286
11286
|
};
|
|
11287
|
-
var templateObject_1$
|
|
11287
|
+
var templateObject_1$19, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
11288
11288
|
|
|
11289
|
-
var Container$
|
|
11289
|
+
var Container$O = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
11290
11290
|
var ProductGallery = function (_a) {
|
|
11291
11291
|
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;
|
|
11292
11292
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11294,11 +11294,11 @@ var ProductGallery = function (_a) {
|
|
|
11294
11294
|
React$2.useEffect(function () {
|
|
11295
11295
|
setSelectedImage(initialValue);
|
|
11296
11296
|
}, [initialValue]);
|
|
11297
|
-
return (jsxRuntime.jsxs(Container$
|
|
11297
|
+
return (jsxRuntime.jsxs(Container$O, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11298
11298
|
setSelectedImage(value);
|
|
11299
11299
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction }, void 0)] }, void 0));
|
|
11300
11300
|
};
|
|
11301
|
-
var templateObject_1$
|
|
11301
|
+
var templateObject_1$18;
|
|
11302
11302
|
|
|
11303
11303
|
/* base styles & size variants */
|
|
11304
11304
|
var StarStyles = {
|
|
@@ -11344,8 +11344,8 @@ var StarStyles = {
|
|
|
11344
11344
|
});
|
|
11345
11345
|
},
|
|
11346
11346
|
};
|
|
11347
|
-
var Container$
|
|
11348
|
-
var templateObject_1$
|
|
11347
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11348
|
+
var templateObject_1$17;
|
|
11349
11349
|
|
|
11350
11350
|
var StarContainer = newStyled.div(function (_a) {
|
|
11351
11351
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11363,7 +11363,7 @@ var sizes = {
|
|
|
11363
11363
|
var StarList = function (_a) {
|
|
11364
11364
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11365
11365
|
var theme = useTheme();
|
|
11366
|
-
return (jsxRuntime.jsx(Container$
|
|
11366
|
+
return (jsxRuntime.jsx(Container$N, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11367
11367
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11368
11368
|
}) }, void 0));
|
|
11369
11369
|
};
|
|
@@ -11407,8 +11407,8 @@ var LabelStyles = {
|
|
|
11407
11407
|
});
|
|
11408
11408
|
},
|
|
11409
11409
|
};
|
|
11410
|
-
var Container$
|
|
11411
|
-
var templateObject_1$
|
|
11410
|
+
var Container$M = newStyled.a(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11411
|
+
var templateObject_1$16;
|
|
11412
11412
|
|
|
11413
11413
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11414
11414
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11446,11 +11446,11 @@ var Rating = function (_a) {
|
|
|
11446
11446
|
href: reviewsContainerId,
|
|
11447
11447
|
}
|
|
11448
11448
|
: {};
|
|
11449
|
-
return (jsxRuntime.jsxs(Container$
|
|
11449
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11450
11450
|
};
|
|
11451
11451
|
|
|
11452
|
-
var Container$
|
|
11453
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11452
|
+
var Container$L = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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"])));
|
|
11453
|
+
var P$1 = newStyled.p(templateObject_2$L || (templateObject_2$L = __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; });
|
|
11454
11454
|
var textButtonStyles = function (theme) { return ({
|
|
11455
11455
|
border: 'none',
|
|
11456
11456
|
background: 'transparent',
|
|
@@ -11463,9 +11463,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11463
11463
|
var FitPredictor = function (_a) {
|
|
11464
11464
|
var onClick = _a.onClick;
|
|
11465
11465
|
var theme = useTheme();
|
|
11466
|
-
return (jsxs(Container$
|
|
11466
|
+
return (jsxs(Container$L, __assign$1({ theme: theme }, { children: [jsx(Container$L, { 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));
|
|
11467
11467
|
};
|
|
11468
|
-
var templateObject_1$
|
|
11468
|
+
var templateObject_1$15, templateObject_2$L;
|
|
11469
11469
|
|
|
11470
11470
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11471
11471
|
var color = _a.color;
|
|
@@ -11479,7 +11479,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11479
11479
|
margin: '0.938rem 4.188rem',
|
|
11480
11480
|
});
|
|
11481
11481
|
});
|
|
11482
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11482
|
+
var Bar = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
11483
11483
|
var backgroundColor = _a.backgroundColor;
|
|
11484
11484
|
return backgroundColor;
|
|
11485
11485
|
}, function (_a) {
|
|
@@ -11502,7 +11502,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11502
11502
|
position: 'absolute',
|
|
11503
11503
|
});
|
|
11504
11504
|
});
|
|
11505
|
-
var Container$
|
|
11505
|
+
var Container$K = newStyled.div(function (_a) {
|
|
11506
11506
|
var widthAuto = _a.widthAuto;
|
|
11507
11507
|
return ({
|
|
11508
11508
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11516,9 +11516,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11516
11516
|
var ProgressBar = function (_a) {
|
|
11517
11517
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11518
11518
|
var theme = useTheme();
|
|
11519
|
-
return (jsxRuntime.jsxs(Container$
|
|
11519
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11520
11520
|
};
|
|
11521
|
-
var templateObject_1$
|
|
11521
|
+
var templateObject_1$14;
|
|
11522
11522
|
|
|
11523
11523
|
var getStylesBySize$4 = function (size) {
|
|
11524
11524
|
switch (size) {
|
|
@@ -11539,7 +11539,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11539
11539
|
};
|
|
11540
11540
|
}
|
|
11541
11541
|
};
|
|
11542
|
-
var Container$
|
|
11542
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
11543
11543
|
var backgroundColor = _a.backgroundColor;
|
|
11544
11544
|
return backgroundColor;
|
|
11545
11545
|
}, function (_a) {
|
|
@@ -11567,9 +11567,9 @@ var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __
|
|
|
11567
11567
|
var IconButton = function (_a) {
|
|
11568
11568
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11569
11569
|
var theme = useTheme();
|
|
11570
|
-
return (jsxRuntime.jsx(Container$
|
|
11570
|
+
return (jsxRuntime.jsx(Container$J, __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));
|
|
11571
11571
|
};
|
|
11572
|
-
var templateObject_1$
|
|
11572
|
+
var templateObject_1$13;
|
|
11573
11573
|
|
|
11574
11574
|
var TooltipArrow = function (_a) {
|
|
11575
11575
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11649,7 +11649,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11649
11649
|
}
|
|
11650
11650
|
};
|
|
11651
11651
|
|
|
11652
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11652
|
+
var Wrapper$5 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
11653
11653
|
var position = _a.position;
|
|
11654
11654
|
return getWrapperFlexDirection(position);
|
|
11655
11655
|
});
|
|
@@ -11674,14 +11674,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11674
11674
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11675
11675
|
return actual === expected ? margin : '0';
|
|
11676
11676
|
};
|
|
11677
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11677
|
+
var ContentWrapper = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
11678
11678
|
var borderColor = _a.borderColor;
|
|
11679
11679
|
return borderColor;
|
|
11680
11680
|
}, function (_a) {
|
|
11681
11681
|
var backgroundColor = _a.backgroundColor;
|
|
11682
11682
|
return backgroundColor;
|
|
11683
11683
|
});
|
|
11684
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11684
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$B || (templateObject_3$B = __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) {
|
|
11685
11685
|
var position = _a.position;
|
|
11686
11686
|
return getArrowRotation(position);
|
|
11687
11687
|
}, function (_a) {
|
|
@@ -11691,17 +11691,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$A || (templateObject_
|
|
|
11691
11691
|
var position = _a.position;
|
|
11692
11692
|
return getArrowContainerMargin(position);
|
|
11693
11693
|
});
|
|
11694
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11694
|
+
var TooltipText = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11695
11695
|
var color = _a.color;
|
|
11696
11696
|
return color;
|
|
11697
11697
|
});
|
|
11698
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11699
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11698
|
+
var TopSection = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11699
|
+
var Title$6 = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11700
11700
|
var color = _a.color;
|
|
11701
11701
|
return color;
|
|
11702
11702
|
});
|
|
11703
11703
|
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"])));
|
|
11704
|
-
var templateObject_1$
|
|
11704
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$d, templateObject_7$7;
|
|
11705
11705
|
|
|
11706
11706
|
var Tooltip = function (_a) {
|
|
11707
11707
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -11863,9 +11863,9 @@ var ContainerStyles = {
|
|
|
11863
11863
|
},
|
|
11864
11864
|
};
|
|
11865
11865
|
|
|
11866
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11867
|
-
var Container$
|
|
11868
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11866
|
+
var Wrapper$4 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11867
|
+
var Container$I = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11868
|
+
var Input$2 = newStyled.input(templateObject_2$J || (templateObject_2$J = __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) {
|
|
11869
11869
|
var disabled = _a.disabled;
|
|
11870
11870
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11871
11871
|
});
|
|
@@ -11873,7 +11873,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11873
11873
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11874
11874
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11875
11875
|
]; });
|
|
11876
|
-
var StyledLabel = newStyled(Label$
|
|
11876
|
+
var StyledLabel = newStyled(Label$4)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11877
11877
|
var theme = _a.theme;
|
|
11878
11878
|
return theme.component.radio.textSize;
|
|
11879
11879
|
}, function (_a) {
|
|
@@ -11887,9 +11887,9 @@ var RadioInput = function (_a) {
|
|
|
11887
11887
|
var value = event.currentTarget.value;
|
|
11888
11888
|
onChange({ value: value, label: label });
|
|
11889
11889
|
};
|
|
11890
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11890
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$I, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11891
11891
|
};
|
|
11892
|
-
var templateObject_1$
|
|
11892
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$A;
|
|
11893
11893
|
|
|
11894
11894
|
var RadioGroupInput = function (_a) {
|
|
11895
11895
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11903,37 +11903,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11903
11903
|
}) }), void 0));
|
|
11904
11904
|
};
|
|
11905
11905
|
|
|
11906
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11907
|
-
var Container$
|
|
11906
|
+
var Wrapper$3 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
11907
|
+
var Container$H = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
11908
11908
|
var Minimalistic = function (_a) {
|
|
11909
11909
|
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;
|
|
11910
11910
|
var theme = useTheme();
|
|
11911
|
-
return (jsxRuntime.jsx(Card$
|
|
11911
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11912
11912
|
};
|
|
11913
|
-
var templateObject_1
|
|
11913
|
+
var templateObject_1$10, templateObject_2$I;
|
|
11914
11914
|
|
|
11915
|
-
var Container$
|
|
11916
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11917
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11918
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11915
|
+
var Container$G = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11916
|
+
var Title$5 = newStyled.h1(templateObject_2$H || (templateObject_2$H = __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; });
|
|
11917
|
+
var Details$1 = newStyled.span(templateObject_3$z || (templateObject_3$z = __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; });
|
|
11918
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
11919
11919
|
var Simple = function (_a) {
|
|
11920
11920
|
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;
|
|
11921
11921
|
var theme = useTheme();
|
|
11922
|
-
return (jsxRuntime.jsx(Card$
|
|
11922
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11923
11923
|
};
|
|
11924
|
-
var templateObject_1
|
|
11924
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$z, templateObject_4$p;
|
|
11925
11925
|
|
|
11926
11926
|
var Bundle = {
|
|
11927
11927
|
Minimalistic: Minimalistic,
|
|
11928
11928
|
Simple: Simple,
|
|
11929
11929
|
};
|
|
11930
11930
|
|
|
11931
|
-
var Container$
|
|
11932
|
-
var Tag$
|
|
11931
|
+
var Container$F = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
11932
|
+
var Tag$2 = function (_a) {
|
|
11933
11933
|
var text = _a.text, className = _a.className;
|
|
11934
|
-
return jsxRuntime.jsx(Container$
|
|
11934
|
+
return jsxRuntime.jsx(Container$F, __assign$1({ className: className }, { children: text }), void 0);
|
|
11935
11935
|
};
|
|
11936
|
-
var templateObject_1$
|
|
11936
|
+
var templateObject_1$_;
|
|
11937
11937
|
|
|
11938
11938
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11939
11939
|
switch (size) {
|
|
@@ -11967,7 +11967,7 @@ var CategoryTag = function (_a) {
|
|
|
11967
11967
|
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
11968
11968
|
var theme = useTheme();
|
|
11969
11969
|
var stylesBySize = getStylesBySize$3(size, styledBorder);
|
|
11970
|
-
return (jsx(Tag$
|
|
11970
|
+
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
11971
11971
|
};
|
|
11972
11972
|
|
|
11973
11973
|
var getStylesBySize$2 = function (size, styledBorder) {
|
|
@@ -12001,7 +12001,7 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12001
12001
|
var SeasonOfferTag = function (_a) {
|
|
12002
12002
|
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c;
|
|
12003
12003
|
var stylesBySize = getStylesBySize$2(size, styledBorder);
|
|
12004
|
-
return (jsx(Tag$
|
|
12004
|
+
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
|
|
12005
12005
|
};
|
|
12006
12006
|
|
|
12007
12007
|
var timeToSeconds = function (_a) {
|
|
@@ -12036,20 +12036,20 @@ var Timer = function (_a) {
|
|
|
12036
12036
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12037
12037
|
};
|
|
12038
12038
|
|
|
12039
|
-
var Label$
|
|
12039
|
+
var Label$2 = newStyled.span(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
12040
12040
|
var color = _a.color;
|
|
12041
12041
|
return color;
|
|
12042
12042
|
});
|
|
12043
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12043
|
+
var MandatoryIcon = newStyled.span(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12044
12044
|
var color = _a.color;
|
|
12045
12045
|
return color;
|
|
12046
12046
|
});
|
|
12047
12047
|
var InputLabel = function (_a) {
|
|
12048
12048
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
12049
12049
|
var theme = useTheme();
|
|
12050
|
-
return (jsxRuntime.jsxs(Label$
|
|
12050
|
+
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12051
12051
|
};
|
|
12052
|
-
var templateObject_1$
|
|
12052
|
+
var templateObject_1$Z, templateObject_2$G;
|
|
12053
12053
|
|
|
12054
12054
|
/**
|
|
12055
12055
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12103,14 +12103,14 @@ var formatPrice = function (value, _a) {
|
|
|
12103
12103
|
}).format(valueToFormat);
|
|
12104
12104
|
};
|
|
12105
12105
|
|
|
12106
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
12107
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
12106
|
+
var ErrorText = newStyled.h3(templateObject_1$Y || (templateObject_1$Y = __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; });
|
|
12107
|
+
var ErrorContainer = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
12108
12108
|
var Error$1 = function (_a) {
|
|
12109
12109
|
var error = _a.error;
|
|
12110
12110
|
var theme = useTheme();
|
|
12111
12111
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
12112
12112
|
};
|
|
12113
|
-
var templateObject_1$
|
|
12113
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12114
12114
|
|
|
12115
12115
|
var containerByStatus = function (theme, status) {
|
|
12116
12116
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12119,11 +12119,11 @@ var containerByStatus = function (theme, status) {
|
|
|
12119
12119
|
return theme.colors.semantic.urgent.color;
|
|
12120
12120
|
return '';
|
|
12121
12121
|
};
|
|
12122
|
-
var Container$
|
|
12122
|
+
var Container$E = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12123
12123
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12124
12124
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12125
12125
|
});
|
|
12126
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
12126
|
+
var StyledInput = newStyled.input(templateObject_2$E || (templateObject_2$E = __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) {
|
|
12127
12127
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12128
12128
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12129
12129
|
}, function (_a) {
|
|
@@ -12178,13 +12178,13 @@ var StyledInput = newStyled.input(templateObject_2$D || (templateObject_2$D = __
|
|
|
12178
12178
|
return hasValue &&
|
|
12179
12179
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12180
12180
|
});
|
|
12181
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
12181
|
+
var InputWrapper = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12182
12182
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12183
12183
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12184
12184
|
});
|
|
12185
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
12186
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12187
|
-
var templateObject_1$
|
|
12185
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
12186
|
+
var ClearInput = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
12187
|
+
var templateObject_1$X, templateObject_2$E, templateObject_3$y, templateObject_4$o, templateObject_5$f;
|
|
12188
12188
|
|
|
12189
12189
|
var BaseInput = function (_a) {
|
|
12190
12190
|
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"]);
|
|
@@ -12207,7 +12207,7 @@ var BaseInput = function (_a) {
|
|
|
12207
12207
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12208
12208
|
}, [status]);
|
|
12209
12209
|
var hasValue = Boolean(value);
|
|
12210
|
-
return (jsxRuntime.jsxs(Container$
|
|
12210
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12211
12211
|
onChange(event.target.value, event);
|
|
12212
12212
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12213
12213
|
onChange('', { target: { value: '' } });
|
|
@@ -12228,11 +12228,11 @@ var Button$2 = function (_a) {
|
|
|
12228
12228
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12229
12229
|
};
|
|
12230
12230
|
|
|
12231
|
-
var Container$
|
|
12231
|
+
var Container$D = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
12232
12232
|
var theme = _a.theme;
|
|
12233
12233
|
return theme.component.inputCustom.input.borderRadius;
|
|
12234
12234
|
});
|
|
12235
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12235
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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) {
|
|
12236
12236
|
var theme = _a.theme;
|
|
12237
12237
|
return theme.component.inputCustom.button.borderRadius;
|
|
12238
12238
|
});
|
|
@@ -12245,23 +12245,23 @@ var Custom = function (_a) {
|
|
|
12245
12245
|
text: text,
|
|
12246
12246
|
disabled: rest.disabled,
|
|
12247
12247
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12248
|
-
return (jsxRuntime.jsx(Container$
|
|
12248
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12249
12249
|
};
|
|
12250
|
-
var templateObject_1$
|
|
12250
|
+
var templateObject_1$W, templateObject_2$D;
|
|
12251
12251
|
|
|
12252
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12252
|
+
var SuccessContainer = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12253
12253
|
var size = _a.size;
|
|
12254
12254
|
return (size === 'small' ? '36px' : '');
|
|
12255
12255
|
});
|
|
12256
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12257
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12256
|
+
var SuccessMessage = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
12257
|
+
var SuccessText = newStyled.span(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
12258
12258
|
var Success = function (_a) {
|
|
12259
12259
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12260
12260
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12261
12261
|
};
|
|
12262
|
-
var templateObject_1$
|
|
12262
|
+
var templateObject_1$V, templateObject_2$C, templateObject_3$x;
|
|
12263
12263
|
|
|
12264
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12264
|
+
var ButtonContainer = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
12265
12265
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12266
12266
|
return status === exports.InputValidationType.Empty &&
|
|
12267
12267
|
type === 'primary' &&
|
|
@@ -12278,21 +12278,21 @@ var BasePlusButton = function (_a) {
|
|
|
12278
12278
|
}
|
|
12279
12279
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12280
12280
|
};
|
|
12281
|
-
var templateObject_1$
|
|
12281
|
+
var templateObject_1$U;
|
|
12282
12282
|
|
|
12283
|
-
var Container$
|
|
12284
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12283
|
+
var Container$C = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12284
|
+
var IconContainer$4 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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; });
|
|
12285
12285
|
var BasePlusIcon = function (_a) {
|
|
12286
12286
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12287
12287
|
var theme = useTheme();
|
|
12288
12288
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12289
|
-
return (jsxRuntime.jsx(Container$
|
|
12289
|
+
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12290
12290
|
? theme.colors.shades['700'].color
|
|
12291
12291
|
: status === exports.InputValidationType.Error
|
|
12292
12292
|
? theme.colors.semantic.urgent.color
|
|
12293
12293
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12294
12294
|
};
|
|
12295
|
-
var templateObject_1$
|
|
12295
|
+
var templateObject_1$T, templateObject_2$B;
|
|
12296
12296
|
|
|
12297
12297
|
var Input$1 = {
|
|
12298
12298
|
Simple: BaseInput,
|
|
@@ -12301,7 +12301,7 @@ var Input$1 = {
|
|
|
12301
12301
|
SimplePlusIcon: BasePlusIcon,
|
|
12302
12302
|
};
|
|
12303
12303
|
|
|
12304
|
-
var Container$
|
|
12304
|
+
var Container$B = newStyled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
12305
12305
|
var width = _a.width;
|
|
12306
12306
|
return width;
|
|
12307
12307
|
}, function (_a) {
|
|
@@ -12317,11 +12317,11 @@ var Container$A = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
12317
12317
|
var PaymentMethod = function (_a) {
|
|
12318
12318
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12319
12319
|
var theme = useTheme();
|
|
12320
|
-
return (jsxRuntime.jsx(Container$
|
|
12320
|
+
return (jsxRuntime.jsx(Container$B, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
12321
12321
|
};
|
|
12322
|
-
var templateObject_1$
|
|
12322
|
+
var templateObject_1$S;
|
|
12323
12323
|
|
|
12324
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12324
|
+
var Text$5 = newStyled.h3(templateObject_1$R || (templateObject_1$R = __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) {
|
|
12325
12325
|
var backgroundColor = _a.backgroundColor;
|
|
12326
12326
|
return backgroundColor;
|
|
12327
12327
|
}, function (_a) {
|
|
@@ -12333,11 +12333,11 @@ var OfferBanner = function (_a) {
|
|
|
12333
12333
|
var theme = useTheme();
|
|
12334
12334
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12335
12335
|
};
|
|
12336
|
-
var templateObject_1$
|
|
12336
|
+
var templateObject_1$R;
|
|
12337
12337
|
|
|
12338
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12339
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12340
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12338
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
12339
|
+
var GrandTotal = newStyled.h1(templateObject_2$A || (templateObject_2$A = __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; });
|
|
12340
|
+
var Currency = newStyled.span(templateObject_3$w || (templateObject_3$w = __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) {
|
|
12341
12341
|
var theme = _a.theme;
|
|
12342
12342
|
return theme.component.total.basicTotal.currency.color;
|
|
12343
12343
|
}, function (_a) {
|
|
@@ -12350,15 +12350,15 @@ var Currency = newStyled.span(templateObject_3$v || (templateObject_3$v = __make
|
|
|
12350
12350
|
var theme = _a.theme;
|
|
12351
12351
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12352
12352
|
});
|
|
12353
|
-
var Container$
|
|
12354
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12353
|
+
var Container$A = newStyled.div(templateObject_4$n || (templateObject_4$n = __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; });
|
|
12354
|
+
var DiscountText = newStyled.h3(templateObject_5$e || (templateObject_5$e = __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) {
|
|
12355
12355
|
var theme = _a.theme;
|
|
12356
12356
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12357
12357
|
}, function (_a) {
|
|
12358
12358
|
var theme = _a.theme;
|
|
12359
12359
|
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12360
12360
|
});
|
|
12361
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12361
|
+
var DiscountAmount = newStyled.h3(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12362
12362
|
var theme = _a.theme;
|
|
12363
12363
|
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12364
12364
|
}, function (_a) {
|
|
@@ -12371,23 +12371,23 @@ var DiscountAmount = newStyled.h3(templateObject_6$b || (templateObject_6$b = __
|
|
|
12371
12371
|
var Total = function (_a) {
|
|
12372
12372
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12373
12373
|
var theme = useTheme();
|
|
12374
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12374
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$A, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12375
12375
|
};
|
|
12376
|
-
var templateObject_1$
|
|
12376
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$w, templateObject_4$n, templateObject_5$e, templateObject_6$c;
|
|
12377
12377
|
|
|
12378
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12378
|
+
var Wrapper$1 = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12379
12379
|
var color = _a.color;
|
|
12380
12380
|
return color;
|
|
12381
12381
|
});
|
|
12382
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12383
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12382
|
+
var ItemContainer = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
12383
|
+
var Item$2 = newStyled.h4(templateObject_3$v || (templateObject_3$v = __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) {
|
|
12384
12384
|
var theme = _a.theme;
|
|
12385
12385
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12386
12386
|
}, function (_a) {
|
|
12387
12387
|
var theme = _a.theme;
|
|
12388
12388
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12389
12389
|
});
|
|
12390
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12390
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12391
12391
|
var color = _a.color;
|
|
12392
12392
|
return color;
|
|
12393
12393
|
});
|
|
@@ -12400,23 +12400,23 @@ var Subtotal = function (_a) {
|
|
|
12400
12400
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12401
12401
|
})] }), void 0));
|
|
12402
12402
|
};
|
|
12403
|
-
var templateObject_1$
|
|
12403
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$v, templateObject_4$m;
|
|
12404
12404
|
|
|
12405
12405
|
var Totals = {
|
|
12406
12406
|
Total: Total,
|
|
12407
12407
|
Subtotal: Subtotal,
|
|
12408
12408
|
};
|
|
12409
12409
|
|
|
12410
|
-
var Container$
|
|
12411
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12412
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12413
|
-
var Details = newStyled.span(templateObject_4$
|
|
12410
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __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; });
|
|
12411
|
+
var IconContainer$3 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
12412
|
+
var Text$4 = newStyled.p(templateObject_3$u || (templateObject_3$u = __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; });
|
|
12413
|
+
var Details = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12414
12414
|
var Note = function (_a) {
|
|
12415
12415
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12416
12416
|
var theme = useTheme();
|
|
12417
|
-
return (jsxRuntime.jsxs(Container$
|
|
12417
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12418
12418
|
};
|
|
12419
|
-
var templateObject_1$
|
|
12419
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$u, templateObject_4$l;
|
|
12420
12420
|
|
|
12421
12421
|
/* eslint-disable no-param-reassign */
|
|
12422
12422
|
var index$1 = function (breakpoints) {
|
|
@@ -12502,24 +12502,24 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12502
12502
|
literal: true,
|
|
12503
12503
|
});
|
|
12504
12504
|
|
|
12505
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
12506
|
-
var Line = newStyled.div(templateObject_2$
|
|
12507
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12505
|
+
var Title$4 = newStyled.h1(templateObject_1$N || (templateObject_1$N = __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; });
|
|
12506
|
+
var Line = newStyled.div(templateObject_2$x || (templateObject_2$x = __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; });
|
|
12507
|
+
var Row$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __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({
|
|
12508
12508
|
flexDirection: ['column', 'row'],
|
|
12509
12509
|
}));
|
|
12510
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12510
|
+
var Col$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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({
|
|
12511
12511
|
margin: ['0', '0 1.25rem'],
|
|
12512
12512
|
marginBottom: ['1.875rem', '0'],
|
|
12513
12513
|
alignItems: ['center', 'flex-start'],
|
|
12514
12514
|
textAlign: ['center', 'inherit'],
|
|
12515
12515
|
width: ['100%', 'inherit'],
|
|
12516
12516
|
}));
|
|
12517
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12517
|
+
var IconContainer$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"])), mediaQueries({
|
|
12518
12518
|
marginRight: ['0', '0.438rem'],
|
|
12519
12519
|
marginBottom: ['10px', '0'],
|
|
12520
12520
|
width: ['auto', '1.375rem'],
|
|
12521
12521
|
}));
|
|
12522
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
12522
|
+
var SectionTitle = newStyled.h1(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
12523
12523
|
display: ['block', 'flex'],
|
|
12524
12524
|
}), function (_a) {
|
|
12525
12525
|
var theme = _a.theme;
|
|
@@ -12539,46 +12539,46 @@ var DeliveryDetails = function (_a) {
|
|
|
12539
12539
|
var theme = useTheme();
|
|
12540
12540
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12541
12541
|
};
|
|
12542
|
-
var templateObject_1$
|
|
12542
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$k, templateObject_5$d, templateObject_6$b, templateObject_7$6, templateObject_8$5;
|
|
12543
12543
|
|
|
12544
|
-
var Container$
|
|
12545
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12544
|
+
var Container$y = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
12545
|
+
var Text$3 = newStyled.p(templateObject_2$w || (templateObject_2$w = __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; });
|
|
12546
12546
|
var ScrollToTop = function (_a) {
|
|
12547
12547
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12548
12548
|
var theme = useTheme();
|
|
12549
12549
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12550
|
-
return (jsxRuntime.jsxs(Container$
|
|
12550
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12551
12551
|
};
|
|
12552
|
-
var templateObject_1$
|
|
12552
|
+
var templateObject_1$M, templateObject_2$w;
|
|
12553
12553
|
|
|
12554
12554
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12555
|
-
var Container$
|
|
12555
|
+
var Container$x = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
12556
12556
|
var color = _a.color;
|
|
12557
12557
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12558
12558
|
});
|
|
12559
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12559
|
+
var H1 = newStyled.h1(templateObject_2$v || (templateObject_2$v = __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; });
|
|
12560
12560
|
var OrderBar = function (_a) {
|
|
12561
12561
|
var message = _a.message, color = _a.color;
|
|
12562
12562
|
var theme = useTheme();
|
|
12563
|
-
return (jsxRuntime.jsxs(Container$
|
|
12563
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12564
12564
|
};
|
|
12565
|
-
var templateObject_1$
|
|
12565
|
+
var templateObject_1$L, templateObject_2$v;
|
|
12566
12566
|
|
|
12567
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12568
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12569
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12570
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12567
|
+
var TableElement$1 = newStyled.table(templateObject_1$K || (templateObject_1$K = __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; });
|
|
12568
|
+
var TableCell$1 = newStyled.td(templateObject_2$u || (templateObject_2$u = __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; });
|
|
12569
|
+
var TableHead$1 = newStyled.th(templateObject_3$s || (templateObject_3$s = __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; });
|
|
12570
|
+
var TableRow$1 = newStyled.tr(templateObject_4$j || (templateObject_4$j = __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; });
|
|
12571
12571
|
var SizeTable = function (_a) {
|
|
12572
12572
|
var headers = _a.headers, data = _a.data;
|
|
12573
12573
|
var theme = useTheme();
|
|
12574
12574
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12575
12575
|
};
|
|
12576
|
-
var templateObject_1$
|
|
12576
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$s, templateObject_4$j;
|
|
12577
12577
|
|
|
12578
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12579
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12580
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12581
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12578
|
+
var TableElement = 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; });
|
|
12579
|
+
var TableCell = newStyled.td(templateObject_2$t || (templateObject_2$t = __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; });
|
|
12580
|
+
var TableHead = 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 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; });
|
|
12581
|
+
var TableRow = 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; });
|
|
12582
12582
|
var SizeChartTable = function (_a) {
|
|
12583
12583
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12584
12584
|
var theme = useTheme();
|
|
@@ -12609,18 +12609,18 @@ var SizeChartTable = function (_a) {
|
|
|
12609
12609
|
backgroundColor: getCellColor(index, cell),
|
|
12610
12610
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12611
12611
|
};
|
|
12612
|
-
var templateObject_1$
|
|
12612
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$r, templateObject_4$i;
|
|
12613
12613
|
|
|
12614
|
-
var Img = newStyled.img(templateObject_1$
|
|
12614
|
+
var Img = newStyled.img(templateObject_1$I || (templateObject_1$I = __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; });
|
|
12615
12615
|
var Image = function (_a) {
|
|
12616
12616
|
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;
|
|
12617
12617
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12618
12618
|
};
|
|
12619
|
-
var templateObject_1$
|
|
12619
|
+
var templateObject_1$I;
|
|
12620
12620
|
|
|
12621
|
-
var Container$
|
|
12622
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12623
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12621
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12622
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12623
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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({
|
|
12624
12624
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12625
12625
|
}));
|
|
12626
12626
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12643,7 +12643,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12643
12643
|
margin: '0.063rem 0',
|
|
12644
12644
|
});
|
|
12645
12645
|
});
|
|
12646
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12646
|
+
var PriceContainer = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
12647
12647
|
var withTag = _a.withTag; _a.theme;
|
|
12648
12648
|
return withTag
|
|
12649
12649
|
? mediaQueries({
|
|
@@ -12652,13 +12652,13 @@ var PriceContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = _
|
|
|
12652
12652
|
})
|
|
12653
12653
|
: 'justify-content: end';
|
|
12654
12654
|
});
|
|
12655
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12655
|
+
var Quantity = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
12656
12656
|
var SimpleOrderItem = function (_a) {
|
|
12657
12657
|
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;
|
|
12658
12658
|
var theme = useTheme();
|
|
12659
|
-
return (jsxRuntime.jsxs(Container$
|
|
12659
|
+
return (jsxRuntime.jsxs(Container$w, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12660
12660
|
};
|
|
12661
|
-
var templateObject_1$
|
|
12661
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$q, templateObject_4$h, templateObject_5$c;
|
|
12662
12662
|
|
|
12663
12663
|
function formatDate(date) {
|
|
12664
12664
|
var day = date.getDate();
|
|
@@ -12667,12 +12667,12 @@ function formatDate(date) {
|
|
|
12667
12667
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12668
12668
|
}
|
|
12669
12669
|
|
|
12670
|
-
var Container$
|
|
12671
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12672
|
-
var Content$1 = newStyled.div(templateObject_3$
|
|
12673
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
12674
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
12675
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
12670
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
12671
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
12672
|
+
var Content$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12673
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
12674
|
+
var DateText$1 = newStyled.span(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
12675
|
+
var VariantText = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
12676
12676
|
var ReviewerName$1 = newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
12677
12677
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12678
12678
|
var ReviewDescription$1 = newStyled.p(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -12688,17 +12688,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12688
12688
|
var Review$1 = function (_a) {
|
|
12689
12689
|
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;
|
|
12690
12690
|
var theme = useTheme();
|
|
12691
|
-
return (jsxRuntime.jsxs(Container$
|
|
12691
|
+
return (jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12692
12692
|
};
|
|
12693
|
-
var templateObject_1$
|
|
12693
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$p, templateObject_4$g, templateObject_5$b, templateObject_6$a, 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;
|
|
12694
12694
|
|
|
12695
|
-
var List = newStyled.ul(templateObject_1$
|
|
12696
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12697
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12698
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12699
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12700
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12701
|
-
var templateObject_1$
|
|
12695
|
+
var List = newStyled.ul(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12696
|
+
var Item$1 = newStyled.li(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
12697
|
+
var DropdownWrapper = newStyled.div(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
12698
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
12699
|
+
var StyledDropdown = newStyled.ul(templateObject_5$a || (templateObject_5$a = __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; });
|
|
12700
|
+
var DropdownItem = newStyled.li(templateObject_6$9 || (templateObject_6$9 = __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; });
|
|
12701
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$o, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
12702
12702
|
|
|
12703
12703
|
var DropdownListIcons = function (_a) {
|
|
12704
12704
|
var items = _a.items;
|
|
@@ -12711,7 +12711,7 @@ var Dropdown = function (_a) {
|
|
|
12711
12711
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12712
12712
|
};
|
|
12713
12713
|
|
|
12714
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12714
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$E || (templateObject_1$E = __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; });
|
|
12715
12715
|
var AmazonButton = function (_a) {
|
|
12716
12716
|
var onClick = _a.onClick;
|
|
12717
12717
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12720,23 +12720,23 @@ var PaypalButton = function (_a) {
|
|
|
12720
12720
|
var onClick = _a.onClick;
|
|
12721
12721
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12722
12722
|
};
|
|
12723
|
-
var templateObject_1$
|
|
12723
|
+
var templateObject_1$E;
|
|
12724
12724
|
|
|
12725
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12726
|
-
var Col = newStyled.div(templateObject_2$
|
|
12727
|
-
var Row = newStyled.div(templateObject_3$
|
|
12725
|
+
var Wrapper = newStyled.div(templateObject_1$D || (templateObject_1$D = __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'); });
|
|
12726
|
+
var Col = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12727
|
+
var Row = newStyled.div(templateObject_3$n || (templateObject_3$n = __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) {
|
|
12728
12728
|
return props.rightToLeft &&
|
|
12729
12729
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12730
12730
|
});
|
|
12731
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12732
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12733
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
12731
|
+
var H5 = newStyled.h5(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12732
|
+
var H3 = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12733
|
+
var FreeShipping = newStyled.span(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12734
12734
|
var CrossSellCheckbox = function (_a) {
|
|
12735
12735
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12736
12736
|
var theme = useTheme();
|
|
12737
12737
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12738
12738
|
};
|
|
12739
|
-
var templateObject_1$
|
|
12739
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$n, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12740
12740
|
|
|
12741
12741
|
var index = /*#__PURE__*/Object.freeze({
|
|
12742
12742
|
__proto__: null,
|
|
@@ -12749,7 +12749,7 @@ var Spacing = function (_a) {
|
|
|
12749
12749
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12750
12750
|
};
|
|
12751
12751
|
|
|
12752
|
-
var Container$
|
|
12752
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
12753
12753
|
var height = _a.height;
|
|
12754
12754
|
return (height ? height : '1.5em');
|
|
12755
12755
|
}, function (_a) {
|
|
@@ -12774,9 +12774,9 @@ var Container$t = newStyled.div(templateObject_1$B || (templateObject_1$B = __ma
|
|
|
12774
12774
|
var SkeletonBox = function (_a) {
|
|
12775
12775
|
var width = _a.width, height = _a.height;
|
|
12776
12776
|
var theme = useTheme();
|
|
12777
|
-
return jsxRuntime.jsx(Container$
|
|
12777
|
+
return jsxRuntime.jsx(Container$u, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12778
12778
|
};
|
|
12779
|
-
var templateObject_1$
|
|
12779
|
+
var templateObject_1$C;
|
|
12780
12780
|
|
|
12781
12781
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12782
12782
|
var width = _a.width, height = _a.height;
|
|
@@ -12786,9 +12786,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12786
12786
|
height: height,
|
|
12787
12787
|
});
|
|
12788
12788
|
});
|
|
12789
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12790
|
-
var Container$
|
|
12791
|
-
var Title$2 = newStyled.p(templateObject_3$
|
|
12789
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
12790
|
+
var Container$t = newStyled.a(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
12791
|
+
var Title$2 = newStyled.p(templateObject_3$m || (templateObject_3$m = __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; });
|
|
12792
12792
|
var getStylesBySize$1 = function (size) {
|
|
12793
12793
|
switch (size) {
|
|
12794
12794
|
case exports.ComponentSize.Medium:
|
|
@@ -12814,9 +12814,9 @@ var getStylesBySize$1 = function (size) {
|
|
|
12814
12814
|
};
|
|
12815
12815
|
}
|
|
12816
12816
|
};
|
|
12817
|
-
var TopTagContainer$2 = newStyled.div(templateObject_4$
|
|
12818
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_5$
|
|
12819
|
-
var MarginTopContainer = newStyled.div(templateObject_6$
|
|
12817
|
+
var TopTagContainer$2 = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
12818
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
12819
|
+
var MarginTopContainer = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
12820
12820
|
var ProductItemMobile = function (_a) {
|
|
12821
12821
|
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 ? {
|
|
12822
12822
|
display: false,
|
|
@@ -12837,32 +12837,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12837
12837
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12838
12838
|
};
|
|
12839
12839
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12840
|
-
return (jsxs(Container$
|
|
12840
|
+
return (jsxs(Container$t, __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));
|
|
12841
12841
|
};
|
|
12842
|
-
var templateObject_1$
|
|
12842
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
12843
12843
|
|
|
12844
|
-
var Container$
|
|
12844
|
+
var Container$s = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
12845
12845
|
function withProductGrid(ProductItemComponent, data) {
|
|
12846
12846
|
function WithProductGrid(props) {
|
|
12847
|
-
return (jsxRuntime.jsx(Container$
|
|
12847
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12848
12848
|
}
|
|
12849
12849
|
/* istanbul ignore next */
|
|
12850
12850
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12851
12851
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12852
12852
|
return WithProductGrid;
|
|
12853
12853
|
}
|
|
12854
|
-
var templateObject_1$
|
|
12854
|
+
var templateObject_1$A;
|
|
12855
12855
|
|
|
12856
12856
|
var Collection = {
|
|
12857
12857
|
ProductItemMobile: ProductItemMobile,
|
|
12858
12858
|
withProductGrid: withProductGrid,
|
|
12859
12859
|
};
|
|
12860
12860
|
|
|
12861
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12861
|
+
var Backdrop = newStyled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
12862
12862
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12863
12863
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12864
12864
|
});
|
|
12865
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12865
|
+
var Sidebar = newStyled.div(templateObject_2$n || (templateObject_2$n = __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) {
|
|
12866
12866
|
var width = _a.width;
|
|
12867
12867
|
return width;
|
|
12868
12868
|
}, function (_a) {
|
|
@@ -12903,28 +12903,28 @@ var Drawer = function (_a) {
|
|
|
12903
12903
|
}, [isOpen, onClose, onOpen]);
|
|
12904
12904
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12905
12905
|
};
|
|
12906
|
-
var templateObject_1$
|
|
12906
|
+
var templateObject_1$z, templateObject_2$n;
|
|
12907
12907
|
|
|
12908
|
-
var Container$
|
|
12908
|
+
var Container$r = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12909
12909
|
var size = _a.size;
|
|
12910
12910
|
return (size ? size : '100%');
|
|
12911
12911
|
}, function (_a) {
|
|
12912
12912
|
var size = _a.size;
|
|
12913
12913
|
return (size ? size : '100%');
|
|
12914
12914
|
});
|
|
12915
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12915
|
+
var Animation = newStyled.div(templateObject_2$m || (templateObject_2$m = __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) {
|
|
12916
12916
|
var animationDuration = _a.animationDuration;
|
|
12917
12917
|
return animationDuration;
|
|
12918
12918
|
});
|
|
12919
12919
|
var Spinner = function (_a) {
|
|
12920
12920
|
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;
|
|
12921
|
-
return (jsxRuntime.jsx(Container$
|
|
12921
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12922
12922
|
};
|
|
12923
|
-
var templateObject_1$
|
|
12923
|
+
var templateObject_1$y, templateObject_2$m;
|
|
12924
12924
|
|
|
12925
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12926
|
-
var LI = newStyled.li(templateObject_2$
|
|
12927
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12925
|
+
var UL = newStyled.ul(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
12926
|
+
var LI = newStyled.li(templateObject_2$l || (templateObject_2$l = __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; });
|
|
12927
|
+
var CloseIconContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
12928
12928
|
var Tags = function (_a) {
|
|
12929
12929
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12930
12930
|
var theme = useTheme();
|
|
@@ -12932,7 +12932,7 @@ var Tags = function (_a) {
|
|
|
12932
12932
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12933
12933
|
}) }), void 0));
|
|
12934
12934
|
};
|
|
12935
|
-
var templateObject_1$
|
|
12935
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$l;
|
|
12936
12936
|
|
|
12937
12937
|
function FilteringDropdown(_a) {
|
|
12938
12938
|
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;
|
|
@@ -12965,12 +12965,12 @@ function FilteringDropdown(_a) {
|
|
|
12965
12965
|
}) }, void 0)] }), void 0));
|
|
12966
12966
|
}
|
|
12967
12967
|
|
|
12968
|
-
var Container$
|
|
12969
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12970
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12968
|
+
var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
12969
|
+
var IconContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
12970
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12971
12971
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12972
12972
|
}));
|
|
12973
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12973
|
+
var PageNumber = newStyled.span(templateObject_4$c || (templateObject_4$c = __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) {
|
|
12974
12974
|
var bold = _a.bold;
|
|
12975
12975
|
return (bold ? '700' : '500');
|
|
12976
12976
|
}, function (_a) {
|
|
@@ -12987,7 +12987,7 @@ var PageNumber = newStyled.span(templateObject_4$b || (templateObject_4$b = __ma
|
|
|
12987
12987
|
var background = _a.background;
|
|
12988
12988
|
return background || 'unset';
|
|
12989
12989
|
});
|
|
12990
|
-
var templateObject_1$
|
|
12990
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$k, templateObject_4$c;
|
|
12991
12991
|
|
|
12992
12992
|
var Pagination = function (_a) {
|
|
12993
12993
|
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;
|
|
@@ -13033,7 +13033,7 @@ var Pagination = function (_a) {
|
|
|
13033
13033
|
}
|
|
13034
13034
|
return pages;
|
|
13035
13035
|
}, [from, page, showReducedPages, to]);
|
|
13036
|
-
return (jsxRuntime.jsxs(Container$
|
|
13036
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13037
13037
|
};
|
|
13038
13038
|
|
|
13039
13039
|
var PaginatorBlog = function (_a) {
|
|
@@ -13047,12 +13047,12 @@ var PaginatorBlog = function (_a) {
|
|
|
13047
13047
|
setPage(page);
|
|
13048
13048
|
onChange(page);
|
|
13049
13049
|
};
|
|
13050
|
-
return (jsxRuntime.jsxs(Container$
|
|
13050
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13051
13051
|
? theme.colors.shades['white'].color
|
|
13052
13052
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13053
13053
|
};
|
|
13054
13054
|
|
|
13055
|
-
var Container$
|
|
13055
|
+
var Container$p = newStyled.div(templateObject_1$v || (templateObject_1$v = __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({
|
|
13056
13056
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13057
13057
|
}));
|
|
13058
13058
|
var Description$1 = newStyled.div({
|
|
@@ -13069,25 +13069,25 @@ var Description$1 = newStyled.div({
|
|
|
13069
13069
|
var ProductItem = function (_a) {
|
|
13070
13070
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13071
13071
|
var theme = useTheme();
|
|
13072
|
-
return (jsxRuntime.jsxs(Container$
|
|
13072
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13073
13073
|
};
|
|
13074
|
-
var templateObject_1$
|
|
13074
|
+
var templateObject_1$v;
|
|
13075
13075
|
|
|
13076
|
-
var Container$
|
|
13076
|
+
var Container$o = newStyled.div({
|
|
13077
13077
|
display: 'flex',
|
|
13078
13078
|
justifyContent: 'center',
|
|
13079
13079
|
padding: '1rem',
|
|
13080
13080
|
});
|
|
13081
13081
|
var Footer = function (_a) {
|
|
13082
13082
|
var text = _a.text, onClick = _a.onClick;
|
|
13083
|
-
return (jsxRuntime.jsx(Container$
|
|
13083
|
+
return (jsxRuntime.jsx(Container$o, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13084
13084
|
};
|
|
13085
13085
|
|
|
13086
13086
|
var Ul = newStyled.ul({
|
|
13087
13087
|
margin: '0px',
|
|
13088
13088
|
padding: '0px',
|
|
13089
13089
|
});
|
|
13090
|
-
var Li = newStyled.li(templateObject_1$
|
|
13090
|
+
var Li = newStyled.li(templateObject_1$u || (templateObject_1$u = __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({
|
|
13091
13091
|
padding: [0, '0rem 1rem'],
|
|
13092
13092
|
borderRadius: [0, '0.5rem'],
|
|
13093
13093
|
}));
|
|
@@ -13099,20 +13099,20 @@ var Anchor = newStyled.a({
|
|
|
13099
13099
|
padding: 0,
|
|
13100
13100
|
textDecoration: 'none',
|
|
13101
13101
|
});
|
|
13102
|
-
var Container$
|
|
13102
|
+
var Container$n = newStyled.div(templateObject_2$j || (templateObject_2$j = __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({
|
|
13103
13103
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13104
13104
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13105
13105
|
borderRadius: ['0', '0.5rem'],
|
|
13106
13106
|
}));
|
|
13107
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13107
|
+
var Header$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13108
13108
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13109
13109
|
}));
|
|
13110
13110
|
var ResultsPanel = function (_a) {
|
|
13111
13111
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13112
13112
|
var theme = useTheme();
|
|
13113
|
-
return (jsxRuntime.jsxs(Container$
|
|
13113
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13114
13114
|
};
|
|
13115
|
-
var templateObject_1$
|
|
13115
|
+
var templateObject_1$u, templateObject_2$j, templateObject_3$j;
|
|
13116
13116
|
|
|
13117
13117
|
var Input = newStyled.input(function (props) { return ({
|
|
13118
13118
|
padding: props.theme.component.input.padding,
|
|
@@ -13143,7 +13143,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13143
13143
|
},
|
|
13144
13144
|
}); });
|
|
13145
13145
|
|
|
13146
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13146
|
+
var Button$1 = newStyled.button(templateObject_1$t || (templateObject_1$t = __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({
|
|
13147
13147
|
right: ['1rem', '7.75rem'],
|
|
13148
13148
|
top: ['0.75rem', '0.75rem'],
|
|
13149
13149
|
}));
|
|
@@ -13152,7 +13152,7 @@ var ClearButton = function (_a) {
|
|
|
13152
13152
|
var theme = useTheme();
|
|
13153
13153
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13154
13154
|
};
|
|
13155
|
-
var templateObject_1$
|
|
13155
|
+
var templateObject_1$t;
|
|
13156
13156
|
|
|
13157
13157
|
var useOnClickOutside = function (ref, handler) {
|
|
13158
13158
|
React$2.useEffect(function () {
|
|
@@ -13241,7 +13241,7 @@ var reducer = function (state, action) {
|
|
|
13241
13241
|
}
|
|
13242
13242
|
}
|
|
13243
13243
|
};
|
|
13244
|
-
var Container$
|
|
13244
|
+
var Container$m = newStyled.div({
|
|
13245
13245
|
position: 'relative',
|
|
13246
13246
|
display: 'flex',
|
|
13247
13247
|
});
|
|
@@ -13277,7 +13277,7 @@ var SearchBar = function (_a) {
|
|
|
13277
13277
|
onClose();
|
|
13278
13278
|
}
|
|
13279
13279
|
};
|
|
13280
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13280
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$m, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13281
13281
|
if (e.key === 'Enter') {
|
|
13282
13282
|
e.preventDefault();
|
|
13283
13283
|
e.stopPropagation();
|
|
@@ -13286,14 +13286,14 @@ var SearchBar = function (_a) {
|
|
|
13286
13286
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13287
13287
|
};
|
|
13288
13288
|
|
|
13289
|
-
var Container$
|
|
13289
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
13290
13290
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13291
13291
|
return borderRadiusVariant &&
|
|
13292
13292
|
"\n border-radius: 40px;\n ";
|
|
13293
13293
|
});
|
|
13294
13294
|
// max-height: 31.875rem;
|
|
13295
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13296
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13295
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13296
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13297
13297
|
var settings = {
|
|
13298
13298
|
dots: true,
|
|
13299
13299
|
infinite: false,
|
|
@@ -13320,7 +13320,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13320
13320
|
}
|
|
13321
13321
|
}
|
|
13322
13322
|
}, [images, selectedValue]);
|
|
13323
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13323
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$l, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13324
13324
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13325
13325
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13326
13326
|
};
|
|
@@ -13357,14 +13357,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13357
13357
|
};
|
|
13358
13358
|
}, [preventTouch, ref, touchStart]);
|
|
13359
13359
|
}
|
|
13360
|
-
var templateObject_1$
|
|
13360
|
+
var templateObject_1$s, templateObject_2$i, templateObject_3$i;
|
|
13361
13361
|
|
|
13362
|
-
var Container$
|
|
13362
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
13363
13363
|
var ProductGalleryMobile = function (_a) {
|
|
13364
13364
|
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;
|
|
13365
|
-
return (jsxRuntime.jsx(Container$
|
|
13365
|
+
return (jsxRuntime.jsx(Container$k, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13366
13366
|
};
|
|
13367
|
-
var templateObject_1$
|
|
13367
|
+
var templateObject_1$r;
|
|
13368
13368
|
|
|
13369
13369
|
var Portal = function (_a) {
|
|
13370
13370
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13497,17 +13497,17 @@ var react = __toCommonJS(react_exports);
|
|
|
13497
13497
|
var visibleStyle = function (_a) {
|
|
13498
13498
|
var opened = _a.opened;
|
|
13499
13499
|
return opened
|
|
13500
|
-
? css(templateObject_1$
|
|
13500
|
+
? css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13501
13501
|
};
|
|
13502
13502
|
var transformStyle = function (_a) {
|
|
13503
13503
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13504
13504
|
return opened
|
|
13505
|
-
? css(templateObject_3$
|
|
13505
|
+
? css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13506
13506
|
};
|
|
13507
|
-
var Container$
|
|
13507
|
+
var Container$j = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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({
|
|
13508
13508
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13509
13509
|
}), visibleStyle, transformStyle);
|
|
13510
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
13510
|
+
var Overlay = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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);
|
|
13511
13511
|
var Modal = function (_a) {
|
|
13512
13512
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
13513
13513
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -13517,7 +13517,7 @@ var Modal = function (_a) {
|
|
|
13517
13517
|
}
|
|
13518
13518
|
close();
|
|
13519
13519
|
};
|
|
13520
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13520
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$j, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13521
13521
|
};
|
|
13522
13522
|
var modalEvent = function (id, detail) {
|
|
13523
13523
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13545,39 +13545,39 @@ var useModal = function (id) {
|
|
|
13545
13545
|
close: close,
|
|
13546
13546
|
}); }, [close, open, opened]);
|
|
13547
13547
|
};
|
|
13548
|
-
var templateObject_1$
|
|
13548
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$h, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
13549
13549
|
|
|
13550
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13550
|
+
var Text$2 = newStyled.span(templateObject_1$p || (templateObject_1$p = __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; });
|
|
13551
13551
|
var Title$1 = function (_a) {
|
|
13552
13552
|
var title = _a.title;
|
|
13553
13553
|
var theme = useTheme();
|
|
13554
13554
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13555
13555
|
};
|
|
13556
|
-
var templateObject_1$
|
|
13556
|
+
var templateObject_1$p;
|
|
13557
13557
|
|
|
13558
|
-
var P = newStyled.p(templateObject_1$
|
|
13558
|
+
var P = newStyled.p(templateObject_1$o || (templateObject_1$o = __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; });
|
|
13559
13559
|
var Promo = function (_a) {
|
|
13560
13560
|
var text = _a.text;
|
|
13561
13561
|
var theme = useTheme();
|
|
13562
13562
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13563
13563
|
};
|
|
13564
|
-
var templateObject_1$
|
|
13564
|
+
var templateObject_1$o;
|
|
13565
13565
|
|
|
13566
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13566
|
+
var Text$1 = newStyled.span(templateObject_1$n || (templateObject_1$n = __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; });
|
|
13567
13567
|
var Description = function (_a) {
|
|
13568
13568
|
var text = _a.text;
|
|
13569
13569
|
var theme = useTheme();
|
|
13570
13570
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13571
13571
|
};
|
|
13572
|
-
var templateObject_1$
|
|
13572
|
+
var templateObject_1$n;
|
|
13573
13573
|
|
|
13574
|
-
var Container$
|
|
13574
|
+
var Container$i = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"); });
|
|
13575
13575
|
var CloseButton$1 = function (_a) {
|
|
13576
13576
|
var onClick = _a.onClick, size = _a.size;
|
|
13577
13577
|
var theme = useTheme();
|
|
13578
|
-
return (jsxRuntime.jsx(Container$
|
|
13578
|
+
return (jsxRuntime.jsx(Container$i, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13579
13579
|
};
|
|
13580
|
-
var templateObject_1$
|
|
13580
|
+
var templateObject_1$m;
|
|
13581
13581
|
|
|
13582
13582
|
var CartProductItem = {
|
|
13583
13583
|
Title: Title$1,
|
|
@@ -13587,10 +13587,10 @@ var CartProductItem = {
|
|
|
13587
13587
|
CloseButton: CloseButton$1,
|
|
13588
13588
|
};
|
|
13589
13589
|
|
|
13590
|
-
var Container$
|
|
13591
|
-
var Item = newStyled.span(templateObject_2$
|
|
13592
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13593
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13590
|
+
var Container$h = newStyled.div(templateObject_1$l || (templateObject_1$l = __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; });
|
|
13591
|
+
var Item = newStyled.span(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
13592
|
+
var Number$1 = newStyled(Item)(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
13593
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
13594
13594
|
var QuantityPicker = function (_a) {
|
|
13595
13595
|
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;
|
|
13596
13596
|
var theme = useTheme();
|
|
@@ -13613,9 +13613,9 @@ var QuantityPicker = function (_a) {
|
|
|
13613
13613
|
return clamp(value);
|
|
13614
13614
|
});
|
|
13615
13615
|
}, [value, clamp]);
|
|
13616
|
-
return (jsxRuntime.jsxs(Container$
|
|
13616
|
+
return (jsxRuntime.jsxs(Container$h, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13617
13617
|
};
|
|
13618
|
-
var templateObject_1$
|
|
13618
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$g, templateObject_4$a;
|
|
13619
13619
|
|
|
13620
13620
|
var htmlReactParser = {exports: {}};
|
|
13621
13621
|
|
|
@@ -17396,21 +17396,21 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17396
17396
|
HTMLReactParser$1.attributesToProps;
|
|
17397
17397
|
HTMLReactParser$1.Element;
|
|
17398
17398
|
|
|
17399
|
-
var Container$
|
|
17400
|
-
var Card = newStyled.div(templateObject_2$
|
|
17401
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17402
|
-
var Label = newStyled.div(templateObject_4$
|
|
17403
|
-
var Check = newStyled.div(templateObject_5$
|
|
17404
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
17399
|
+
var Container$g = newStyled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
17400
|
+
var Card$1 = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
17401
|
+
var Tag$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
17402
|
+
var Label$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
17403
|
+
var Check$1 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
17404
|
+
var IconContainer = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
17405
17405
|
var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17406
|
-
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"])));
|
|
17406
|
+
var DiscountContainer$1 = 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"])));
|
|
17407
17407
|
var PackSelector = function (_a) {
|
|
17408
17408
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17409
|
-
return (jsxRuntime.jsx(Container$
|
|
17410
|
-
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17409
|
+
return (jsxRuntime.jsx(Container$g, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17410
|
+
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17411
17411
|
}) }), void 0));
|
|
17412
17412
|
};
|
|
17413
|
-
var PackCard = function (_a) {
|
|
17413
|
+
var PackCard$1 = function (_a) {
|
|
17414
17414
|
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected, currencyCode = _a.currencyCode;
|
|
17415
17415
|
var _b = React$2.useState(null), icon = _b[0], setIcon = _b[1];
|
|
17416
17416
|
React$2.useEffect(function () {
|
|
@@ -17419,9 +17419,9 @@ var PackCard = function (_a) {
|
|
|
17419
17419
|
.then(function (icon) { return setIcon(icon); })
|
|
17420
17420
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17421
17421
|
}, [pack.meta.icon]);
|
|
17422
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17422
|
+
return (jsxRuntime.jsxs(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17423
17423
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17424
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17424
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17425
17425
|
locale: 'en-US',
|
|
17426
17426
|
currency: currencyCode || 'USD',
|
|
17427
17427
|
}) }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
@@ -17432,7 +17432,38 @@ var PackCard = function (_a) {
|
|
|
17432
17432
|
currency: currencyCode || 'USD',
|
|
17433
17433
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17434
17434
|
};
|
|
17435
|
-
var templateObject_1$
|
|
17435
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$f, templateObject_4$9, templateObject_5$6, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
17436
|
+
|
|
17437
|
+
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"])));
|
|
17438
|
+
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: 16px 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: 16px 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"])));
|
|
17439
|
+
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"])));
|
|
17440
|
+
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"])));
|
|
17441
|
+
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"])));
|
|
17442
|
+
var DiscountContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
17443
|
+
var PackSelectorV2 = function (_a) {
|
|
17444
|
+
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17445
|
+
return (jsxRuntime.jsx(Container$f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17446
|
+
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17447
|
+
}) }), void 0));
|
|
17448
|
+
};
|
|
17449
|
+
var PackCard = function (_a) {
|
|
17450
|
+
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected, currencyCode = _a.currencyCode;
|
|
17451
|
+
var _b = React$2.useState(null); _b[0]; var setIcon = _b[1];
|
|
17452
|
+
React$2.useEffect(function () {
|
|
17453
|
+
fetch(pack.meta.icon)
|
|
17454
|
+
.then(function (res) { return res.text(); })
|
|
17455
|
+
.then(function (icon) { return setIcon(icon); })
|
|
17456
|
+
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
17457
|
+
}, [pack.meta.icon]);
|
|
17458
|
+
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
17459
|
+
locale: 'en-US',
|
|
17460
|
+
currency: currencyCode || 'USD',
|
|
17461
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17462
|
+
locale: 'en-US',
|
|
17463
|
+
currency: currencyCode || 'USD',
|
|
17464
|
+
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17465
|
+
};
|
|
17466
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$e, templateObject_4$8, templateObject_5$5, templateObject_6$4;
|
|
17436
17467
|
|
|
17437
17468
|
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; });
|
|
17438
17469
|
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; });
|
|
@@ -18337,7 +18368,7 @@ exports.Bundle = Bundle;
|
|
|
18337
18368
|
exports.ButtonPrimary = ButtonPrimary;
|
|
18338
18369
|
exports.ButtonSecondary = ButtonSecondary;
|
|
18339
18370
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
18340
|
-
exports.Card = Card$
|
|
18371
|
+
exports.Card = Card$3;
|
|
18341
18372
|
exports.CartProductItem = CartProductItem;
|
|
18342
18373
|
exports.CategoryTag = CategoryTag;
|
|
18343
18374
|
exports.Checkbox = Checkbox;
|
|
@@ -18365,6 +18396,7 @@ exports.OfferBanner = OfferBanner;
|
|
|
18365
18396
|
exports.OrderBar = OrderBar;
|
|
18366
18397
|
exports.Overlay = Overlay;
|
|
18367
18398
|
exports.PackSelector = PackSelector;
|
|
18399
|
+
exports.PackSelectorV2 = PackSelectorV2;
|
|
18368
18400
|
exports.Pagination = Pagination;
|
|
18369
18401
|
exports.PaginatorBlog = PaginatorBlog;
|
|
18370
18402
|
exports.PaymentMethod = PaymentMethod;
|