@trafilea/afrodita-components 5.0.0-beta.10 → 5.0.0-beta.13
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 +18 -3
- package/build/index.esm.js +384 -403
- package/build/index.esm.js.map +1 -1
- package/build/index.js +385 -402
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3356,7 +3356,7 @@ var InputValidationType;
|
|
|
3356
3356
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3357
3357
|
})(InputValidationType || (InputValidationType = {}));
|
|
3358
3358
|
|
|
3359
|
-
var Section = newStyled.div(templateObject_1$
|
|
3359
|
+
var Section = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
3360
3360
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3361
3361
|
});
|
|
3362
3362
|
var CardHeader = function (_a) {
|
|
@@ -3367,14 +3367,14 @@ var CardFooter = function (_a) {
|
|
|
3367
3367
|
var children = _a.children;
|
|
3368
3368
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3369
3369
|
};
|
|
3370
|
-
var templateObject_1$
|
|
3370
|
+
var templateObject_1$19;
|
|
3371
3371
|
|
|
3372
|
-
var Body = newStyled.div(templateObject_1$
|
|
3372
|
+
var Body = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
3373
3373
|
var CardBody = function (_a) {
|
|
3374
3374
|
var children = _a.children;
|
|
3375
3375
|
return jsx$1(Body, { children: children }, void 0);
|
|
3376
3376
|
};
|
|
3377
|
-
var templateObject_1$
|
|
3377
|
+
var templateObject_1$18;
|
|
3378
3378
|
|
|
3379
3379
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3380
3380
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3519,7 +3519,7 @@ var AssetsProvider = function (_a) {
|
|
|
3519
3519
|
};
|
|
3520
3520
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3521
3521
|
|
|
3522
|
-
var Container$
|
|
3522
|
+
var Container$H = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
3523
3523
|
var flex = _a.flex;
|
|
3524
3524
|
return flex &&
|
|
3525
3525
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3532,14 +3532,14 @@ var Container$G = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __
|
|
|
3532
3532
|
var Card$1 = function (_a) {
|
|
3533
3533
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3534
3534
|
var theme = useTheme();
|
|
3535
|
-
return (jsx$1(Container$
|
|
3535
|
+
return (jsx$1(Container$H, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3536
3536
|
};
|
|
3537
3537
|
var Card$2 = Object.assign(Card$1, {
|
|
3538
3538
|
Header: CardHeader,
|
|
3539
3539
|
Footer: CardFooter,
|
|
3540
3540
|
Body: CardBody,
|
|
3541
3541
|
});
|
|
3542
|
-
var templateObject_1$
|
|
3542
|
+
var templateObject_1$17;
|
|
3543
3543
|
|
|
3544
3544
|
var Fragment = Fragment$1;
|
|
3545
3545
|
function jsx(type, props, key) {
|
|
@@ -3679,7 +3679,7 @@ function BaseSelectOption(_a) {
|
|
|
3679
3679
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3680
3680
|
}
|
|
3681
3681
|
|
|
3682
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3682
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3683
3683
|
function BaseSelect(_a) {
|
|
3684
3684
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3685
3685
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3689,7 +3689,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3689
3689
|
Options: BaseSelectOptions,
|
|
3690
3690
|
Option: BaseSelectOption,
|
|
3691
3691
|
});
|
|
3692
|
-
var templateObject_1$
|
|
3692
|
+
var templateObject_1$16;
|
|
3693
3693
|
|
|
3694
3694
|
var CustomButton = newStyled.button(function (_a) {
|
|
3695
3695
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -3902,12 +3902,12 @@ var CustomCheckboxStyles = {
|
|
|
3902
3902
|
},
|
|
3903
3903
|
};
|
|
3904
3904
|
|
|
3905
|
-
var Container$
|
|
3905
|
+
var Container$G = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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"])));
|
|
3906
3906
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
3907
3907
|
CustomCheckboxStyles[props.size](props.theme),
|
|
3908
3908
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
3909
3909
|
]; });
|
|
3910
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
3910
|
+
var Input$3 = newStyled.input(templateObject_2$I || (templateObject_2$I = __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) {
|
|
3911
3911
|
var disabled = _a.disabled;
|
|
3912
3912
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
3913
3913
|
});
|
|
@@ -3931,9 +3931,9 @@ var Checkbox = function (_a) {
|
|
|
3931
3931
|
useEffect(function () {
|
|
3932
3932
|
mounted.current = true;
|
|
3933
3933
|
}, []);
|
|
3934
|
-
return (jsxs$1(Container$
|
|
3934
|
+
return (jsxs$1(Container$G, { 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));
|
|
3935
3935
|
};
|
|
3936
|
-
var templateObject_1$
|
|
3936
|
+
var templateObject_1$15, templateObject_2$I;
|
|
3937
3937
|
|
|
3938
3938
|
var CustomOption = newStyled.li(function (_a) {
|
|
3939
3939
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4063,11 +4063,11 @@ var SelectorSecondary = function (_a) {
|
|
|
4063
4063
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4064
4064
|
// `variants` styles that are consistent through all themes.
|
|
4065
4065
|
var TAGS = {
|
|
4066
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4067
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4068
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4069
|
-
display1: newStyled.h1(templateObject_4$
|
|
4070
|
-
display2: newStyled.h2(templateObject_5$
|
|
4066
|
+
hero1: newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""]))),
|
|
4067
|
+
hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
|
|
4068
|
+
hero3: newStyled.h3(templateObject_3$s || (templateObject_3$s = __makeTemplateObject([""], [""]))),
|
|
4069
|
+
display1: newStyled.h1(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""]))),
|
|
4070
|
+
display2: newStyled.h2(templateObject_5$b || (templateObject_5$b = __makeTemplateObject([""], [""]))),
|
|
4071
4071
|
heading1: newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject([""], [""]))),
|
|
4072
4072
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4073
4073
|
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4186,9 +4186,9 @@ var DEFAULTS = {
|
|
|
4186
4186
|
size: 'regular',
|
|
4187
4187
|
},
|
|
4188
4188
|
};
|
|
4189
|
-
var templateObject_1$
|
|
4189
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$b, 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;
|
|
4190
4190
|
|
|
4191
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4191
|
+
var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
4192
4192
|
var inline = _a.inline;
|
|
4193
4193
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4194
4194
|
});
|
|
@@ -4206,7 +4206,7 @@ var SizeSelector = function (_a) {
|
|
|
4206
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));
|
|
4207
4207
|
}) }), void 0)] }), void 0));
|
|
4208
4208
|
};
|
|
4209
|
-
var templateObject_1$
|
|
4209
|
+
var templateObject_1$13;
|
|
4210
4210
|
|
|
4211
4211
|
var getStylesBySize$7 = function (size) {
|
|
4212
4212
|
switch (size) {
|
|
@@ -4235,7 +4235,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4235
4235
|
} });
|
|
4236
4236
|
};
|
|
4237
4237
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4238
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4238
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$12 || (templateObject_1$12 = __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));
|
|
4239
4239
|
};
|
|
4240
4240
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4241
4241
|
if (disabled)
|
|
@@ -4251,16 +4251,16 @@ var TextButton = function (_a) {
|
|
|
4251
4251
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4252
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));
|
|
4253
4253
|
};
|
|
4254
|
-
var templateObject_1$
|
|
4254
|
+
var templateObject_1$12;
|
|
4255
4255
|
|
|
4256
|
-
var Container$
|
|
4257
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4258
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4256
|
+
var Container$F = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4258
|
+
var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
4259
4259
|
var SizeFitGuide = function (_a) {
|
|
4260
|
-
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
4261
|
-
return (jsxs$1(Container$
|
|
4260
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4261
|
+
return (jsxs$1(Container$F, { 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));
|
|
4262
4262
|
};
|
|
4263
|
-
var templateObject_1$
|
|
4263
|
+
var templateObject_1$11, templateObject_2$G, templateObject_3$r;
|
|
4264
4264
|
|
|
4265
4265
|
var getStylesBySize$6 = function (size) {
|
|
4266
4266
|
switch (size) {
|
|
@@ -4290,7 +4290,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4290
4290
|
};
|
|
4291
4291
|
}
|
|
4292
4292
|
};
|
|
4293
|
-
var Container$
|
|
4293
|
+
var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
4294
4294
|
var backgroundColor = _a.backgroundColor;
|
|
4295
4295
|
return backgroundColor;
|
|
4296
4296
|
}, function (_a) {
|
|
@@ -4312,7 +4312,7 @@ var Container$D = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __ma
|
|
|
4312
4312
|
var size = _a.size;
|
|
4313
4313
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4314
4314
|
});
|
|
4315
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4315
|
+
var H3$2 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __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) {
|
|
4316
4316
|
var textColor = _a.textColor;
|
|
4317
4317
|
return textColor;
|
|
4318
4318
|
}, function (_a) {
|
|
@@ -4327,9 +4327,9 @@ var H3$2 = newStyled.h3(templateObject_2$E || (templateObject_2$E = __makeTempla
|
|
|
4327
4327
|
var DiscountTag = function (_a) {
|
|
4328
4328
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
4329
4329
|
var theme = useTheme();
|
|
4330
|
-
return (jsx$1(Container$
|
|
4330
|
+
return (jsx$1(Container$E, __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));
|
|
4331
4331
|
};
|
|
4332
|
-
var templateObject_1
|
|
4332
|
+
var templateObject_1$10, templateObject_2$F;
|
|
4333
4333
|
|
|
4334
4334
|
var getStylesBySize$5 = function (size) {
|
|
4335
4335
|
switch (size) {
|
|
@@ -4353,8 +4353,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4353
4353
|
};
|
|
4354
4354
|
}
|
|
4355
4355
|
};
|
|
4356
|
-
var Container$
|
|
4357
|
-
var Price = newStyled.h1(templateObject_2$
|
|
4356
|
+
var Container$D = 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$E || (templateObject_2$E = __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) {
|
|
4358
4358
|
var weight = _a.weight;
|
|
4359
4359
|
return (weight ? weight : '400');
|
|
4360
4360
|
}, function (_a) {
|
|
@@ -4376,7 +4376,7 @@ var Price = newStyled.h1(templateObject_2$D || (templateObject_2$D = __makeTempl
|
|
|
4376
4376
|
var margin = _a.margin, size = _a.size;
|
|
4377
4377
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4378
4378
|
});
|
|
4379
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4379
|
+
var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4380
4380
|
var _b;
|
|
4381
4381
|
var size = _a.size;
|
|
4382
4382
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4384,9 +4384,9 @@ var TagContainer = newStyled.h1(templateObject_3$p || (templateObject_3$p = __ma
|
|
|
4384
4384
|
var PriceLabel = function (_a) {
|
|
4385
4385
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
4386
4386
|
var theme = useTheme();
|
|
4387
|
-
return (jsxs$1(Container$
|
|
4387
|
+
return (jsxs$1(Container$D, { 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));
|
|
4388
4388
|
};
|
|
4389
|
-
var templateObject_1
|
|
4389
|
+
var templateObject_1$$, templateObject_2$E, templateObject_3$q;
|
|
4390
4390
|
|
|
4391
4391
|
var OneColorSelector = function (_a) {
|
|
4392
4392
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4425,11 +4425,11 @@ var OutOfStock = function (_a) {
|
|
|
4425
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));
|
|
4426
4426
|
};
|
|
4427
4427
|
|
|
4428
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4429
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4430
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4431
|
-
var Span = newStyled.span(templateObject_4$
|
|
4432
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4428
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4429
|
+
newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4430
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$p || (templateObject_3$p = __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$h || (templateObject_4$h = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4432
|
+
var OptionsContainer = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
4433
4433
|
var Label$2 = function (_a) {
|
|
4434
4434
|
var label = _a.label, values = _a.values;
|
|
4435
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));
|
|
@@ -4447,20 +4447,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4447
4447
|
Option: Option,
|
|
4448
4448
|
OptionsContainer: OptionsContainer,
|
|
4449
4449
|
});
|
|
4450
|
-
var templateObject_1$
|
|
4450
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$a;
|
|
4451
4451
|
|
|
4452
|
-
var Container$
|
|
4452
|
+
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
4453
4453
|
var borderColor = _a.borderColor;
|
|
4454
4454
|
return borderColor;
|
|
4455
4455
|
});
|
|
4456
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
4456
|
+
var Image$2 = newStyled.img(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
4457
4457
|
var PatternSelector = function (_a) {
|
|
4458
4458
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4459
4459
|
var theme = useTheme();
|
|
4460
4460
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4461
|
-
return (jsx$1(Container$
|
|
4461
|
+
return (jsx$1(Container$C, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4462
4462
|
};
|
|
4463
|
-
var templateObject_1$
|
|
4463
|
+
var templateObject_1$Z, templateObject_2$C;
|
|
4464
4464
|
|
|
4465
4465
|
var renderOptions$1 = function (options) {
|
|
4466
4466
|
if (options.length === 0) {
|
|
@@ -4518,7 +4518,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4518
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));
|
|
4519
4519
|
};
|
|
4520
4520
|
|
|
4521
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
4521
|
+
var Image$1 = newStyled.img(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
4522
4522
|
var selected = _a.selected, theme = _a.theme;
|
|
4523
4523
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4524
4524
|
});
|
|
@@ -4527,35 +4527,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
4527
4527
|
var theme = useTheme();
|
|
4528
4528
|
return jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4529
4529
|
};
|
|
4530
|
-
var templateObject_1$
|
|
4530
|
+
var templateObject_1$Y;
|
|
4531
4531
|
|
|
4532
|
-
var Container$
|
|
4533
|
-
var Button$5 = newStyled.button(templateObject_2$
|
|
4532
|
+
var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __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$B || (templateObject_2$B = __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"])));
|
|
4534
4534
|
var ImagePreviewList = function (_a) {
|
|
4535
4535
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
4536
|
-
return (jsx$1(Container$
|
|
4536
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": testId }, { children: images.map(function (item) {
|
|
4537
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));
|
|
4538
4538
|
}) }), void 0));
|
|
4539
4539
|
};
|
|
4540
|
-
var templateObject_1$
|
|
4540
|
+
var templateObject_1$X, templateObject_2$B;
|
|
4541
4541
|
|
|
4542
|
-
var Img = newStyled.img(templateObject_1$
|
|
4542
|
+
var Img = newStyled.img(templateObject_1$W || (templateObject_1$W = __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; });
|
|
4543
4543
|
var Image = function (_a) {
|
|
4544
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;
|
|
4545
4545
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
4546
4546
|
};
|
|
4547
|
-
var templateObject_1$
|
|
4547
|
+
var templateObject_1$W;
|
|
4548
4548
|
|
|
4549
|
-
var Container$
|
|
4550
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
4551
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4549
|
+
var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
4550
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
4552
4552
|
var ImageProductWithTags$1 = function (_a) {
|
|
4553
4553
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4554
|
-
return (jsxs$1(Container$
|
|
4554
|
+
return (jsxs$1(Container$A, __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));
|
|
4555
4555
|
};
|
|
4556
|
-
var templateObject_1$
|
|
4556
|
+
var templateObject_1$V, templateObject_2$A, templateObject_3$o;
|
|
4557
4557
|
|
|
4558
|
-
var Container$
|
|
4558
|
+
var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
4559
4559
|
var ProductGallery = function (_a) {
|
|
4560
4560
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
4561
4561
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -4563,11 +4563,11 @@ var ProductGallery = function (_a) {
|
|
|
4563
4563
|
useEffect(function () {
|
|
4564
4564
|
setSelectedImage(initialValue);
|
|
4565
4565
|
}, [initialValue]);
|
|
4566
|
-
return (jsxs$1(Container$
|
|
4566
|
+
return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
4567
4567
|
setSelectedImage(value);
|
|
4568
4568
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
4569
4569
|
};
|
|
4570
|
-
var templateObject_1$
|
|
4570
|
+
var templateObject_1$U;
|
|
4571
4571
|
|
|
4572
4572
|
/* base styles & size variants */
|
|
4573
4573
|
var StarStyles = {
|
|
@@ -4613,8 +4613,8 @@ var StarStyles = {
|
|
|
4613
4613
|
});
|
|
4614
4614
|
},
|
|
4615
4615
|
};
|
|
4616
|
-
var Container$
|
|
4617
|
-
var templateObject_1$
|
|
4616
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4617
|
+
var templateObject_1$T;
|
|
4618
4618
|
|
|
4619
4619
|
var StarContainer = newStyled.div(function (_a) {
|
|
4620
4620
|
var size = _a.size, theme = _a.theme;
|
|
@@ -4632,7 +4632,7 @@ var sizes = {
|
|
|
4632
4632
|
var StarList = function (_a) {
|
|
4633
4633
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
4634
4634
|
var theme = useTheme();
|
|
4635
|
-
return (jsx$1(Container$
|
|
4635
|
+
return (jsx$1(Container$y, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
4636
4636
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
4637
4637
|
}) }, void 0));
|
|
4638
4638
|
};
|
|
@@ -4676,8 +4676,8 @@ var LabelStyles = {
|
|
|
4676
4676
|
});
|
|
4677
4677
|
},
|
|
4678
4678
|
};
|
|
4679
|
-
var Container$
|
|
4680
|
-
var templateObject_1$
|
|
4679
|
+
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"])));
|
|
4680
|
+
var templateObject_1$S;
|
|
4681
4681
|
|
|
4682
4682
|
var CustomLabel = newStyled.div(function (_a) {
|
|
4683
4683
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis;
|
|
@@ -4698,11 +4698,11 @@ var starsNumber = 5;
|
|
|
4698
4698
|
var Rating = function (_a) {
|
|
4699
4699
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.wrapWithParenthesis, wrapWithParenthesis = _c === void 0 ? false : _c;
|
|
4700
4700
|
var theme = useTheme();
|
|
4701
|
-
return (jsxs$1(Container$
|
|
4701
|
+
return (jsxs$1(Container$x, { 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));
|
|
4702
4702
|
};
|
|
4703
4703
|
|
|
4704
|
-
var Container$
|
|
4705
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
4704
|
+
var Container$w = newStyled.div(templateObject_1$R || (templateObject_1$R = __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$z || (templateObject_2$z = __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; });
|
|
4706
4706
|
var textButtonStyles = function (theme) { return ({
|
|
4707
4707
|
border: 'none',
|
|
4708
4708
|
background: 'transparent',
|
|
@@ -4715,9 +4715,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
4715
4715
|
var FitPredictor = function (_a) {
|
|
4716
4716
|
var onClick = _a.onClick;
|
|
4717
4717
|
var theme = useTheme();
|
|
4718
|
-
return (jsxs(Container$
|
|
4718
|
+
return (jsxs(Container$w, __assign$1({ theme: theme }, { children: [jsx(Container$w, { 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));
|
|
4719
4719
|
};
|
|
4720
|
-
var templateObject_1$
|
|
4720
|
+
var templateObject_1$R, templateObject_2$z;
|
|
4721
4721
|
|
|
4722
4722
|
var H2$2 = newStyled.h2(function (_a) {
|
|
4723
4723
|
var color = _a.color;
|
|
@@ -4731,7 +4731,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
4731
4731
|
margin: '0.938rem 4.188rem',
|
|
4732
4732
|
});
|
|
4733
4733
|
});
|
|
4734
|
-
var Bar = newStyled.div(templateObject_1$
|
|
4734
|
+
var Bar = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
4735
4735
|
var backgroundColor = _a.backgroundColor;
|
|
4736
4736
|
return backgroundColor;
|
|
4737
4737
|
}, function (_a) {
|
|
@@ -4754,7 +4754,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
4754
4754
|
position: 'absolute',
|
|
4755
4755
|
});
|
|
4756
4756
|
});
|
|
4757
|
-
var Container$
|
|
4757
|
+
var Container$v = newStyled.div(function (_a) {
|
|
4758
4758
|
var widthAuto = _a.widthAuto;
|
|
4759
4759
|
return ({
|
|
4760
4760
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -4768,9 +4768,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
4768
4768
|
var ProgressBar = function (_a) {
|
|
4769
4769
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
4770
4770
|
var theme = useTheme();
|
|
4771
|
-
return (jsxs$1(Container$
|
|
4771
|
+
return (jsxs$1(Container$v, __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));
|
|
4772
4772
|
};
|
|
4773
|
-
var templateObject_1$
|
|
4773
|
+
var templateObject_1$Q;
|
|
4774
4774
|
|
|
4775
4775
|
var getStylesBySize$4 = function (size) {
|
|
4776
4776
|
switch (size) {
|
|
@@ -4791,7 +4791,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
4791
4791
|
};
|
|
4792
4792
|
}
|
|
4793
4793
|
};
|
|
4794
|
-
var Container$
|
|
4794
|
+
var Container$u = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
4795
4795
|
var backgroundColor = _a.backgroundColor;
|
|
4796
4796
|
return backgroundColor;
|
|
4797
4797
|
}, function (_a) {
|
|
@@ -4819,9 +4819,9 @@ var Container$t = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
4819
4819
|
var IconButton = function (_a) {
|
|
4820
4820
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
4821
4821
|
var theme = useTheme();
|
|
4822
|
-
return (jsx$1(Container$
|
|
4822
|
+
return (jsx$1(Container$u, __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));
|
|
4823
4823
|
};
|
|
4824
|
-
var templateObject_1$
|
|
4824
|
+
var templateObject_1$P;
|
|
4825
4825
|
|
|
4826
4826
|
var TooltipArrow = function (_a) {
|
|
4827
4827
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -4901,7 +4901,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
4901
4901
|
}
|
|
4902
4902
|
};
|
|
4903
4903
|
|
|
4904
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
4904
|
+
var Wrapper$5 = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
4905
4905
|
var position = _a.position;
|
|
4906
4906
|
return getWrapperFlexDirection(position);
|
|
4907
4907
|
});
|
|
@@ -4925,11 +4925,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
4925
4925
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
4926
4926
|
return actual === expected ? margin : '0';
|
|
4927
4927
|
};
|
|
4928
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
4928
|
+
var ContentWrapper = newStyled.div(templateObject_2$y || (templateObject_2$y = __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) {
|
|
4929
4929
|
var borderColor = _a.borderColor;
|
|
4930
4930
|
return borderColor;
|
|
4931
4931
|
});
|
|
4932
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4932
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __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) {
|
|
4933
4933
|
var position = _a.position;
|
|
4934
4934
|
return getArrowRotation(position);
|
|
4935
4935
|
}, function (_a) {
|
|
@@ -4939,17 +4939,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$m || (templateObject_
|
|
|
4939
4939
|
var position = _a.position;
|
|
4940
4940
|
return getArrowContainerMargin(position);
|
|
4941
4941
|
});
|
|
4942
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
4942
|
+
var TooltipText = newStyled.div(templateObject_4$g || (templateObject_4$g = __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) {
|
|
4943
4943
|
var color = _a.color;
|
|
4944
4944
|
return color;
|
|
4945
4945
|
});
|
|
4946
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
4946
|
+
var TopSection = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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
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) {
|
|
4948
4948
|
var color = _a.color;
|
|
4949
4949
|
return color;
|
|
4950
4950
|
});
|
|
4951
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$
|
|
4952
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$6, templateObject_7$4;
|
|
4953
4953
|
|
|
4954
4954
|
var Tooltip = function (_a) {
|
|
4955
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;
|
|
@@ -5101,9 +5101,9 @@ var ContainerStyles = {
|
|
|
5101
5101
|
},
|
|
5102
5102
|
};
|
|
5103
5103
|
|
|
5104
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
5105
|
-
var Container$
|
|
5106
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
5104
|
+
var Wrapper$4 = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5105
|
+
var Container$t = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
5106
|
+
var Input$2 = newStyled.input(templateObject_2$x || (templateObject_2$x = __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) {
|
|
5107
5107
|
var disabled = _a.disabled;
|
|
5108
5108
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5109
5109
|
});
|
|
@@ -5118,9 +5118,9 @@ var RadioInput = function (_a) {
|
|
|
5118
5118
|
var value = event.currentTarget.value;
|
|
5119
5119
|
onChange({ value: value, label: label });
|
|
5120
5120
|
};
|
|
5121
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
5121
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$t, __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));
|
|
5122
5122
|
};
|
|
5123
|
-
var templateObject_1$
|
|
5123
|
+
var templateObject_1$N, templateObject_2$x;
|
|
5124
5124
|
|
|
5125
5125
|
var RadioGroupInput = function (_a) {
|
|
5126
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;
|
|
@@ -5134,37 +5134,37 @@ var RadioGroupInput = function (_a) {
|
|
|
5134
5134
|
}) }), void 0));
|
|
5135
5135
|
};
|
|
5136
5136
|
|
|
5137
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
5138
|
-
var Container$
|
|
5137
|
+
var Wrapper$3 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5138
|
+
var Container$s = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
5139
5139
|
var Minimalistic = function (_a) {
|
|
5140
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;
|
|
5141
5141
|
var theme = useTheme();
|
|
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$
|
|
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$s, __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$s, __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));
|
|
5143
5143
|
};
|
|
5144
|
-
var templateObject_1$
|
|
5144
|
+
var templateObject_1$M, templateObject_2$w;
|
|
5145
5145
|
|
|
5146
|
-
var Container$
|
|
5147
|
-
var Title$4 = newStyled.h1(templateObject_2$
|
|
5148
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5149
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
5146
|
+
var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5147
|
+
var Title$4 = newStyled.h1(templateObject_2$v || (templateObject_2$v = __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$m || (templateObject_3$m = __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$f || (templateObject_4$f = __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"])));
|
|
5150
5150
|
var Simple = function (_a) {
|
|
5151
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;
|
|
5152
5152
|
var theme = useTheme();
|
|
5153
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5153
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$r, { 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));
|
|
5154
5154
|
};
|
|
5155
|
-
var templateObject_1$
|
|
5155
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$m, templateObject_4$f;
|
|
5156
5156
|
|
|
5157
5157
|
var Bundle = {
|
|
5158
5158
|
Minimalistic: Minimalistic,
|
|
5159
5159
|
Simple: Simple,
|
|
5160
5160
|
};
|
|
5161
5161
|
|
|
5162
|
-
var Container$
|
|
5162
|
+
var Container$q = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
5163
5163
|
var Tag$1 = function (_a) {
|
|
5164
5164
|
var text = _a.text, className = _a.className;
|
|
5165
|
-
return jsx$1(Container$
|
|
5165
|
+
return jsx$1(Container$q, __assign$1({ className: className }, { children: text }), void 0);
|
|
5166
5166
|
};
|
|
5167
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$K;
|
|
5168
5168
|
|
|
5169
5169
|
var getStylesBySize$3 = function (size) {
|
|
5170
5170
|
switch (size) {
|
|
@@ -5267,11 +5267,11 @@ var Timer = function (_a) {
|
|
|
5267
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));
|
|
5268
5268
|
};
|
|
5269
5269
|
|
|
5270
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
5270
|
+
var Label$1 = newStyled.span(templateObject_1$J || (templateObject_1$J = __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) {
|
|
5271
5271
|
var color = _a.color;
|
|
5272
5272
|
return color;
|
|
5273
5273
|
});
|
|
5274
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
5274
|
+
var MandatoryIcon = newStyled.span(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
5275
5275
|
var color = _a.color;
|
|
5276
5276
|
return color;
|
|
5277
5277
|
});
|
|
@@ -5280,7 +5280,7 @@ var InputLabel = function (_a) {
|
|
|
5280
5280
|
var theme = useTheme();
|
|
5281
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));
|
|
5282
5282
|
};
|
|
5283
|
-
var templateObject_1$
|
|
5283
|
+
var templateObject_1$J, templateObject_2$u;
|
|
5284
5284
|
|
|
5285
5285
|
/**
|
|
5286
5286
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5334,20 +5334,20 @@ var formatPrice = function (value, _a) {
|
|
|
5334
5334
|
}).format(valueToFormat);
|
|
5335
5335
|
};
|
|
5336
5336
|
|
|
5337
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5338
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5337
|
+
var ErrorText = newStyled.h3(templateObject_1$I || (templateObject_1$I = __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$t || (templateObject_2$t = __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"])));
|
|
5339
5339
|
var Error$1 = function (_a) {
|
|
5340
5340
|
var error = _a.error;
|
|
5341
5341
|
var theme = useTheme();
|
|
5342
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));
|
|
5343
5343
|
};
|
|
5344
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$I, templateObject_2$t;
|
|
5345
5345
|
|
|
5346
|
-
var Container$
|
|
5346
|
+
var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5347
5347
|
var color = _a.color;
|
|
5348
5348
|
return color;
|
|
5349
5349
|
});
|
|
5350
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
5350
|
+
var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __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) {
|
|
5351
5351
|
var padding = _a.padding;
|
|
5352
5352
|
return padding;
|
|
5353
5353
|
}, function (_a) {
|
|
@@ -5390,11 +5390,11 @@ var StyledInput = newStyled.input(templateObject_2$r || (templateObject_2$r = __
|
|
|
5390
5390
|
var disabledColor = _a.disabledColor;
|
|
5391
5391
|
return disabledColor;
|
|
5392
5392
|
});
|
|
5393
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
5393
|
+
var InputWrapper = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
5394
5394
|
var size = _a.size;
|
|
5395
5395
|
return (size === 'small' ? '36px' : '44px');
|
|
5396
5396
|
});
|
|
5397
|
-
var templateObject_1$
|
|
5397
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$l;
|
|
5398
5398
|
|
|
5399
5399
|
var BaseInput = function (_a) {
|
|
5400
5400
|
var _b;
|
|
@@ -5447,7 +5447,7 @@ var BaseInput = function (_a) {
|
|
|
5447
5447
|
highlight: theme.colors.border.highlight,
|
|
5448
5448
|
boxShadow: theme.component.input.boxShadow,
|
|
5449
5449
|
};
|
|
5450
|
-
return (jsxs$1(Container$
|
|
5450
|
+
return (jsxs$1(Container$p, __assign$1({ color: status === InputValidationType.Valid
|
|
5451
5451
|
? theme.colors.shades['700'].color
|
|
5452
5452
|
: status === InputValidationType.Error
|
|
5453
5453
|
? theme.colors.semantic.urgent.color
|
|
@@ -5468,11 +5468,11 @@ var Button$4 = function (_a) {
|
|
|
5468
5468
|
throw new Error("Invalid button variant ".concat(variant));
|
|
5469
5469
|
};
|
|
5470
5470
|
|
|
5471
|
-
var Container$
|
|
5471
|
+
var Container$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
5472
5472
|
var theme = _a.theme;
|
|
5473
5473
|
return theme.component.inputCustom.input.borderRadius;
|
|
5474
5474
|
});
|
|
5475
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
5475
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __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) {
|
|
5476
5476
|
var theme = _a.theme;
|
|
5477
5477
|
return theme.component.inputCustom.button.borderRadius;
|
|
5478
5478
|
});
|
|
@@ -5485,23 +5485,23 @@ var Custom = function (_a) {
|
|
|
5485
5485
|
text: text,
|
|
5486
5486
|
disabled: rest.disabled,
|
|
5487
5487
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
5488
|
-
return (jsx$1(Container$
|
|
5488
|
+
return (jsx$1(Container$o, __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));
|
|
5489
5489
|
};
|
|
5490
|
-
var templateObject_1$
|
|
5490
|
+
var templateObject_1$G, templateObject_2$r;
|
|
5491
5491
|
|
|
5492
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
5492
|
+
var SuccessContainer = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
5493
5493
|
var size = _a.size;
|
|
5494
5494
|
return (size === 'small' ? '36px' : '');
|
|
5495
5495
|
});
|
|
5496
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
5497
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
5496
|
+
var SuccessMessage = newStyled.div(templateObject_2$q || (templateObject_2$q = __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$k || (templateObject_3$k = __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"])));
|
|
5498
5498
|
var Success = function (_a) {
|
|
5499
5499
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
5500
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));
|
|
5501
5501
|
};
|
|
5502
|
-
var templateObject_1$
|
|
5502
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$k;
|
|
5503
5503
|
|
|
5504
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
5504
|
+
var ButtonContainer = newStyled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
5505
5505
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
5506
5506
|
return status === InputValidationType.Empty &&
|
|
5507
5507
|
type === 'primary' &&
|
|
@@ -5518,21 +5518,21 @@ var BasePlusButton = function (_a) {
|
|
|
5518
5518
|
}
|
|
5519
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));
|
|
5520
5520
|
};
|
|
5521
|
-
var templateObject_1$
|
|
5521
|
+
var templateObject_1$E;
|
|
5522
5522
|
|
|
5523
|
-
var Container$
|
|
5524
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
5523
|
+
var Container$n = newStyled.div(templateObject_1$D || (templateObject_1$D = __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$p || (templateObject_2$p = __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; });
|
|
5525
5525
|
var BasePlusIcon = function (_a) {
|
|
5526
5526
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
5527
5527
|
var theme = useTheme();
|
|
5528
5528
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
5529
|
-
return (jsx$1(Container$
|
|
5529
|
+
return (jsx$1(Container$n, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
5530
5530
|
? theme.colors.shades['700'].color
|
|
5531
5531
|
: status === InputValidationType.Error
|
|
5532
5532
|
? theme.colors.semantic.urgent.color
|
|
5533
5533
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
5534
5534
|
};
|
|
5535
|
-
var templateObject_1$
|
|
5535
|
+
var templateObject_1$D, templateObject_2$p;
|
|
5536
5536
|
|
|
5537
5537
|
var Input$1 = {
|
|
5538
5538
|
Simple: BaseInput,
|
|
@@ -5541,7 +5541,7 @@ var Input$1 = {
|
|
|
5541
5541
|
SimplePlusIcon: BasePlusIcon,
|
|
5542
5542
|
};
|
|
5543
5543
|
|
|
5544
|
-
var Container$
|
|
5544
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
5545
5545
|
var width = _a.width;
|
|
5546
5546
|
return width;
|
|
5547
5547
|
}, function (_a) {
|
|
@@ -5557,11 +5557,11 @@ var Container$l = newStyled.div(templateObject_1$B || (templateObject_1$B = __ma
|
|
|
5557
5557
|
var PaymentMethod = function (_a) {
|
|
5558
5558
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
5559
5559
|
var theme = useTheme();
|
|
5560
|
-
return (jsx$1(Container$
|
|
5560
|
+
return (jsx$1(Container$m, __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));
|
|
5561
5561
|
};
|
|
5562
|
-
var templateObject_1$
|
|
5562
|
+
var templateObject_1$C;
|
|
5563
5563
|
|
|
5564
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
5564
|
+
var Text$4 = newStyled.h3(templateObject_1$B || (templateObject_1$B = __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) {
|
|
5565
5565
|
var backgroundColor = _a.backgroundColor;
|
|
5566
5566
|
return backgroundColor;
|
|
5567
5567
|
}, function (_a) {
|
|
@@ -5573,27 +5573,27 @@ var OfferBanner = function (_a) {
|
|
|
5573
5573
|
var theme = useTheme();
|
|
5574
5574
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5575
5575
|
};
|
|
5576
|
-
var templateObject_1$
|
|
5576
|
+
var templateObject_1$B;
|
|
5577
5577
|
|
|
5578
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
5579
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
5580
|
-
var Currency = newStyled.span(templateObject_3$
|
|
5581
|
-
var Container$
|
|
5582
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
5578
|
+
var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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$o || (templateObject_2$o = __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$j || (templateObject_3$j = __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$l = newStyled.div(templateObject_4$e || (templateObject_4$e = __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$8 || (templateObject_5$8 = __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"])));
|
|
5583
5583
|
var Total = function (_a) {
|
|
5584
5584
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
5585
5585
|
var theme = useTheme();
|
|
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$
|
|
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$l, __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));
|
|
5587
5587
|
};
|
|
5588
|
-
var templateObject_1$
|
|
5588
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$8;
|
|
5589
5589
|
|
|
5590
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
5590
|
+
var Wrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5591
5591
|
var color = _a.color;
|
|
5592
5592
|
return color;
|
|
5593
5593
|
});
|
|
5594
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
5595
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
5596
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
5594
|
+
var ItemContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __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$i || (templateObject_3$i = __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$d || (templateObject_4$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5597
5597
|
var color = _a.color;
|
|
5598
5598
|
return color;
|
|
5599
5599
|
});
|
|
@@ -5605,22 +5605,22 @@ var Subtotal = function (_a) {
|
|
|
5605
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));
|
|
5606
5606
|
})] }), void 0));
|
|
5607
5607
|
};
|
|
5608
|
-
var templateObject_1$
|
|
5608
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$i, templateObject_4$d;
|
|
5609
5609
|
|
|
5610
5610
|
var Totals = {
|
|
5611
5611
|
Total: Total,
|
|
5612
5612
|
Subtotal: Subtotal,
|
|
5613
5613
|
};
|
|
5614
5614
|
|
|
5615
|
-
var Container$
|
|
5616
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
5617
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
5618
|
-
var Details = newStyled.span(templateObject_4$
|
|
5615
|
+
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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$m || (templateObject_2$m = __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$h || (templateObject_3$h = __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$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
5619
5619
|
var Note = function (_a) {
|
|
5620
5620
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
5621
|
-
return (jsxs$1(Container$
|
|
5621
|
+
return (jsxs$1(Container$k, __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));
|
|
5622
5622
|
};
|
|
5623
|
-
var templateObject_1$
|
|
5623
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$h, templateObject_4$c;
|
|
5624
5624
|
|
|
5625
5625
|
/* eslint-disable no-param-reassign */
|
|
5626
5626
|
var index$2 = function (breakpoints) {
|
|
@@ -5702,41 +5702,29 @@ var index$2 = function (breakpoints) {
|
|
|
5702
5702
|
};
|
|
5703
5703
|
};
|
|
5704
5704
|
|
|
5705
|
-
var mediaQueries =
|
|
5706
|
-
|
|
5707
|
-
|
|
5708
|
-
"@media(min-width: ".concat(theme.mediaQueries.mobile, "px)"),
|
|
5709
|
-
"@media(min-width: ".concat(theme.mediaQueries.desktop, "px)"),
|
|
5710
|
-
], { literal: true });
|
|
5711
|
-
};
|
|
5705
|
+
var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px)"], {
|
|
5706
|
+
literal: true,
|
|
5707
|
+
});
|
|
5712
5708
|
|
|
5713
|
-
var Title$3 = newStyled.h1(templateObject_1$
|
|
5714
|
-
var Line = newStyled.div(templateObject_2$
|
|
5715
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
});
|
|
5729
|
-
var
|
|
5730
|
-
|
|
5731
|
-
|
|
5732
|
-
width: ['auto', '1.375rem'],
|
|
5733
|
-
});
|
|
5734
|
-
});
|
|
5735
|
-
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"])), function (props) {
|
|
5736
|
-
return mediaQueries(props)({
|
|
5737
|
-
display: ['block', 'flex'],
|
|
5738
|
-
});
|
|
5739
|
-
}, function (_a) {
|
|
5709
|
+
var Title$3 = newStyled.h1(templateObject_1$x || (templateObject_1$x = __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$l || (templateObject_2$l = __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$g || (templateObject_3$g = __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$b || (templateObject_4$b = __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$7 || (templateObject_5$7 = __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) {
|
|
5740
5728
|
var theme = _a.theme;
|
|
5741
5729
|
return theme.colors.shades['700'].color;
|
|
5742
5730
|
});
|
|
@@ -5747,45 +5735,42 @@ var DeliveryDetails = function (_a) {
|
|
|
5747
5735
|
var theme = useTheme();
|
|
5748
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));
|
|
5749
5737
|
};
|
|
5750
|
-
var templateObject_1$
|
|
5738
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$7, templateObject_6$5, templateObject_7$3, templateObject_8$1;
|
|
5751
5739
|
|
|
5752
|
-
var Container$
|
|
5753
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
5740
|
+
var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __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$k || (templateObject_2$k = __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; });
|
|
5754
5742
|
var ScrollToTop = function (_a) {
|
|
5755
5743
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
5756
5744
|
var theme = useTheme();
|
|
5757
|
-
return (jsxs$1(Container$
|
|
5745
|
+
return (jsxs$1(Container$j, __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));
|
|
5758
5746
|
};
|
|
5759
|
-
var templateObject_1$
|
|
5747
|
+
var templateObject_1$w, templateObject_2$k;
|
|
5760
5748
|
|
|
5761
|
-
var Container$
|
|
5762
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
5749
|
+
var Container$i = newStyled.div(templateObject_1$v || (templateObject_1$v = __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$j || (templateObject_2$j = __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; });
|
|
5763
5751
|
var OrderBar = function (_a) {
|
|
5764
5752
|
var message = _a.message;
|
|
5765
5753
|
var theme = useTheme();
|
|
5766
|
-
return (jsxs$1(Container$
|
|
5754
|
+
return (jsxs$1(Container$i, { 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));
|
|
5767
5755
|
};
|
|
5768
|
-
var templateObject_1$
|
|
5756
|
+
var templateObject_1$v, templateObject_2$j;
|
|
5769
5757
|
|
|
5770
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
5771
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
5772
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
5773
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
5758
|
+
var TableElement = newStyled.table(templateObject_1$u || (templateObject_1$u = __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$i || (templateObject_2$i = __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$f || (templateObject_3$f = __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$a || (templateObject_4$a = __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; });
|
|
5774
5762
|
var SizeTable = function (_a) {
|
|
5775
5763
|
var headers = _a.headers, data = _a.data;
|
|
5776
5764
|
var theme = useTheme();
|
|
5777
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));
|
|
5778
5766
|
};
|
|
5779
|
-
var templateObject_1$
|
|
5767
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$f, templateObject_4$a;
|
|
5780
5768
|
|
|
5781
|
-
var Container$
|
|
5782
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
5783
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
marginLeft: ['0.938rem', '1.875rem'],
|
|
5787
|
-
});
|
|
5788
|
-
});
|
|
5769
|
+
var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __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$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5771
|
+
var DescriptionContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __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
|
+
}));
|
|
5789
5774
|
var Title$2 = newStyled.h2(function (_a) {
|
|
5790
5775
|
var color = _a.color;
|
|
5791
5776
|
return ({
|
|
@@ -5806,22 +5791,22 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
5806
5791
|
margin: '0.063rem 0',
|
|
5807
5792
|
});
|
|
5808
5793
|
});
|
|
5809
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
5810
|
-
var withTag = _a.withTag
|
|
5794
|
+
var PriceContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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;
|
|
5811
5796
|
return withTag
|
|
5812
|
-
? mediaQueries({
|
|
5797
|
+
? mediaQueries({
|
|
5813
5798
|
justifyContent: ['space-between', 'end'],
|
|
5814
5799
|
flexDirection: ['row', 'column'],
|
|
5815
5800
|
})
|
|
5816
5801
|
: 'justify-content: end';
|
|
5817
5802
|
});
|
|
5818
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
5803
|
+
var Quantity = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
5819
5804
|
var SimpleOrderItem = function (_a) {
|
|
5820
5805
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
5821
5806
|
var theme = useTheme();
|
|
5822
|
-
return (jsxs$1(Container$
|
|
5807
|
+
return (jsxs$1(Container$h, { 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));
|
|
5823
5808
|
};
|
|
5824
|
-
var templateObject_1$
|
|
5809
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$6;
|
|
5825
5810
|
|
|
5826
5811
|
function formatDate(date) {
|
|
5827
5812
|
var day = date.getDate();
|
|
@@ -5830,47 +5815,32 @@ function formatDate(date) {
|
|
|
5830
5815
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
5831
5816
|
}
|
|
5832
5817
|
|
|
5833
|
-
var Container$
|
|
5834
|
-
var Heading = newStyled.div(templateObject_2$
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
});
|
|
5841
|
-
var
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
});
|
|
5853
|
-
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"])), function (_a) {
|
|
5854
|
-
var theme = _a.theme;
|
|
5855
|
-
return mediaQueries({ theme: theme })({
|
|
5856
|
-
fontSize: ['16px', '18px'],
|
|
5857
|
-
lineHeight: ['24px', '28px'],
|
|
5858
|
-
});
|
|
5859
|
-
});
|
|
5860
|
-
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"])), function (_a) {
|
|
5861
|
-
var theme = _a.theme;
|
|
5862
|
-
return mediaQueries({ theme: theme })({
|
|
5863
|
-
fontSize: ['14px', '16px'],
|
|
5864
|
-
lineHeight: ['22px', '24px'],
|
|
5865
|
-
});
|
|
5866
|
-
});
|
|
5818
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __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$g || (templateObject_2$g = __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$d || (templateObject_3$d = __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$8 || (templateObject_4$8 = __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$5 || (templateObject_5$5 = __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
|
+
}));
|
|
5867
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"])));
|
|
5868
5838
|
var Review = function (_a) {
|
|
5869
5839
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
5870
5840
|
var theme = useTheme();
|
|
5871
|
-
return (jsxs$1(Container$
|
|
5841
|
+
return (jsxs$1(Container$g, { 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));
|
|
5872
5842
|
};
|
|
5873
|
-
var templateObject_1$
|
|
5843
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
5874
5844
|
|
|
5875
5845
|
var Button$3 = newStyled.button(function () { return ({
|
|
5876
5846
|
background: 'transparent',
|
|
@@ -10113,14 +10083,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10113
10083
|
return Slider;
|
|
10114
10084
|
}(React__default.Component);
|
|
10115
10085
|
|
|
10116
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10086
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
10117
10087
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10118
10088
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10119
10089
|
}, function (_a) {
|
|
10120
10090
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10121
10091
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10122
10092
|
});
|
|
10123
|
-
var templateObject_1$
|
|
10093
|
+
var templateObject_1$r;
|
|
10124
10094
|
|
|
10125
10095
|
var getStylesBySize$1 = function (size) {
|
|
10126
10096
|
// rem units
|
|
@@ -10179,13 +10149,13 @@ var SliderNavigation = function (_a) {
|
|
|
10179
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));
|
|
10180
10150
|
};
|
|
10181
10151
|
|
|
10182
|
-
var List = newStyled.ul(templateObject_1$
|
|
10183
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
10184
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
10185
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
10186
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
10152
|
+
var List = newStyled.ul(templateObject_1$q || (templateObject_1$q = __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$f || (templateObject_2$f = __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$c || (templateObject_3$c = __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$7 || (templateObject_4$7 = __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$4 || (templateObject_5$4 = __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; });
|
|
10187
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; });
|
|
10188
|
-
var templateObject_1$
|
|
10158
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
|
|
10189
10159
|
|
|
10190
10160
|
var DropdownListIcons = function (_a) {
|
|
10191
10161
|
var items = _a.items;
|
|
@@ -10198,7 +10168,7 @@ var Dropdown = function (_a) {
|
|
|
10198
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));
|
|
10199
10169
|
};
|
|
10200
10170
|
|
|
10201
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
10171
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$p || (templateObject_1$p = __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; });
|
|
10202
10172
|
var AmazonButton = function (_a) {
|
|
10203
10173
|
var onClick = _a.onClick;
|
|
10204
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));
|
|
@@ -10207,23 +10177,23 @@ var PaypalButton = function (_a) {
|
|
|
10207
10177
|
var onClick = _a.onClick;
|
|
10208
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));
|
|
10209
10179
|
};
|
|
10210
|
-
var templateObject_1$
|
|
10180
|
+
var templateObject_1$p;
|
|
10211
10181
|
|
|
10212
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
10213
|
-
var Col = newStyled.div(templateObject_2$
|
|
10214
|
-
var Row = newStyled.div(templateObject_3$
|
|
10182
|
+
var Wrapper = newStyled.div(templateObject_1$o || (templateObject_1$o = __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$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
10184
|
+
var Row = newStyled.div(templateObject_3$b || (templateObject_3$b = __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) {
|
|
10215
10185
|
return props.rightToLeft &&
|
|
10216
10186
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
10217
10187
|
});
|
|
10218
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
10219
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
10188
|
+
var H5 = newStyled.h5(templateObject_4$6 || (templateObject_4$6 = __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$3 || (templateObject_5$3 = __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; });
|
|
10220
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; });
|
|
10221
10191
|
var CrossSellCheckbox = function (_a) {
|
|
10222
10192
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
10223
10193
|
var theme = useTheme();
|
|
10224
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));
|
|
10225
10195
|
};
|
|
10226
|
-
var templateObject_1$
|
|
10196
|
+
var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
10227
10197
|
|
|
10228
10198
|
var index = /*#__PURE__*/Object.freeze({
|
|
10229
10199
|
__proto__: null,
|
|
@@ -10244,8 +10214,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
10244
10214
|
height: height,
|
|
10245
10215
|
});
|
|
10246
10216
|
});
|
|
10247
|
-
var Container$
|
|
10248
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
10217
|
+
var Container$f = newStyled.a(templateObject_1$n || (templateObject_1$n = __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$d || (templateObject_2$d = __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; });
|
|
10249
10219
|
var getStylesBySize = function (size) {
|
|
10250
10220
|
switch (size) {
|
|
10251
10221
|
case ComponentSize.Medium:
|
|
@@ -10283,32 +10253,32 @@ var ProductItemMobile = function (_a) {
|
|
|
10283
10253
|
_a[ComponentSize.Small] = 2,
|
|
10284
10254
|
_a)[size];
|
|
10285
10255
|
}, [size]);
|
|
10286
|
-
return (jsxs(Container$
|
|
10256
|
+
return (jsxs(Container$f, __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));
|
|
10287
10257
|
};
|
|
10288
|
-
var templateObject_1$
|
|
10258
|
+
var templateObject_1$n, templateObject_2$d;
|
|
10289
10259
|
|
|
10290
|
-
var Container$
|
|
10260
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
10291
10261
|
function withProductGrid(ProductItemComponent, data) {
|
|
10292
10262
|
function WithProductGrid(props) {
|
|
10293
|
-
return (jsx$1(Container$
|
|
10263
|
+
return (jsx$1(Container$e, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
10294
10264
|
}
|
|
10295
10265
|
/* istanbul ignore next */
|
|
10296
10266
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
10297
10267
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
10298
10268
|
return WithProductGrid;
|
|
10299
10269
|
}
|
|
10300
|
-
var templateObject_1$
|
|
10270
|
+
var templateObject_1$m;
|
|
10301
10271
|
|
|
10302
10272
|
var Collection = {
|
|
10303
10273
|
ProductItemMobile: ProductItemMobile,
|
|
10304
10274
|
withProductGrid: withProductGrid,
|
|
10305
10275
|
};
|
|
10306
10276
|
|
|
10307
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
10277
|
+
var Backdrop = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
10308
10278
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
10309
10279
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
10310
10280
|
});
|
|
10311
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
10281
|
+
var Sidebar = newStyled.div(templateObject_2$c || (templateObject_2$c = __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) {
|
|
10312
10282
|
var width = _a.width;
|
|
10313
10283
|
return width;
|
|
10314
10284
|
}, function (_a) {
|
|
@@ -10349,28 +10319,28 @@ var Drawer = function (_a) {
|
|
|
10349
10319
|
}, [isOpen, onClose, onOpen]);
|
|
10350
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;
|
|
10351
10321
|
};
|
|
10352
|
-
var templateObject_1$
|
|
10322
|
+
var templateObject_1$l, templateObject_2$c;
|
|
10353
10323
|
|
|
10354
|
-
var Container$
|
|
10324
|
+
var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
10355
10325
|
var size = _a.size;
|
|
10356
10326
|
return (size ? size : '100%');
|
|
10357
10327
|
}, function (_a) {
|
|
10358
10328
|
var size = _a.size;
|
|
10359
10329
|
return (size ? size : '100%');
|
|
10360
10330
|
});
|
|
10361
|
-
var Animation = newStyled.div(templateObject_2$
|
|
10331
|
+
var Animation = newStyled.div(templateObject_2$b || (templateObject_2$b = __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) {
|
|
10362
10332
|
var animationDuration = _a.animationDuration;
|
|
10363
10333
|
return animationDuration;
|
|
10364
10334
|
});
|
|
10365
10335
|
var Spinner = function (_a) {
|
|
10366
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;
|
|
10367
|
-
return (jsx$1(Container$
|
|
10337
|
+
return (jsx$1(Container$d, __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));
|
|
10368
10338
|
};
|
|
10369
|
-
var templateObject_1$
|
|
10339
|
+
var templateObject_1$k, templateObject_2$b;
|
|
10370
10340
|
|
|
10371
|
-
var UL = newStyled.ul(templateObject_1$
|
|
10372
|
-
var LI = newStyled.li(templateObject_2$
|
|
10373
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
10341
|
+
var UL = newStyled.ul(templateObject_1$j || (templateObject_1$j = __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$a || (templateObject_2$a = __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$a || (templateObject_3$a = __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"])));
|
|
10374
10344
|
var Tags = function (_a) {
|
|
10375
10345
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
10376
10346
|
var theme = useTheme();
|
|
@@ -10378,7 +10348,7 @@ var Tags = function (_a) {
|
|
|
10378
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));
|
|
10379
10349
|
}) }), void 0));
|
|
10380
10350
|
};
|
|
10381
|
-
var templateObject_1$
|
|
10351
|
+
var templateObject_1$j, templateObject_2$a, templateObject_3$a;
|
|
10382
10352
|
|
|
10383
10353
|
function FilteringDropdown(_a) {
|
|
10384
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;
|
|
@@ -10411,15 +10381,12 @@ function FilteringDropdown(_a) {
|
|
|
10411
10381
|
}) }, void 0)] }), void 0));
|
|
10412
10382
|
}
|
|
10413
10383
|
|
|
10414
|
-
var Container$
|
|
10415
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
10416
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
10417
|
-
|
|
10418
|
-
|
|
10419
|
-
|
|
10420
|
-
});
|
|
10421
|
-
});
|
|
10422
|
-
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) {
|
|
10384
|
+
var Container$c = newStyled.div(templateObject_1$i || (templateObject_1$i = __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$9 || (templateObject_2$9 = __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$9 || (templateObject_3$9 = __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$5 || (templateObject_4$5 = __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) {
|
|
10423
10390
|
var bold = _a.bold;
|
|
10424
10391
|
return (bold ? '700' : '500');
|
|
10425
10392
|
}, function (_a) {
|
|
@@ -10428,15 +10395,12 @@ var PageNumber = newStyled.span(templateObject_4$4 || (templateObject_4$4 = __ma
|
|
|
10428
10395
|
}, function (_a) {
|
|
10429
10396
|
var underline = _a.underline, borderColor = _a.borderColor;
|
|
10430
10397
|
return underline ? "0.063rem solid ".concat(borderColor) : 'none';
|
|
10431
|
-
},
|
|
10432
|
-
|
|
10433
|
-
|
|
10434
|
-
|
|
10435
|
-
|
|
10436
|
-
|
|
10437
|
-
});
|
|
10438
|
-
});
|
|
10439
|
-
var templateObject_1$h, templateObject_2$8, templateObject_3$8, templateObject_4$4;
|
|
10398
|
+
}, mediaQueries({
|
|
10399
|
+
fontSize: ['1rem', '1.25rem'],
|
|
10400
|
+
lineHeight: ['1.5rem', '1.75rem'],
|
|
10401
|
+
width: ['1.25rem', '1.875rem'],
|
|
10402
|
+
}));
|
|
10403
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$9, templateObject_4$5;
|
|
10440
10404
|
|
|
10441
10405
|
var Pagination = function (_a) {
|
|
10442
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;
|
|
@@ -10449,14 +10413,12 @@ var Pagination = function (_a) {
|
|
|
10449
10413
|
setPage(page);
|
|
10450
10414
|
onChange(page);
|
|
10451
10415
|
};
|
|
10452
|
-
return (jsxs$1(Container$
|
|
10416
|
+
return (jsxs$1(Container$c, __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));
|
|
10453
10417
|
};
|
|
10454
10418
|
|
|
10455
|
-
var Container$
|
|
10456
|
-
|
|
10457
|
-
|
|
10458
|
-
});
|
|
10459
|
-
});
|
|
10419
|
+
var Container$b = newStyled.div(templateObject_1$h || (templateObject_1$h = __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
|
+
}));
|
|
10460
10422
|
var Description$1 = newStyled.div({
|
|
10461
10423
|
display: 'flex',
|
|
10462
10424
|
flexDirection: 'column',
|
|
@@ -10471,30 +10433,28 @@ var Description$1 = newStyled.div({
|
|
|
10471
10433
|
var ProductItem = function (_a) {
|
|
10472
10434
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
10473
10435
|
var theme = useTheme();
|
|
10474
|
-
return (jsxs$1(Container$
|
|
10436
|
+
return (jsxs$1(Container$b, __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));
|
|
10475
10437
|
};
|
|
10476
|
-
var templateObject_1$
|
|
10438
|
+
var templateObject_1$h;
|
|
10477
10439
|
|
|
10478
|
-
var Container$
|
|
10440
|
+
var Container$a = newStyled.div({
|
|
10479
10441
|
display: 'flex',
|
|
10480
10442
|
justifyContent: 'center',
|
|
10481
10443
|
padding: '1rem',
|
|
10482
10444
|
});
|
|
10483
10445
|
var Footer = function (_a) {
|
|
10484
10446
|
var text = _a.text, onClick = _a.onClick;
|
|
10485
|
-
return (jsx$1(Container$
|
|
10447
|
+
return (jsx$1(Container$a, { children: jsx$1(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
10486
10448
|
};
|
|
10487
10449
|
|
|
10488
10450
|
var Ul = newStyled.ul({
|
|
10489
10451
|
margin: '0px',
|
|
10490
10452
|
padding: '0px',
|
|
10491
10453
|
});
|
|
10492
|
-
var Li = newStyled.li(templateObject_1$
|
|
10493
|
-
|
|
10494
|
-
|
|
10495
|
-
|
|
10496
|
-
});
|
|
10497
|
-
});
|
|
10454
|
+
var Li = newStyled.li(templateObject_1$g || (templateObject_1$g = __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
|
+
}));
|
|
10498
10458
|
var Button$2 = newStyled.button({
|
|
10499
10459
|
width: '100%',
|
|
10500
10460
|
border: 'none',
|
|
@@ -10502,24 +10462,20 @@ var Button$2 = newStyled.button({
|
|
|
10502
10462
|
cursor: 'pointer',
|
|
10503
10463
|
padding: 0,
|
|
10504
10464
|
});
|
|
10505
|
-
var Container$
|
|
10506
|
-
|
|
10507
|
-
|
|
10508
|
-
|
|
10509
|
-
|
|
10510
|
-
|
|
10511
|
-
|
|
10512
|
-
|
|
10513
|
-
return mediaQueries(props)({
|
|
10514
|
-
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
10515
|
-
});
|
|
10516
|
-
});
|
|
10465
|
+
var Container$9 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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$8 || (templateObject_3$8 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
10471
|
+
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
10472
|
+
}));
|
|
10517
10473
|
var ResultsPanel = function (_a) {
|
|
10518
10474
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10519
10475
|
var theme = useTheme();
|
|
10520
|
-
return (jsxs$1(Container$
|
|
10476
|
+
return (jsxs$1(Container$9, __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));
|
|
10521
10477
|
};
|
|
10522
|
-
var templateObject_1$
|
|
10478
|
+
var templateObject_1$g, templateObject_2$8, templateObject_3$8;
|
|
10523
10479
|
|
|
10524
10480
|
var Input = newStyled.input(function (props) { return ({
|
|
10525
10481
|
padding: props.theme.component.input.padding,
|
|
@@ -10550,18 +10506,16 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
10550
10506
|
},
|
|
10551
10507
|
}); });
|
|
10552
10508
|
|
|
10553
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
10554
|
-
|
|
10555
|
-
|
|
10556
|
-
|
|
10557
|
-
});
|
|
10558
|
-
});
|
|
10509
|
+
var Button$1 = newStyled.button(templateObject_1$f || (templateObject_1$f = __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
|
+
}));
|
|
10559
10513
|
var ClearButton = function (_a) {
|
|
10560
10514
|
var onClick = _a.onClick;
|
|
10561
10515
|
var theme = useTheme();
|
|
10562
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));
|
|
10563
10517
|
};
|
|
10564
|
-
var templateObject_1$
|
|
10518
|
+
var templateObject_1$f;
|
|
10565
10519
|
|
|
10566
10520
|
var useOnClickOutside = function (ref, handler) {
|
|
10567
10521
|
useEffect(function () {
|
|
@@ -10650,7 +10604,7 @@ var reducer = function (state, action) {
|
|
|
10650
10604
|
}
|
|
10651
10605
|
}
|
|
10652
10606
|
};
|
|
10653
|
-
var Container$
|
|
10607
|
+
var Container$8 = newStyled.div({
|
|
10654
10608
|
position: 'relative',
|
|
10655
10609
|
display: 'flex',
|
|
10656
10610
|
});
|
|
@@ -10675,7 +10629,7 @@ var SearchBar = function (_a) {
|
|
|
10675
10629
|
: shouldDisplaySuggestion()
|
|
10676
10630
|
? suggestions
|
|
10677
10631
|
: [];
|
|
10678
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
10632
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __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) {
|
|
10679
10633
|
onSearch(value.title);
|
|
10680
10634
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
10681
10635
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -10946,36 +10900,36 @@ function useSwipeable(options) {
|
|
|
10946
10900
|
return handlers;
|
|
10947
10901
|
}
|
|
10948
10902
|
|
|
10949
|
-
var Container$
|
|
10950
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
10951
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
10903
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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$7 || (templateObject_2$7 = __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$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10952
10906
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
10953
10907
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
10954
|
-
return (jsxs$1(Container$
|
|
10908
|
+
return (jsxs$1(Container$7, __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));
|
|
10955
10909
|
});
|
|
10956
|
-
var templateObject_1$
|
|
10910
|
+
var templateObject_1$e, templateObject_2$7, templateObject_3$7;
|
|
10957
10911
|
|
|
10958
|
-
var Button = newStyled.button(templateObject_1$
|
|
10912
|
+
var Button = newStyled.button(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
10959
10913
|
var ArrowButton = function (_a) {
|
|
10960
10914
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
10961
10915
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
10962
10916
|
};
|
|
10963
|
-
var templateObject_1$
|
|
10917
|
+
var templateObject_1$d;
|
|
10964
10918
|
|
|
10965
|
-
var Container$
|
|
10919
|
+
var Container$6 = newStyled.div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
10966
10920
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
10967
10921
|
var SlideDots = function (_a) {
|
|
10968
10922
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
10969
10923
|
var theme = useTheme();
|
|
10970
|
-
return (jsx$1(Container$
|
|
10924
|
+
return (jsx$1(Container$6, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
10971
10925
|
? theme.colors.shades.white.color
|
|
10972
10926
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
10973
10927
|
};
|
|
10974
|
-
var templateObject_1$
|
|
10928
|
+
var templateObject_1$c;
|
|
10975
10929
|
|
|
10976
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
10977
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
10978
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
10930
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$b || (templateObject_1$b = __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$6 || (templateObject_2$6 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
10932
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
10979
10933
|
var SlideNavigation = function (_a) {
|
|
10980
10934
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
10981
10935
|
var theme = useTheme();
|
|
@@ -10987,9 +10941,9 @@ var SlideNavigation = function (_a) {
|
|
|
10987
10941
|
onNavigate(selectedIndex + 1);
|
|
10988
10942
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
10989
10943
|
};
|
|
10990
|
-
var templateObject_1$
|
|
10944
|
+
var templateObject_1$b, templateObject_2$6, templateObject_3$6;
|
|
10991
10945
|
|
|
10992
|
-
var Container$
|
|
10946
|
+
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
10993
10947
|
var ProductGalleryMobile = function (_a) {
|
|
10994
10948
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
10995
10949
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -11017,9 +10971,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
11017
10971
|
useEffect(function () {
|
|
11018
10972
|
setSelectedImage(images[index]);
|
|
11019
10973
|
}, [index, images]);
|
|
11020
|
-
return (jsxs$1(Container$
|
|
10974
|
+
return (jsxs$1(Container$5, { 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));
|
|
11021
10975
|
};
|
|
11022
|
-
var templateObject_1$
|
|
10976
|
+
var templateObject_1$a;
|
|
11023
10977
|
|
|
11024
10978
|
var Portal = function (_a) {
|
|
11025
10979
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -11142,23 +11096,22 @@ var react = __toCommonJS(react_exports);
|
|
|
11142
11096
|
var visibleStyle = function (_a) {
|
|
11143
11097
|
var opened = _a.opened;
|
|
11144
11098
|
return opened
|
|
11145
|
-
? css(templateObject_1$
|
|
11099
|
+
? css(templateObject_1$9 || (templateObject_1$9 = __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$5 || (templateObject_2$5 = __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 "])));
|
|
11146
11100
|
};
|
|
11147
|
-
var Container$
|
|
11148
|
-
|
|
11101
|
+
var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\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: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 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: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n\n ", ";\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'fit-content'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, function (props) { return "".concat(props.maxFullScreen ? 'overflow-y: auto;' : ''); }, mediaQueries({
|
|
11102
|
+
minWidth: ['50%', 'var(--component-modal-minWidth)'],
|
|
11103
|
+
}), visibleStyle);
|
|
11104
|
+
var Overlay = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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);
|
|
11149
11105
|
var Modal = function (_a) {
|
|
11150
|
-
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
11151
|
-
var
|
|
11152
|
-
useModalEvent(id, useCallback(function (e) {
|
|
11153
|
-
setOpened(e.detail.type === 'open');
|
|
11154
|
-
}, []));
|
|
11106
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c;
|
|
11107
|
+
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
11155
11108
|
var onDismiss = function () {
|
|
11156
11109
|
if (!dismissable) {
|
|
11157
11110
|
return;
|
|
11158
11111
|
}
|
|
11159
|
-
|
|
11112
|
+
close();
|
|
11160
11113
|
};
|
|
11161
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
11114
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$4, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
11162
11115
|
};
|
|
11163
11116
|
var modalEvent = function (id, detail) {
|
|
11164
11117
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -11171,39 +11124,54 @@ var useModalEvent = function (id, cb) {
|
|
|
11171
11124
|
cb(event);
|
|
11172
11125
|
}, [id, cb]));
|
|
11173
11126
|
};
|
|
11174
|
-
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$9, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
11175
11143
|
|
|
11176
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
11144
|
+
var Text$2 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __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; });
|
|
11177
11145
|
var Title$1 = function (_a) {
|
|
11178
11146
|
var title = _a.title;
|
|
11179
11147
|
var theme = useTheme();
|
|
11180
11148
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
11181
11149
|
};
|
|
11182
|
-
var templateObject_1$
|
|
11150
|
+
var templateObject_1$8;
|
|
11183
11151
|
|
|
11184
|
-
var P = newStyled.p(templateObject_1$
|
|
11152
|
+
var P = newStyled.p(templateObject_1$7 || (templateObject_1$7 = __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; });
|
|
11185
11153
|
var Promo = function (_a) {
|
|
11186
11154
|
var text = _a.text;
|
|
11187
11155
|
var theme = useTheme();
|
|
11188
11156
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
11189
11157
|
};
|
|
11190
|
-
var templateObject_1$
|
|
11158
|
+
var templateObject_1$7;
|
|
11191
11159
|
|
|
11192
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
11160
|
+
var Text$1 = newStyled.span(templateObject_1$6 || (templateObject_1$6 = __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; });
|
|
11193
11161
|
var Description = function (_a) {
|
|
11194
11162
|
var text = _a.text;
|
|
11195
11163
|
var theme = useTheme();
|
|
11196
11164
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
11197
11165
|
};
|
|
11198
|
-
var templateObject_1$
|
|
11166
|
+
var templateObject_1$6;
|
|
11199
11167
|
|
|
11200
|
-
var Container$
|
|
11168
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"); });
|
|
11201
11169
|
var CloseButton = function (_a) {
|
|
11202
11170
|
var onClick = _a.onClick, size = _a.size;
|
|
11203
11171
|
var theme = useTheme();
|
|
11204
|
-
return (jsx$1(Container$
|
|
11172
|
+
return (jsx$1(Container$3, __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));
|
|
11205
11173
|
};
|
|
11206
|
-
var templateObject_1$
|
|
11174
|
+
var templateObject_1$5;
|
|
11207
11175
|
|
|
11208
11176
|
var CartProductItem = {
|
|
11209
11177
|
Title: Title$1,
|
|
@@ -11213,10 +11181,10 @@ var CartProductItem = {
|
|
|
11213
11181
|
CloseButton: CloseButton,
|
|
11214
11182
|
};
|
|
11215
11183
|
|
|
11216
|
-
var Container$
|
|
11217
|
-
var Item = newStyled.span(templateObject_2$
|
|
11218
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
11219
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
11184
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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$4 || (templateObject_2$4 = __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$4 || (templateObject_3$4 = __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$3 || (templateObject_4$3 = __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"])));
|
|
11220
11188
|
var QuantityPicker = function (_a) {
|
|
11221
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;
|
|
11222
11190
|
var theme = useTheme();
|
|
@@ -11239,9 +11207,9 @@ var QuantityPicker = function (_a) {
|
|
|
11239
11207
|
return clamp(value);
|
|
11240
11208
|
});
|
|
11241
11209
|
}, [value, clamp]);
|
|
11242
|
-
return (jsxs$1(Container$
|
|
11210
|
+
return (jsxs$1(Container$2, __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));
|
|
11243
11211
|
};
|
|
11244
|
-
var templateObject_1$
|
|
11212
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11245
11213
|
|
|
11246
11214
|
var htmlReactParser = {exports: {}};
|
|
11247
11215
|
|
|
@@ -15022,16 +14990,16 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
15022
14990
|
HTMLReactParser$1.attributesToProps;
|
|
15023
14991
|
HTMLReactParser$1.Element;
|
|
15024
14992
|
|
|
15025
|
-
var Container = newStyled.div(templateObject_1$
|
|
15026
|
-
var Card = newStyled.div(templateObject_2$
|
|
15027
|
-
var Tag = newStyled.div(templateObject_3$
|
|
15028
|
-
var Label = newStyled.div(templateObject_4$
|
|
15029
|
-
var Check = newStyled.div(templateObject_5$
|
|
14993
|
+
var Container$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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$3 || (templateObject_2$3 = __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$3 || (templateObject_3$3 = __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$2 || (templateObject_4$2 = __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$2 || (templateObject_5$2 = __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"])));
|
|
15030
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"])));
|
|
15031
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"])));
|
|
15032
15000
|
var PackSelector = function (_a) {
|
|
15033
15001
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
15034
|
-
return (jsx$1(Container, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
15002
|
+
return (jsx$1(Container$1, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
15035
15003
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
15036
15004
|
}) }), void 0));
|
|
15037
15005
|
};
|
|
@@ -15048,28 +15016,28 @@ var PackCard = function (_a) {
|
|
|
15048
15016
|
color: 'var(--colors-semantic-urgent-color)',
|
|
15049
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));
|
|
15050
15018
|
};
|
|
15051
|
-
var templateObject_1$
|
|
15019
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7$1;
|
|
15052
15020
|
|
|
15053
|
-
var Title = newStyled.div(templateObject_1$
|
|
15054
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
15055
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
15021
|
+
var Title = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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$2 || (templateObject_2$2 = __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$2 || (templateObject_3$2 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
15056
15024
|
var Accordion = function (_a) {
|
|
15057
15025
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
15058
15026
|
var theme = useTheme();
|
|
15059
15027
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
15060
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));
|
|
15061
15029
|
};
|
|
15062
|
-
var templateObject_1$
|
|
15030
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2;
|
|
15063
15031
|
|
|
15064
|
-
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; });
|
|
15065
|
-
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"])));
|
|
15066
|
-
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"])));
|
|
15067
|
-
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"])));
|
|
15068
|
-
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; });
|
|
15032
|
+
var SectionContent = newStyled.div(templateObject_1$1 || (templateObject_1$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$1 || (templateObject_2$1 = __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$1 || (templateObject_3$1 = __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$1 || (templateObject_4$1 = __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$1 || (templateObject_5$1 = __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; });
|
|
15069
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; });
|
|
15070
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"])));
|
|
15071
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"])));
|
|
15072
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
15040
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
15073
15041
|
|
|
15074
15042
|
var Filters = function (_a) {
|
|
15075
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;
|
|
@@ -15104,5 +15072,18 @@ var FilterCheckbox = function (_a) {
|
|
|
15104
15072
|
return (jsx$1(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
15105
15073
|
};
|
|
15106
15074
|
|
|
15107
|
-
|
|
15075
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
15076
|
+
var BackArrow = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
15077
|
+
var BoldSpan = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
15078
|
+
var NormalSpan = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
15079
|
+
var SearchNavigationParents = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
15080
|
+
var SearchNavigation = function (_a) {
|
|
15081
|
+
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
15082
|
+
return (jsxs$1(Container, { children: [jsxs$1(Text$5, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
15083
|
+
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
15084
|
+
}) }, void 0)] }, void 0));
|
|
15085
|
+
};
|
|
15086
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
15087
|
+
|
|
15088
|
+
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, SearchNavigation, 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 };
|
|
15108
15089
|
//# sourceMappingURL=index.esm.js.map
|