@trafilea/afrodita-components 5.0.0-beta.83 → 5.0.0-beta.86
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 +16 -3
- package/build/index.esm.js +287 -224
- package/build/index.esm.js.map +1 -1
- package/build/index.js +288 -223
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3584,7 +3584,7 @@ var InputValidationType;
|
|
|
3584
3584
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3585
3585
|
})(InputValidationType || (InputValidationType = {}));
|
|
3586
3586
|
|
|
3587
|
-
var Section = newStyled.div(templateObject_1$
|
|
3587
|
+
var Section = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
3588
3588
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3589
3589
|
});
|
|
3590
3590
|
var CardHeader = function (_a) {
|
|
@@ -3595,14 +3595,14 @@ var CardFooter = function (_a) {
|
|
|
3595
3595
|
var children = _a.children;
|
|
3596
3596
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3597
3597
|
};
|
|
3598
|
-
var templateObject_1$
|
|
3598
|
+
var templateObject_1$1f;
|
|
3599
3599
|
|
|
3600
|
-
var Body = newStyled.div(templateObject_1$
|
|
3600
|
+
var Body = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
3601
3601
|
var CardBody = function (_a) {
|
|
3602
3602
|
var children = _a.children;
|
|
3603
3603
|
return jsx$1(Body, { children: children }, void 0);
|
|
3604
3604
|
};
|
|
3605
|
-
var templateObject_1$
|
|
3605
|
+
var templateObject_1$1e;
|
|
3606
3606
|
|
|
3607
3607
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3608
3608
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3747,7 +3747,7 @@ var AssetsProvider = function (_a) {
|
|
|
3747
3747
|
};
|
|
3748
3748
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3749
3749
|
|
|
3750
|
-
var Container$
|
|
3750
|
+
var Container$L = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
3751
3751
|
var flex = _a.flex;
|
|
3752
3752
|
return flex &&
|
|
3753
3753
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3760,14 +3760,14 @@ var Container$K = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __
|
|
|
3760
3760
|
var Card$1 = function (_a) {
|
|
3761
3761
|
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;
|
|
3762
3762
|
var theme = useTheme();
|
|
3763
|
-
return (jsx$1(Container$
|
|
3763
|
+
return (jsx$1(Container$L, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3764
3764
|
};
|
|
3765
3765
|
var Card$2 = Object.assign(Card$1, {
|
|
3766
3766
|
Header: CardHeader,
|
|
3767
3767
|
Footer: CardFooter,
|
|
3768
3768
|
Body: CardBody,
|
|
3769
3769
|
});
|
|
3770
|
-
var templateObject_1$
|
|
3770
|
+
var templateObject_1$1d;
|
|
3771
3771
|
|
|
3772
3772
|
var Fragment = Fragment$1;
|
|
3773
3773
|
function jsx(type, props, key) {
|
|
@@ -3909,7 +3909,7 @@ function BaseSelectOption(_a) {
|
|
|
3909
3909
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3910
3910
|
}
|
|
3911
3911
|
|
|
3912
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3912
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3913
3913
|
function BaseSelect(_a) {
|
|
3914
3914
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3915
3915
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3919,7 +3919,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3919
3919
|
Options: BaseSelectOptions,
|
|
3920
3920
|
Option: BaseSelectOption,
|
|
3921
3921
|
});
|
|
3922
|
-
var templateObject_1$
|
|
3922
|
+
var templateObject_1$1c;
|
|
3923
3923
|
|
|
3924
3924
|
var CustomButton = newStyled.button(function (_a) {
|
|
3925
3925
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4132,7 +4132,7 @@ var CustomCheckboxStyles = {
|
|
|
4132
4132
|
},
|
|
4133
4133
|
};
|
|
4134
4134
|
|
|
4135
|
-
var Container$
|
|
4135
|
+
var Container$K = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
4136
4136
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4137
4137
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4138
4138
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4166,9 +4166,9 @@ var Checkbox = function (_a) {
|
|
|
4166
4166
|
useEffect(function () {
|
|
4167
4167
|
mounted.current = true;
|
|
4168
4168
|
}, []);
|
|
4169
|
-
return (jsxs$1(Container$
|
|
4169
|
+
return (jsxs$1(Container$K, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4170
4170
|
};
|
|
4171
|
-
var templateObject_1$
|
|
4171
|
+
var templateObject_1$1b, templateObject_2$L;
|
|
4172
4172
|
|
|
4173
4173
|
var CustomOption = newStyled.li(function (_a) {
|
|
4174
4174
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4305,7 +4305,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4305
4305
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4306
4306
|
// `variants` styles that are consistent through all themes.
|
|
4307
4307
|
var TAGS = {
|
|
4308
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4308
|
+
hero1: newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject([""], [""]))),
|
|
4309
4309
|
hero2: newStyled.h2(templateObject_2$K || (templateObject_2$K = __makeTemplateObject([""], [""]))),
|
|
4310
4310
|
hero3: newStyled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject([""], [""]))),
|
|
4311
4311
|
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4428,9 +4428,9 @@ var DEFAULTS = {
|
|
|
4428
4428
|
size: 'regular',
|
|
4429
4429
|
},
|
|
4430
4430
|
};
|
|
4431
|
-
var templateObject_1$
|
|
4431
|
+
var templateObject_1$1a, templateObject_2$K, templateObject_3$x, templateObject_4$o, templateObject_5$e, templateObject_6$8, templateObject_7$5, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4432
4432
|
|
|
4433
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4433
|
+
var ButtonsContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4434
4434
|
var inline = _a.inline;
|
|
4435
4435
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4436
4436
|
});
|
|
@@ -4448,7 +4448,7 @@ var SizeSelector = function (_a) {
|
|
|
4448
4448
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4449
4449
|
}) }), void 0)] }), void 0));
|
|
4450
4450
|
};
|
|
4451
|
-
var templateObject_1$
|
|
4451
|
+
var templateObject_1$19;
|
|
4452
4452
|
|
|
4453
4453
|
var getStylesBySize$7 = function (size) {
|
|
4454
4454
|
switch (size) {
|
|
@@ -4475,7 +4475,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4475
4475
|
} });
|
|
4476
4476
|
};
|
|
4477
4477
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4478
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4478
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$18 || (templateObject_1$18 = __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));
|
|
4479
4479
|
};
|
|
4480
4480
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4481
4481
|
if (disabled)
|
|
@@ -4491,16 +4491,16 @@ var TextButton = function (_a) {
|
|
|
4491
4491
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4492
4492
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
4493
4493
|
};
|
|
4494
|
-
var templateObject_1$
|
|
4494
|
+
var templateObject_1$18;
|
|
4495
4495
|
|
|
4496
|
-
var Container$
|
|
4496
|
+
var Container$J = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4497
4497
|
var P$3 = newStyled.p(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4498
4498
|
var PercentageSpan = newStyled.span(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4499
4499
|
var SizeFitGuide = function (_a) {
|
|
4500
4500
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4501
|
-
return (jsxs$1(Container$
|
|
4501
|
+
return (jsxs$1(Container$J, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4502
4502
|
};
|
|
4503
|
-
var templateObject_1$
|
|
4503
|
+
var templateObject_1$17, templateObject_2$J, templateObject_3$w;
|
|
4504
4504
|
|
|
4505
4505
|
var getStylesBySize$6 = function (size) {
|
|
4506
4506
|
switch (size) {
|
|
@@ -4530,7 +4530,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4530
4530
|
};
|
|
4531
4531
|
}
|
|
4532
4532
|
};
|
|
4533
|
-
var Container$
|
|
4533
|
+
var Container$I = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
4534
4534
|
var backgroundColor = _a.backgroundColor;
|
|
4535
4535
|
return backgroundColor;
|
|
4536
4536
|
}, function (_a) {
|
|
@@ -4565,11 +4565,11 @@ var H3$2 = newStyled.h3(templateObject_2$I || (templateObject_2$I = __makeTempla
|
|
|
4565
4565
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
4566
4566
|
});
|
|
4567
4567
|
var DiscountTag = function (_a) {
|
|
4568
|
-
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
4568
|
+
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
4569
4569
|
var theme = useTheme();
|
|
4570
|
-
return (jsx$1(Container$
|
|
4570
|
+
return (jsx$1(Container$I, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4571
4571
|
};
|
|
4572
|
-
var templateObject_1$
|
|
4572
|
+
var templateObject_1$16, templateObject_2$I;
|
|
4573
4573
|
|
|
4574
4574
|
var getStylesBySize$5 = function (size) {
|
|
4575
4575
|
switch (size) {
|
|
@@ -4599,7 +4599,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4599
4599
|
};
|
|
4600
4600
|
}
|
|
4601
4601
|
};
|
|
4602
|
-
var Container$
|
|
4602
|
+
var Container$H = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4603
4603
|
var Price = newStyled.p(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
4604
4604
|
var weight = _a.weight;
|
|
4605
4605
|
return (weight ? weight : '400');
|
|
@@ -4656,9 +4656,25 @@ var PriceLabel = function (_a) {
|
|
|
4656
4656
|
weight: 700,
|
|
4657
4657
|
};
|
|
4658
4658
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4659
|
-
return (jsxs$1(Container$
|
|
4659
|
+
return (jsxs$1(Container$H, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxs$1(FinalPriceContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4660
4660
|
};
|
|
4661
|
-
var templateObject_1$
|
|
4661
|
+
var templateObject_1$15, templateObject_2$H, templateObject_3$v, templateObject_4$n, templateObject_5$d;
|
|
4662
|
+
|
|
4663
|
+
var PriceLabelHomeColPDP = function (_a) {
|
|
4664
|
+
var _b;
|
|
4665
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
4666
|
+
var theme = useTheme();
|
|
4667
|
+
var finalPriceArray = typeof finalPrice === 'string' && finalPrice.includes('.') && finalPrice.includes('$')
|
|
4668
|
+
? finalPrice.split('$')[1].split('.')
|
|
4669
|
+
: ['', ''];
|
|
4670
|
+
var priceCommonProps = {
|
|
4671
|
+
size: ComponentSize.Small,
|
|
4672
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
4673
|
+
weight: 700,
|
|
4674
|
+
};
|
|
4675
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4676
|
+
return (jsxs$1(Container$H, { children: [originalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), discount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0) }), void 0))] }, void 0));
|
|
4677
|
+
};
|
|
4662
4678
|
|
|
4663
4679
|
var OneColorSelector = function (_a) {
|
|
4664
4680
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4699,7 +4715,7 @@ var OutOfStock = function (_a) {
|
|
|
4699
4715
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4700
4716
|
};
|
|
4701
4717
|
|
|
4702
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4718
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4703
4719
|
newStyled(lt.Label)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4704
4720
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
4705
4721
|
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -4721,9 +4737,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4721
4737
|
Option: Option,
|
|
4722
4738
|
OptionsContainer: OptionsContainer,
|
|
4723
4739
|
});
|
|
4724
|
-
var templateObject_1$
|
|
4740
|
+
var templateObject_1$14, templateObject_2$G, templateObject_3$u, templateObject_4$m, templateObject_5$c;
|
|
4725
4741
|
|
|
4726
|
-
var Container$
|
|
4742
|
+
var Container$G = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
4727
4743
|
var borderColor = _a.borderColor;
|
|
4728
4744
|
return borderColor;
|
|
4729
4745
|
});
|
|
@@ -4732,9 +4748,9 @@ var PatternSelector = function (_a) {
|
|
|
4732
4748
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4733
4749
|
var theme = useTheme();
|
|
4734
4750
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4735
|
-
return (jsx$1(Container$
|
|
4751
|
+
return (jsx$1(Container$G, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4736
4752
|
};
|
|
4737
|
-
var templateObject_1$
|
|
4753
|
+
var templateObject_1$13, templateObject_2$F;
|
|
4738
4754
|
|
|
4739
4755
|
var renderOptions$1 = function (options) {
|
|
4740
4756
|
if (options.length === 0) {
|
|
@@ -4792,7 +4808,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4792
4808
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4793
4809
|
};
|
|
4794
4810
|
|
|
4795
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
4811
|
+
var Image$2 = newStyled.img(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
4796
4812
|
var selected = _a.selected, theme = _a.theme;
|
|
4797
4813
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4798
4814
|
});
|
|
@@ -4801,7 +4817,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4801
4817
|
var theme = useTheme();
|
|
4802
4818
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4803
4819
|
};
|
|
4804
|
-
var templateObject_1$
|
|
4820
|
+
var templateObject_1$12;
|
|
4805
4821
|
|
|
4806
4822
|
var Button$4 = newStyled.button(function () { return ({
|
|
4807
4823
|
background: 'transparent',
|
|
@@ -9044,14 +9060,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9044
9060
|
return Slider;
|
|
9045
9061
|
}(React__default.Component);
|
|
9046
9062
|
|
|
9047
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9063
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
9048
9064
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9049
9065
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9050
9066
|
}, function (_a) {
|
|
9051
9067
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9052
9068
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9053
9069
|
});
|
|
9054
|
-
var templateObject_1$
|
|
9070
|
+
var templateObject_1$11;
|
|
9055
9071
|
|
|
9056
9072
|
var getStylesBySize$4 = function (size) {
|
|
9057
9073
|
// rem units
|
|
@@ -9110,22 +9126,22 @@ var SliderNavigation = function (_a) {
|
|
|
9110
9126
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9111
9127
|
};
|
|
9112
9128
|
|
|
9113
|
-
var horizontalStyles = css(templateObject_1
|
|
9129
|
+
var horizontalStyles = css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
9114
9130
|
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
9115
|
-
var Container$
|
|
9131
|
+
var Container$F = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9116
9132
|
var position = _a.position;
|
|
9117
9133
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9118
9134
|
});
|
|
9119
9135
|
var Button$3 = newStyled.button(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9120
9136
|
var ImagePreviewList = function (_a) {
|
|
9121
9137
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
9122
|
-
return (jsx$1(Container$
|
|
9138
|
+
return (jsx$1(Container$F, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9123
9139
|
arrowWidth: 0.75,
|
|
9124
9140
|
arrowHeight: 1.25,
|
|
9125
9141
|
arrowPadding: 1.625,
|
|
9126
9142
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
|
|
9127
9143
|
};
|
|
9128
|
-
var templateObject_1
|
|
9144
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$t, templateObject_4$l;
|
|
9129
9145
|
|
|
9130
9146
|
var propTypes = {exports: {}};
|
|
9131
9147
|
|
|
@@ -10711,19 +10727,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10711
10727
|
afterZoomOut: PropTypes.func
|
|
10712
10728
|
} : {};
|
|
10713
10729
|
|
|
10714
|
-
var Container$
|
|
10730
|
+
var Container$E = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])));
|
|
10715
10731
|
var TopTagContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10716
10732
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10717
10733
|
var ImageProductWithTags$1 = function (_a) {
|
|
10718
10734
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10719
|
-
return (jsxs$1(Container$
|
|
10735
|
+
return (jsxs$1(Container$E, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
10720
10736
|
alt: image.alt,
|
|
10721
10737
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10722
10738
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, { children: topTag }, void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
10723
10739
|
};
|
|
10724
|
-
var templateObject_1
|
|
10740
|
+
var templateObject_1$$, templateObject_2$D, templateObject_3$s;
|
|
10725
10741
|
|
|
10726
|
-
var Container$
|
|
10742
|
+
var Container$D = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
10727
10743
|
var ProductGallery = function (_a) {
|
|
10728
10744
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10729
10745
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10731,11 +10747,11 @@ var ProductGallery = function (_a) {
|
|
|
10731
10747
|
useEffect(function () {
|
|
10732
10748
|
setSelectedImage(initialValue);
|
|
10733
10749
|
}, [initialValue]);
|
|
10734
|
-
return (jsxs$1(Container$
|
|
10750
|
+
return (jsxs$1(Container$D, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10735
10751
|
setSelectedImage(value);
|
|
10736
10752
|
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10737
10753
|
};
|
|
10738
|
-
var templateObject_1$
|
|
10754
|
+
var templateObject_1$_;
|
|
10739
10755
|
|
|
10740
10756
|
/* base styles & size variants */
|
|
10741
10757
|
var StarStyles = {
|
|
@@ -10781,8 +10797,8 @@ var StarStyles = {
|
|
|
10781
10797
|
});
|
|
10782
10798
|
},
|
|
10783
10799
|
};
|
|
10784
|
-
var Container$
|
|
10785
|
-
var templateObject_1$
|
|
10800
|
+
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10801
|
+
var templateObject_1$Z;
|
|
10786
10802
|
|
|
10787
10803
|
var StarContainer = newStyled.div(function (_a) {
|
|
10788
10804
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10800,7 +10816,7 @@ var sizes = {
|
|
|
10800
10816
|
var StarList = function (_a) {
|
|
10801
10817
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
10802
10818
|
var theme = useTheme();
|
|
10803
|
-
return (jsx$1(Container$
|
|
10819
|
+
return (jsx$1(Container$C, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10804
10820
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
10805
10821
|
}) }, void 0));
|
|
10806
10822
|
};
|
|
@@ -10844,8 +10860,8 @@ var LabelStyles = {
|
|
|
10844
10860
|
});
|
|
10845
10861
|
},
|
|
10846
10862
|
};
|
|
10847
|
-
var Container$
|
|
10848
|
-
var templateObject_1$
|
|
10863
|
+
var Container$B = newStyled.a(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10864
|
+
var templateObject_1$Y;
|
|
10849
10865
|
|
|
10850
10866
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10851
10867
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10883,10 +10899,10 @@ var Rating = function (_a) {
|
|
|
10883
10899
|
href: reviewsContainerId,
|
|
10884
10900
|
}
|
|
10885
10901
|
: {};
|
|
10886
|
-
return (jsxs$1(Container$
|
|
10902
|
+
return (jsxs$1(Container$B, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
10887
10903
|
};
|
|
10888
10904
|
|
|
10889
|
-
var Container$
|
|
10905
|
+
var Container$A = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
10890
10906
|
var P$2 = newStyled.p(templateObject_2$C || (templateObject_2$C = __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; });
|
|
10891
10907
|
var textButtonStyles = function (theme) { return ({
|
|
10892
10908
|
border: 'none',
|
|
@@ -10900,9 +10916,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10900
10916
|
var FitPredictor = function (_a) {
|
|
10901
10917
|
var onClick = _a.onClick;
|
|
10902
10918
|
var theme = useTheme();
|
|
10903
|
-
return (jsxs(Container$
|
|
10919
|
+
return (jsxs(Container$A, __assign$1({ theme: theme }, { children: [jsx(Container$A, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
10904
10920
|
};
|
|
10905
|
-
var templateObject_1$
|
|
10921
|
+
var templateObject_1$X, templateObject_2$C;
|
|
10906
10922
|
|
|
10907
10923
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10908
10924
|
var color = _a.color;
|
|
@@ -10916,7 +10932,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10916
10932
|
margin: '0.938rem 4.188rem',
|
|
10917
10933
|
});
|
|
10918
10934
|
});
|
|
10919
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10935
|
+
var Bar = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
10920
10936
|
var backgroundColor = _a.backgroundColor;
|
|
10921
10937
|
return backgroundColor;
|
|
10922
10938
|
}, function (_a) {
|
|
@@ -10939,7 +10955,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10939
10955
|
position: 'absolute',
|
|
10940
10956
|
});
|
|
10941
10957
|
});
|
|
10942
|
-
var Container$
|
|
10958
|
+
var Container$z = newStyled.div(function (_a) {
|
|
10943
10959
|
var widthAuto = _a.widthAuto;
|
|
10944
10960
|
return ({
|
|
10945
10961
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10953,9 +10969,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10953
10969
|
var ProgressBar = function (_a) {
|
|
10954
10970
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10955
10971
|
var theme = useTheme();
|
|
10956
|
-
return (jsxs$1(Container$
|
|
10972
|
+
return (jsxs$1(Container$z, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
10957
10973
|
};
|
|
10958
|
-
var templateObject_1$
|
|
10974
|
+
var templateObject_1$W;
|
|
10959
10975
|
|
|
10960
10976
|
var getStylesBySize$3 = function (size) {
|
|
10961
10977
|
switch (size) {
|
|
@@ -10976,7 +10992,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
10976
10992
|
};
|
|
10977
10993
|
}
|
|
10978
10994
|
};
|
|
10979
|
-
var Container$
|
|
10995
|
+
var Container$y = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
10980
10996
|
var backgroundColor = _a.backgroundColor;
|
|
10981
10997
|
return backgroundColor;
|
|
10982
10998
|
}, function (_a) {
|
|
@@ -11004,9 +11020,9 @@ var Container$x = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
11004
11020
|
var IconButton = function (_a) {
|
|
11005
11021
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11006
11022
|
var theme = useTheme();
|
|
11007
|
-
return (jsx$1(Container$
|
|
11023
|
+
return (jsx$1(Container$y, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
11008
11024
|
};
|
|
11009
|
-
var templateObject_1$
|
|
11025
|
+
var templateObject_1$V;
|
|
11010
11026
|
|
|
11011
11027
|
var TooltipArrow = function (_a) {
|
|
11012
11028
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11086,7 +11102,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11086
11102
|
}
|
|
11087
11103
|
};
|
|
11088
11104
|
|
|
11089
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11105
|
+
var Wrapper$5 = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
11090
11106
|
var position = _a.position;
|
|
11091
11107
|
return getWrapperFlexDirection(position);
|
|
11092
11108
|
});
|
|
@@ -11134,7 +11150,7 @@ var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
|
|
|
11134
11150
|
return color;
|
|
11135
11151
|
});
|
|
11136
11152
|
var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11137
|
-
var templateObject_1$
|
|
11153
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$r, templateObject_4$k, templateObject_5$b, templateObject_6$7, templateObject_7$4;
|
|
11138
11154
|
|
|
11139
11155
|
var Tooltip = function (_a) {
|
|
11140
11156
|
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;
|
|
@@ -11193,6 +11209,11 @@ var AccordionSummaryStyles = {
|
|
|
11193
11209
|
? theme.colors.text.disabled
|
|
11194
11210
|
: theme.component.accordion.variant.box.summary.color }));
|
|
11195
11211
|
},
|
|
11212
|
+
title: function (titleColor) {
|
|
11213
|
+
return css({
|
|
11214
|
+
color: titleColor ? titleColor : '',
|
|
11215
|
+
});
|
|
11216
|
+
},
|
|
11196
11217
|
};
|
|
11197
11218
|
/* base styles & size variants */
|
|
11198
11219
|
var AccordionDetailsStyles = {
|
|
@@ -11210,16 +11231,17 @@ var AccordionDetailsStyles = {
|
|
|
11210
11231
|
};
|
|
11211
11232
|
|
|
11212
11233
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
11213
|
-
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
|
|
11234
|
+
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
11214
11235
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
11215
11236
|
var Accordion$1 = function (_a) {
|
|
11216
|
-
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant,
|
|
11237
|
+
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
11217
11238
|
var theme = useTheme();
|
|
11218
|
-
return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled }, { children: function (_a) {
|
|
11239
|
+
return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick }, { children: function (_a) {
|
|
11219
11240
|
var open = _a.open;
|
|
11220
|
-
var
|
|
11221
|
-
var
|
|
11222
|
-
|
|
11241
|
+
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
11242
|
+
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
11243
|
+
var showPanel = openWithForce && !disabled;
|
|
11244
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0))] }, void 0));
|
|
11223
11245
|
} }), void 0));
|
|
11224
11246
|
};
|
|
11225
11247
|
|
|
@@ -11286,8 +11308,8 @@ var ContainerStyles = {
|
|
|
11286
11308
|
},
|
|
11287
11309
|
};
|
|
11288
11310
|
|
|
11289
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11290
|
-
var Container$
|
|
11311
|
+
var Wrapper$4 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11312
|
+
var Container$x = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11291
11313
|
var Input$2 = newStyled.input(templateObject_2$A || (templateObject_2$A = __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) {
|
|
11292
11314
|
var disabled = _a.disabled;
|
|
11293
11315
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11303,9 +11325,9 @@ var RadioInput = function (_a) {
|
|
|
11303
11325
|
var value = event.currentTarget.value;
|
|
11304
11326
|
onChange({ value: value, label: label });
|
|
11305
11327
|
};
|
|
11306
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11328
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$x, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11307
11329
|
};
|
|
11308
|
-
var templateObject_1$
|
|
11330
|
+
var templateObject_1$T, templateObject_2$A;
|
|
11309
11331
|
|
|
11310
11332
|
var RadioGroupInput = function (_a) {
|
|
11311
11333
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11319,37 +11341,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11319
11341
|
}) }), void 0));
|
|
11320
11342
|
};
|
|
11321
11343
|
|
|
11322
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11323
|
-
var Container$
|
|
11344
|
+
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n padding: 12px 58px;\n"], ["\n padding: 12px 58px;\n"])));
|
|
11345
|
+
var Container$w = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
11324
11346
|
var Minimalistic = function (_a) {
|
|
11325
11347
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11326
11348
|
var theme = useTheme();
|
|
11327
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11349
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$w, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$w, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11328
11350
|
};
|
|
11329
|
-
var templateObject_1$
|
|
11351
|
+
var templateObject_1$S, templateObject_2$z;
|
|
11330
11352
|
|
|
11331
|
-
var Container$
|
|
11353
|
+
var Container$v = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11332
11354
|
var Title$5 = newStyled.h1(templateObject_2$y || (templateObject_2$y = __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; });
|
|
11333
11355
|
var Details$1 = newStyled.span(templateObject_3$q || (templateObject_3$q = __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; });
|
|
11334
11356
|
var PriceContainer$1 = newStyled.span(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
11335
11357
|
var Simple = function (_a) {
|
|
11336
11358
|
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;
|
|
11337
11359
|
var theme = useTheme();
|
|
11338
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11360
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$v, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11339
11361
|
};
|
|
11340
|
-
var templateObject_1$
|
|
11362
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$j;
|
|
11341
11363
|
|
|
11342
11364
|
var Bundle = {
|
|
11343
11365
|
Minimalistic: Minimalistic,
|
|
11344
11366
|
Simple: Simple,
|
|
11345
11367
|
};
|
|
11346
11368
|
|
|
11347
|
-
var Container$
|
|
11369
|
+
var Container$u = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
11348
11370
|
var Tag$1 = function (_a) {
|
|
11349
11371
|
var text = _a.text, className = _a.className;
|
|
11350
|
-
return jsx$1(Container$
|
|
11372
|
+
return jsx$1(Container$u, __assign$1({ className: className }, { children: text }), void 0);
|
|
11351
11373
|
};
|
|
11352
|
-
var templateObject_1$
|
|
11374
|
+
var templateObject_1$Q;
|
|
11353
11375
|
|
|
11354
11376
|
var getStylesBySize$2 = function (size) {
|
|
11355
11377
|
switch (size) {
|
|
@@ -11452,7 +11474,7 @@ var Timer = function (_a) {
|
|
|
11452
11474
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11453
11475
|
};
|
|
11454
11476
|
|
|
11455
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11477
|
+
var Label$1 = newStyled.span(templateObject_1$P || (templateObject_1$P = __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) {
|
|
11456
11478
|
var color = _a.color;
|
|
11457
11479
|
return color;
|
|
11458
11480
|
});
|
|
@@ -11465,7 +11487,7 @@ var InputLabel = function (_a) {
|
|
|
11465
11487
|
var theme = useTheme();
|
|
11466
11488
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11467
11489
|
};
|
|
11468
|
-
var templateObject_1$
|
|
11490
|
+
var templateObject_1$P, templateObject_2$x;
|
|
11469
11491
|
|
|
11470
11492
|
/**
|
|
11471
11493
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11519,16 +11541,16 @@ var formatPrice = function (value, _a) {
|
|
|
11519
11541
|
}).format(valueToFormat);
|
|
11520
11542
|
};
|
|
11521
11543
|
|
|
11522
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11544
|
+
var ErrorText = newStyled.h3(templateObject_1$O || (templateObject_1$O = __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; });
|
|
11523
11545
|
var ErrorContainer = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
11524
11546
|
var Error$1 = function (_a) {
|
|
11525
11547
|
var error = _a.error;
|
|
11526
11548
|
var theme = useTheme();
|
|
11527
11549
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
11528
11550
|
};
|
|
11529
|
-
var templateObject_1$
|
|
11551
|
+
var templateObject_1$O, templateObject_2$w;
|
|
11530
11552
|
|
|
11531
|
-
var Container$
|
|
11553
|
+
var Container$t = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
11532
11554
|
var color = _a.color, hasError = _a.hasError;
|
|
11533
11555
|
return (!hasError ? color : '');
|
|
11534
11556
|
});
|
|
@@ -11594,7 +11616,7 @@ var InputWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __m
|
|
|
11594
11616
|
});
|
|
11595
11617
|
var AnimatedPlaceholder = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
11596
11618
|
var ClearInput = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
11597
|
-
var templateObject_1$
|
|
11619
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$p, templateObject_4$i, templateObject_5$a;
|
|
11598
11620
|
|
|
11599
11621
|
var BaseInput = function (_a) {
|
|
11600
11622
|
var _b;
|
|
@@ -11656,7 +11678,7 @@ var BaseInput = function (_a) {
|
|
|
11656
11678
|
focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
|
|
11657
11679
|
hasError: hasError ? theme.component.input.errorBorder : '',
|
|
11658
11680
|
};
|
|
11659
|
-
return (jsxs$1(Container$
|
|
11681
|
+
return (jsxs$1(Container$t, __assign$1({ color: status === InputValidationType.Valid
|
|
11660
11682
|
? theme.colors.shades['700'].color
|
|
11661
11683
|
: status === InputValidationType.Error
|
|
11662
11684
|
? theme.colors.semantic.urgent.color
|
|
@@ -11682,7 +11704,7 @@ var Button$2 = function (_a) {
|
|
|
11682
11704
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11683
11705
|
};
|
|
11684
11706
|
|
|
11685
|
-
var Container$
|
|
11707
|
+
var Container$s = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
11686
11708
|
var theme = _a.theme;
|
|
11687
11709
|
return theme.component.inputCustom.input.borderRadius;
|
|
11688
11710
|
});
|
|
@@ -11699,11 +11721,11 @@ var Custom = function (_a) {
|
|
|
11699
11721
|
text: text,
|
|
11700
11722
|
disabled: rest.disabled,
|
|
11701
11723
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11702
|
-
return (jsx$1(Container$
|
|
11724
|
+
return (jsx$1(Container$s, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
11703
11725
|
};
|
|
11704
|
-
var templateObject_1$
|
|
11726
|
+
var templateObject_1$M, templateObject_2$u;
|
|
11705
11727
|
|
|
11706
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11728
|
+
var SuccessContainer = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
11707
11729
|
var size = _a.size;
|
|
11708
11730
|
return (size === 'small' ? '36px' : '');
|
|
11709
11731
|
});
|
|
@@ -11713,9 +11735,9 @@ var Success = function (_a) {
|
|
|
11713
11735
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11714
11736
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
11715
11737
|
};
|
|
11716
|
-
var templateObject_1$
|
|
11738
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$o;
|
|
11717
11739
|
|
|
11718
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11740
|
+
var ButtonContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
11719
11741
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11720
11742
|
return status === InputValidationType.Empty &&
|
|
11721
11743
|
type === 'primary' &&
|
|
@@ -11732,21 +11754,21 @@ var BasePlusButton = function (_a) {
|
|
|
11732
11754
|
}
|
|
11733
11755
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
11734
11756
|
};
|
|
11735
|
-
var templateObject_1$
|
|
11757
|
+
var templateObject_1$K;
|
|
11736
11758
|
|
|
11737
|
-
var Container$
|
|
11759
|
+
var Container$r = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
11738
11760
|
var IconContainer$4 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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; });
|
|
11739
11761
|
var BasePlusIcon = function (_a) {
|
|
11740
11762
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11741
11763
|
var theme = useTheme();
|
|
11742
11764
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11743
|
-
return (jsx$1(Container$
|
|
11765
|
+
return (jsx$1(Container$r, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
11744
11766
|
? theme.colors.shades['700'].color
|
|
11745
11767
|
: status === InputValidationType.Error
|
|
11746
11768
|
? theme.colors.semantic.urgent.color
|
|
11747
11769
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11748
11770
|
};
|
|
11749
|
-
var templateObject_1$
|
|
11771
|
+
var templateObject_1$J, templateObject_2$s;
|
|
11750
11772
|
|
|
11751
11773
|
var Input$1 = {
|
|
11752
11774
|
Simple: BaseInput,
|
|
@@ -11755,7 +11777,7 @@ var Input$1 = {
|
|
|
11755
11777
|
SimplePlusIcon: BasePlusIcon,
|
|
11756
11778
|
};
|
|
11757
11779
|
|
|
11758
|
-
var Container$
|
|
11780
|
+
var Container$q = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
11759
11781
|
var width = _a.width;
|
|
11760
11782
|
return width;
|
|
11761
11783
|
}, function (_a) {
|
|
@@ -11771,11 +11793,11 @@ var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
11771
11793
|
var PaymentMethod = function (_a) {
|
|
11772
11794
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11773
11795
|
var theme = useTheme();
|
|
11774
|
-
return (jsx$1(Container$
|
|
11796
|
+
return (jsx$1(Container$q, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
11775
11797
|
};
|
|
11776
|
-
var templateObject_1$
|
|
11798
|
+
var templateObject_1$I;
|
|
11777
11799
|
|
|
11778
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
11800
|
+
var Text$5 = newStyled.h3(templateObject_1$H || (templateObject_1$H = __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) {
|
|
11779
11801
|
var backgroundColor = _a.backgroundColor;
|
|
11780
11802
|
return backgroundColor;
|
|
11781
11803
|
}, function (_a) {
|
|
@@ -11787,21 +11809,21 @@ var OfferBanner = function (_a) {
|
|
|
11787
11809
|
var theme = useTheme();
|
|
11788
11810
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11789
11811
|
};
|
|
11790
|
-
var templateObject_1$
|
|
11812
|
+
var templateObject_1$H;
|
|
11791
11813
|
|
|
11792
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11814
|
+
var Wrapper$2 = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
11793
11815
|
var GrandTotal = newStyled.h1(templateObject_2$r || (templateObject_2$r = __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; });
|
|
11794
11816
|
var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
11795
|
-
var Container$
|
|
11817
|
+
var Container$p = newStyled.div(templateObject_4$h || (templateObject_4$h = __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; });
|
|
11796
11818
|
var Discount = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
11797
11819
|
var Total = function (_a) {
|
|
11798
11820
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11799
11821
|
var theme = useTheme();
|
|
11800
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
11822
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$p, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
11801
11823
|
};
|
|
11802
|
-
var templateObject_1$
|
|
11824
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$9;
|
|
11803
11825
|
|
|
11804
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11826
|
+
var Wrapper$1 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11805
11827
|
var color = _a.color;
|
|
11806
11828
|
return color;
|
|
11807
11829
|
});
|
|
@@ -11820,22 +11842,22 @@ var Subtotal = function (_a) {
|
|
|
11820
11842
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
11821
11843
|
})] }), void 0));
|
|
11822
11844
|
};
|
|
11823
|
-
var templateObject_1$
|
|
11845
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$m, templateObject_4$g;
|
|
11824
11846
|
|
|
11825
11847
|
var Totals = {
|
|
11826
11848
|
Total: Total,
|
|
11827
11849
|
Subtotal: Subtotal,
|
|
11828
11850
|
};
|
|
11829
11851
|
|
|
11830
|
-
var Container$
|
|
11852
|
+
var Container$o = newStyled.div(templateObject_1$E || (templateObject_1$E = __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; });
|
|
11831
11853
|
var IconContainer$3 = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
11832
11854
|
var Text$4 = newStyled.p(templateObject_3$l || (templateObject_3$l = __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; });
|
|
11833
11855
|
var Details = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
11834
11856
|
var Note = function (_a) {
|
|
11835
11857
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11836
|
-
return (jsxs$1(Container$
|
|
11858
|
+
return (jsxs$1(Container$o, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11837
11859
|
};
|
|
11838
|
-
var templateObject_1$
|
|
11860
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
11839
11861
|
|
|
11840
11862
|
/* eslint-disable no-param-reassign */
|
|
11841
11863
|
var index$1 = function (breakpoints) {
|
|
@@ -11921,7 +11943,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11921
11943
|
literal: true,
|
|
11922
11944
|
});
|
|
11923
11945
|
|
|
11924
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
11946
|
+
var Title$4 = newStyled.h1(templateObject_1$D || (templateObject_1$D = __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; });
|
|
11925
11947
|
var Line = newStyled.div(templateObject_2$o || (templateObject_2$o = __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; });
|
|
11926
11948
|
var Row$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
11927
11949
|
flexDirection: ['column', 'row'],
|
|
@@ -11950,27 +11972,27 @@ var DeliveryDetails = function (_a) {
|
|
|
11950
11972
|
var theme = useTheme();
|
|
11951
11973
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11952
11974
|
};
|
|
11953
|
-
var templateObject_1$
|
|
11975
|
+
var templateObject_1$D, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$2;
|
|
11954
11976
|
|
|
11955
|
-
var Container$
|
|
11977
|
+
var Container$n = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
11956
11978
|
var Text$3 = newStyled.p(templateObject_2$n || (templateObject_2$n = __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; });
|
|
11957
11979
|
var ScrollToTop = function (_a) {
|
|
11958
11980
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11959
11981
|
var theme = useTheme();
|
|
11960
|
-
return (jsxs$1(Container$
|
|
11982
|
+
return (jsxs$1(Container$n, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
11961
11983
|
};
|
|
11962
|
-
var templateObject_1$
|
|
11984
|
+
var templateObject_1$C, templateObject_2$n;
|
|
11963
11985
|
|
|
11964
|
-
var Container$
|
|
11986
|
+
var Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
11965
11987
|
var H1 = newStyled.h1(templateObject_2$m || (templateObject_2$m = __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; });
|
|
11966
11988
|
var OrderBar = function (_a) {
|
|
11967
11989
|
var message = _a.message;
|
|
11968
11990
|
var theme = useTheme();
|
|
11969
|
-
return (jsxs$1(Container$
|
|
11991
|
+
return (jsxs$1(Container$m, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11970
11992
|
};
|
|
11971
|
-
var templateObject_1$
|
|
11993
|
+
var templateObject_1$B, templateObject_2$m;
|
|
11972
11994
|
|
|
11973
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
11995
|
+
var TableElement = newStyled.table(templateObject_1$A || (templateObject_1$A = __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; });
|
|
11974
11996
|
var TableCell = newStyled.td(templateObject_2$l || (templateObject_2$l = __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; });
|
|
11975
11997
|
var TableHead = newStyled.th(templateObject_3$j || (templateObject_3$j = __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; });
|
|
11976
11998
|
var TableRow = newStyled.tr(templateObject_4$d || (templateObject_4$d = __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; });
|
|
@@ -11979,16 +12001,16 @@ var SizeTable = function (_a) {
|
|
|
11979
12001
|
var theme = useTheme();
|
|
11980
12002
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
11981
12003
|
};
|
|
11982
|
-
var templateObject_1$
|
|
12004
|
+
var templateObject_1$A, templateObject_2$l, templateObject_3$j, templateObject_4$d;
|
|
11983
12005
|
|
|
11984
|
-
var Img = newStyled.img(templateObject_1$
|
|
12006
|
+
var Img = newStyled.img(templateObject_1$z || (templateObject_1$z = __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; });
|
|
11985
12007
|
var Image = function (_a) {
|
|
11986
12008
|
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;
|
|
11987
12009
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
11988
12010
|
};
|
|
11989
|
-
var templateObject_1$
|
|
12011
|
+
var templateObject_1$z;
|
|
11990
12012
|
|
|
11991
|
-
var Container$
|
|
12013
|
+
var Container$l = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
11992
12014
|
var ImageContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
11993
12015
|
var DescriptionContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
11994
12016
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12026,9 +12048,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
12026
12048
|
var SimpleOrderItem = function (_a) {
|
|
12027
12049
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12028
12050
|
var theme = useTheme();
|
|
12029
|
-
return (jsxs$1(Container$
|
|
12051
|
+
return (jsxs$1(Container$l, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12030
12052
|
};
|
|
12031
|
-
var templateObject_1$
|
|
12053
|
+
var templateObject_1$y, templateObject_2$k, templateObject_3$i, templateObject_4$c, templateObject_5$7;
|
|
12032
12054
|
|
|
12033
12055
|
function formatDate(date) {
|
|
12034
12056
|
var day = date.getDate();
|
|
@@ -12037,7 +12059,7 @@ function formatDate(date) {
|
|
|
12037
12059
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12038
12060
|
}
|
|
12039
12061
|
|
|
12040
|
-
var Container$
|
|
12062
|
+
var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
12041
12063
|
var Heading = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
12042
12064
|
fontSize: ['14px', '16px'],
|
|
12043
12065
|
lineHeight: ['22px', '24px'],
|
|
@@ -12060,17 +12082,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
12060
12082
|
var Review = function (_a) {
|
|
12061
12083
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12062
12084
|
var theme = useTheme();
|
|
12063
|
-
return (jsxs$1(Container$
|
|
12085
|
+
return (jsxs$1(Container$k, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12064
12086
|
};
|
|
12065
|
-
var templateObject_1$
|
|
12087
|
+
var templateObject_1$x, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
12066
12088
|
|
|
12067
|
-
var List = newStyled.ul(templateObject_1$
|
|
12089
|
+
var List = newStyled.ul(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12068
12090
|
var Item$1 = newStyled.li(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
12069
12091
|
var DropdownWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
12070
12092
|
var ArrowContainer$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
12071
12093
|
var StyledDropdown = newStyled.ul(templateObject_5$5 || (templateObject_5$5 = __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; });
|
|
12072
12094
|
var DropdownItem = newStyled.li(templateObject_6$4 || (templateObject_6$4 = __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; });
|
|
12073
|
-
var templateObject_1$
|
|
12095
|
+
var templateObject_1$w, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12074
12096
|
|
|
12075
12097
|
var DropdownListIcons = function (_a) {
|
|
12076
12098
|
var items = _a.items;
|
|
@@ -12083,7 +12105,7 @@ var Dropdown = function (_a) {
|
|
|
12083
12105
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12084
12106
|
};
|
|
12085
12107
|
|
|
12086
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12108
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$v || (templateObject_1$v = __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; });
|
|
12087
12109
|
var AmazonButton = function (_a) {
|
|
12088
12110
|
var onClick = _a.onClick;
|
|
12089
12111
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12092,9 +12114,9 @@ var PaypalButton = function (_a) {
|
|
|
12092
12114
|
var onClick = _a.onClick;
|
|
12093
12115
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12094
12116
|
};
|
|
12095
|
-
var templateObject_1$
|
|
12117
|
+
var templateObject_1$v;
|
|
12096
12118
|
|
|
12097
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12119
|
+
var Wrapper = newStyled.div(templateObject_1$u || (templateObject_1$u = __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'); });
|
|
12098
12120
|
var Col = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12099
12121
|
var Row = newStyled.div(templateObject_3$f || (templateObject_3$f = __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) {
|
|
12100
12122
|
return props.rightToLeft &&
|
|
@@ -12108,7 +12130,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12108
12130
|
var theme = useTheme();
|
|
12109
12131
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12110
12132
|
};
|
|
12111
|
-
var templateObject_1$
|
|
12133
|
+
var templateObject_1$u, templateObject_2$h, templateObject_3$f, templateObject_4$9, templateObject_5$4, templateObject_6$3;
|
|
12112
12134
|
|
|
12113
12135
|
var index = /*#__PURE__*/Object.freeze({
|
|
12114
12136
|
__proto__: null,
|
|
@@ -12129,7 +12151,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12129
12151
|
height: height,
|
|
12130
12152
|
});
|
|
12131
12153
|
});
|
|
12132
|
-
var Container$
|
|
12154
|
+
var Container$j = newStyled.a(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
12133
12155
|
var Title$2 = newStyled.p(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12134
12156
|
var getStylesBySize = function (size) {
|
|
12135
12157
|
switch (size) {
|
|
@@ -12170,28 +12192,28 @@ var ProductItemMobile = function (_a) {
|
|
|
12170
12192
|
_a[ComponentSize.Small] = 2,
|
|
12171
12193
|
_a)[size];
|
|
12172
12194
|
}, [size]);
|
|
12173
|
-
return (jsxs(Container$
|
|
12195
|
+
return (jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabelHomeColPDP, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: true, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12174
12196
|
};
|
|
12175
|
-
var templateObject_1$
|
|
12197
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$e, templateObject_4$8;
|
|
12176
12198
|
|
|
12177
|
-
var Container$
|
|
12199
|
+
var Container$i = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
12178
12200
|
function withProductGrid(ProductItemComponent, data) {
|
|
12179
12201
|
function WithProductGrid(props) {
|
|
12180
|
-
return (jsx$1(Container$
|
|
12202
|
+
return (jsx$1(Container$i, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12181
12203
|
}
|
|
12182
12204
|
/* istanbul ignore next */
|
|
12183
12205
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12184
12206
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12185
12207
|
return WithProductGrid;
|
|
12186
12208
|
}
|
|
12187
|
-
var templateObject_1$
|
|
12209
|
+
var templateObject_1$s;
|
|
12188
12210
|
|
|
12189
12211
|
var Collection = {
|
|
12190
12212
|
ProductItemMobile: ProductItemMobile,
|
|
12191
12213
|
withProductGrid: withProductGrid,
|
|
12192
12214
|
};
|
|
12193
12215
|
|
|
12194
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12216
|
+
var Backdrop = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
12195
12217
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12196
12218
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12197
12219
|
});
|
|
@@ -12236,9 +12258,9 @@ var Drawer = function (_a) {
|
|
|
12236
12258
|
}, [isOpen, onClose, onOpen]);
|
|
12237
12259
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12238
12260
|
};
|
|
12239
|
-
var templateObject_1$
|
|
12261
|
+
var templateObject_1$r, templateObject_2$f;
|
|
12240
12262
|
|
|
12241
|
-
var Container$
|
|
12263
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12242
12264
|
var size = _a.size;
|
|
12243
12265
|
return (size ? size : '100%');
|
|
12244
12266
|
}, function (_a) {
|
|
@@ -12251,11 +12273,11 @@ var Animation = newStyled.div(templateObject_2$e || (templateObject_2$e = __make
|
|
|
12251
12273
|
});
|
|
12252
12274
|
var Spinner = function (_a) {
|
|
12253
12275
|
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;
|
|
12254
|
-
return (jsx$1(Container$
|
|
12276
|
+
return (jsx$1(Container$h, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12255
12277
|
};
|
|
12256
|
-
var templateObject_1$
|
|
12278
|
+
var templateObject_1$q, templateObject_2$e;
|
|
12257
12279
|
|
|
12258
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12280
|
+
var UL = newStyled.ul(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
12259
12281
|
var LI = newStyled.li(templateObject_2$d || (templateObject_2$d = __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; });
|
|
12260
12282
|
var CloseIconContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
12261
12283
|
var Tags = function (_a) {
|
|
@@ -12265,7 +12287,7 @@ var Tags = function (_a) {
|
|
|
12265
12287
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12266
12288
|
}) }), void 0));
|
|
12267
12289
|
};
|
|
12268
|
-
var templateObject_1$
|
|
12290
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$d;
|
|
12269
12291
|
|
|
12270
12292
|
function FilteringDropdown(_a) {
|
|
12271
12293
|
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;
|
|
@@ -12298,7 +12320,7 @@ function FilteringDropdown(_a) {
|
|
|
12298
12320
|
}) }, void 0)] }), void 0));
|
|
12299
12321
|
}
|
|
12300
12322
|
|
|
12301
|
-
var Container$
|
|
12323
|
+
var Container$g = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
12302
12324
|
var IconContainer$1 = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
12303
12325
|
var PageNumbersContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12304
12326
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -12317,7 +12339,7 @@ var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
12317
12339
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12318
12340
|
width: ['1.25rem', '1.875rem'],
|
|
12319
12341
|
}));
|
|
12320
|
-
var templateObject_1$
|
|
12342
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$c, templateObject_4$7;
|
|
12321
12343
|
|
|
12322
12344
|
var Pagination = function (_a) {
|
|
12323
12345
|
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;
|
|
@@ -12330,10 +12352,10 @@ var Pagination = function (_a) {
|
|
|
12330
12352
|
setPage(page);
|
|
12331
12353
|
onChange(page);
|
|
12332
12354
|
};
|
|
12333
|
-
return (jsxs$1(Container$
|
|
12355
|
+
return (jsxs$1(Container$g, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12334
12356
|
};
|
|
12335
12357
|
|
|
12336
|
-
var Container$
|
|
12358
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
12337
12359
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12338
12360
|
}));
|
|
12339
12361
|
var Description$1 = newStyled.div({
|
|
@@ -12350,25 +12372,25 @@ var Description$1 = newStyled.div({
|
|
|
12350
12372
|
var ProductItem = function (_a) {
|
|
12351
12373
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12352
12374
|
var theme = useTheme();
|
|
12353
|
-
return (jsxs$1(Container$
|
|
12375
|
+
return (jsxs$1(Container$f, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12354
12376
|
};
|
|
12355
|
-
var templateObject_1$
|
|
12377
|
+
var templateObject_1$n;
|
|
12356
12378
|
|
|
12357
|
-
var Container$
|
|
12379
|
+
var Container$e = newStyled.div({
|
|
12358
12380
|
display: 'flex',
|
|
12359
12381
|
justifyContent: 'center',
|
|
12360
12382
|
padding: '1rem',
|
|
12361
12383
|
});
|
|
12362
12384
|
var Footer = function (_a) {
|
|
12363
12385
|
var text = _a.text, onClick = _a.onClick;
|
|
12364
|
-
return (jsx$1(Container$
|
|
12386
|
+
return (jsx$1(Container$e, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12365
12387
|
};
|
|
12366
12388
|
|
|
12367
12389
|
var Ul = newStyled.ul({
|
|
12368
12390
|
margin: '0px',
|
|
12369
12391
|
padding: '0px',
|
|
12370
12392
|
});
|
|
12371
|
-
var Li = newStyled.li(templateObject_1$
|
|
12393
|
+
var Li = newStyled.li(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
12372
12394
|
padding: [0, '0rem 1rem'],
|
|
12373
12395
|
borderRadius: [0, '0.5rem'],
|
|
12374
12396
|
}));
|
|
@@ -12380,7 +12402,7 @@ var Anchor = newStyled.a({
|
|
|
12380
12402
|
padding: 0,
|
|
12381
12403
|
textDecoration: 'none',
|
|
12382
12404
|
});
|
|
12383
|
-
var Container$
|
|
12405
|
+
var Container$d = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
12384
12406
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12385
12407
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12386
12408
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -12391,9 +12413,9 @@ var Header$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeT
|
|
|
12391
12413
|
var ResultsPanel = function (_a) {
|
|
12392
12414
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12393
12415
|
var theme = useTheme();
|
|
12394
|
-
return (jsxs$1(Container$
|
|
12416
|
+
return (jsxs$1(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12395
12417
|
};
|
|
12396
|
-
var templateObject_1$
|
|
12418
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$b;
|
|
12397
12419
|
|
|
12398
12420
|
var Input = newStyled.input(function (props) { return ({
|
|
12399
12421
|
padding: props.theme.component.input.padding,
|
|
@@ -12424,7 +12446,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12424
12446
|
},
|
|
12425
12447
|
}); });
|
|
12426
12448
|
|
|
12427
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12449
|
+
var Button$1 = newStyled.button(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
12428
12450
|
right: ['1rem', '7.75rem'],
|
|
12429
12451
|
top: ['0.75rem', '0.75rem'],
|
|
12430
12452
|
}));
|
|
@@ -12433,7 +12455,7 @@ var ClearButton = function (_a) {
|
|
|
12433
12455
|
var theme = useTheme();
|
|
12434
12456
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12435
12457
|
};
|
|
12436
|
-
var templateObject_1$
|
|
12458
|
+
var templateObject_1$l;
|
|
12437
12459
|
|
|
12438
12460
|
var useOnClickOutside = function (ref, handler) {
|
|
12439
12461
|
useEffect(function () {
|
|
@@ -12519,7 +12541,7 @@ var reducer = function (state, action) {
|
|
|
12519
12541
|
}
|
|
12520
12542
|
}
|
|
12521
12543
|
};
|
|
12522
|
-
var Container$
|
|
12544
|
+
var Container$c = newStyled.div({
|
|
12523
12545
|
position: 'relative',
|
|
12524
12546
|
display: 'flex',
|
|
12525
12547
|
});
|
|
@@ -12555,7 +12577,7 @@ var SearchBar = function (_a) {
|
|
|
12555
12577
|
onClose();
|
|
12556
12578
|
}
|
|
12557
12579
|
};
|
|
12558
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
12580
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$c, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
|
|
12559
12581
|
if (e.key === 'Enter') {
|
|
12560
12582
|
e.preventDefault();
|
|
12561
12583
|
e.stopPropagation();
|
|
@@ -12829,34 +12851,34 @@ function useSwipeable(options) {
|
|
|
12829
12851
|
return handlers;
|
|
12830
12852
|
}
|
|
12831
12853
|
|
|
12832
|
-
var Container$
|
|
12854
|
+
var Container$b = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])));
|
|
12833
12855
|
var TopTagContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12834
12856
|
var BottomTagContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12835
12857
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12836
12858
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12837
|
-
return (jsxs$1(Container$
|
|
12859
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, { children: topTag }, void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
12838
12860
|
});
|
|
12839
|
-
var templateObject_1$
|
|
12861
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$a;
|
|
12840
12862
|
|
|
12841
|
-
var Button = newStyled.button(templateObject_1$
|
|
12863
|
+
var Button = newStyled.button(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
12842
12864
|
var ArrowButton = function (_a) {
|
|
12843
12865
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12844
12866
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12845
12867
|
};
|
|
12846
|
-
var templateObject_1$
|
|
12868
|
+
var templateObject_1$j;
|
|
12847
12869
|
|
|
12848
|
-
var Container$
|
|
12870
|
+
var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
12849
12871
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12850
12872
|
var SlideDots = function (_a) {
|
|
12851
12873
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12852
12874
|
var theme = useTheme();
|
|
12853
|
-
return (jsx$1(Container$
|
|
12875
|
+
return (jsx$1(Container$a, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12854
12876
|
? theme.colors.shades.white.color
|
|
12855
12877
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12856
12878
|
};
|
|
12857
|
-
var templateObject_1$
|
|
12879
|
+
var templateObject_1$i;
|
|
12858
12880
|
|
|
12859
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12881
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
12860
12882
|
var RightButton = newStyled(NavigationButton)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12861
12883
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12862
12884
|
var SlideNavigation = function (_a) {
|
|
@@ -12870,9 +12892,9 @@ var SlideNavigation = function (_a) {
|
|
|
12870
12892
|
onNavigate(selectedIndex + 1);
|
|
12871
12893
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12872
12894
|
};
|
|
12873
|
-
var templateObject_1$
|
|
12895
|
+
var templateObject_1$h, templateObject_2$9, templateObject_3$9;
|
|
12874
12896
|
|
|
12875
|
-
var Container$
|
|
12897
|
+
var Container$9 = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
12876
12898
|
var ProductGalleryMobile = function (_a) {
|
|
12877
12899
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12878
12900
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12894,9 +12916,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12894
12916
|
useEffect(function () {
|
|
12895
12917
|
setSelectedImage(images[index]);
|
|
12896
12918
|
}, [index, images]);
|
|
12897
|
-
return (jsxs$1(Container$
|
|
12919
|
+
return (jsxs$1(Container$9, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12898
12920
|
};
|
|
12899
|
-
var templateObject_1$
|
|
12921
|
+
var templateObject_1$g;
|
|
12900
12922
|
|
|
12901
12923
|
var Portal = function (_a) {
|
|
12902
12924
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13029,14 +13051,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13029
13051
|
var visibleStyle = function (_a) {
|
|
13030
13052
|
var opened = _a.opened;
|
|
13031
13053
|
return opened
|
|
13032
|
-
? css(templateObject_1$
|
|
13054
|
+
? css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13033
13055
|
};
|
|
13034
13056
|
var transformStyle = function (_a) {
|
|
13035
13057
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13036
13058
|
return opened
|
|
13037
13059
|
? css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13038
13060
|
};
|
|
13039
|
-
var Container$
|
|
13061
|
+
var Container$8 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13040
13062
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13041
13063
|
}), visibleStyle, transformStyle);
|
|
13042
13064
|
var Overlay = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -13049,7 +13071,7 @@ var Modal = function (_a) {
|
|
|
13049
13071
|
}
|
|
13050
13072
|
close();
|
|
13051
13073
|
};
|
|
13052
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13074
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$8, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13053
13075
|
};
|
|
13054
13076
|
var modalEvent = function (id, detail) {
|
|
13055
13077
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13077,39 +13099,39 @@ var useModal = function (id) {
|
|
|
13077
13099
|
close: close,
|
|
13078
13100
|
}); }, [close, open, opened]);
|
|
13079
13101
|
};
|
|
13080
|
-
var templateObject_1$
|
|
13102
|
+
var templateObject_1$f, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
13081
13103
|
|
|
13082
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13104
|
+
var Text$2 = newStyled.span(templateObject_1$e || (templateObject_1$e = __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; });
|
|
13083
13105
|
var Title$1 = function (_a) {
|
|
13084
13106
|
var title = _a.title;
|
|
13085
13107
|
var theme = useTheme();
|
|
13086
13108
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13087
13109
|
};
|
|
13088
|
-
var templateObject_1$
|
|
13110
|
+
var templateObject_1$e;
|
|
13089
13111
|
|
|
13090
|
-
var P = newStyled.p(templateObject_1$
|
|
13112
|
+
var P = newStyled.p(templateObject_1$d || (templateObject_1$d = __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; });
|
|
13091
13113
|
var Promo = function (_a) {
|
|
13092
13114
|
var text = _a.text;
|
|
13093
13115
|
var theme = useTheme();
|
|
13094
13116
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13095
13117
|
};
|
|
13096
|
-
var templateObject_1$
|
|
13118
|
+
var templateObject_1$d;
|
|
13097
13119
|
|
|
13098
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13120
|
+
var Text$1 = newStyled.span(templateObject_1$c || (templateObject_1$c = __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; });
|
|
13099
13121
|
var Description = function (_a) {
|
|
13100
13122
|
var text = _a.text;
|
|
13101
13123
|
var theme = useTheme();
|
|
13102
13124
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13103
13125
|
};
|
|
13104
|
-
var templateObject_1$
|
|
13126
|
+
var templateObject_1$c;
|
|
13105
13127
|
|
|
13106
|
-
var Container$
|
|
13128
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13107
13129
|
var CloseButton = function (_a) {
|
|
13108
13130
|
var onClick = _a.onClick, size = _a.size;
|
|
13109
13131
|
var theme = useTheme();
|
|
13110
|
-
return (jsx$1(Container$
|
|
13132
|
+
return (jsx$1(Container$7, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13111
13133
|
};
|
|
13112
|
-
var templateObject_1$
|
|
13134
|
+
var templateObject_1$b;
|
|
13113
13135
|
|
|
13114
13136
|
var CartProductItem = {
|
|
13115
13137
|
Title: Title$1,
|
|
@@ -13119,7 +13141,7 @@ var CartProductItem = {
|
|
|
13119
13141
|
CloseButton: CloseButton,
|
|
13120
13142
|
};
|
|
13121
13143
|
|
|
13122
|
-
var Container$
|
|
13144
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13123
13145
|
var Item = newStyled.span(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13124
13146
|
var Number$1 = newStyled(Item)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13125
13147
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
@@ -13145,9 +13167,9 @@ var QuantityPicker = function (_a) {
|
|
|
13145
13167
|
return clamp(value);
|
|
13146
13168
|
});
|
|
13147
13169
|
}, [value, clamp]);
|
|
13148
|
-
return (jsxs$1(Container$
|
|
13170
|
+
return (jsxs$1(Container$6, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13149
13171
|
};
|
|
13150
|
-
var templateObject_1$
|
|
13172
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$7, templateObject_4$5;
|
|
13151
13173
|
|
|
13152
13174
|
var htmlReactParser = {exports: {}};
|
|
13153
13175
|
|
|
@@ -16928,7 +16950,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16928
16950
|
HTMLReactParser$1.attributesToProps;
|
|
16929
16951
|
HTMLReactParser$1.Element;
|
|
16930
16952
|
|
|
16931
|
-
var Container$
|
|
16953
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
16932
16954
|
var Card = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
16933
16955
|
var Tag = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
16934
16956
|
var Label = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -16938,7 +16960,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 =
|
|
|
16938
16960
|
var DiscountContainer = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
16939
16961
|
var PackSelector = function (_a) {
|
|
16940
16962
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16941
|
-
return (jsx$1(Container$
|
|
16963
|
+
return (jsx$1(Container$5, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16942
16964
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16943
16965
|
}) }), void 0));
|
|
16944
16966
|
};
|
|
@@ -16955,9 +16977,9 @@ var PackCard = function (_a) {
|
|
|
16955
16977
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16956
16978
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxs$1(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16957
16979
|
};
|
|
16958
|
-
var templateObject_1$
|
|
16980
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$6, templateObject_4$4, templateObject_5$2, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
16959
16981
|
|
|
16960
|
-
var Title = newStyled.div(templateObject_1$
|
|
16982
|
+
var Title = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
16961
16983
|
var H2 = newStyled.h2(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
16962
16984
|
var ArrowContainer = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
16963
16985
|
var Accordion = function (_a) {
|
|
@@ -16966,9 +16988,9 @@ var Accordion = function (_a) {
|
|
|
16966
16988
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
16967
16989
|
return (jsxs$1("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
16968
16990
|
};
|
|
16969
|
-
var templateObject_1$
|
|
16991
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$5;
|
|
16970
16992
|
|
|
16971
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
16993
|
+
var SectionContent = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
16972
16994
|
var Header = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
16973
16995
|
var MobileHeader = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
16974
16996
|
var MobileIconsContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
@@ -16978,13 +17000,28 @@ var OptionContainer = newStyled.div(templateObject_7 || (templateObject_7 = __ma
|
|
|
16978
17000
|
var ClearAll = newStyled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
16979
17001
|
var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
16980
17002
|
var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
16981
|
-
var templateObject_1$
|
|
17003
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
16982
17004
|
|
|
16983
17005
|
var Filters = function (_a) {
|
|
16984
17006
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
17007
|
+
var getInitialCheckedItems = function () {
|
|
17008
|
+
var checkedItems = [];
|
|
17009
|
+
values.forEach(function (filter, sectionIndex) {
|
|
17010
|
+
filter.items.forEach(function (item, itemIndex) {
|
|
17011
|
+
if (item.checked) {
|
|
17012
|
+
checkedItems.push({
|
|
17013
|
+
sectionIndex: sectionIndex,
|
|
17014
|
+
itemIndex: itemIndex,
|
|
17015
|
+
label: item.label,
|
|
17016
|
+
});
|
|
17017
|
+
}
|
|
17018
|
+
});
|
|
17019
|
+
});
|
|
17020
|
+
return checkedItems;
|
|
17021
|
+
};
|
|
16985
17022
|
var theme = useTheme();
|
|
16986
17023
|
var _c = useState(values), filters = _c[0], setFilter = _c[1];
|
|
16987
|
-
var _d = useState(
|
|
17024
|
+
var _d = useState(getInitialCheckedItems()), checkedItems = _d[0], setCheckedItems = _d[1];
|
|
16988
17025
|
var _e = useState(), filterState = _e[0], setFilterSection = _e[1];
|
|
16989
17026
|
useEffect(function () {
|
|
16990
17027
|
if (filters.length && filterState) {
|
|
@@ -17065,20 +17102,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17065
17102
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
17066
17103
|
};
|
|
17067
17104
|
|
|
17068
|
-
var Container$
|
|
17105
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17069
17106
|
var BackArrow = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17070
17107
|
var BoldSpan = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17071
17108
|
var NormalSpan = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
17072
17109
|
var SearchNavigationParents = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17073
17110
|
var SearchNavigation = function (_a) {
|
|
17074
17111
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17075
|
-
return (jsxs$1(Container$
|
|
17112
|
+
return (jsxs$1(Container$4, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17076
17113
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17077
17114
|
}) }, void 0)] }, void 0));
|
|
17078
17115
|
};
|
|
17079
|
-
var templateObject_1$
|
|
17116
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5;
|
|
17080
17117
|
|
|
17081
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17118
|
+
var TabContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17082
17119
|
var titleSize = _a.titleSize;
|
|
17083
17120
|
return titleSize;
|
|
17084
17121
|
}, function (_a) {
|
|
@@ -17095,9 +17132,9 @@ var Tab = function (_a) {
|
|
|
17095
17132
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17096
17133
|
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17097
17134
|
};
|
|
17098
|
-
var templateObject_1$
|
|
17135
|
+
var templateObject_1$5;
|
|
17099
17136
|
|
|
17100
|
-
var Container$
|
|
17137
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17101
17138
|
var TabList = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17102
17139
|
var backgroundColor = _a.backgroundColor;
|
|
17103
17140
|
return backgroundColor;
|
|
@@ -17112,11 +17149,11 @@ var Tabs = function (_a) {
|
|
|
17112
17149
|
return null;
|
|
17113
17150
|
}
|
|
17114
17151
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17115
|
-
return (jsxs$1(Container$
|
|
17152
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17116
17153
|
};
|
|
17117
|
-
var templateObject_1$
|
|
17154
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$1;
|
|
17118
17155
|
|
|
17119
|
-
var Container$
|
|
17156
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n height: auto;\n text-align: center;\n"], ["\n height: auto;\n text-align: center;\n"])));
|
|
17120
17157
|
var IconWrapper = newStyled.div(function (props) { return ({
|
|
17121
17158
|
borderRadius: '500px',
|
|
17122
17159
|
width: '120px',
|
|
@@ -17141,16 +17178,16 @@ var IconsWithTitle = function (_a) {
|
|
|
17141
17178
|
console.error('Icon', iconName, 'not found');
|
|
17142
17179
|
return null;
|
|
17143
17180
|
}
|
|
17144
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
17181
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$2, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi", style: {
|
|
17145
17182
|
fontSize: '14px',
|
|
17146
17183
|
textTransform: 'uppercase',
|
|
17147
17184
|
textAlign: 'center',
|
|
17148
17185
|
lineHeight: '18px',
|
|
17149
17186
|
} }, { children: iconTitle }), void 0)] }, void 0) }, void 0));
|
|
17150
17187
|
};
|
|
17151
|
-
var templateObject_1$
|
|
17188
|
+
var templateObject_1$3;
|
|
17152
17189
|
|
|
17153
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17190
|
+
var ImageWrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17154
17191
|
var VideoOverlay = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17155
17192
|
var FullscreenVideo = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17156
17193
|
var ImageVideo = function (_a) {
|
|
@@ -17172,11 +17209,11 @@ var ImageVideo = function (_a) {
|
|
|
17172
17209
|
height: '100%',
|
|
17173
17210
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17174
17211
|
};
|
|
17175
|
-
var templateObject_1$
|
|
17212
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
17176
17213
|
|
|
17177
|
-
var ContainerDesktop = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17214
|
+
var ContainerDesktop = css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17178
17215
|
var ContainerMobile = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
17179
|
-
var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17216
|
+
var Container$1 = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17180
17217
|
var TextContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17181
17218
|
var TextWithImage = function (_a) {
|
|
17182
17219
|
var _b, _c, _d, _e;
|
|
@@ -17197,7 +17234,7 @@ var TextWithImage = function (_a) {
|
|
|
17197
17234
|
// @ts-ignore
|
|
17198
17235
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17199
17236
|
};
|
|
17200
|
-
return (jsxs(Container, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17237
|
+
return (jsxs(Container$1, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17201
17238
|
backgroundColor: props.btnBGColor,
|
|
17202
17239
|
color: '#ffffff',
|
|
17203
17240
|
border: props.btnBGColor,
|
|
@@ -17207,7 +17244,33 @@ var TextWithImage = function (_a) {
|
|
|
17207
17244
|
},
|
|
17208
17245
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17209
17246
|
};
|
|
17210
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17247
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
|
|
17248
|
+
|
|
17249
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17250
|
+
var AccordionOptions = function (_a) {
|
|
17251
|
+
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17252
|
+
var _b = useState({
|
|
17253
|
+
index: -1,
|
|
17254
|
+
open: false,
|
|
17255
|
+
}), openAccordionIndex = _b[0], setOpenAccordionIndex = _b[1];
|
|
17256
|
+
var getForceOpen = function (index) {
|
|
17257
|
+
if (openAccordionIndex.index === index) {
|
|
17258
|
+
return openAccordionIndex.open;
|
|
17259
|
+
}
|
|
17260
|
+
return false;
|
|
17261
|
+
};
|
|
17262
|
+
return (jsx$1(Container, { children: accordions.map(function (accordion, index) {
|
|
17263
|
+
var forceOpenValue = getForceOpen(index);
|
|
17264
|
+
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17265
|
+
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
17266
|
+
return setOpenAccordionIndex(function (prevState) { return ({
|
|
17267
|
+
index: index,
|
|
17268
|
+
open: prevState.index === index ? !prevState.open : true,
|
|
17269
|
+
}); });
|
|
17270
|
+
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17271
|
+
}) }, void 0));
|
|
17272
|
+
};
|
|
17273
|
+
var templateObject_1;
|
|
17211
17274
|
|
|
17212
|
-
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17275
|
+
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelHomeColPDP, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17213
17276
|
//# sourceMappingURL=index.esm.js.map
|