@trafilea/afrodita-components 4.0.2-beta.15 → 4.0.2-beta.16
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 +26 -1
- package/build/index.esm.js +241 -196
- package/build/index.esm.js.map +1 -1
- package/build/index.js +243 -196
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3282,7 +3282,7 @@ exports.InputValidationType = void 0;
|
|
|
3282
3282
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3283
3283
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3284
3284
|
|
|
3285
|
-
var Section = newStyled.div(templateObject_1$
|
|
3285
|
+
var Section = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
3286
3286
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3287
3287
|
});
|
|
3288
3288
|
var CardHeader = function (_a) {
|
|
@@ -3293,14 +3293,14 @@ var CardFooter = function (_a) {
|
|
|
3293
3293
|
var children = _a.children;
|
|
3294
3294
|
return (jsxRuntime.jsx(Section, __assign({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3295
3295
|
};
|
|
3296
|
-
var templateObject_1$
|
|
3296
|
+
var templateObject_1$14;
|
|
3297
3297
|
|
|
3298
|
-
var Body = newStyled.div(templateObject_1
|
|
3298
|
+
var Body = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
3299
3299
|
var CardBody = function (_a) {
|
|
3300
3300
|
var children = _a.children;
|
|
3301
3301
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3302
3302
|
};
|
|
3303
|
-
var templateObject_1
|
|
3303
|
+
var templateObject_1$13;
|
|
3304
3304
|
|
|
3305
3305
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3306
3306
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3445,7 +3445,7 @@ var AssetsProvider = function (_a) {
|
|
|
3445
3445
|
};
|
|
3446
3446
|
var useThemeAssets = function () { return React.useContext(AssetsContext); };
|
|
3447
3447
|
|
|
3448
|
-
var Container$
|
|
3448
|
+
var Container$E = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
3449
3449
|
var flex = _a.flex;
|
|
3450
3450
|
return flex &&
|
|
3451
3451
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3458,14 +3458,14 @@ var Container$D = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
|
|
|
3458
3458
|
var Card = function (_a) {
|
|
3459
3459
|
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;
|
|
3460
3460
|
var theme = useTheme();
|
|
3461
|
-
return (jsxRuntime.jsx(Container$
|
|
3461
|
+
return (jsxRuntime.jsx(Container$E, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3462
3462
|
};
|
|
3463
3463
|
var Card$1 = Object.assign(Card, {
|
|
3464
3464
|
Header: CardHeader,
|
|
3465
3465
|
Footer: CardFooter,
|
|
3466
3466
|
Body: CardBody,
|
|
3467
3467
|
});
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$12;
|
|
3469
3469
|
|
|
3470
3470
|
var Fragment = jsxRuntime.Fragment;
|
|
3471
3471
|
function jsx(type, props, key) {
|
|
@@ -4209,7 +4209,7 @@ function useDescriptions() {
|
|
|
4209
4209
|
} // ---
|
|
4210
4210
|
|
|
4211
4211
|
var DEFAULT_DESCRIPTION_TAG = 'p';
|
|
4212
|
-
function Description$
|
|
4212
|
+
function Description$2(props) {
|
|
4213
4213
|
var context = useDescriptionContext();
|
|
4214
4214
|
var id = "headlessui-description-" + useId();
|
|
4215
4215
|
useIsoMorphicEffect(function () {
|
|
@@ -5928,7 +5928,7 @@ function Option$1(props) {
|
|
|
5928
5928
|
|
|
5929
5929
|
RadioGroup.Option = Option$1;
|
|
5930
5930
|
RadioGroup.Label = Label$3;
|
|
5931
|
-
RadioGroup.Description = Description$
|
|
5931
|
+
RadioGroup.Description = Description$2;
|
|
5932
5932
|
|
|
5933
5933
|
var BaseSelectButton = function (_a) {
|
|
5934
5934
|
var children = _a.children, as = _a.as;
|
|
@@ -5945,7 +5945,7 @@ function BaseSelectOption(_a) {
|
|
|
5945
5945
|
return (jsxRuntime.jsx(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5946
5946
|
}
|
|
5947
5947
|
|
|
5948
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
5948
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5949
5949
|
function BaseSelect(_a) {
|
|
5950
5950
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5951
5951
|
return (jsxRuntime.jsx(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5955,7 +5955,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5955
5955
|
Options: BaseSelectOptions,
|
|
5956
5956
|
Option: BaseSelectOption,
|
|
5957
5957
|
});
|
|
5958
|
-
var templateObject_1$
|
|
5958
|
+
var templateObject_1$11;
|
|
5959
5959
|
|
|
5960
5960
|
var CustomButton = newStyled.button(function (_a) {
|
|
5961
5961
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -6167,7 +6167,7 @@ var CustomCheckboxStyles = {
|
|
|
6167
6167
|
},
|
|
6168
6168
|
};
|
|
6169
6169
|
|
|
6170
|
-
var Container$
|
|
6170
|
+
var Container$D = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
6171
6171
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6172
6172
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6173
6173
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6196,9 +6196,9 @@ var Checkbox = function (_a) {
|
|
|
6196
6196
|
React.useEffect(function () {
|
|
6197
6197
|
mounted.current = true;
|
|
6198
6198
|
}, []);
|
|
6199
|
-
return (jsxRuntime.jsxs(Container$
|
|
6199
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6200
6200
|
};
|
|
6201
|
-
var templateObject_1$
|
|
6201
|
+
var templateObject_1$10, templateObject_2$D;
|
|
6202
6202
|
|
|
6203
6203
|
var CustomOption = newStyled.li(function (_a) {
|
|
6204
6204
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6327,7 +6327,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6327
6327
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6328
6328
|
// `variants` styles that are consistent through all themes.
|
|
6329
6329
|
var TAGS = {
|
|
6330
|
-
hero1: newStyled.h1(templateObject_1
|
|
6330
|
+
hero1: newStyled.h1(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""]))),
|
|
6331
6331
|
hero2: newStyled.h2(templateObject_2$C || (templateObject_2$C = __makeTemplateObject([""], [""]))),
|
|
6332
6332
|
hero3: newStyled.h3(templateObject_3$o || (templateObject_3$o = __makeTemplateObject([""], [""]))),
|
|
6333
6333
|
display1: newStyled.h1(templateObject_4$d || (templateObject_4$d = __makeTemplateObject([""], [""]))),
|
|
@@ -6345,7 +6345,7 @@ var TAGS = {
|
|
|
6345
6345
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6346
6346
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
6347
6347
|
};
|
|
6348
|
-
var Text$
|
|
6348
|
+
var Text$5 = function (_a) {
|
|
6349
6349
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
6350
6350
|
var theme = useTheme();
|
|
6351
6351
|
var Tag = React.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -6450,16 +6450,16 @@ var DEFAULTS = {
|
|
|
6450
6450
|
size: 'regular',
|
|
6451
6451
|
},
|
|
6452
6452
|
};
|
|
6453
|
-
var templateObject_1
|
|
6453
|
+
var templateObject_1$$, templateObject_2$C, templateObject_3$o, templateObject_4$d, templateObject_5$7, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
6454
6454
|
|
|
6455
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
6455
|
+
var ButtonsContainer = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
|
|
6456
6456
|
var SizeSelector = function (_a) {
|
|
6457
6457
|
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6458
6458
|
return (jsxs("div", __assign({ css: {
|
|
6459
6459
|
display: 'flex',
|
|
6460
6460
|
flexDirection: inline ? 'row' : 'column',
|
|
6461
6461
|
alignItems: inline ? 'center' : 'start',
|
|
6462
|
-
} }, { children: [jsxs(Text$
|
|
6462
|
+
} }, { children: [jsxs(Text$5, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, !inline && (jsx(Text$5, __assign({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, { children: sizes.map(function (size) {
|
|
6463
6463
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6464
6464
|
return (jsx(SelectorSecondary, { css: {
|
|
6465
6465
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -6467,7 +6467,7 @@ var SizeSelector = function (_a) {
|
|
|
6467
6467
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6468
6468
|
}) }, void 0)] }), void 0));
|
|
6469
6469
|
};
|
|
6470
|
-
var templateObject_1$
|
|
6470
|
+
var templateObject_1$_;
|
|
6471
6471
|
|
|
6472
6472
|
var getStylesBySize$7 = function (size) {
|
|
6473
6473
|
switch (size) {
|
|
@@ -6496,7 +6496,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6496
6496
|
} });
|
|
6497
6497
|
};
|
|
6498
6498
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6499
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6499
|
+
return Icon && (jsx("span", __assign({ css: css(templateObject_1$Z || (templateObject_1$Z = __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));
|
|
6500
6500
|
};
|
|
6501
6501
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6502
6502
|
if (disabled)
|
|
@@ -6512,16 +6512,16 @@ var TextButton = function (_a) {
|
|
|
6512
6512
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6513
6513
|
return (jsx(BaseButton, __assign({ 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));
|
|
6514
6514
|
};
|
|
6515
|
-
var templateObject_1$
|
|
6515
|
+
var templateObject_1$Z;
|
|
6516
6516
|
|
|
6517
|
-
var Container$
|
|
6518
|
-
var P$
|
|
6517
|
+
var Container$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
6518
|
+
var P$3 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6519
6519
|
var PercentageSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6520
6520
|
var SizeFitGuide = function (_a) {
|
|
6521
6521
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6522
|
-
return (jsxRuntime.jsxs(Container$
|
|
6522
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6523
6523
|
};
|
|
6524
|
-
var templateObject_1$
|
|
6524
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$n;
|
|
6525
6525
|
|
|
6526
6526
|
var getStylesBySize$6 = function (size) {
|
|
6527
6527
|
switch (size) {
|
|
@@ -6551,7 +6551,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6551
6551
|
};
|
|
6552
6552
|
}
|
|
6553
6553
|
};
|
|
6554
|
-
var Container$
|
|
6554
|
+
var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
6555
6555
|
var backgroundColor = _a.backgroundColor;
|
|
6556
6556
|
return backgroundColor;
|
|
6557
6557
|
}, function (_a) {
|
|
@@ -6588,9 +6588,9 @@ var H3$2 = newStyled.h3(templateObject_2$A || (templateObject_2$A = __makeTempla
|
|
|
6588
6588
|
var DiscountTag = function (_a) {
|
|
6589
6589
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6590
6590
|
var theme = useTheme();
|
|
6591
|
-
return (jsxRuntime.jsx(Container$
|
|
6591
|
+
return (jsxRuntime.jsx(Container$B, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6592
6592
|
};
|
|
6593
|
-
var templateObject_1$
|
|
6593
|
+
var templateObject_1$X, templateObject_2$A;
|
|
6594
6594
|
|
|
6595
6595
|
var getStylesBySize$5 = function (size) {
|
|
6596
6596
|
switch (size) {
|
|
@@ -6614,7 +6614,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6614
6614
|
};
|
|
6615
6615
|
}
|
|
6616
6616
|
};
|
|
6617
|
-
var Container$
|
|
6617
|
+
var Container$A = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6618
6618
|
var Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __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) {
|
|
6619
6619
|
var weight = _a.weight;
|
|
6620
6620
|
return (weight ? weight : '400');
|
|
@@ -6645,9 +6645,9 @@ var TagContainer = newStyled.h1(templateObject_3$m || (templateObject_3$m = __ma
|
|
|
6645
6645
|
var PriceLabel = function (_a) {
|
|
6646
6646
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6647
6647
|
var theme = useTheme();
|
|
6648
|
-
return (jsxRuntime.jsxs(Container$
|
|
6648
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6649
6649
|
};
|
|
6650
|
-
var templateObject_1$
|
|
6650
|
+
var templateObject_1$W, templateObject_2$z, templateObject_3$m;
|
|
6651
6651
|
|
|
6652
6652
|
var OneColorSelector = function (_a) {
|
|
6653
6653
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6686,14 +6686,14 @@ var OutOfStock = function (_a) {
|
|
|
6686
6686
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6687
6687
|
};
|
|
6688
6688
|
|
|
6689
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6689
|
+
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6690
6690
|
newStyled(RadioGroup.Label)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6691
6691
|
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6692
6692
|
var Span = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6693
6693
|
var OptionsContainer = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
6694
6694
|
var Label$1 = function (_a) {
|
|
6695
6695
|
var label = _a.label, values = _a.values;
|
|
6696
|
-
return (jsxRuntime.jsxs(Text$
|
|
6696
|
+
return (jsxRuntime.jsxs(Text$5, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6697
6697
|
};
|
|
6698
6698
|
var Option = function (_a) {
|
|
6699
6699
|
var value = _a.value, children = _a.children;
|
|
@@ -6708,9 +6708,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6708
6708
|
Option: Option,
|
|
6709
6709
|
OptionsContainer: OptionsContainer,
|
|
6710
6710
|
});
|
|
6711
|
-
var templateObject_1$
|
|
6711
|
+
var templateObject_1$V, templateObject_2$y, templateObject_3$l, templateObject_4$c, templateObject_5$6;
|
|
6712
6712
|
|
|
6713
|
-
var Container$
|
|
6713
|
+
var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
6714
6714
|
var borderColor = _a.borderColor;
|
|
6715
6715
|
return borderColor;
|
|
6716
6716
|
});
|
|
@@ -6719,9 +6719,9 @@ var PatternSelector = function (_a) {
|
|
|
6719
6719
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6720
6720
|
var theme = useTheme();
|
|
6721
6721
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6722
|
-
return (jsxRuntime.jsx(Container$
|
|
6722
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6723
6723
|
};
|
|
6724
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$U, templateObject_2$x;
|
|
6725
6725
|
|
|
6726
6726
|
var renderOptions$1 = function (options) {
|
|
6727
6727
|
if (options.length)
|
|
@@ -6773,7 +6773,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6773
6773
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6774
6774
|
};
|
|
6775
6775
|
|
|
6776
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6776
|
+
var Image$1 = newStyled.img(templateObject_1$T || (templateObject_1$T = __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) {
|
|
6777
6777
|
var selected = _a.selected, theme = _a.theme;
|
|
6778
6778
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6779
6779
|
});
|
|
@@ -6782,35 +6782,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
6782
6782
|
var theme = useTheme();
|
|
6783
6783
|
return jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6784
6784
|
};
|
|
6785
|
-
var templateObject_1$
|
|
6785
|
+
var templateObject_1$T;
|
|
6786
6786
|
|
|
6787
|
-
var Container$
|
|
6787
|
+
var Container$y = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
6788
6788
|
var Button$5 = newStyled.button(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
6789
6789
|
var ImagePreviewList = function (_a) {
|
|
6790
6790
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6791
|
-
return (jsxRuntime.jsx(Container$
|
|
6791
|
+
return (jsxRuntime.jsx(Container$y, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6792
6792
|
return (jsxRuntime.jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6793
6793
|
}) }), void 0));
|
|
6794
6794
|
};
|
|
6795
|
-
var templateObject_1$
|
|
6795
|
+
var templateObject_1$S, templateObject_2$w;
|
|
6796
6796
|
|
|
6797
|
-
var Img = newStyled.img(templateObject_1$
|
|
6797
|
+
var Img = newStyled.img(templateObject_1$R || (templateObject_1$R = __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; });
|
|
6798
6798
|
var Image = function (_a) {
|
|
6799
6799
|
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;
|
|
6800
6800
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
6801
6801
|
};
|
|
6802
|
-
var templateObject_1$
|
|
6802
|
+
var templateObject_1$R;
|
|
6803
6803
|
|
|
6804
|
-
var Container$
|
|
6804
|
+
var Container$x = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
6805
6805
|
var TopTagContainer$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6806
6806
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6807
6807
|
var ImageProductWithTags$1 = function (_a) {
|
|
6808
6808
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6809
|
-
return (jsxRuntime.jsxs(Container$
|
|
6809
|
+
return (jsxRuntime.jsxs(Container$x, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6810
6810
|
};
|
|
6811
|
-
var templateObject_1$
|
|
6811
|
+
var templateObject_1$Q, templateObject_2$v, templateObject_3$k;
|
|
6812
6812
|
|
|
6813
|
-
var Container$
|
|
6813
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
6814
6814
|
var ProductGallery = function (_a) {
|
|
6815
6815
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6816
6816
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6818,11 +6818,11 @@ var ProductGallery = function (_a) {
|
|
|
6818
6818
|
React.useEffect(function () {
|
|
6819
6819
|
setSelectedImage(initialValue);
|
|
6820
6820
|
}, [initialValue]);
|
|
6821
|
-
return (jsxRuntime.jsxs(Container$
|
|
6821
|
+
return (jsxRuntime.jsxs(Container$w, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6822
6822
|
setSelectedImage(value);
|
|
6823
6823
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6824
6824
|
};
|
|
6825
|
-
var templateObject_1$
|
|
6825
|
+
var templateObject_1$P;
|
|
6826
6826
|
|
|
6827
6827
|
/* base styles & size variants */
|
|
6828
6828
|
var StarStyles = {
|
|
@@ -6860,8 +6860,8 @@ var StarStyles = {
|
|
|
6860
6860
|
});
|
|
6861
6861
|
},
|
|
6862
6862
|
};
|
|
6863
|
-
var Container$
|
|
6864
|
-
var templateObject_1$
|
|
6863
|
+
var Container$v = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6864
|
+
var templateObject_1$O;
|
|
6865
6865
|
|
|
6866
6866
|
var StarContainer = newStyled.div(function (_a) {
|
|
6867
6867
|
var size = _a.size;
|
|
@@ -6872,7 +6872,7 @@ var StarContainer = newStyled.div(function (_a) {
|
|
|
6872
6872
|
});
|
|
6873
6873
|
var StarList = function (_a) {
|
|
6874
6874
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6875
|
-
return (jsxRuntime.jsx(Container$
|
|
6875
|
+
return (jsxRuntime.jsx(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6876
6876
|
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, { fill: fill }, void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, { fill: fill }, void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, { fill: fill }, void 0)) }), index));
|
|
6877
6877
|
}) }, void 0));
|
|
6878
6878
|
};
|
|
@@ -6916,8 +6916,8 @@ var LabelStyles = {
|
|
|
6916
6916
|
});
|
|
6917
6917
|
},
|
|
6918
6918
|
};
|
|
6919
|
-
var Container$
|
|
6920
|
-
var templateObject_1$
|
|
6919
|
+
var Container$u = 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"])));
|
|
6920
|
+
var templateObject_1$N;
|
|
6921
6921
|
|
|
6922
6922
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6923
6923
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6930,11 +6930,11 @@ var starsNumber = 5;
|
|
|
6930
6930
|
var Rating = function (_a) {
|
|
6931
6931
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6932
6932
|
var theme = useTheme();
|
|
6933
|
-
return (jsxRuntime.jsxs(Container$
|
|
6933
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6934
6934
|
};
|
|
6935
6935
|
|
|
6936
|
-
var Container$
|
|
6937
|
-
var P$
|
|
6936
|
+
var Container$t = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
6937
|
+
var P$2 = newStyled.p(templateObject_2$u || (templateObject_2$u = __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; });
|
|
6938
6938
|
var textButtonStyles = function (theme) { return ({
|
|
6939
6939
|
border: 'none',
|
|
6940
6940
|
background: 'transparent',
|
|
@@ -6947,9 +6947,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6947
6947
|
var FitPredictor = function (_a) {
|
|
6948
6948
|
var onClick = _a.onClick;
|
|
6949
6949
|
var theme = useTheme();
|
|
6950
|
-
return (jsxs(Container$
|
|
6950
|
+
return (jsxs(Container$t, __assign({ theme: theme }, { children: [jsx(Container$t, { 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({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6951
6951
|
};
|
|
6952
|
-
var templateObject_1$
|
|
6952
|
+
var templateObject_1$M, templateObject_2$u;
|
|
6953
6953
|
|
|
6954
6954
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6955
6955
|
var color = _a.color;
|
|
@@ -6963,7 +6963,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6963
6963
|
margin: '0.938rem 4.188rem',
|
|
6964
6964
|
});
|
|
6965
6965
|
});
|
|
6966
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6966
|
+
var Bar = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
6967
6967
|
var backgroundColor = _a.backgroundColor;
|
|
6968
6968
|
return backgroundColor;
|
|
6969
6969
|
}, function (_a) {
|
|
@@ -6986,7 +6986,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6986
6986
|
position: 'absolute',
|
|
6987
6987
|
});
|
|
6988
6988
|
});
|
|
6989
|
-
var Container$
|
|
6989
|
+
var Container$s = newStyled.div(function (_a) {
|
|
6990
6990
|
var widthAuto = _a.widthAuto;
|
|
6991
6991
|
return ({
|
|
6992
6992
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7000,9 +7000,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7000
7000
|
var ProgressBar = function (_a) {
|
|
7001
7001
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7002
7002
|
var theme = useTheme();
|
|
7003
|
-
return (jsxRuntime.jsxs(Container$
|
|
7003
|
+
return (jsxRuntime.jsxs(Container$s, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7004
7004
|
};
|
|
7005
|
-
var templateObject_1$
|
|
7005
|
+
var templateObject_1$L;
|
|
7006
7006
|
|
|
7007
7007
|
var getStylesBySize$4 = function (size) {
|
|
7008
7008
|
switch (size) {
|
|
@@ -7023,7 +7023,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7023
7023
|
};
|
|
7024
7024
|
}
|
|
7025
7025
|
};
|
|
7026
|
-
var Container$
|
|
7026
|
+
var Container$r = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
7027
7027
|
var backgroundColor = _a.backgroundColor;
|
|
7028
7028
|
return backgroundColor;
|
|
7029
7029
|
}, function (_a) {
|
|
@@ -7051,9 +7051,9 @@ var Container$q = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
7051
7051
|
var IconButton = function (_a) {
|
|
7052
7052
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7053
7053
|
var theme = useTheme();
|
|
7054
|
-
return (jsxRuntime.jsx(Container$
|
|
7054
|
+
return (jsxRuntime.jsx(Container$r, __assign({ 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));
|
|
7055
7055
|
};
|
|
7056
|
-
var templateObject_1$
|
|
7056
|
+
var templateObject_1$K;
|
|
7057
7057
|
|
|
7058
7058
|
var TooltipArrow = function (_a) {
|
|
7059
7059
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7133,7 +7133,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
7133
7133
|
}
|
|
7134
7134
|
};
|
|
7135
7135
|
|
|
7136
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7136
|
+
var Wrapper$5 = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
7137
7137
|
var position = _a.position;
|
|
7138
7138
|
return getWrapperFlexDirection(position);
|
|
7139
7139
|
});
|
|
@@ -7176,12 +7176,12 @@ var TooltipText = newStyled.div(templateObject_4$b || (templateObject_4$b = __ma
|
|
|
7176
7176
|
return color;
|
|
7177
7177
|
});
|
|
7178
7178
|
var TopSection = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
7179
|
-
var Title$
|
|
7179
|
+
var Title$4 = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __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) {
|
|
7180
7180
|
var color = _a.color;
|
|
7181
7181
|
return color;
|
|
7182
7182
|
});
|
|
7183
7183
|
var IconContainer$4 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
7184
|
-
var templateObject_1$
|
|
7184
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$j, templateObject_4$b, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
7185
7185
|
|
|
7186
7186
|
var Tooltip = function (_a) {
|
|
7187
7187
|
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;
|
|
@@ -7198,7 +7198,7 @@ var Tooltip = function (_a) {
|
|
|
7198
7198
|
var ref = tooltipRef.current;
|
|
7199
7199
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
7200
7200
|
}, [tooltipRef]);
|
|
7201
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$
|
|
7201
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
7202
7202
|
};
|
|
7203
7203
|
|
|
7204
7204
|
/* base styles & variants */
|
|
@@ -7332,8 +7332,8 @@ var ContainerStyles = {
|
|
|
7332
7332
|
},
|
|
7333
7333
|
};
|
|
7334
7334
|
|
|
7335
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7336
|
-
var Container$
|
|
7335
|
+
var Wrapper$4 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7336
|
+
var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7337
7337
|
var Input$2 = newStyled.input(templateObject_2$s || (templateObject_2$s = __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) {
|
|
7338
7338
|
var disabled = _a.disabled;
|
|
7339
7339
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7349,9 +7349,9 @@ var RadioInput = function (_a) {
|
|
|
7349
7349
|
var value = event.currentTarget.value;
|
|
7350
7350
|
onChange({ value: value, label: label });
|
|
7351
7351
|
};
|
|
7352
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7352
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$q, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7353
7353
|
};
|
|
7354
|
-
var templateObject_1$
|
|
7354
|
+
var templateObject_1$I, templateObject_2$s;
|
|
7355
7355
|
|
|
7356
7356
|
var RadioGroupInput = function (_a) {
|
|
7357
7357
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7365,9 +7365,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7365
7365
|
}) }), void 0));
|
|
7366
7366
|
};
|
|
7367
7367
|
|
|
7368
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7369
|
-
var Container$
|
|
7370
|
-
var Text$
|
|
7368
|
+
var Wrapper$3 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7369
|
+
var Container$p = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
7370
|
+
var Text$4 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7371
7371
|
var color = _a.color;
|
|
7372
7372
|
return color;
|
|
7373
7373
|
}, function (_a) {
|
|
@@ -7380,32 +7380,32 @@ var Text$2 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemp
|
|
|
7380
7380
|
var Minimalistic = function (_a) {
|
|
7381
7381
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _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;
|
|
7382
7382
|
var theme = useTheme();
|
|
7383
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7383
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7384
7384
|
};
|
|
7385
|
-
var templateObject_1$
|
|
7385
|
+
var templateObject_1$H, templateObject_2$r, templateObject_3$i;
|
|
7386
7386
|
|
|
7387
|
-
var Container$
|
|
7388
|
-
var Title$
|
|
7387
|
+
var Container$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7388
|
+
var Title$3 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __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; });
|
|
7389
7389
|
var Details$1 = newStyled.span(templateObject_3$h || (templateObject_3$h = __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; });
|
|
7390
7390
|
var PriceContainer$1 = newStyled.span(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
7391
7391
|
var Simple = function (_a) {
|
|
7392
7392
|
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;
|
|
7393
7393
|
var theme = useTheme();
|
|
7394
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7394
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7395
7395
|
};
|
|
7396
|
-
var templateObject_1$
|
|
7396
|
+
var templateObject_1$G, templateObject_2$q, templateObject_3$h, templateObject_4$a;
|
|
7397
7397
|
|
|
7398
7398
|
var Bundle = {
|
|
7399
7399
|
Minimalistic: Minimalistic,
|
|
7400
7400
|
Simple: Simple,
|
|
7401
7401
|
};
|
|
7402
7402
|
|
|
7403
|
-
var Container$
|
|
7403
|
+
var Container$n = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
7404
7404
|
var Tag = function (_a) {
|
|
7405
7405
|
var text = _a.text, className = _a.className;
|
|
7406
|
-
return jsxRuntime.jsx(Container$
|
|
7406
|
+
return jsxRuntime.jsx(Container$n, __assign({ className: className }, { children: text }), void 0);
|
|
7407
7407
|
};
|
|
7408
|
-
var templateObject_1$
|
|
7408
|
+
var templateObject_1$F;
|
|
7409
7409
|
|
|
7410
7410
|
var getStylesBySize$3 = function (size) {
|
|
7411
7411
|
switch (size) {
|
|
@@ -7506,7 +7506,7 @@ var Timer = function (_a) {
|
|
|
7506
7506
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7507
7507
|
};
|
|
7508
7508
|
|
|
7509
|
-
var Label = newStyled.span(templateObject_1$
|
|
7509
|
+
var Label = newStyled.span(templateObject_1$E || (templateObject_1$E = __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) {
|
|
7510
7510
|
var color = _a.color;
|
|
7511
7511
|
return color;
|
|
7512
7512
|
});
|
|
@@ -7519,7 +7519,7 @@ var InputLabel = function (_a) {
|
|
|
7519
7519
|
var theme = useTheme();
|
|
7520
7520
|
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
7521
7521
|
};
|
|
7522
|
-
var templateObject_1$
|
|
7522
|
+
var templateObject_1$E, templateObject_2$p;
|
|
7523
7523
|
|
|
7524
7524
|
var isEmpty = function (value) {
|
|
7525
7525
|
return value.length === 0;
|
|
@@ -7529,16 +7529,16 @@ var sliceString = function (str, maxLength) {
|
|
|
7529
7529
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7530
7530
|
};
|
|
7531
7531
|
|
|
7532
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7532
|
+
var ErrorText = newStyled.h3(templateObject_1$D || (templateObject_1$D = __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; });
|
|
7533
7533
|
var ErrorContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
7534
7534
|
var Error$1 = function (_a) {
|
|
7535
7535
|
var error = _a.error;
|
|
7536
7536
|
var theme = useTheme();
|
|
7537
7537
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
7538
7538
|
};
|
|
7539
|
-
var templateObject_1$
|
|
7539
|
+
var templateObject_1$D, templateObject_2$o;
|
|
7540
7540
|
|
|
7541
|
-
var Container$
|
|
7541
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7542
7542
|
var color = _a.color;
|
|
7543
7543
|
return color;
|
|
7544
7544
|
});
|
|
@@ -7589,7 +7589,7 @@ var InputWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __m
|
|
|
7589
7589
|
var size = _a.size;
|
|
7590
7590
|
return (size === 'small' ? '36px' : '44px');
|
|
7591
7591
|
});
|
|
7592
|
-
var templateObject_1$
|
|
7592
|
+
var templateObject_1$C, templateObject_2$n, templateObject_3$g;
|
|
7593
7593
|
|
|
7594
7594
|
var BaseInput = function (_a) {
|
|
7595
7595
|
var _b;
|
|
@@ -7642,7 +7642,7 @@ var BaseInput = function (_a) {
|
|
|
7642
7642
|
highlight: theme.colors.border.highlight,
|
|
7643
7643
|
boxShadow: theme.component.input.boxShadow,
|
|
7644
7644
|
};
|
|
7645
|
-
return (jsxRuntime.jsxs(Container$
|
|
7645
|
+
return (jsxRuntime.jsxs(Container$m, __assign({ color: status === exports.InputValidationType.Valid
|
|
7646
7646
|
? theme.colors.shades['700'].color
|
|
7647
7647
|
: status === exports.InputValidationType.Error
|
|
7648
7648
|
? theme.colors.semantic.urgent.color
|
|
@@ -7663,7 +7663,7 @@ var Button$4 = function (_a) {
|
|
|
7663
7663
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7664
7664
|
};
|
|
7665
7665
|
|
|
7666
|
-
var Container$
|
|
7666
|
+
var Container$l = newStyled.div(templateObject_1$B || (templateObject_1$B = __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 }\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 }\n"])), function (_a) {
|
|
7667
7667
|
var theme = _a.theme;
|
|
7668
7668
|
return theme.component.inputCustom.input.borderRadius;
|
|
7669
7669
|
});
|
|
@@ -7680,11 +7680,11 @@ var Custom = function (_a) {
|
|
|
7680
7680
|
text: text,
|
|
7681
7681
|
disabled: rest.disabled,
|
|
7682
7682
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7683
|
-
return (jsxRuntime.jsx(Container$
|
|
7683
|
+
return (jsxRuntime.jsx(Container$l, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7684
7684
|
};
|
|
7685
|
-
var templateObject_1$
|
|
7685
|
+
var templateObject_1$B, templateObject_2$m;
|
|
7686
7686
|
|
|
7687
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7687
|
+
var SuccessContainer = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
7688
7688
|
var size = _a.size;
|
|
7689
7689
|
return (size === 'small' ? '36px' : '');
|
|
7690
7690
|
});
|
|
@@ -7694,9 +7694,9 @@ var Success = function (_a) {
|
|
|
7694
7694
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
7695
7695
|
return (jsxRuntime.jsxs(SuccessContainer, __assign({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
7696
7696
|
};
|
|
7697
|
-
var templateObject_1$
|
|
7697
|
+
var templateObject_1$A, templateObject_2$l, templateObject_3$f;
|
|
7698
7698
|
|
|
7699
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7699
|
+
var ButtonContainer = newStyled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
7700
7700
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7701
7701
|
return status === exports.InputValidationType.Empty &&
|
|
7702
7702
|
type === 'primary' &&
|
|
@@ -7713,21 +7713,21 @@ var BasePlusButton = function (_a) {
|
|
|
7713
7713
|
}
|
|
7714
7714
|
return (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7715
7715
|
};
|
|
7716
|
-
var templateObject_1$
|
|
7716
|
+
var templateObject_1$z;
|
|
7717
7717
|
|
|
7718
|
-
var Container$
|
|
7718
|
+
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7719
7719
|
var IconContainer$3 = newStyled.div(templateObject_2$k || (templateObject_2$k = __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; });
|
|
7720
7720
|
var BasePlusIcon = function (_a) {
|
|
7721
7721
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7722
7722
|
var theme = useTheme();
|
|
7723
7723
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7724
|
-
return (jsxRuntime.jsx(Container$
|
|
7724
|
+
return (jsxRuntime.jsx(Container$k, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$3, __assign({ color: status === exports.InputValidationType.Valid
|
|
7725
7725
|
? theme.colors.shades['700'].color
|
|
7726
7726
|
: status === exports.InputValidationType.Error
|
|
7727
7727
|
? theme.colors.semantic.urgent.color
|
|
7728
7728
|
: '' }, { children: React.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7729
7729
|
};
|
|
7730
|
-
var templateObject_1$
|
|
7730
|
+
var templateObject_1$y, templateObject_2$k;
|
|
7731
7731
|
|
|
7732
7732
|
var Input$1 = {
|
|
7733
7733
|
Simple: BaseInput,
|
|
@@ -7736,7 +7736,7 @@ var Input$1 = {
|
|
|
7736
7736
|
SimplePlusIcon: BasePlusIcon,
|
|
7737
7737
|
};
|
|
7738
7738
|
|
|
7739
|
-
var Container$
|
|
7739
|
+
var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
7740
7740
|
var width = _a.width;
|
|
7741
7741
|
return width;
|
|
7742
7742
|
}, function (_a) {
|
|
@@ -7752,11 +7752,11 @@ var Container$i = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
7752
7752
|
var PaymentMethod = function (_a) {
|
|
7753
7753
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7754
7754
|
var theme = useTheme();
|
|
7755
|
-
return (jsxRuntime.jsx(Container$
|
|
7755
|
+
return (jsxRuntime.jsx(Container$j, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7756
7756
|
};
|
|
7757
|
-
var templateObject_1$
|
|
7757
|
+
var templateObject_1$x;
|
|
7758
7758
|
|
|
7759
|
-
var Text$
|
|
7759
|
+
var Text$3 = newStyled.h3(templateObject_1$w || (templateObject_1$w = __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) {
|
|
7760
7760
|
var backgroundColor = _a.backgroundColor;
|
|
7761
7761
|
return backgroundColor;
|
|
7762
7762
|
}, function (_a) {
|
|
@@ -7766,23 +7766,23 @@ var Text$1 = newStyled.h3(templateObject_1$s || (templateObject_1$s = __makeTemp
|
|
|
7766
7766
|
var OfferBanner = function (_a) {
|
|
7767
7767
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7768
7768
|
var theme = useTheme();
|
|
7769
|
-
return (jsxRuntime.jsx(Text$
|
|
7769
|
+
return (jsxRuntime.jsx(Text$3, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7770
7770
|
};
|
|
7771
|
-
var templateObject_1$
|
|
7771
|
+
var templateObject_1$w;
|
|
7772
7772
|
|
|
7773
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7773
|
+
var Wrapper$2 = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
7774
7774
|
var GrandTotal = newStyled.h1(templateObject_2$j || (templateObject_2$j = __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; });
|
|
7775
7775
|
var Currency = newStyled.span(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
7776
|
-
var Container$
|
|
7776
|
+
var Container$i = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
7777
7777
|
var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
7778
7778
|
var Total = function (_a) {
|
|
7779
7779
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7780
7780
|
var theme = useTheme();
|
|
7781
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7781
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$i, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7782
7782
|
};
|
|
7783
|
-
var templateObject_1$
|
|
7783
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$e, templateObject_4$9, templateObject_5$4;
|
|
7784
7784
|
|
|
7785
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7785
|
+
var Wrapper$1 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7786
7786
|
var color = _a.color;
|
|
7787
7787
|
return color;
|
|
7788
7788
|
});
|
|
@@ -7800,22 +7800,22 @@ var Subtotal = function (_a) {
|
|
|
7800
7800
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7801
7801
|
})] }), void 0));
|
|
7802
7802
|
};
|
|
7803
|
-
var templateObject_1$
|
|
7803
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$8;
|
|
7804
7804
|
|
|
7805
7805
|
var Totals = {
|
|
7806
7806
|
Total: Total,
|
|
7807
7807
|
Subtotal: Subtotal,
|
|
7808
7808
|
};
|
|
7809
7809
|
|
|
7810
|
-
var Container$
|
|
7810
|
+
var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __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; });
|
|
7811
7811
|
var IconContainer$2 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
7812
|
-
var Text = newStyled.p(templateObject_3$c || (templateObject_3$c = __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; });
|
|
7812
|
+
var Text$2 = newStyled.p(templateObject_3$c || (templateObject_3$c = __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; });
|
|
7813
7813
|
var Details = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7814
7814
|
var Note = function (_a) {
|
|
7815
7815
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7816
|
-
return (jsxRuntime.jsxs(Container$
|
|
7816
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$2, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7817
7817
|
};
|
|
7818
|
-
var templateObject_1$
|
|
7818
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$7;
|
|
7819
7819
|
|
|
7820
7820
|
/* eslint-disable no-param-reassign */
|
|
7821
7821
|
var index$2 = function (breakpoints) {
|
|
@@ -7905,7 +7905,7 @@ var mediaQueries = function (_a) {
|
|
|
7905
7905
|
], { literal: true });
|
|
7906
7906
|
};
|
|
7907
7907
|
|
|
7908
|
-
var Title$
|
|
7908
|
+
var Title$2 = newStyled.h1(templateObject_1$s || (templateObject_1$s = __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; });
|
|
7909
7909
|
var Line = newStyled.div(templateObject_2$g || (templateObject_2$g = __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; });
|
|
7910
7910
|
var Row$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])), function (props) {
|
|
7911
7911
|
return mediaQueries(props)({
|
|
@@ -7940,29 +7940,29 @@ var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeT
|
|
|
7940
7940
|
var DeliveryDetails = function (_a) {
|
|
7941
7941
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7942
7942
|
var theme = useTheme();
|
|
7943
|
-
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
7943
|
+
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7944
7944
|
};
|
|
7945
|
-
var templateObject_1$
|
|
7945
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7946
7946
|
|
|
7947
|
-
var Container$
|
|
7947
|
+
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
7948
7948
|
var H1$2 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __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; });
|
|
7949
7949
|
var ScrollToTop = function (_a) {
|
|
7950
7950
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7951
7951
|
var theme = useTheme();
|
|
7952
|
-
return (jsxRuntime.jsxs(Container$
|
|
7952
|
+
return (jsxRuntime.jsxs(Container$g, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7953
7953
|
};
|
|
7954
|
-
var templateObject_1$
|
|
7954
|
+
var templateObject_1$r, templateObject_2$f;
|
|
7955
7955
|
|
|
7956
|
-
var Container$
|
|
7956
|
+
var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
7957
7957
|
var H1$1 = newStyled.h1(templateObject_2$e || (templateObject_2$e = __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; });
|
|
7958
7958
|
var OrderBar = function (_a) {
|
|
7959
7959
|
var message = _a.message;
|
|
7960
7960
|
var theme = useTheme();
|
|
7961
|
-
return (jsxRuntime.jsxs(Container$
|
|
7961
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7962
7962
|
};
|
|
7963
|
-
var templateObject_1$
|
|
7963
|
+
var templateObject_1$q, templateObject_2$e;
|
|
7964
7964
|
|
|
7965
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7965
|
+
var TableElement = newStyled.table(templateObject_1$p || (templateObject_1$p = __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; });
|
|
7966
7966
|
var TableCell = newStyled.td(templateObject_2$d || (templateObject_2$d = __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; });
|
|
7967
7967
|
var TableHead = newStyled.th(templateObject_3$a || (templateObject_3$a = __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; });
|
|
7968
7968
|
var TableRow = newStyled.tr(templateObject_4$5 || (templateObject_4$5 = __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; });
|
|
@@ -7971,16 +7971,16 @@ var SizeTable = function (_a) {
|
|
|
7971
7971
|
var theme = useTheme();
|
|
7972
7972
|
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7973
7973
|
};
|
|
7974
|
-
var templateObject_1$
|
|
7974
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$5;
|
|
7975
7975
|
|
|
7976
|
-
var Container$
|
|
7976
|
+
var Container$e = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
7977
7977
|
var DescriptionContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])), function (_a) {
|
|
7978
7978
|
var theme = _a.theme;
|
|
7979
7979
|
return mediaQueries({ theme: theme })({
|
|
7980
7980
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7981
7981
|
});
|
|
7982
7982
|
});
|
|
7983
|
-
var Title = newStyled.h2(function (_a) {
|
|
7983
|
+
var Title$1 = newStyled.h2(function (_a) {
|
|
7984
7984
|
var color = _a.color;
|
|
7985
7985
|
return ({
|
|
7986
7986
|
fontWeight: 600,
|
|
@@ -8012,9 +8012,9 @@ var PriceContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
8012
8012
|
var SimpleOrderItem = function (_a) {
|
|
8013
8013
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
8014
8014
|
var theme = useTheme();
|
|
8015
|
-
return (jsxRuntime.jsxs(Container$
|
|
8015
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8016
8016
|
};
|
|
8017
|
-
var templateObject_1$
|
|
8017
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$9;
|
|
8018
8018
|
|
|
8019
8019
|
function formatDate(date) {
|
|
8020
8020
|
var day = date.getDate();
|
|
@@ -8023,7 +8023,7 @@ function formatDate(date) {
|
|
|
8023
8023
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8024
8024
|
}
|
|
8025
8025
|
|
|
8026
|
-
var Container$
|
|
8026
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
8027
8027
|
var Heading = newStyled.div(templateObject_2$b || (templateObject_2$b = __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"])), function (_a) {
|
|
8028
8028
|
var theme = _a.theme;
|
|
8029
8029
|
return mediaQueries({ theme: theme })({
|
|
@@ -8057,13 +8057,13 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
8057
8057
|
lineHeight: ['22px', '24px'],
|
|
8058
8058
|
});
|
|
8059
8059
|
});
|
|
8060
|
-
var P = newStyled.p(templateObject_7 || (templateObject_7 = __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"])));
|
|
8060
|
+
var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __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"])));
|
|
8061
8061
|
var Review = function (_a) {
|
|
8062
8062
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8063
8063
|
var theme = useTheme();
|
|
8064
|
-
return (jsxRuntime.jsxs(Container$
|
|
8064
|
+
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8065
8065
|
};
|
|
8066
|
-
var templateObject_1$
|
|
8066
|
+
var templateObject_1$n, templateObject_2$b, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8067
8067
|
|
|
8068
8068
|
var Button$3 = newStyled.button(function () { return ({
|
|
8069
8069
|
background: 'transparent',
|
|
@@ -12306,14 +12306,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12306
12306
|
return Slider;
|
|
12307
12307
|
}(React__default["default"].Component);
|
|
12308
12308
|
|
|
12309
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12309
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$m || (templateObject_1$m = __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) {
|
|
12310
12310
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12311
12311
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12312
12312
|
}, function (_a) {
|
|
12313
12313
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12314
12314
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12315
12315
|
});
|
|
12316
|
-
var templateObject_1$
|
|
12316
|
+
var templateObject_1$m;
|
|
12317
12317
|
|
|
12318
12318
|
var getStylesBySize$1 = function (size) {
|
|
12319
12319
|
// rem units
|
|
@@ -12372,13 +12372,13 @@ var SliderNavigation = function (_a) {
|
|
|
12372
12372
|
} }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12373
12373
|
};
|
|
12374
12374
|
|
|
12375
|
-
var List = newStyled.ul(templateObject_1$
|
|
12375
|
+
var List = newStyled.ul(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12376
12376
|
var Item = newStyled.li(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
12377
12377
|
var DropdownWrapper = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
12378
12378
|
var ArrowContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
12379
12379
|
var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __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; });
|
|
12380
12380
|
var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __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; });
|
|
12381
|
-
var templateObject_1$
|
|
12381
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1;
|
|
12382
12382
|
|
|
12383
12383
|
var DropdownListIcons = function (_a) {
|
|
12384
12384
|
var items = _a.items;
|
|
@@ -12391,7 +12391,7 @@ var Dropdown = function (_a) {
|
|
|
12391
12391
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign({ 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));
|
|
12392
12392
|
};
|
|
12393
12393
|
|
|
12394
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12394
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$k || (templateObject_1$k = __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; });
|
|
12395
12395
|
var AmazonButton = function (_a) {
|
|
12396
12396
|
var onClick = _a.onClick;
|
|
12397
12397
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12400,9 +12400,9 @@ var PaypalButton = function (_a) {
|
|
|
12400
12400
|
var onClick = _a.onClick;
|
|
12401
12401
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12402
12402
|
};
|
|
12403
|
-
var templateObject_1$
|
|
12403
|
+
var templateObject_1$k;
|
|
12404
12404
|
|
|
12405
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12405
|
+
var Wrapper = newStyled.div(templateObject_1$j || (templateObject_1$j = __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'); });
|
|
12406
12406
|
var Col = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12407
12407
|
var Row = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
12408
12408
|
return props.rightToLeft &&
|
|
@@ -12416,7 +12416,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12416
12416
|
var theme = useTheme();
|
|
12417
12417
|
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12418
12418
|
};
|
|
12419
|
-
var templateObject_1$
|
|
12419
|
+
var templateObject_1$j, templateObject_2$9, templateObject_3$6, templateObject_4$2, templateObject_5, templateObject_6;
|
|
12420
12420
|
|
|
12421
12421
|
var index = /*#__PURE__*/Object.freeze({
|
|
12422
12422
|
__proto__: null,
|
|
@@ -12431,7 +12431,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12431
12431
|
height: height,
|
|
12432
12432
|
});
|
|
12433
12433
|
});
|
|
12434
|
-
var Container$
|
|
12434
|
+
var Container$c = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"])));
|
|
12435
12435
|
var H1 = newStyled.h1(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\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 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; });
|
|
12436
12436
|
var getStylesBySize = function (size) {
|
|
12437
12437
|
switch (size) {
|
|
@@ -12457,28 +12457,28 @@ var ProductItemMobile = function (_a) {
|
|
|
12457
12457
|
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
|
|
12458
12458
|
var theme = useTheme();
|
|
12459
12459
|
var styles = getStylesBySize(size);
|
|
12460
|
-
return (jsxs(Container$
|
|
12460
|
+
return (jsxs(Container$c, { children: [tags ? (jsxs(ImageContainer, __assign({ 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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12461
12461
|
};
|
|
12462
|
-
var templateObject_1$
|
|
12462
|
+
var templateObject_1$i, templateObject_2$8;
|
|
12463
12463
|
|
|
12464
|
-
var Container$
|
|
12464
|
+
var Container$b = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
12465
12465
|
function withProductGrid(ProductItemComponent, data) {
|
|
12466
12466
|
function WithProductGrid(props) {
|
|
12467
|
-
return (jsxRuntime.jsx(Container$
|
|
12467
|
+
return (jsxRuntime.jsx(Container$b, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12468
12468
|
}
|
|
12469
12469
|
/* istanbul ignore next */
|
|
12470
12470
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12471
12471
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12472
12472
|
return WithProductGrid;
|
|
12473
12473
|
}
|
|
12474
|
-
var templateObject_1$
|
|
12474
|
+
var templateObject_1$h;
|
|
12475
12475
|
|
|
12476
12476
|
var Collection = {
|
|
12477
12477
|
ProductItemMobile: ProductItemMobile,
|
|
12478
12478
|
withProductGrid: withProductGrid,
|
|
12479
12479
|
};
|
|
12480
12480
|
|
|
12481
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12481
|
+
var Backdrop = newStyled.div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
12482
12482
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12483
12483
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12484
12484
|
});
|
|
@@ -12523,9 +12523,9 @@ var Drawer = function (_a) {
|
|
|
12523
12523
|
}, [isOpen, onClose, onOpen]);
|
|
12524
12524
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12525
12525
|
};
|
|
12526
|
-
var templateObject_1$
|
|
12526
|
+
var templateObject_1$g, templateObject_2$7;
|
|
12527
12527
|
|
|
12528
|
-
var Container$
|
|
12528
|
+
var Container$a = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12529
12529
|
var size = _a.size;
|
|
12530
12530
|
return (size ? size : '100%');
|
|
12531
12531
|
}, function (_a) {
|
|
@@ -12538,11 +12538,11 @@ var Animation = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __make
|
|
|
12538
12538
|
});
|
|
12539
12539
|
var Spinner = function (_a) {
|
|
12540
12540
|
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;
|
|
12541
|
-
return (jsxRuntime.jsx(Container$
|
|
12541
|
+
return (jsxRuntime.jsx(Container$a, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12542
12542
|
};
|
|
12543
|
-
var templateObject_1$
|
|
12543
|
+
var templateObject_1$f, templateObject_2$6;
|
|
12544
12544
|
|
|
12545
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12545
|
+
var UL = newStyled.ul(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
12546
12546
|
var LI = newStyled.li(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
12547
12547
|
var CloseIconContainer = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
12548
12548
|
var Tags = function (_a) {
|
|
@@ -12552,7 +12552,7 @@ var Tags = function (_a) {
|
|
|
12552
12552
|
return (jsxRuntime.jsxs(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12553
12553
|
}) }), void 0));
|
|
12554
12554
|
};
|
|
12555
|
-
var templateObject_1$
|
|
12555
|
+
var templateObject_1$e, templateObject_2$5, templateObject_3$5;
|
|
12556
12556
|
|
|
12557
12557
|
function FilteringDropdown(_a) {
|
|
12558
12558
|
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;
|
|
@@ -12585,7 +12585,7 @@ function FilteringDropdown(_a) {
|
|
|
12585
12585
|
}) }, void 0)] }), void 0));
|
|
12586
12586
|
}
|
|
12587
12587
|
|
|
12588
|
-
var Container$
|
|
12588
|
+
var Container$9 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
12589
12589
|
var IconContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
12590
12590
|
var PageNumbersContainer = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12591
12591
|
var theme = _a.theme;
|
|
@@ -12610,7 +12610,7 @@ var PageNumber = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __ma
|
|
|
12610
12610
|
width: ['1.25rem', '1.875rem'],
|
|
12611
12611
|
});
|
|
12612
12612
|
});
|
|
12613
|
-
var templateObject_1$
|
|
12613
|
+
var templateObject_1$d, templateObject_2$4, templateObject_3$4, templateObject_4$1;
|
|
12614
12614
|
|
|
12615
12615
|
var Pagination = function (_a) {
|
|
12616
12616
|
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;
|
|
@@ -12623,15 +12623,15 @@ var Pagination = function (_a) {
|
|
|
12623
12623
|
setPage(page);
|
|
12624
12624
|
onChange(page);
|
|
12625
12625
|
};
|
|
12626
|
-
return (jsxRuntime.jsxs(Container$
|
|
12626
|
+
return (jsxRuntime.jsxs(Container$9, __assign({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign({ 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), jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12627
12627
|
};
|
|
12628
12628
|
|
|
12629
|
-
var Container$
|
|
12629
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __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"])), function (props) {
|
|
12630
12630
|
return mediaQueries(props)({
|
|
12631
12631
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
12632
12632
|
});
|
|
12633
12633
|
});
|
|
12634
|
-
var Description = newStyled.div({
|
|
12634
|
+
var Description$1 = newStyled.div({
|
|
12635
12635
|
display: 'flex',
|
|
12636
12636
|
flexDirection: 'column',
|
|
12637
12637
|
alignItems: 'flex-start',
|
|
@@ -12645,25 +12645,25 @@ var Description = newStyled.div({
|
|
|
12645
12645
|
var ProductItem = function (_a) {
|
|
12646
12646
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12647
12647
|
var theme = useTheme();
|
|
12648
|
-
return (jsxRuntime.jsxs(Container$
|
|
12648
|
+
return (jsxRuntime.jsxs(Container$8, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$5, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12649
12649
|
};
|
|
12650
|
-
var templateObject_1$
|
|
12650
|
+
var templateObject_1$c;
|
|
12651
12651
|
|
|
12652
|
-
var Container$
|
|
12652
|
+
var Container$7 = newStyled.div({
|
|
12653
12653
|
display: 'flex',
|
|
12654
12654
|
justifyContent: 'center',
|
|
12655
12655
|
padding: '1rem',
|
|
12656
12656
|
});
|
|
12657
12657
|
var Footer = function (_a) {
|
|
12658
12658
|
var text = _a.text, onClick = _a.onClick;
|
|
12659
|
-
return (jsxRuntime.jsx(Container$
|
|
12659
|
+
return (jsxRuntime.jsx(Container$7, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12660
12660
|
};
|
|
12661
12661
|
|
|
12662
12662
|
var Ul = newStyled.ul({
|
|
12663
12663
|
margin: '0px',
|
|
12664
12664
|
padding: '0px',
|
|
12665
12665
|
});
|
|
12666
|
-
var Li = newStyled.li(templateObject_1$
|
|
12666
|
+
var Li = newStyled.li(templateObject_1$b || (templateObject_1$b = __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; }, function (props) {
|
|
12667
12667
|
return mediaQueries(props)({
|
|
12668
12668
|
padding: [0, '0rem 1rem'],
|
|
12669
12669
|
borderRadius: [0, '0.5rem'],
|
|
@@ -12676,7 +12676,7 @@ var Button$2 = newStyled.button({
|
|
|
12676
12676
|
cursor: 'pointer',
|
|
12677
12677
|
padding: 0,
|
|
12678
12678
|
});
|
|
12679
|
-
var Container$
|
|
12679
|
+
var Container$6 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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 border-radius: 0.5rem;\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 border-radius: 0.5rem;\n ", ",\n"])), function (props) {
|
|
12680
12680
|
return mediaQueries(props)({
|
|
12681
12681
|
border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
|
|
12682
12682
|
marginTop: ['1.25rem', '0.125rem'],
|
|
@@ -12690,9 +12690,9 @@ var Header = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTem
|
|
|
12690
12690
|
var ResultsPanel = function (_a) {
|
|
12691
12691
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12692
12692
|
var theme = useTheme();
|
|
12693
|
-
return (jsxRuntime.jsxs(Container$
|
|
12693
|
+
return (jsxRuntime.jsxs(Container$6, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12694
12694
|
};
|
|
12695
|
-
var templateObject_1$
|
|
12695
|
+
var templateObject_1$b, templateObject_2$3, templateObject_3$3;
|
|
12696
12696
|
|
|
12697
12697
|
var Input = newStyled.input(function (props) { return ({
|
|
12698
12698
|
padding: props.theme.component.input.padding,
|
|
@@ -12723,7 +12723,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12723
12723
|
},
|
|
12724
12724
|
}); });
|
|
12725
12725
|
|
|
12726
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12726
|
+
var Button$1 = newStyled.button(templateObject_1$a || (templateObject_1$a = __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"])), function (props) {
|
|
12727
12727
|
return mediaQueries(props)({
|
|
12728
12728
|
right: ['1rem', '-3.75rem'],
|
|
12729
12729
|
});
|
|
@@ -12733,7 +12733,7 @@ var ClearButton = function (_a) {
|
|
|
12733
12733
|
var theme = useTheme();
|
|
12734
12734
|
return (jsxRuntime.jsx(Button$1, __assign({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12735
12735
|
};
|
|
12736
|
-
var templateObject_1$
|
|
12736
|
+
var templateObject_1$a;
|
|
12737
12737
|
|
|
12738
12738
|
var useOnClickOutside = function (ref, handler) {
|
|
12739
12739
|
React.useEffect(function () {
|
|
@@ -12820,7 +12820,7 @@ var reducer = function (state, action) {
|
|
|
12820
12820
|
}
|
|
12821
12821
|
}
|
|
12822
12822
|
};
|
|
12823
|
-
var Container$
|
|
12823
|
+
var Container$5 = newStyled.div({
|
|
12824
12824
|
position: 'relative',
|
|
12825
12825
|
display: 'flex',
|
|
12826
12826
|
});
|
|
@@ -12838,40 +12838,40 @@ var SearchBar = function (_a) {
|
|
|
12838
12838
|
return function () { return clearTimeout(id); };
|
|
12839
12839
|
}, [onChange, state.term]);
|
|
12840
12840
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12841
|
-
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
12841
|
+
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$5, __assign({ theme: theme }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, { dataTestId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
|
|
12842
12842
|
onSearch(value.title);
|
|
12843
12843
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12844
12844
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
12845
12845
|
};
|
|
12846
12846
|
|
|
12847
|
-
var Container$
|
|
12847
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n"], ["\n position: relative;\n max-height: 31.875rem;\n"])));
|
|
12848
12848
|
var TopTagContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12849
12849
|
var BottomTagContainer = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12850
12850
|
var ImageProductWithTags = function (_a) {
|
|
12851
12851
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
12852
|
-
return (jsxRuntime.jsxs(Container$
|
|
12852
|
+
return (jsxRuntime.jsxs(Container$4, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12853
12853
|
};
|
|
12854
|
-
var templateObject_1$
|
|
12854
|
+
var templateObject_1$9, templateObject_2$2, templateObject_3$2;
|
|
12855
12855
|
|
|
12856
|
-
var Button = newStyled.button(templateObject_1$
|
|
12856
|
+
var Button = newStyled.button(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
12857
12857
|
var ArrowButton = function (_a) {
|
|
12858
12858
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12859
12859
|
return (jsxRuntime.jsx(Button, __assign({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12860
12860
|
};
|
|
12861
|
-
var templateObject_1$
|
|
12861
|
+
var templateObject_1$8;
|
|
12862
12862
|
|
|
12863
|
-
var Container$
|
|
12863
|
+
var Container$3 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
12864
12864
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12865
12865
|
var SlideDots = function (_a) {
|
|
12866
12866
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12867
12867
|
var theme = useTheme();
|
|
12868
|
-
return (jsxRuntime.jsx(Container$
|
|
12868
|
+
return (jsxRuntime.jsx(Container$3, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12869
12869
|
? theme.colors.shades.white.color
|
|
12870
12870
|
: theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12871
12871
|
};
|
|
12872
|
-
var templateObject_1$
|
|
12872
|
+
var templateObject_1$7;
|
|
12873
12873
|
|
|
12874
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12874
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
12875
12875
|
var RightButton = newStyled(NavigationButton)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12876
12876
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12877
12877
|
var SlideNavigation = function (_a) {
|
|
@@ -12885,9 +12885,9 @@ var SlideNavigation = function (_a) {
|
|
|
12885
12885
|
onNavigate(selectedIndex + 1);
|
|
12886
12886
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
|
|
12887
12887
|
};
|
|
12888
|
-
var templateObject_1$
|
|
12888
|
+
var templateObject_1$6, templateObject_2$1, templateObject_3$1;
|
|
12889
12889
|
|
|
12890
|
-
var Container$
|
|
12890
|
+
var Container$2 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
12891
12891
|
var ProductGalleryMobile = function (_a) {
|
|
12892
12892
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12893
12893
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -12895,9 +12895,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12895
12895
|
React.useEffect(function () {
|
|
12896
12896
|
setSelectedImage(initialValue);
|
|
12897
12897
|
}, [initialValue]);
|
|
12898
|
-
return (jsxRuntime.jsxs(Container$
|
|
12898
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12899
12899
|
};
|
|
12900
|
-
var templateObject_1$
|
|
12900
|
+
var templateObject_1$5;
|
|
12901
12901
|
|
|
12902
12902
|
var Portal = function (_a) {
|
|
12903
12903
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -12931,9 +12931,9 @@ var Portal = function (_a) {
|
|
|
12931
12931
|
var visibleStyle = function (_a) {
|
|
12932
12932
|
var opened = _a.opened;
|
|
12933
12933
|
return opened
|
|
12934
|
-
? css(templateObject_1 || (templateObject_1 = __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 || (templateObject_2 = __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 "])));
|
|
12934
|
+
? css(templateObject_1$4 || (templateObject_1$4 = __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 || (templateObject_2 = __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 "])));
|
|
12935
12935
|
};
|
|
12936
|
-
var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"])), visibleStyle);
|
|
12936
|
+
var Container$1 = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"])), visibleStyle);
|
|
12937
12937
|
var Overlay = newStyled.div(templateObject_4 || (templateObject_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);
|
|
12938
12938
|
var Modal = function (_a) {
|
|
12939
12939
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
@@ -12956,9 +12956,54 @@ var Modal = function (_a) {
|
|
|
12956
12956
|
}
|
|
12957
12957
|
setOpened(false);
|
|
12958
12958
|
};
|
|
12959
|
-
return (jsxs(Portal, __assign({ id: id }, { children: [jsx(Container, __assign({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
12959
|
+
return (jsxs(Portal, __assign({ id: id }, { children: [jsx(Container$1, __assign({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
12960
12960
|
};
|
|
12961
|
-
var
|
|
12961
|
+
var modalEvent = function (id, detail) {
|
|
12962
|
+
window.dispatchEvent(new CustomEvent('modal', {
|
|
12963
|
+
detail: __assign(__assign({}, detail), { id: id }),
|
|
12964
|
+
}));
|
|
12965
|
+
};
|
|
12966
|
+
var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4;
|
|
12967
|
+
|
|
12968
|
+
var Text$1 = newStyled.span(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
12969
|
+
var Title = function (_a) {
|
|
12970
|
+
var title = _a.title;
|
|
12971
|
+
var theme = useTheme();
|
|
12972
|
+
return jsxRuntime.jsx(Text$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
12973
|
+
};
|
|
12974
|
+
var templateObject_1$3;
|
|
12975
|
+
|
|
12976
|
+
var P = newStyled.p(templateObject_1$2 || (templateObject_1$2 = __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; });
|
|
12977
|
+
var Promo = function (_a) {
|
|
12978
|
+
var text = _a.text;
|
|
12979
|
+
var theme = useTheme();
|
|
12980
|
+
return (jsxRuntime.jsx(P, __assign({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
12981
|
+
};
|
|
12982
|
+
var templateObject_1$2;
|
|
12983
|
+
|
|
12984
|
+
var Text = newStyled.span(templateObject_1$1 || (templateObject_1$1 = __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; });
|
|
12985
|
+
var Description = function (_a) {
|
|
12986
|
+
var text = _a.text;
|
|
12987
|
+
var theme = useTheme();
|
|
12988
|
+
return jsxRuntime.jsx(Text, __assign({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
12989
|
+
};
|
|
12990
|
+
var templateObject_1$1;
|
|
12991
|
+
|
|
12992
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n"])), function (props) { return props.backgroundColor; });
|
|
12993
|
+
var CloseButton = function (_a) {
|
|
12994
|
+
var onClick = _a.onClick;
|
|
12995
|
+
var theme = useTheme();
|
|
12996
|
+
return (jsxRuntime.jsx(Container, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn" }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: 0.313, height: 0.313, fill: "#fff" }, void 0) }), void 0));
|
|
12997
|
+
};
|
|
12998
|
+
var templateObject_1;
|
|
12999
|
+
|
|
13000
|
+
var CartProductItem = {
|
|
13001
|
+
Title: Title,
|
|
13002
|
+
Tag: OfferBanner,
|
|
13003
|
+
Promo: Promo,
|
|
13004
|
+
Description: Description,
|
|
13005
|
+
CloseButton: CloseButton,
|
|
13006
|
+
};
|
|
12962
13007
|
|
|
12963
13008
|
exports.Accordion = Accordion;
|
|
12964
13009
|
exports.AmazonButton = AmazonButton;
|
|
@@ -12968,6 +13013,7 @@ exports.ButtonPrimary = ButtonPrimary;
|
|
|
12968
13013
|
exports.ButtonSecondary = ButtonSecondary;
|
|
12969
13014
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
12970
13015
|
exports.Card = Card$1;
|
|
13016
|
+
exports.CartProductItem = CartProductItem;
|
|
12971
13017
|
exports.CategoryTag = CategoryTag;
|
|
12972
13018
|
exports.Checkbox = Checkbox;
|
|
12973
13019
|
exports.Collection = Collection;
|
|
@@ -13012,13 +13058,14 @@ exports.SizeTable = SizeTable;
|
|
|
13012
13058
|
exports.SliderNavigation = SliderNavigation;
|
|
13013
13059
|
exports.Spinner = Spinner;
|
|
13014
13060
|
exports.StarList = StarList;
|
|
13015
|
-
exports.Text = Text$
|
|
13061
|
+
exports.Text = Text$5;
|
|
13016
13062
|
exports.TextButton = TextButton;
|
|
13017
13063
|
exports.ThemeProvider = ThemeProvider;
|
|
13018
13064
|
exports.ThemeVariables = ThemeVariables;
|
|
13019
13065
|
exports.Timer = Timer;
|
|
13020
13066
|
exports.Tooltip = Tooltip;
|
|
13021
13067
|
exports.Totals = Totals;
|
|
13068
|
+
exports.modalEvent = modalEvent;
|
|
13022
13069
|
exports.useOnClickOutside = useOnClickOutside;
|
|
13023
13070
|
exports.useTheme = useTheme;
|
|
13024
13071
|
exports.useThemeAssets = useThemeAssets;
|