@trafilea/afrodita-components 5.0.0-beta.1 → 5.0.0-beta.12
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 +42 -9
- package/build/index.esm.js +440 -402
- package/build/index.esm.js.map +1 -1
- package/build/index.js +443 -403
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.d.ts +4 -2
- package/build/theme/shapermint.theme.js +4 -2
- package/build/theme/truekind.theme.d.ts +4 -2
- package/build/theme/truekind.theme.js +4 -2
- package/package.json +2 -1
package/build/index.esm.js
CHANGED
|
@@ -447,6 +447,16 @@ var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
|
447
447
|
SlideDot: SlideDot
|
|
448
448
|
});
|
|
449
449
|
|
|
450
|
+
var Thinking = function (_a) {
|
|
451
|
+
var height = _a.height, width = _a.width;
|
|
452
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 36, viewBoxY: 36, fill: "none" }, { children: [jsx$1("path", { d: "M18.1177 34.1177C26.9542 34.1177 34.1177 26.9542 34.1177 18.1177C34.1177 9.28112 26.9542 2.11768 18.1177 2.11768C9.28112 2.11768 2.11768 9.28112 2.11767 18.1177C2.11767 26.9542 9.28112 34.1177 18.1177 34.1177Z", fill: "#D1D1D1" }, void 0), jsx$1("path", { d: "M33.8824 18.0157C33.8858 15.627 33.3399 13.2685 32.2858 11.1177C31.749 16.3687 30.9035 21.0215 25.9749 25.7664C21.085 30.4741 13.7607 30.4384 4.76477 26.5069C7.6498 30.7724 12.1983 33.8824 17.7887 33.8824C22.057 33.8824 26.1505 32.2107 29.1687 29.2351C32.1868 26.2596 33.8824 22.2238 33.8824 18.0157Z", fill: "#BBBBBB" }, void 0), jsx$1("path", { d: "M18 34C26.8366 34 34 26.8366 34 18C34 9.16345 26.8366 2 18 2C9.16344 2 2 9.16344 2 18C2 26.8366 9.16344 34 18 34Z", stroke: "#292929", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M4.82728 27.412L4.82637 27.4132L4.40553 27.9299C4.40553 27.9299 4.40552 27.9299 4.40552 27.9299C3.81861 28.6494 3.5 29.5474 3.5 30.4704V32.3339C3.5 34.0936 4.9458 35.5 6.70703 35.5H11.2297C11.9963 35.5 12.632 34.8847 12.632 34.1113C12.632 33.8823 12.5763 33.6672 12.478 33.4779C12.8437 33.2285 13.0859 32.8113 13.0859 32.3339C13.0859 32.105 13.0302 31.8899 12.9319 31.7005C13.2976 31.4511 13.5398 31.034 13.5398 30.5566C13.5398 30.4213 13.5204 30.291 13.4843 30.1679H17.0977C17.8642 30.1679 18.5 29.5526 18.5 28.7792C18.5 28.0057 17.8642 27.3905 17.0977 27.3905H8.97109C8.4908 27.3905 8.11484 27.0093 8.11484 26.5548V23.8887C8.11484 23.1153 7.47908 22.5 6.7125 22.5C5.94592 22.5 5.31016 23.1153 5.31016 23.8887V26.0592C5.31016 26.553 5.14192 27.028 4.82728 27.412Z", fill: "#E5E5E5", stroke: "#292929" }, void 0), jsx$1("path", { d: "M20.3556 25C20.2562 25 20.163 24.9768 20.0698 24.9362C20.0325 24.9188 16.5164 23.2887 12.6275 23.2016C12.2734 23.1958 11.9939 22.9174 12.0001 22.5867C12.0063 22.256 12.3045 21.9834 12.6586 22.0008C16.8456 22.0878 20.4922 23.7876 20.6475 23.863C20.9644 24.0138 21.0886 24.3735 20.9333 24.6693C20.8153 24.884 20.5916 25 20.3556 25Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M12.4403 10C12.3219 10 12.1981 9.96334 12.0958 9.88478C12.0097 9.82193 10.0989 8.39216 7.80058 9.51293C7.52607 9.6491 7.19236 9.53912 7.0578 9.27202C6.92324 9.00492 7.03089 8.68021 7.30539 8.54404C10.255 7.10902 12.6879 8.95778 12.7902 9.03634C13.0324 9.22488 13.0701 9.56531 12.8763 9.79575C12.7686 9.93192 12.6072 10 12.4403 10Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M21.4989 13C21.2664 13 21.058 12.8167 21.0096 12.5525C20.9563 12.2506 21.1307 11.9595 21.402 11.9002L25.4042 11.0107C25.6755 10.9514 25.9371 11.1454 25.9904 11.4473C26.0437 11.7492 25.8693 12.0404 25.598 12.0997L21.5958 12.9892C21.5668 12.9946 21.5329 13 21.4989 13Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M11.8037 16.0101C11.8037 16.6111 11.3164 17.0983 10.7154 17.0983C10.1144 17.0983 9.6272 16.6111 9.6272 16.0101C9.6272 15.4091 10.1144 14.9219 10.7154 14.9219C11.3164 14.9219 11.8037 15.4091 11.8037 16.0101Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M24.5096 16.0101C24.5096 16.6111 24.0224 17.0983 23.4214 17.0983C22.8203 17.0983 22.3331 16.6111 22.3331 16.0101C22.3331 15.4091 22.8203 14.9219 23.4214 14.9219C24.0224 14.9219 24.5096 15.4091 24.5096 16.0101Z", fill: "#292929", stroke: "#292929" }, void 0)] }), void 0));
|
|
453
|
+
};
|
|
454
|
+
|
|
455
|
+
var Emoji = /*#__PURE__*/Object.freeze({
|
|
456
|
+
__proto__: null,
|
|
457
|
+
Thinking: Thinking
|
|
458
|
+
});
|
|
459
|
+
|
|
450
460
|
var Icon = {
|
|
451
461
|
Custom: Custom$1,
|
|
452
462
|
Arrows: Arrows,
|
|
@@ -459,6 +469,7 @@ var Icon = {
|
|
|
459
469
|
Download: Download,
|
|
460
470
|
Payment: Payment,
|
|
461
471
|
SlideDots: SlideDots$1,
|
|
472
|
+
Emoji: Emoji,
|
|
462
473
|
};
|
|
463
474
|
|
|
464
475
|
function _extends$1() {
|
|
@@ -3345,7 +3356,7 @@ var InputValidationType;
|
|
|
3345
3356
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3346
3357
|
})(InputValidationType || (InputValidationType = {}));
|
|
3347
3358
|
|
|
3348
|
-
var Section = newStyled.div(templateObject_1$
|
|
3359
|
+
var Section = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
3349
3360
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3350
3361
|
});
|
|
3351
3362
|
var CardHeader = function (_a) {
|
|
@@ -3356,14 +3367,14 @@ var CardFooter = function (_a) {
|
|
|
3356
3367
|
var children = _a.children;
|
|
3357
3368
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3358
3369
|
};
|
|
3359
|
-
var templateObject_1$
|
|
3370
|
+
var templateObject_1$18;
|
|
3360
3371
|
|
|
3361
|
-
var Body = newStyled.div(templateObject_1$
|
|
3372
|
+
var Body = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
3362
3373
|
var CardBody = function (_a) {
|
|
3363
3374
|
var children = _a.children;
|
|
3364
3375
|
return jsx$1(Body, { children: children }, void 0);
|
|
3365
3376
|
};
|
|
3366
|
-
var templateObject_1$
|
|
3377
|
+
var templateObject_1$17;
|
|
3367
3378
|
|
|
3368
3379
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3369
3380
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3508,7 +3519,7 @@ var AssetsProvider = function (_a) {
|
|
|
3508
3519
|
};
|
|
3509
3520
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3510
3521
|
|
|
3511
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
3522
|
+
var Container$G = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
3512
3523
|
var flex = _a.flex;
|
|
3513
3524
|
return flex &&
|
|
3514
3525
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3528,7 +3539,7 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
3528
3539
|
Footer: CardFooter,
|
|
3529
3540
|
Body: CardBody,
|
|
3530
3541
|
});
|
|
3531
|
-
var templateObject_1$
|
|
3542
|
+
var templateObject_1$16;
|
|
3532
3543
|
|
|
3533
3544
|
var Fragment = Fragment$1;
|
|
3534
3545
|
function jsx(type, props, key) {
|
|
@@ -3602,6 +3613,7 @@ var ButtonPrimary = function (_a) {
|
|
|
3602
3613
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
3603
3614
|
color: theme.component.button.primary.active.color,
|
|
3604
3615
|
border: theme.component.button.border,
|
|
3616
|
+
fontFamily: 'inherit',
|
|
3605
3617
|
'&:hover': {
|
|
3606
3618
|
backgroundColor: theme.component.button.primary.hover.backgroundColor,
|
|
3607
3619
|
color: theme.component.button.primary.hover.color,
|
|
@@ -3667,7 +3679,7 @@ function BaseSelectOption(_a) {
|
|
|
3667
3679
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3668
3680
|
}
|
|
3669
3681
|
|
|
3670
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3682
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3671
3683
|
function BaseSelect(_a) {
|
|
3672
3684
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3673
3685
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3677,7 +3689,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3677
3689
|
Options: BaseSelectOptions,
|
|
3678
3690
|
Option: BaseSelectOption,
|
|
3679
3691
|
});
|
|
3680
|
-
var templateObject_1$
|
|
3692
|
+
var templateObject_1$15;
|
|
3681
3693
|
|
|
3682
3694
|
var CustomButton = newStyled.button(function (_a) {
|
|
3683
3695
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -3890,12 +3902,12 @@ var CustomCheckboxStyles = {
|
|
|
3890
3902
|
},
|
|
3891
3903
|
};
|
|
3892
3904
|
|
|
3893
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
3905
|
+
var Container$F = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
3894
3906
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
3895
3907
|
CustomCheckboxStyles[props.size](props.theme),
|
|
3896
3908
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
3897
3909
|
]; });
|
|
3898
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
3910
|
+
var Input$3 = newStyled.input(templateObject_2$H || (templateObject_2$H = __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) {
|
|
3899
3911
|
var disabled = _a.disabled;
|
|
3900
3912
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
3901
3913
|
});
|
|
@@ -3921,7 +3933,7 @@ var Checkbox = function (_a) {
|
|
|
3921
3933
|
}, []);
|
|
3922
3934
|
return (jsxs$1(Container$F, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
3923
3935
|
};
|
|
3924
|
-
var templateObject_1$
|
|
3936
|
+
var templateObject_1$14, templateObject_2$H;
|
|
3925
3937
|
|
|
3926
3938
|
var CustomOption = newStyled.li(function (_a) {
|
|
3927
3939
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4008,13 +4020,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
4008
4020
|
}
|
|
4009
4021
|
};
|
|
4010
4022
|
var SimpleSelector = function (_a) {
|
|
4011
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
4023
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
|
|
4012
4024
|
var theme = useTheme();
|
|
4013
4025
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
4014
4026
|
var activeStyles = active
|
|
4015
4027
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4016
4028
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
4017
|
-
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4029
|
+
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4018
4030
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
4019
4031
|
}, '&:disabled': {
|
|
4020
4032
|
color: theme.colors.shades['250'].color,
|
|
@@ -4023,7 +4035,7 @@ var SimpleSelector = function (_a) {
|
|
|
4023
4035
|
};
|
|
4024
4036
|
|
|
4025
4037
|
var SelectorSecondary = function (_a) {
|
|
4026
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
4038
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
|
|
4027
4039
|
var theme = useTheme();
|
|
4028
4040
|
var stylesByActive = active
|
|
4029
4041
|
? {
|
|
@@ -4038,7 +4050,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4038
4050
|
border: theme.component.selector.default.border,
|
|
4039
4051
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
4040
4052
|
};
|
|
4041
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4053
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4042
4054
|
background: theme.component.selector.hover.background,
|
|
4043
4055
|
color: theme.component.selector.hover.color,
|
|
4044
4056
|
}, '&:disabled': {
|
|
@@ -4051,14 +4063,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4051
4063
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4052
4064
|
// `variants` styles that are consistent through all themes.
|
|
4053
4065
|
var TAGS = {
|
|
4054
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4055
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4056
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4057
|
-
display1: newStyled.h1(templateObject_4$
|
|
4058
|
-
display2: newStyled.h2(templateObject_5$
|
|
4059
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4060
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4061
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4066
|
+
hero1: newStyled.h1(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject([""], [""]))),
|
|
4067
|
+
hero2: newStyled.h2(templateObject_2$G || (templateObject_2$G = __makeTemplateObject([""], [""]))),
|
|
4068
|
+
hero3: newStyled.h3(templateObject_3$r || (templateObject_3$r = __makeTemplateObject([""], [""]))),
|
|
4069
|
+
display1: newStyled.h1(templateObject_4$h || (templateObject_4$h = __makeTemplateObject([""], [""]))),
|
|
4070
|
+
display2: newStyled.h2(templateObject_5$a || (templateObject_5$a = __makeTemplateObject([""], [""]))),
|
|
4071
|
+
heading1: newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject([""], [""]))),
|
|
4072
|
+
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4073
|
+
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
4062
4074
|
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
4063
4075
|
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
4064
4076
|
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4069,7 +4081,7 @@ var TAGS = {
|
|
|
4069
4081
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
4070
4082
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4071
4083
|
};
|
|
4072
|
-
var Text$
|
|
4084
|
+
var Text$5 = function (_a) {
|
|
4073
4085
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4074
4086
|
var theme = useTheme();
|
|
4075
4087
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -4174,27 +4186,27 @@ var DEFAULTS = {
|
|
|
4174
4186
|
size: 'regular',
|
|
4175
4187
|
},
|
|
4176
4188
|
};
|
|
4177
|
-
var templateObject_1$
|
|
4189
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$r, templateObject_4$h, templateObject_5$a, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4178
4190
|
|
|
4179
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4191
|
+
var ButtonsContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
4180
4192
|
var inline = _a.inline;
|
|
4181
4193
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4182
4194
|
});
|
|
4183
4195
|
var SizeSelector = function (_a) {
|
|
4184
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
4196
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
|
|
4185
4197
|
return (jsxs("div", __assign$1({ css: {
|
|
4186
4198
|
display: 'flex',
|
|
4187
4199
|
flexDirection: inline ? 'row' : 'column',
|
|
4188
4200
|
alignItems: inline ? 'center' : 'start',
|
|
4189
|
-
} }, { children: [jsxs(Text$
|
|
4201
|
+
} }, { children: [jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$5, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
4190
4202
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
4191
4203
|
return (jsx(SelectorSecondary, { css: {
|
|
4192
4204
|
padding: '0.75rem 1rem 0.625rem',
|
|
4193
4205
|
margin: '0 0.5rem 0.625rem 0',
|
|
4194
|
-
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
4206
|
+
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4195
4207
|
}) }), void 0)] }), void 0));
|
|
4196
4208
|
};
|
|
4197
|
-
var templateObject_1$
|
|
4209
|
+
var templateObject_1$12;
|
|
4198
4210
|
|
|
4199
4211
|
var getStylesBySize$7 = function (size) {
|
|
4200
4212
|
switch (size) {
|
|
@@ -4223,7 +4235,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4223
4235
|
} });
|
|
4224
4236
|
};
|
|
4225
4237
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4226
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1
|
|
4238
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$11 || (templateObject_1$11 = __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));
|
|
4227
4239
|
};
|
|
4228
4240
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4229
4241
|
if (disabled)
|
|
@@ -4239,16 +4251,16 @@ var TextButton = function (_a) {
|
|
|
4239
4251
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4240
4252
|
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) }, { children: text }), void 0));
|
|
4241
4253
|
};
|
|
4242
|
-
var templateObject_1
|
|
4254
|
+
var templateObject_1$11;
|
|
4243
4255
|
|
|
4244
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
4245
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4246
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4256
|
+
var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
4257
|
+
var P$3 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4258
|
+
var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
4247
4259
|
var SizeFitGuide = function (_a) {
|
|
4248
|
-
var title = _a.title,
|
|
4249
|
-
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [
|
|
4260
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4261
|
+
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4250
4262
|
};
|
|
4251
|
-
var templateObject_1$
|
|
4263
|
+
var templateObject_1$10, templateObject_2$F, templateObject_3$q;
|
|
4252
4264
|
|
|
4253
4265
|
var getStylesBySize$6 = function (size) {
|
|
4254
4266
|
switch (size) {
|
|
@@ -4278,7 +4290,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4278
4290
|
};
|
|
4279
4291
|
}
|
|
4280
4292
|
};
|
|
4281
|
-
var Container$D = newStyled.div(templateObject_1
|
|
4293
|
+
var Container$D = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
4282
4294
|
var backgroundColor = _a.backgroundColor;
|
|
4283
4295
|
return backgroundColor;
|
|
4284
4296
|
}, function (_a) {
|
|
@@ -4300,7 +4312,7 @@ var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
4300
4312
|
var size = _a.size;
|
|
4301
4313
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4302
4314
|
});
|
|
4303
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4315
|
+
var H3$2 = newStyled.h3(templateObject_2$E || (templateObject_2$E = __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) {
|
|
4304
4316
|
var textColor = _a.textColor;
|
|
4305
4317
|
return textColor;
|
|
4306
4318
|
}, function (_a) {
|
|
@@ -4317,7 +4329,7 @@ var DiscountTag = function (_a) {
|
|
|
4317
4329
|
var theme = useTheme();
|
|
4318
4330
|
return (jsx$1(Container$D, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4319
4331
|
};
|
|
4320
|
-
var templateObject_1
|
|
4332
|
+
var templateObject_1$$, templateObject_2$E;
|
|
4321
4333
|
|
|
4322
4334
|
var getStylesBySize$5 = function (size) {
|
|
4323
4335
|
switch (size) {
|
|
@@ -4341,8 +4353,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4341
4353
|
};
|
|
4342
4354
|
}
|
|
4343
4355
|
};
|
|
4344
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
4345
|
-
var Price = newStyled.h1(templateObject_2$
|
|
4356
|
+
var Container$C = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4357
|
+
var Price = newStyled.h1(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
4346
4358
|
var weight = _a.weight;
|
|
4347
4359
|
return (weight ? weight : '400');
|
|
4348
4360
|
}, function (_a) {
|
|
@@ -4364,7 +4376,7 @@ var Price = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTempl
|
|
|
4364
4376
|
var margin = _a.margin, size = _a.size;
|
|
4365
4377
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4366
4378
|
});
|
|
4367
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4379
|
+
var TagContainer = newStyled.h1(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4368
4380
|
var _b;
|
|
4369
4381
|
var size = _a.size;
|
|
4370
4382
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4374,7 +4386,7 @@ var PriceLabel = function (_a) {
|
|
|
4374
4386
|
var theme = useTheme();
|
|
4375
4387
|
return (jsxs$1(Container$C, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4376
4388
|
};
|
|
4377
|
-
var templateObject_1$
|
|
4389
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$p;
|
|
4378
4390
|
|
|
4379
4391
|
var OneColorSelector = function (_a) {
|
|
4380
4392
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4413,14 +4425,14 @@ var OutOfStock = function (_a) {
|
|
|
4413
4425
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4414
4426
|
};
|
|
4415
4427
|
|
|
4416
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4417
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4418
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4419
|
-
var Span = newStyled.span(templateObject_4$
|
|
4420
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4428
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4429
|
+
newStyled(lt.Label)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4430
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
4431
|
+
var Span = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4432
|
+
var OptionsContainer = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
4421
4433
|
var Label$2 = function (_a) {
|
|
4422
4434
|
var label = _a.label, values = _a.values;
|
|
4423
|
-
return (jsxs$1(Text$
|
|
4435
|
+
return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
4424
4436
|
};
|
|
4425
4437
|
var Option = function (_a) {
|
|
4426
4438
|
var value = _a.value, children = _a.children;
|
|
@@ -4435,20 +4447,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4435
4447
|
Option: Option,
|
|
4436
4448
|
OptionsContainer: OptionsContainer,
|
|
4437
4449
|
});
|
|
4438
|
-
var templateObject_1$
|
|
4450
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$o, templateObject_4$g, templateObject_5$9;
|
|
4439
4451
|
|
|
4440
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
4452
|
+
var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"], ["\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"])), function (_a) {
|
|
4441
4453
|
var borderColor = _a.borderColor;
|
|
4442
4454
|
return borderColor;
|
|
4443
4455
|
});
|
|
4444
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
4456
|
+
var Image$2 = newStyled.img(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
4445
4457
|
var PatternSelector = function (_a) {
|
|
4446
4458
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4447
4459
|
var theme = useTheme();
|
|
4448
4460
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4449
4461
|
return (jsx$1(Container$B, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4450
4462
|
};
|
|
4451
|
-
var templateObject_1$
|
|
4463
|
+
var templateObject_1$Y, templateObject_2$B;
|
|
4452
4464
|
|
|
4453
4465
|
var renderOptions$1 = function (options) {
|
|
4454
4466
|
if (options.length === 0) {
|
|
@@ -4506,7 +4518,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4506
4518
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4507
4519
|
};
|
|
4508
4520
|
|
|
4509
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
4521
|
+
var Image$1 = newStyled.img(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
4510
4522
|
var selected = _a.selected, theme = _a.theme;
|
|
4511
4523
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4512
4524
|
});
|
|
@@ -4515,35 +4527,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
4515
4527
|
var theme = useTheme();
|
|
4516
4528
|
return jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4517
4529
|
};
|
|
4518
|
-
var templateObject_1$
|
|
4530
|
+
var templateObject_1$X;
|
|
4519
4531
|
|
|
4520
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
4521
|
-
var Button$5 = newStyled.button(templateObject_2$
|
|
4532
|
+
var Container$A = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
4533
|
+
var Button$5 = newStyled.button(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
4522
4534
|
var ImagePreviewList = function (_a) {
|
|
4523
4535
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
4524
4536
|
return (jsx$1(Container$A, __assign$1({ "data-testid": testId }, { children: images.map(function (item) {
|
|
4525
4537
|
return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
4526
4538
|
}) }), void 0));
|
|
4527
4539
|
};
|
|
4528
|
-
var templateObject_1$
|
|
4540
|
+
var templateObject_1$W, templateObject_2$A;
|
|
4529
4541
|
|
|
4530
|
-
var Img = newStyled.img(templateObject_1$
|
|
4542
|
+
var Img = newStyled.img(templateObject_1$V || (templateObject_1$V = __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; });
|
|
4531
4543
|
var Image = function (_a) {
|
|
4532
4544
|
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;
|
|
4533
4545
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
4534
4546
|
};
|
|
4535
|
-
var templateObject_1$
|
|
4547
|
+
var templateObject_1$V;
|
|
4536
4548
|
|
|
4537
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
4538
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
4539
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4549
|
+
var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
4550
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
4551
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
4540
4552
|
var ImageProductWithTags$1 = function (_a) {
|
|
4541
4553
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4542
4554
|
return (jsxs$1(Container$z, __assign$1({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
4543
4555
|
};
|
|
4544
|
-
var templateObject_1$
|
|
4556
|
+
var templateObject_1$U, templateObject_2$z, templateObject_3$n;
|
|
4545
4557
|
|
|
4546
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
4558
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
4547
4559
|
var ProductGallery = function (_a) {
|
|
4548
4560
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
4549
4561
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -4555,7 +4567,7 @@ var ProductGallery = function (_a) {
|
|
|
4555
4567
|
setSelectedImage(value);
|
|
4556
4568
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
4557
4569
|
};
|
|
4558
|
-
var templateObject_1$
|
|
4570
|
+
var templateObject_1$T;
|
|
4559
4571
|
|
|
4560
4572
|
/* base styles & size variants */
|
|
4561
4573
|
var StarStyles = {
|
|
@@ -4601,8 +4613,8 @@ var StarStyles = {
|
|
|
4601
4613
|
});
|
|
4602
4614
|
},
|
|
4603
4615
|
};
|
|
4604
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
4605
|
-
var templateObject_1$
|
|
4616
|
+
var Container$x = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4617
|
+
var templateObject_1$S;
|
|
4606
4618
|
|
|
4607
4619
|
var StarContainer = newStyled.div(function (_a) {
|
|
4608
4620
|
var size = _a.size, theme = _a.theme;
|
|
@@ -4664,8 +4676,8 @@ var LabelStyles = {
|
|
|
4664
4676
|
});
|
|
4665
4677
|
},
|
|
4666
4678
|
};
|
|
4667
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
4668
|
-
var templateObject_1$
|
|
4679
|
+
var Container$w = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4680
|
+
var templateObject_1$R;
|
|
4669
4681
|
|
|
4670
4682
|
var CustomLabel = newStyled.div(function (_a) {
|
|
4671
4683
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis;
|
|
@@ -4689,8 +4701,8 @@ var Rating = function (_a) {
|
|
|
4689
4701
|
return (jsxs$1(Container$w, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
4690
4702
|
};
|
|
4691
4703
|
|
|
4692
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
4693
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4704
|
+
var Container$v = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
4705
|
+
var P$2 = newStyled.p(templateObject_2$y || (templateObject_2$y = __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; });
|
|
4694
4706
|
var textButtonStyles = function (theme) { return ({
|
|
4695
4707
|
border: 'none',
|
|
4696
4708
|
background: 'transparent',
|
|
@@ -4705,9 +4717,9 @@ var FitPredictor = function (_a) {
|
|
|
4705
4717
|
var theme = useTheme();
|
|
4706
4718
|
return (jsxs(Container$v, __assign$1({ theme: theme }, { children: [jsx(Container$v, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __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));
|
|
4707
4719
|
};
|
|
4708
|
-
var templateObject_1$
|
|
4720
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
4709
4721
|
|
|
4710
|
-
var H2$
|
|
4722
|
+
var H2$2 = newStyled.h2(function (_a) {
|
|
4711
4723
|
var color = _a.color;
|
|
4712
4724
|
return ({
|
|
4713
4725
|
textAlign: 'center',
|
|
@@ -4719,7 +4731,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
4719
4731
|
margin: '0.938rem 4.188rem',
|
|
4720
4732
|
});
|
|
4721
4733
|
});
|
|
4722
|
-
var Bar = newStyled.div(templateObject_1$
|
|
4734
|
+
var Bar = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
4723
4735
|
var backgroundColor = _a.backgroundColor;
|
|
4724
4736
|
return backgroundColor;
|
|
4725
4737
|
}, function (_a) {
|
|
@@ -4756,9 +4768,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
4756
4768
|
var ProgressBar = function (_a) {
|
|
4757
4769
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
4758
4770
|
var theme = useTheme();
|
|
4759
|
-
return (jsxs$1(Container$u, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$
|
|
4771
|
+
return (jsxs$1(Container$u, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
4760
4772
|
};
|
|
4761
|
-
var templateObject_1$
|
|
4773
|
+
var templateObject_1$P;
|
|
4762
4774
|
|
|
4763
4775
|
var getStylesBySize$4 = function (size) {
|
|
4764
4776
|
switch (size) {
|
|
@@ -4779,7 +4791,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
4779
4791
|
};
|
|
4780
4792
|
}
|
|
4781
4793
|
};
|
|
4782
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
4794
|
+
var Container$t = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
4783
4795
|
var backgroundColor = _a.backgroundColor;
|
|
4784
4796
|
return backgroundColor;
|
|
4785
4797
|
}, function (_a) {
|
|
@@ -4809,7 +4821,7 @@ var IconButton = function (_a) {
|
|
|
4809
4821
|
var theme = useTheme();
|
|
4810
4822
|
return (jsx$1(Container$t, __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));
|
|
4811
4823
|
};
|
|
4812
|
-
var templateObject_1$
|
|
4824
|
+
var templateObject_1$O;
|
|
4813
4825
|
|
|
4814
4826
|
var TooltipArrow = function (_a) {
|
|
4815
4827
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -4889,7 +4901,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
4889
4901
|
}
|
|
4890
4902
|
};
|
|
4891
4903
|
|
|
4892
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
4904
|
+
var Wrapper$5 = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
4893
4905
|
var position = _a.position;
|
|
4894
4906
|
return getWrapperFlexDirection(position);
|
|
4895
4907
|
});
|
|
@@ -4913,11 +4925,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
4913
4925
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
4914
4926
|
return actual === expected ? margin : '0';
|
|
4915
4927
|
};
|
|
4916
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
4928
|
+
var ContentWrapper = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
4917
4929
|
var borderColor = _a.borderColor;
|
|
4918
4930
|
return borderColor;
|
|
4919
4931
|
});
|
|
4920
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4932
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __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) {
|
|
4921
4933
|
var position = _a.position;
|
|
4922
4934
|
return getArrowRotation(position);
|
|
4923
4935
|
}, function (_a) {
|
|
@@ -4927,17 +4939,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$l || (templateObject_
|
|
|
4927
4939
|
var position = _a.position;
|
|
4928
4940
|
return getArrowContainerMargin(position);
|
|
4929
4941
|
});
|
|
4930
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
4942
|
+
var TooltipText = newStyled.div(templateObject_4$f || (templateObject_4$f = __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) {
|
|
4931
4943
|
var color = _a.color;
|
|
4932
4944
|
return color;
|
|
4933
4945
|
});
|
|
4934
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
4935
|
-
var Title$
|
|
4946
|
+
var TopSection = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
4947
|
+
var Title$5 = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __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) {
|
|
4936
4948
|
var color = _a.color;
|
|
4937
4949
|
return color;
|
|
4938
4950
|
});
|
|
4939
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
4940
|
-
var templateObject_1$
|
|
4951
|
+
var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
|
|
4952
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$m, templateObject_4$f, templateObject_5$8, templateObject_6$6, templateObject_7$4;
|
|
4941
4953
|
|
|
4942
4954
|
var Tooltip = function (_a) {
|
|
4943
4955
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -4954,7 +4966,7 @@ var Tooltip = function (_a) {
|
|
|
4954
4966
|
var ref = tooltipRef.current;
|
|
4955
4967
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
4956
4968
|
}, [tooltipRef]);
|
|
4957
|
-
return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$
|
|
4969
|
+
return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
4958
4970
|
};
|
|
4959
4971
|
|
|
4960
4972
|
/* base styles & variants */
|
|
@@ -5015,7 +5027,7 @@ var AccordionDetailsStyles = {
|
|
|
5015
5027
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
5016
5028
|
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
|
|
5017
5029
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5018
|
-
var Accordion = function (_a) {
|
|
5030
|
+
var Accordion$1 = function (_a) {
|
|
5019
5031
|
var header = _a.header, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
|
|
5020
5032
|
var theme = useTheme();
|
|
5021
5033
|
return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled }, { children: function (_a) {
|
|
@@ -5089,9 +5101,9 @@ var ContainerStyles = {
|
|
|
5089
5101
|
},
|
|
5090
5102
|
};
|
|
5091
5103
|
|
|
5092
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
5104
|
+
var Wrapper$4 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5093
5105
|
var Container$s = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
5094
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
5106
|
+
var Input$2 = newStyled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
5095
5107
|
var disabled = _a.disabled;
|
|
5096
5108
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5097
5109
|
});
|
|
@@ -5108,7 +5120,7 @@ var RadioInput = function (_a) {
|
|
|
5108
5120
|
};
|
|
5109
5121
|
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$s, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5110
5122
|
};
|
|
5111
|
-
var templateObject_1$
|
|
5123
|
+
var templateObject_1$M, templateObject_2$w;
|
|
5112
5124
|
|
|
5113
5125
|
var RadioGroupInput = function (_a) {
|
|
5114
5126
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -5122,47 +5134,37 @@ var RadioGroupInput = function (_a) {
|
|
|
5122
5134
|
}) }), void 0));
|
|
5123
5135
|
};
|
|
5124
5136
|
|
|
5125
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
5126
|
-
var Container$r = newStyled.div(templateObject_2$
|
|
5127
|
-
var Text$5 = newStyled.h4(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
5128
|
-
var color = _a.color;
|
|
5129
|
-
return color;
|
|
5130
|
-
}, function (_a) {
|
|
5131
|
-
var weight = _a.weight;
|
|
5132
|
-
return (weight ? weight : '400');
|
|
5133
|
-
}, function (_a) {
|
|
5134
|
-
var margin = _a.margin;
|
|
5135
|
-
return (margin ? margin : '0');
|
|
5136
|
-
});
|
|
5137
|
+
var Wrapper$3 = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5138
|
+
var Container$r = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
5137
5139
|
var Minimalistic = function (_a) {
|
|
5138
|
-
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#
|
|
5140
|
+
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;
|
|
5139
5141
|
var theme = useTheme();
|
|
5140
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({
|
|
5142
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$r, __assign$1({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5141
5143
|
};
|
|
5142
|
-
var templateObject_1$
|
|
5144
|
+
var templateObject_1$L, templateObject_2$v;
|
|
5143
5145
|
|
|
5144
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
5145
|
-
var Title$
|
|
5146
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5147
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
5146
|
+
var Container$q = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5147
|
+
var Title$4 = newStyled.h1(templateObject_2$u || (templateObject_2$u = __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; });
|
|
5148
|
+
var Details$1 = newStyled.span(templateObject_3$l || (templateObject_3$l = __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; });
|
|
5149
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
5148
5150
|
var Simple = function (_a) {
|
|
5149
5151
|
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;
|
|
5150
5152
|
var theme = useTheme();
|
|
5151
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$q, { children: [jsx$1(Title$
|
|
5153
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$q, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5152
5154
|
};
|
|
5153
|
-
var templateObject_1$
|
|
5155
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$l, templateObject_4$e;
|
|
5154
5156
|
|
|
5155
5157
|
var Bundle = {
|
|
5156
5158
|
Minimalistic: Minimalistic,
|
|
5157
5159
|
Simple: Simple,
|
|
5158
5160
|
};
|
|
5159
5161
|
|
|
5160
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
5162
|
+
var Container$p = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
5161
5163
|
var Tag$1 = function (_a) {
|
|
5162
5164
|
var text = _a.text, className = _a.className;
|
|
5163
5165
|
return jsx$1(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
5164
5166
|
};
|
|
5165
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$J;
|
|
5166
5168
|
|
|
5167
5169
|
var getStylesBySize$3 = function (size) {
|
|
5168
5170
|
switch (size) {
|
|
@@ -5257,17 +5259,19 @@ var Timer = function (_a) {
|
|
|
5257
5259
|
return seconds - 1;
|
|
5258
5260
|
});
|
|
5259
5261
|
}, 1000);
|
|
5262
|
+
if (secs <= 0)
|
|
5263
|
+
clearInterval(timer);
|
|
5260
5264
|
return function () { return clearInterval(timer); };
|
|
5261
|
-
}, [onTimeUp]);
|
|
5265
|
+
}, [onTimeUp, secs]);
|
|
5262
5266
|
var _d = secondsToTime(secs), hours = _d.hours, minutes = _d.minutes, seconds = _d.seconds;
|
|
5263
5267
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
5264
5268
|
};
|
|
5265
5269
|
|
|
5266
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
5270
|
+
var Label$1 = newStyled.span(templateObject_1$I || (templateObject_1$I = __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) {
|
|
5267
5271
|
var color = _a.color;
|
|
5268
5272
|
return color;
|
|
5269
5273
|
});
|
|
5270
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
5274
|
+
var MandatoryIcon = newStyled.span(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
5271
5275
|
var color = _a.color;
|
|
5272
5276
|
return color;
|
|
5273
5277
|
});
|
|
@@ -5276,7 +5280,7 @@ var InputLabel = function (_a) {
|
|
|
5276
5280
|
var theme = useTheme();
|
|
5277
5281
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
5278
5282
|
};
|
|
5279
|
-
var templateObject_1$
|
|
5283
|
+
var templateObject_1$I, templateObject_2$t;
|
|
5280
5284
|
|
|
5281
5285
|
/**
|
|
5282
5286
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5318,10 +5322,11 @@ var sliceString = function (str, maxLength) {
|
|
|
5318
5322
|
};
|
|
5319
5323
|
|
|
5320
5324
|
var formatPrice = function (value, _a) {
|
|
5321
|
-
var _b
|
|
5322
|
-
var
|
|
5325
|
+
var _b;
|
|
5326
|
+
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
5327
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
5323
5328
|
// this prevents `Intl.NumberFormat` from rounding the number
|
|
5324
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat(fraction.slice(0, 2)));
|
|
5329
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
5325
5330
|
return new Intl.NumberFormat(locale, {
|
|
5326
5331
|
style: 'currency',
|
|
5327
5332
|
currency: currency,
|
|
@@ -5329,20 +5334,20 @@ var formatPrice = function (value, _a) {
|
|
|
5329
5334
|
}).format(valueToFormat);
|
|
5330
5335
|
};
|
|
5331
5336
|
|
|
5332
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5333
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5337
|
+
var ErrorText = newStyled.h3(templateObject_1$H || (templateObject_1$H = __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; });
|
|
5338
|
+
var ErrorContainer = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
5334
5339
|
var Error$1 = function (_a) {
|
|
5335
5340
|
var error = _a.error;
|
|
5336
5341
|
var theme = useTheme();
|
|
5337
5342
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5338
5343
|
};
|
|
5339
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$H, templateObject_2$s;
|
|
5340
5345
|
|
|
5341
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
5346
|
+
var Container$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5342
5347
|
var color = _a.color;
|
|
5343
5348
|
return color;
|
|
5344
5349
|
});
|
|
5345
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
5350
|
+
var StyledInput = newStyled.input(templateObject_2$r || (templateObject_2$r = __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 box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\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 box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
5346
5351
|
var padding = _a.padding;
|
|
5347
5352
|
return padding;
|
|
5348
5353
|
}, function (_a) {
|
|
@@ -5385,11 +5390,11 @@ var StyledInput = newStyled.input(templateObject_2$p || (templateObject_2$p = __
|
|
|
5385
5390
|
var disabledColor = _a.disabledColor;
|
|
5386
5391
|
return disabledColor;
|
|
5387
5392
|
});
|
|
5388
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
5393
|
+
var InputWrapper = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
5389
5394
|
var size = _a.size;
|
|
5390
5395
|
return (size === 'small' ? '36px' : '44px');
|
|
5391
5396
|
});
|
|
5392
|
-
var templateObject_1$
|
|
5397
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$k;
|
|
5393
5398
|
|
|
5394
5399
|
var BaseInput = function (_a) {
|
|
5395
5400
|
var _b;
|
|
@@ -5463,11 +5468,11 @@ var Button$4 = function (_a) {
|
|
|
5463
5468
|
throw new Error("Invalid button variant ".concat(variant));
|
|
5464
5469
|
};
|
|
5465
5470
|
|
|
5466
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
5471
|
+
var Container$n = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
5467
5472
|
var theme = _a.theme;
|
|
5468
5473
|
return theme.component.inputCustom.input.borderRadius;
|
|
5469
5474
|
});
|
|
5470
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
5475
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$q || (templateObject_2$q = __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) {
|
|
5471
5476
|
var theme = _a.theme;
|
|
5472
5477
|
return theme.component.inputCustom.button.borderRadius;
|
|
5473
5478
|
});
|
|
@@ -5482,21 +5487,21 @@ var Custom = function (_a) {
|
|
|
5482
5487
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
5483
5488
|
return (jsx$1(Container$n, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
5484
5489
|
};
|
|
5485
|
-
var templateObject_1$
|
|
5490
|
+
var templateObject_1$F, templateObject_2$q;
|
|
5486
5491
|
|
|
5487
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
5492
|
+
var SuccessContainer = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
5488
5493
|
var size = _a.size;
|
|
5489
5494
|
return (size === 'small' ? '36px' : '');
|
|
5490
5495
|
});
|
|
5491
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
5492
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
5496
|
+
var SuccessMessage = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
5497
|
+
var SuccessText = newStyled.span(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
5493
5498
|
var Success = function (_a) {
|
|
5494
5499
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
5495
5500
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
5496
5501
|
};
|
|
5497
|
-
var templateObject_1$
|
|
5502
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$j;
|
|
5498
5503
|
|
|
5499
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
5504
|
+
var ButtonContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
5500
5505
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
5501
5506
|
return status === InputValidationType.Empty &&
|
|
5502
5507
|
type === 'primary' &&
|
|
@@ -5513,10 +5518,10 @@ var BasePlusButton = function (_a) {
|
|
|
5513
5518
|
}
|
|
5514
5519
|
return (jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
5515
5520
|
};
|
|
5516
|
-
var templateObject_1$
|
|
5521
|
+
var templateObject_1$D;
|
|
5517
5522
|
|
|
5518
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
5519
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
5523
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
5524
|
+
var IconContainer$4 = newStyled.div(templateObject_2$o || (templateObject_2$o = __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; });
|
|
5520
5525
|
var BasePlusIcon = function (_a) {
|
|
5521
5526
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
5522
5527
|
var theme = useTheme();
|
|
@@ -5527,7 +5532,7 @@ var BasePlusIcon = function (_a) {
|
|
|
5527
5532
|
? theme.colors.semantic.urgent.color
|
|
5528
5533
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
5529
5534
|
};
|
|
5530
|
-
var templateObject_1$
|
|
5535
|
+
var templateObject_1$C, templateObject_2$o;
|
|
5531
5536
|
|
|
5532
5537
|
var Input$1 = {
|
|
5533
5538
|
Simple: BaseInput,
|
|
@@ -5536,7 +5541,7 @@ var Input$1 = {
|
|
|
5536
5541
|
SimplePlusIcon: BasePlusIcon,
|
|
5537
5542
|
};
|
|
5538
5543
|
|
|
5539
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
5544
|
+
var Container$l = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
5540
5545
|
var width = _a.width;
|
|
5541
5546
|
return width;
|
|
5542
5547
|
}, function (_a) {
|
|
@@ -5554,9 +5559,9 @@ var PaymentMethod = function (_a) {
|
|
|
5554
5559
|
var theme = useTheme();
|
|
5555
5560
|
return (jsx$1(Container$l, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
5556
5561
|
};
|
|
5557
|
-
var templateObject_1$
|
|
5562
|
+
var templateObject_1$B;
|
|
5558
5563
|
|
|
5559
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
5564
|
+
var Text$4 = newStyled.h3(templateObject_1$A || (templateObject_1$A = __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) {
|
|
5560
5565
|
var backgroundColor = _a.backgroundColor;
|
|
5561
5566
|
return backgroundColor;
|
|
5562
5567
|
}, function (_a) {
|
|
@@ -5568,27 +5573,27 @@ var OfferBanner = function (_a) {
|
|
|
5568
5573
|
var theme = useTheme();
|
|
5569
5574
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5570
5575
|
};
|
|
5571
|
-
var templateObject_1$
|
|
5576
|
+
var templateObject_1$A;
|
|
5572
5577
|
|
|
5573
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
5574
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
5575
|
-
var Currency = newStyled.span(templateObject_3$
|
|
5576
|
-
var Container$k = newStyled.div(templateObject_4$
|
|
5577
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
5578
|
+
var Wrapper$2 = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
5579
|
+
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\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: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
5580
|
+
var Currency = newStyled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
5581
|
+
var Container$k = newStyled.div(templateObject_4$d || (templateObject_4$d = __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; });
|
|
5582
|
+
var Discount = newStyled.h3(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
5578
5583
|
var Total = function (_a) {
|
|
5579
5584
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
5580
5585
|
var theme = useTheme();
|
|
5581
5586
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$k, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
5582
5587
|
};
|
|
5583
|
-
var templateObject_1$
|
|
5588
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$i, templateObject_4$d, templateObject_5$7;
|
|
5584
5589
|
|
|
5585
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
5590
|
+
var Wrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5586
5591
|
var color = _a.color;
|
|
5587
5592
|
return color;
|
|
5588
5593
|
});
|
|
5589
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
5590
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
5591
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
5594
|
+
var ItemContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
5595
|
+
var Item$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
5596
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5592
5597
|
var color = _a.color;
|
|
5593
5598
|
return color;
|
|
5594
5599
|
});
|
|
@@ -5600,22 +5605,22 @@ var Subtotal = function (_a) {
|
|
|
5600
5605
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
5601
5606
|
})] }), void 0));
|
|
5602
5607
|
};
|
|
5603
|
-
var templateObject_1$
|
|
5608
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$h, templateObject_4$c;
|
|
5604
5609
|
|
|
5605
5610
|
var Totals = {
|
|
5606
5611
|
Total: Total,
|
|
5607
5612
|
Subtotal: Subtotal,
|
|
5608
5613
|
};
|
|
5609
5614
|
|
|
5610
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
5611
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
5612
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
5613
|
-
var Details = newStyled.span(templateObject_4$
|
|
5615
|
+
var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __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; });
|
|
5616
|
+
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
5617
|
+
var Text$3 = newStyled.p(templateObject_3$g || (templateObject_3$g = __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; });
|
|
5618
|
+
var Details = newStyled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
5614
5619
|
var Note = function (_a) {
|
|
5615
5620
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
5616
5621
|
return (jsxs$1(Container$j, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color }, { children: [jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
5617
5622
|
};
|
|
5618
|
-
var templateObject_1$
|
|
5623
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b;
|
|
5619
5624
|
|
|
5620
5625
|
/* eslint-disable no-param-reassign */
|
|
5621
5626
|
var index$2 = function (breakpoints) {
|
|
@@ -5697,91 +5702,76 @@ var index$2 = function (breakpoints) {
|
|
|
5697
5702
|
};
|
|
5698
5703
|
};
|
|
5699
5704
|
|
|
5700
|
-
var mediaQueries =
|
|
5701
|
-
|
|
5702
|
-
|
|
5703
|
-
"@media(min-width: ".concat(theme.mediaQueries.mobile, "px)"),
|
|
5704
|
-
"@media(min-width: ".concat(theme.mediaQueries.desktop, "px)"),
|
|
5705
|
-
], { literal: true });
|
|
5706
|
-
};
|
|
5705
|
+
var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px)"], {
|
|
5706
|
+
literal: true,
|
|
5707
|
+
});
|
|
5707
5708
|
|
|
5708
|
-
var Title$
|
|
5709
|
-
var Line = newStyled.div(templateObject_2$
|
|
5710
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
5711
|
-
|
|
5712
|
-
|
|
5713
|
-
|
|
5714
|
-
|
|
5715
|
-
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
});
|
|
5724
|
-
var
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
width: ['auto', '1.375rem'],
|
|
5728
|
-
});
|
|
5729
|
-
});
|
|
5730
|
-
var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __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"])), function (props) {
|
|
5731
|
-
return mediaQueries(props)({
|
|
5732
|
-
display: ['block', 'flex'],
|
|
5733
|
-
});
|
|
5734
|
-
}, function (_a) {
|
|
5709
|
+
var Title$3 = newStyled.h1(templateObject_1$w || (templateObject_1$w = __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; });
|
|
5710
|
+
var Line = newStyled.div(templateObject_2$k || (templateObject_2$k = __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; });
|
|
5711
|
+
var Row$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __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({
|
|
5712
|
+
flexDirection: ['column', 'row'],
|
|
5713
|
+
}));
|
|
5714
|
+
var Col$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __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({
|
|
5715
|
+
margin: ['0', '0 1.25rem'],
|
|
5716
|
+
marginBottom: ['1.875rem', '0'],
|
|
5717
|
+
alignItems: ['center', 'flex-start'],
|
|
5718
|
+
textAlign: ['center', 'inherit'],
|
|
5719
|
+
width: ['100%', 'inherit'],
|
|
5720
|
+
}));
|
|
5721
|
+
var IconContainer$2 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
|
|
5722
|
+
marginBottom: ['1.875rem', '0'],
|
|
5723
|
+
width: ['auto', '1.375rem'],
|
|
5724
|
+
}));
|
|
5725
|
+
var SectionTitle = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __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({
|
|
5726
|
+
display: ['block', 'flex'],
|
|
5727
|
+
}), function (_a) {
|
|
5735
5728
|
var theme = _a.theme;
|
|
5736
5729
|
return theme.colors.shades['700'].color;
|
|
5737
5730
|
});
|
|
5738
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
5739
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
5731
|
+
var SectionDetails = newStyled.p(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"])), function (props) { return props.color; });
|
|
5732
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
5740
5733
|
var DeliveryDetails = function (_a) {
|
|
5741
5734
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
5742
5735
|
var theme = useTheme();
|
|
5743
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$
|
|
5736
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
5744
5737
|
};
|
|
5745
|
-
var templateObject_1$
|
|
5738
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1;
|
|
5746
5739
|
|
|
5747
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
5748
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
5740
|
+
var Container$i = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
5741
|
+
var H1$2 = newStyled.h1(templateObject_2$j || (templateObject_2$j = __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; });
|
|
5749
5742
|
var ScrollToTop = function (_a) {
|
|
5750
5743
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
5751
5744
|
var theme = useTheme();
|
|
5752
5745
|
return (jsxs$1(Container$i, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
5753
5746
|
};
|
|
5754
|
-
var templateObject_1$
|
|
5747
|
+
var templateObject_1$v, templateObject_2$j;
|
|
5755
5748
|
|
|
5756
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
5757
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
5749
|
+
var Container$h = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
5750
|
+
var H1$1 = newStyled.h1(templateObject_2$i || (templateObject_2$i = __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; });
|
|
5758
5751
|
var OrderBar = function (_a) {
|
|
5759
5752
|
var message = _a.message;
|
|
5760
5753
|
var theme = useTheme();
|
|
5761
5754
|
return (jsxs$1(Container$h, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
5762
5755
|
};
|
|
5763
|
-
var templateObject_1$
|
|
5756
|
+
var templateObject_1$u, templateObject_2$i;
|
|
5764
5757
|
|
|
5765
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
5766
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
5767
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
5768
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
5758
|
+
var TableElement = newStyled.table(templateObject_1$t || (templateObject_1$t = __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; });
|
|
5759
|
+
var TableCell = newStyled.td(templateObject_2$h || (templateObject_2$h = __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; });
|
|
5760
|
+
var TableHead = newStyled.th(templateObject_3$e || (templateObject_3$e = __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; });
|
|
5761
|
+
var TableRow = newStyled.tr(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
5769
5762
|
var SizeTable = function (_a) {
|
|
5770
5763
|
var headers = _a.headers, data = _a.data;
|
|
5771
5764
|
var theme = useTheme();
|
|
5772
5765
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
5773
5766
|
};
|
|
5774
|
-
var templateObject_1$
|
|
5775
|
-
|
|
5776
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
5777
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
5778
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
});
|
|
5783
|
-
});
|
|
5784
|
-
var Title$1 = newStyled.h2(function (_a) {
|
|
5767
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9;
|
|
5768
|
+
|
|
5769
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
5770
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5771
|
+
var DescriptionContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __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({
|
|
5772
|
+
marginLeft: ['0.938rem', '1.875rem'],
|
|
5773
|
+
}));
|
|
5774
|
+
var Title$2 = newStyled.h2(function (_a) {
|
|
5785
5775
|
var color = _a.color;
|
|
5786
5776
|
return ({
|
|
5787
5777
|
fontWeight: 600,
|
|
@@ -5801,22 +5791,22 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
5801
5791
|
margin: '0.063rem 0',
|
|
5802
5792
|
});
|
|
5803
5793
|
});
|
|
5804
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
5805
|
-
var withTag = _a.withTag
|
|
5794
|
+
var PriceContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
5795
|
+
var withTag = _a.withTag; _a.theme;
|
|
5806
5796
|
return withTag
|
|
5807
|
-
? mediaQueries({
|
|
5797
|
+
? mediaQueries({
|
|
5808
5798
|
justifyContent: ['space-between', 'end'],
|
|
5809
5799
|
flexDirection: ['row', 'column'],
|
|
5810
5800
|
})
|
|
5811
5801
|
: 'justify-content: end';
|
|
5812
5802
|
});
|
|
5813
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
5803
|
+
var Quantity = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
5814
5804
|
var SimpleOrderItem = function (_a) {
|
|
5815
5805
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
5816
5806
|
var theme = useTheme();
|
|
5817
|
-
return (jsxs$1(Container$g, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$
|
|
5807
|
+
return (jsxs$1(Container$g, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
5818
5808
|
};
|
|
5819
|
-
var templateObject_1$
|
|
5809
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$5;
|
|
5820
5810
|
|
|
5821
5811
|
function formatDate(date) {
|
|
5822
5812
|
var day = date.getDate();
|
|
@@ -5825,47 +5815,32 @@ function formatDate(date) {
|
|
|
5825
5815
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
5826
5816
|
}
|
|
5827
5817
|
|
|
5828
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
5829
|
-
var Heading = newStyled.div(templateObject_2$
|
|
5830
|
-
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
});
|
|
5836
|
-
var
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
var H2 = newStyled.h2(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), function (_a) {
|
|
5849
|
-
var theme = _a.theme;
|
|
5850
|
-
return mediaQueries({ theme: theme })({
|
|
5851
|
-
fontSize: ['16px', '18px'],
|
|
5852
|
-
lineHeight: ['24px', '28px'],
|
|
5853
|
-
});
|
|
5854
|
-
});
|
|
5855
|
-
var H3$1 = newStyled.h3(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), function (_a) {
|
|
5856
|
-
var theme = _a.theme;
|
|
5857
|
-
return mediaQueries({ theme: theme })({
|
|
5858
|
-
fontSize: ['14px', '16px'],
|
|
5859
|
-
lineHeight: ['22px', '24px'],
|
|
5860
|
-
});
|
|
5861
|
-
});
|
|
5862
|
-
var P$1 = newStyled.p(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
5818
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
5819
|
+
var Heading = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
5820
|
+
fontSize: ['14px', '16px'],
|
|
5821
|
+
lineHeight: ['22px', '24px'],
|
|
5822
|
+
}));
|
|
5823
|
+
var Content = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
|
|
5824
|
+
flexDirection: ['column', 'row'],
|
|
5825
|
+
}));
|
|
5826
|
+
var ReviewContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
5827
|
+
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
5828
|
+
}));
|
|
5829
|
+
var H2$1 = newStyled.h2(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
5830
|
+
fontSize: ['16px', '18px'],
|
|
5831
|
+
lineHeight: ['24px', '28px'],
|
|
5832
|
+
}));
|
|
5833
|
+
var H3$1 = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
|
|
5834
|
+
fontSize: ['14px', '16px'],
|
|
5835
|
+
lineHeight: ['22px', '24px'],
|
|
5836
|
+
}));
|
|
5837
|
+
var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
5863
5838
|
var Review = function (_a) {
|
|
5864
5839
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
5865
5840
|
var theme = useTheme();
|
|
5866
|
-
return (jsxs$1(Container$f, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
5841
|
+
return (jsxs$1(Container$f, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
5867
5842
|
};
|
|
5868
|
-
var templateObject_1$
|
|
5843
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$4, templateObject_7$2;
|
|
5869
5844
|
|
|
5870
5845
|
var Button$3 = newStyled.button(function () { return ({
|
|
5871
5846
|
background: 'transparent',
|
|
@@ -10108,14 +10083,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10108
10083
|
return Slider;
|
|
10109
10084
|
}(React__default.Component);
|
|
10110
10085
|
|
|
10111
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10086
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$q || (templateObject_1$q = __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) {
|
|
10112
10087
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10113
10088
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10114
10089
|
}, function (_a) {
|
|
10115
10090
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10116
10091
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10117
10092
|
});
|
|
10118
|
-
var templateObject_1$
|
|
10093
|
+
var templateObject_1$q;
|
|
10119
10094
|
|
|
10120
10095
|
var getStylesBySize$1 = function (size) {
|
|
10121
10096
|
// rem units
|
|
@@ -10174,13 +10149,13 @@ var SliderNavigation = function (_a) {
|
|
|
10174
10149
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
10175
10150
|
};
|
|
10176
10151
|
|
|
10177
|
-
var List = newStyled.ul(templateObject_1$
|
|
10178
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
10179
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
10180
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
10181
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
10182
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
10183
|
-
var templateObject_1$
|
|
10152
|
+
var List = newStyled.ul(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
10153
|
+
var Item$1 = newStyled.li(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
10154
|
+
var DropdownWrapper = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
10155
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
10156
|
+
var StyledDropdown = newStyled.ul(templateObject_5$3 || (templateObject_5$3 = __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; });
|
|
10157
|
+
var DropdownItem = newStyled.li(templateObject_6$3 || (templateObject_6$3 = __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; });
|
|
10158
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3;
|
|
10184
10159
|
|
|
10185
10160
|
var DropdownListIcons = function (_a) {
|
|
10186
10161
|
var items = _a.items;
|
|
@@ -10190,10 +10165,10 @@ var DropdownListIcons = function (_a) {
|
|
|
10190
10165
|
var Dropdown = function (_a) {
|
|
10191
10166
|
var items = _a.items;
|
|
10192
10167
|
var theme = useTheme();
|
|
10193
|
-
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
10168
|
+
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
10194
10169
|
};
|
|
10195
10170
|
|
|
10196
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
10171
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$o || (templateObject_1$o = __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; });
|
|
10197
10172
|
var AmazonButton = function (_a) {
|
|
10198
10173
|
var onClick = _a.onClick;
|
|
10199
10174
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -10202,23 +10177,23 @@ var PaypalButton = function (_a) {
|
|
|
10202
10177
|
var onClick = _a.onClick;
|
|
10203
10178
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
10204
10179
|
};
|
|
10205
|
-
var templateObject_1$
|
|
10180
|
+
var templateObject_1$o;
|
|
10206
10181
|
|
|
10207
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
10208
|
-
var Col = newStyled.div(templateObject_2$
|
|
10209
|
-
var Row = newStyled.div(templateObject_3$
|
|
10182
|
+
var Wrapper = newStyled.div(templateObject_1$n || (templateObject_1$n = __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'); });
|
|
10183
|
+
var Col = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
10184
|
+
var Row = newStyled.div(templateObject_3$a || (templateObject_3$a = __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) {
|
|
10210
10185
|
return props.rightToLeft &&
|
|
10211
10186
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
10212
10187
|
});
|
|
10213
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
10214
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
10215
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
10188
|
+
var H5 = newStyled.h5(templateObject_4$5 || (templateObject_4$5 = __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; });
|
|
10189
|
+
var H3 = newStyled.h3(templateObject_5$2 || (templateObject_5$2 = __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; });
|
|
10190
|
+
var FreeShipping = newStyled.span(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
10216
10191
|
var CrossSellCheckbox = function (_a) {
|
|
10217
10192
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
10218
10193
|
var theme = useTheme();
|
|
10219
10194
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
10220
10195
|
};
|
|
10221
|
-
var templateObject_1$
|
|
10196
|
+
var templateObject_1$n, templateObject_2$d, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2;
|
|
10222
10197
|
|
|
10223
10198
|
var index = /*#__PURE__*/Object.freeze({
|
|
10224
10199
|
__proto__: null,
|
|
@@ -10239,8 +10214,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
10239
10214
|
height: height,
|
|
10240
10215
|
});
|
|
10241
10216
|
});
|
|
10242
|
-
var Container$e = newStyled.a(templateObject_1$
|
|
10243
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
10217
|
+
var Container$e = newStyled.a(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
10218
|
+
var H1 = newStyled.h1(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-size: 0.875rem;\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.875rem;\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; });
|
|
10244
10219
|
var getStylesBySize = function (size) {
|
|
10245
10220
|
switch (size) {
|
|
10246
10221
|
case ComponentSize.Medium:
|
|
@@ -10280,9 +10255,9 @@ var ProductItemMobile = function (_a) {
|
|
|
10280
10255
|
}, [size]);
|
|
10281
10256
|
return (jsxs(Container$e, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10282
10257
|
};
|
|
10283
|
-
var templateObject_1$
|
|
10258
|
+
var templateObject_1$m, templateObject_2$c;
|
|
10284
10259
|
|
|
10285
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
10260
|
+
var Container$d = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
10286
10261
|
function withProductGrid(ProductItemComponent, data) {
|
|
10287
10262
|
function WithProductGrid(props) {
|
|
10288
10263
|
return (jsx$1(Container$d, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -10292,18 +10267,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
10292
10267
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
10293
10268
|
return WithProductGrid;
|
|
10294
10269
|
}
|
|
10295
|
-
var templateObject_1$
|
|
10270
|
+
var templateObject_1$l;
|
|
10296
10271
|
|
|
10297
10272
|
var Collection = {
|
|
10298
10273
|
ProductItemMobile: ProductItemMobile,
|
|
10299
10274
|
withProductGrid: withProductGrid,
|
|
10300
10275
|
};
|
|
10301
10276
|
|
|
10302
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
10277
|
+
var Backdrop = newStyled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
10303
10278
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
10304
10279
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
10305
10280
|
});
|
|
10306
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
10281
|
+
var Sidebar = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\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: 3;\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) {
|
|
10307
10282
|
var width = _a.width;
|
|
10308
10283
|
return width;
|
|
10309
10284
|
}, function (_a) {
|
|
@@ -10344,16 +10319,16 @@ var Drawer = function (_a) {
|
|
|
10344
10319
|
}, [isOpen, onClose, onOpen]);
|
|
10345
10320
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
10346
10321
|
};
|
|
10347
|
-
var templateObject_1$
|
|
10322
|
+
var templateObject_1$k, templateObject_2$b;
|
|
10348
10323
|
|
|
10349
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
10324
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
10350
10325
|
var size = _a.size;
|
|
10351
10326
|
return (size ? size : '100%');
|
|
10352
10327
|
}, function (_a) {
|
|
10353
10328
|
var size = _a.size;
|
|
10354
10329
|
return (size ? size : '100%');
|
|
10355
10330
|
});
|
|
10356
|
-
var Animation = newStyled.div(templateObject_2$
|
|
10331
|
+
var Animation = newStyled.div(templateObject_2$a || (templateObject_2$a = __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) {
|
|
10357
10332
|
var animationDuration = _a.animationDuration;
|
|
10358
10333
|
return animationDuration;
|
|
10359
10334
|
});
|
|
@@ -10361,11 +10336,11 @@ var Spinner = function (_a) {
|
|
|
10361
10336
|
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;
|
|
10362
10337
|
return (jsx$1(Container$c, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
10363
10338
|
};
|
|
10364
|
-
var templateObject_1$
|
|
10339
|
+
var templateObject_1$j, templateObject_2$a;
|
|
10365
10340
|
|
|
10366
|
-
var UL = newStyled.ul(templateObject_1$
|
|
10367
|
-
var LI = newStyled.li(templateObject_2$
|
|
10368
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
10341
|
+
var UL = newStyled.ul(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
10342
|
+
var LI = newStyled.li(templateObject_2$9 || (templateObject_2$9 = __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; });
|
|
10343
|
+
var CloseIconContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
10369
10344
|
var Tags = function (_a) {
|
|
10370
10345
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
10371
10346
|
var theme = useTheme();
|
|
@@ -10373,7 +10348,7 @@ var Tags = function (_a) {
|
|
|
10373
10348
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
10374
10349
|
}) }), void 0));
|
|
10375
10350
|
};
|
|
10376
|
-
var templateObject_1$
|
|
10351
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$9;
|
|
10377
10352
|
|
|
10378
10353
|
function FilteringDropdown(_a) {
|
|
10379
10354
|
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;
|
|
@@ -10406,15 +10381,12 @@ function FilteringDropdown(_a) {
|
|
|
10406
10381
|
}) }, void 0)] }), void 0));
|
|
10407
10382
|
}
|
|
10408
10383
|
|
|
10409
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
10410
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
10411
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
10412
|
-
|
|
10413
|
-
|
|
10414
|
-
|
|
10415
|
-
});
|
|
10416
|
-
});
|
|
10417
|
-
var PageNumber = newStyled.span(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
10384
|
+
var Container$b = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
10385
|
+
var IconContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
10386
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
10387
|
+
margin: ['0 0.75rem', '0 1.25rem'],
|
|
10388
|
+
}));
|
|
10389
|
+
var PageNumber = newStyled.span(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
10418
10390
|
var bold = _a.bold;
|
|
10419
10391
|
return (bold ? '700' : '500');
|
|
10420
10392
|
}, function (_a) {
|
|
@@ -10423,15 +10395,12 @@ var PageNumber = newStyled.span(templateObject_4$3 || (templateObject_4$3 = __ma
|
|
|
10423
10395
|
}, function (_a) {
|
|
10424
10396
|
var underline = _a.underline, borderColor = _a.borderColor;
|
|
10425
10397
|
return underline ? "0.063rem solid ".concat(borderColor) : 'none';
|
|
10426
|
-
},
|
|
10427
|
-
|
|
10428
|
-
|
|
10429
|
-
|
|
10430
|
-
|
|
10431
|
-
|
|
10432
|
-
});
|
|
10433
|
-
});
|
|
10434
|
-
var templateObject_1$f, templateObject_2$6, templateObject_3$6, templateObject_4$3;
|
|
10398
|
+
}, mediaQueries({
|
|
10399
|
+
fontSize: ['1rem', '1.25rem'],
|
|
10400
|
+
lineHeight: ['1.5rem', '1.75rem'],
|
|
10401
|
+
width: ['1.25rem', '1.875rem'],
|
|
10402
|
+
}));
|
|
10403
|
+
var templateObject_1$h, templateObject_2$8, templateObject_3$8, templateObject_4$4;
|
|
10435
10404
|
|
|
10436
10405
|
var Pagination = function (_a) {
|
|
10437
10406
|
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;
|
|
@@ -10447,11 +10416,9 @@ var Pagination = function (_a) {
|
|
|
10447
10416
|
return (jsxs$1(Container$b, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
10448
10417
|
};
|
|
10449
10418
|
|
|
10450
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
10451
|
-
|
|
10452
|
-
|
|
10453
|
-
});
|
|
10454
|
-
});
|
|
10419
|
+
var Container$a = newStyled.div(templateObject_1$g || (templateObject_1$g = __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({
|
|
10420
|
+
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
10421
|
+
}));
|
|
10455
10422
|
var Description$1 = newStyled.div({
|
|
10456
10423
|
display: 'flex',
|
|
10457
10424
|
flexDirection: 'column',
|
|
@@ -10466,9 +10433,9 @@ var Description$1 = newStyled.div({
|
|
|
10466
10433
|
var ProductItem = function (_a) {
|
|
10467
10434
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
10468
10435
|
var theme = useTheme();
|
|
10469
|
-
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$
|
|
10436
|
+
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
10470
10437
|
};
|
|
10471
|
-
var templateObject_1$
|
|
10438
|
+
var templateObject_1$g;
|
|
10472
10439
|
|
|
10473
10440
|
var Container$9 = newStyled.div({
|
|
10474
10441
|
display: 'flex',
|
|
@@ -10477,19 +10444,17 @@ var Container$9 = newStyled.div({
|
|
|
10477
10444
|
});
|
|
10478
10445
|
var Footer = function (_a) {
|
|
10479
10446
|
var text = _a.text, onClick = _a.onClick;
|
|
10480
|
-
return (jsx$1(Container$9, { children: jsx$1(Text$
|
|
10447
|
+
return (jsx$1(Container$9, { children: jsx$1(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
10481
10448
|
};
|
|
10482
10449
|
|
|
10483
10450
|
var Ul = newStyled.ul({
|
|
10484
10451
|
margin: '0px',
|
|
10485
10452
|
padding: '0px',
|
|
10486
10453
|
});
|
|
10487
|
-
var Li = newStyled.li(templateObject_1$
|
|
10488
|
-
|
|
10489
|
-
|
|
10490
|
-
|
|
10491
|
-
});
|
|
10492
|
-
});
|
|
10454
|
+
var Li = newStyled.li(templateObject_1$f || (templateObject_1$f = __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({
|
|
10455
|
+
padding: [0, '0rem 1rem'],
|
|
10456
|
+
borderRadius: [0, '0.5rem'],
|
|
10457
|
+
}));
|
|
10493
10458
|
var Button$2 = newStyled.button({
|
|
10494
10459
|
width: '100%',
|
|
10495
10460
|
border: 'none',
|
|
@@ -10497,23 +10462,20 @@ var Button$2 = newStyled.button({
|
|
|
10497
10462
|
cursor: 'pointer',
|
|
10498
10463
|
padding: 0,
|
|
10499
10464
|
});
|
|
10500
|
-
var Container$8 = newStyled.div(templateObject_2$
|
|
10501
|
-
|
|
10502
|
-
|
|
10503
|
-
|
|
10504
|
-
|
|
10505
|
-
|
|
10506
|
-
|
|
10507
|
-
|
|
10508
|
-
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
10509
|
-
});
|
|
10510
|
-
});
|
|
10465
|
+
var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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({
|
|
10466
|
+
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
10467
|
+
marginTop: ['1.25rem', '0.125rem'],
|
|
10468
|
+
borderRadius: ['0', '0.5rem'],
|
|
10469
|
+
}));
|
|
10470
|
+
var Header$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
10471
|
+
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
10472
|
+
}));
|
|
10511
10473
|
var ResultsPanel = function (_a) {
|
|
10512
10474
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10513
10475
|
var theme = useTheme();
|
|
10514
|
-
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
10476
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
10515
10477
|
};
|
|
10516
|
-
var templateObject_1$
|
|
10478
|
+
var templateObject_1$f, templateObject_2$7, templateObject_3$7;
|
|
10517
10479
|
|
|
10518
10480
|
var Input = newStyled.input(function (props) { return ({
|
|
10519
10481
|
padding: props.theme.component.input.padding,
|
|
@@ -10544,17 +10506,16 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
10544
10506
|
},
|
|
10545
10507
|
}); });
|
|
10546
10508
|
|
|
10547
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
10548
|
-
|
|
10549
|
-
|
|
10550
|
-
|
|
10551
|
-
});
|
|
10509
|
+
var Button$1 = newStyled.button(templateObject_1$e || (templateObject_1$e = __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({
|
|
10510
|
+
right: ['1rem', '-3.75rem'],
|
|
10511
|
+
top: ['0.75rem', '0'],
|
|
10512
|
+
}));
|
|
10552
10513
|
var ClearButton = function (_a) {
|
|
10553
10514
|
var onClick = _a.onClick;
|
|
10554
10515
|
var theme = useTheme();
|
|
10555
10516
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
10556
10517
|
};
|
|
10557
|
-
var templateObject_1$
|
|
10518
|
+
var templateObject_1$e;
|
|
10558
10519
|
|
|
10559
10520
|
var useOnClickOutside = function (ref, handler) {
|
|
10560
10521
|
useEffect(function () {
|
|
@@ -10633,7 +10594,7 @@ var reducer = function (state, action) {
|
|
|
10633
10594
|
return __assign$1(__assign$1({}, state), { term: action.payload.term });
|
|
10634
10595
|
}
|
|
10635
10596
|
case 'UPDATE_OPTION': {
|
|
10636
|
-
return __assign$1(__assign$1({}, state), { selectedOption: action.payload.selectedOption, term: action.payload.selectedOption.title, open: false });
|
|
10597
|
+
return __assign$1(__assign$1({}, state), { selectedOption: action.payload.selectedOption, term: action.payload.selectedOption.title.replaceAll(/(<([^>]+)>)/gi, ''), open: false });
|
|
10637
10598
|
}
|
|
10638
10599
|
case 'TOGGLE_PANEL': {
|
|
10639
10600
|
return __assign$1(__assign$1({}, state), { open: action.payload.open });
|
|
@@ -10648,10 +10609,13 @@ var Container$7 = newStyled.div({
|
|
|
10648
10609
|
display: 'flex',
|
|
10649
10610
|
});
|
|
10650
10611
|
var SearchBar = function (_a) {
|
|
10651
|
-
var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId;
|
|
10612
|
+
var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults;
|
|
10652
10613
|
var theme = useTheme();
|
|
10653
10614
|
var _b = useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
|
|
10654
10615
|
var ref = useRef(null);
|
|
10616
|
+
var shouldDisplaySuggestion = function () {
|
|
10617
|
+
return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
|
|
10618
|
+
};
|
|
10655
10619
|
useOnClickOutside(ref, function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: false } }); });
|
|
10656
10620
|
useEffect(function () {
|
|
10657
10621
|
// Debouncing user input
|
|
@@ -10660,8 +10624,12 @@ var SearchBar = function (_a) {
|
|
|
10660
10624
|
}, 500);
|
|
10661
10625
|
return function () { return clearTimeout(id); };
|
|
10662
10626
|
}, [onChange, state.term]);
|
|
10663
|
-
var options = resultOptions && resultOptions.length > 0
|
|
10664
|
-
|
|
10627
|
+
var options = resultOptions && resultOptions.length > 0
|
|
10628
|
+
? resultOptions
|
|
10629
|
+
: shouldDisplaySuggestion()
|
|
10630
|
+
? suggestions
|
|
10631
|
+
: [];
|
|
10632
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$7, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onClick: function (value) {
|
|
10665
10633
|
onSearch(value.title);
|
|
10666
10634
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
10667
10635
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -10932,23 +10900,23 @@ function useSwipeable(options) {
|
|
|
10932
10900
|
return handlers;
|
|
10933
10901
|
}
|
|
10934
10902
|
|
|
10935
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
10936
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
10937
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
10903
|
+
var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n"], ["\n position: relative;\n max-height: 31.875rem;\n"])));
|
|
10904
|
+
var TopTagContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10905
|
+
var BottomTagContainer = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10938
10906
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
10939
10907
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
10940
10908
|
return (jsxs$1(Container$6, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
10941
10909
|
});
|
|
10942
|
-
var templateObject_1$
|
|
10910
|
+
var templateObject_1$d, templateObject_2$6, templateObject_3$6;
|
|
10943
10911
|
|
|
10944
|
-
var Button = newStyled.button(templateObject_1$
|
|
10912
|
+
var Button = newStyled.button(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"])));
|
|
10945
10913
|
var ArrowButton = function (_a) {
|
|
10946
10914
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
10947
10915
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
10948
10916
|
};
|
|
10949
|
-
var templateObject_1$
|
|
10917
|
+
var templateObject_1$c;
|
|
10950
10918
|
|
|
10951
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
10919
|
+
var Container$5 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
10952
10920
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
10953
10921
|
var SlideDots = function (_a) {
|
|
10954
10922
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -10957,11 +10925,11 @@ var SlideDots = function (_a) {
|
|
|
10957
10925
|
? theme.colors.shades.white.color
|
|
10958
10926
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
10959
10927
|
};
|
|
10960
|
-
var templateObject_1$
|
|
10928
|
+
var templateObject_1$b;
|
|
10961
10929
|
|
|
10962
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
10963
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
10964
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
10930
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
10931
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
10932
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
10965
10933
|
var SlideNavigation = function (_a) {
|
|
10966
10934
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
10967
10935
|
var theme = useTheme();
|
|
@@ -10973,9 +10941,9 @@ var SlideNavigation = function (_a) {
|
|
|
10973
10941
|
onNavigate(selectedIndex + 1);
|
|
10974
10942
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
10975
10943
|
};
|
|
10976
|
-
var templateObject_1$
|
|
10944
|
+
var templateObject_1$a, templateObject_2$5, templateObject_3$5;
|
|
10977
10945
|
|
|
10978
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
10946
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
10979
10947
|
var ProductGalleryMobile = function (_a) {
|
|
10980
10948
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
10981
10949
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -11005,7 +10973,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
11005
10973
|
}, [index, images]);
|
|
11006
10974
|
return (jsxs$1(Container$4, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
11007
10975
|
};
|
|
11008
|
-
var templateObject_1$
|
|
10976
|
+
var templateObject_1$9;
|
|
11009
10977
|
|
|
11010
10978
|
var Portal = function (_a) {
|
|
11011
10979
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -11128,21 +11096,20 @@ var react = __toCommonJS(react_exports);
|
|
|
11128
11096
|
var visibleStyle = function (_a) {
|
|
11129
11097
|
var opened = _a.opened;
|
|
11130
11098
|
return opened
|
|
11131
|
-
? css(templateObject_1$
|
|
11099
|
+
? css(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "], ["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "]))) : css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "], ["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "])));
|
|
11132
11100
|
};
|
|
11133
|
-
var Container$3 = newStyled.div(templateObject_3$
|
|
11134
|
-
|
|
11101
|
+
var Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n max-width: 90vw;\n max-height: 90vh;\n width: fit-content;\n ", "\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n max-width: 90vw;\n max-height: 90vh;\n width: fit-content;\n ", "\n\n ", ";\n"])), mediaQueries({
|
|
11102
|
+
minWidth: ['50%', 'var(--component-modal-minWidth)'],
|
|
11103
|
+
}), visibleStyle);
|
|
11104
|
+
var Overlay = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\n"])), visibleStyle);
|
|
11135
11105
|
var Modal = function (_a) {
|
|
11136
11106
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
11137
|
-
var _c =
|
|
11138
|
-
useModalEvent(id, useCallback(function (e) {
|
|
11139
|
-
setOpened(e.detail.type === 'open');
|
|
11140
|
-
}, []));
|
|
11107
|
+
var _c = useModal(id), opened = _c.opened, close = _c.close;
|
|
11141
11108
|
var onDismiss = function () {
|
|
11142
11109
|
if (!dismissable) {
|
|
11143
11110
|
return;
|
|
11144
11111
|
}
|
|
11145
|
-
|
|
11112
|
+
close();
|
|
11146
11113
|
};
|
|
11147
11114
|
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$3, __assign$1({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
11148
11115
|
};
|
|
@@ -11157,52 +11124,67 @@ var useModalEvent = function (id, cb) {
|
|
|
11157
11124
|
cb(event);
|
|
11158
11125
|
}, [id, cb]));
|
|
11159
11126
|
};
|
|
11160
|
-
var
|
|
11127
|
+
var useModal = function (id) {
|
|
11128
|
+
var _a = useState(false), opened = _a[0], setOpened = _a[1];
|
|
11129
|
+
useModalEvent(id, useCallback(function (event) { return setOpened(event.detail.type === 'open'); }, []));
|
|
11130
|
+
var open = useCallback(function () {
|
|
11131
|
+
modalEvent(id, { type: 'open' });
|
|
11132
|
+
}, [id]);
|
|
11133
|
+
var close = useCallback(function () {
|
|
11134
|
+
modalEvent(id, { type: 'close' });
|
|
11135
|
+
}, [id]);
|
|
11136
|
+
return useMemo(function () { return ({
|
|
11137
|
+
opened: opened,
|
|
11138
|
+
open: open,
|
|
11139
|
+
close: close,
|
|
11140
|
+
}); }, [close, open, opened]);
|
|
11141
|
+
};
|
|
11142
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11161
11143
|
|
|
11162
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
11163
|
-
var Title = function (_a) {
|
|
11144
|
+
var Text$2 = newStyled.span(templateObject_1$7 || (templateObject_1$7 = __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; });
|
|
11145
|
+
var Title$1 = function (_a) {
|
|
11164
11146
|
var title = _a.title;
|
|
11165
11147
|
var theme = useTheme();
|
|
11166
11148
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
11167
11149
|
};
|
|
11168
|
-
var templateObject_1$
|
|
11150
|
+
var templateObject_1$7;
|
|
11169
11151
|
|
|
11170
|
-
var P = newStyled.p(templateObject_1$
|
|
11152
|
+
var P = newStyled.p(templateObject_1$6 || (templateObject_1$6 = __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; });
|
|
11171
11153
|
var Promo = function (_a) {
|
|
11172
11154
|
var text = _a.text;
|
|
11173
11155
|
var theme = useTheme();
|
|
11174
11156
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
11175
11157
|
};
|
|
11176
|
-
var templateObject_1$
|
|
11158
|
+
var templateObject_1$6;
|
|
11177
11159
|
|
|
11178
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
11160
|
+
var Text$1 = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __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; });
|
|
11179
11161
|
var Description = function (_a) {
|
|
11180
11162
|
var text = _a.text;
|
|
11181
11163
|
var theme = useTheme();
|
|
11182
11164
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
11183
11165
|
};
|
|
11184
|
-
var templateObject_1$
|
|
11166
|
+
var templateObject_1$5;
|
|
11185
11167
|
|
|
11186
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
11168
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"); });
|
|
11187
11169
|
var CloseButton = function (_a) {
|
|
11188
11170
|
var onClick = _a.onClick, size = _a.size;
|
|
11189
11171
|
var theme = useTheme();
|
|
11190
11172
|
return (jsx$1(Container$2, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
11191
11173
|
};
|
|
11192
|
-
var templateObject_1$
|
|
11174
|
+
var templateObject_1$4;
|
|
11193
11175
|
|
|
11194
11176
|
var CartProductItem = {
|
|
11195
|
-
Title: Title,
|
|
11177
|
+
Title: Title$1,
|
|
11196
11178
|
Tag: OfferBanner,
|
|
11197
11179
|
Promo: Promo,
|
|
11198
11180
|
Description: Description,
|
|
11199
11181
|
CloseButton: CloseButton,
|
|
11200
11182
|
};
|
|
11201
11183
|
|
|
11202
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
11203
|
-
var Item = newStyled.span(templateObject_2$
|
|
11204
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
11205
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
11184
|
+
var Container$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
11185
|
+
var Item = newStyled.span(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
11186
|
+
var Number$1 = newStyled(Item)(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
11187
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
11206
11188
|
var QuantityPicker = function (_a) {
|
|
11207
11189
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, onChange = _a.onChange;
|
|
11208
11190
|
var theme = useTheme();
|
|
@@ -11227,7 +11209,7 @@ var QuantityPicker = function (_a) {
|
|
|
11227
11209
|
}, [value, clamp]);
|
|
11228
11210
|
return (jsxs$1(Container$1, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsx$1(IncreaseDecrease, __assign$1({ onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
11229
11211
|
};
|
|
11230
|
-
var templateObject_1$
|
|
11212
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2;
|
|
11231
11213
|
|
|
11232
11214
|
var htmlReactParser = {exports: {}};
|
|
11233
11215
|
|
|
@@ -15008,13 +14990,13 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
15008
14990
|
HTMLReactParser$1.attributesToProps;
|
|
15009
14991
|
HTMLReactParser$1.Element;
|
|
15010
14992
|
|
|
15011
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n"])));
|
|
15012
|
-
var Card = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --
|
|
15013
|
-
var Tag = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top:
|
|
15014
|
-
var Label = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
15015
|
-
var Check = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n width:
|
|
15016
|
-
var IconContainer = newStyled.div(templateObject_6 || (templateObject_6 = __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"])));
|
|
15017
|
-
var IconPlaceholder = newStyled.div(templateObject_7 || (templateObject_7 = __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"])));
|
|
14993
|
+
var Container = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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"])));
|
|
14994
|
+
var Card = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
14995
|
+
var Tag = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
14996
|
+
var Label = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
14997
|
+
var Check = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
14998
|
+
var IconContainer = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
14999
|
+
var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __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"])));
|
|
15018
15000
|
var PackSelector = function (_a) {
|
|
15019
15001
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
15020
15002
|
return (jsx$1(Container, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -15030,9 +15012,65 @@ var PackCard = function (_a) {
|
|
|
15030
15012
|
.then(function (icon) { return setIcon(icon); })
|
|
15031
15013
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
15032
15014
|
}, [pack.meta.icon]);
|
|
15033
|
-
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
15015
|
+
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
15016
|
+
color: 'var(--colors-semantic-urgent-color)',
|
|
15017
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15034
15018
|
};
|
|
15035
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
15019
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
15020
|
+
|
|
15021
|
+
var Title = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __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; });
|
|
15022
|
+
var H2 = newStyled.h2(templateObject_2$1 || (templateObject_2$1 = __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; });
|
|
15023
|
+
var ArrowContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
15024
|
+
var Accordion = function (_a) {
|
|
15025
|
+
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
15026
|
+
var theme = useTheme();
|
|
15027
|
+
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
15028
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
15029
|
+
};
|
|
15030
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
15031
|
+
|
|
15032
|
+
var SectionContent = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
15033
|
+
var Header = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
15034
|
+
var MobileHeader = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
15035
|
+
var MobileIconsContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
15036
|
+
var H4 = newStyled.h4(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
15037
|
+
var ClearAll = newStyled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
15038
|
+
var MobileFooter = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
15039
|
+
var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
15040
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
15041
|
+
|
|
15042
|
+
var Filters = function (_a) {
|
|
15043
|
+
var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick;
|
|
15044
|
+
var theme = useTheme();
|
|
15045
|
+
var _c = React__default.useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
|
|
15046
|
+
var handleCheckboxClick = useCallback(function (_a) {
|
|
15047
|
+
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
|
|
15048
|
+
onChange({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15049
|
+
setCheckedItems(function (prev) {
|
|
15050
|
+
return checked
|
|
15051
|
+
? __spreadArray(__spreadArray([], prev, true), [{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex] }], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
15052
|
+
});
|
|
15053
|
+
}, [filters, onChange]);
|
|
15054
|
+
var handleCloseClick = function (_a) {
|
|
15055
|
+
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
|
|
15056
|
+
var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
|
|
15057
|
+
simulateMouseClick(element);
|
|
15058
|
+
};
|
|
15059
|
+
var handleClearAllClick = function () {
|
|
15060
|
+
checkedItems.forEach(function (item) {
|
|
15061
|
+
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
15062
|
+
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
15063
|
+
});
|
|
15064
|
+
};
|
|
15065
|
+
return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
15066
|
+
};
|
|
15067
|
+
var FilterCheckbox = function (_a) {
|
|
15068
|
+
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange;
|
|
15069
|
+
var onChange = useCallback(function (checked) {
|
|
15070
|
+
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15071
|
+
}, [sectionIndex, itemIndex, onChangeProp]);
|
|
15072
|
+
return (jsx$1(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
15073
|
+
};
|
|
15036
15074
|
|
|
15037
|
-
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$
|
|
15075
|
+
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
15038
15076
|
//# sourceMappingURL=index.esm.js.map
|