@trafilea/afrodita-components 5.0.0-beta.84 → 5.0.0-beta.87
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 +12 -2
- package/build/index.esm.js +274 -224
- package/build/index.esm.js.map +1 -1
- package/build/index.js +274 -223
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3610,7 +3610,7 @@ exports.InputValidationType = void 0;
|
|
|
3610
3610
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3611
3611
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3612
3612
|
|
|
3613
|
-
var Section = newStyled.div(templateObject_1$
|
|
3613
|
+
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) {
|
|
3614
3614
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3615
3615
|
});
|
|
3616
3616
|
var CardHeader = function (_a) {
|
|
@@ -3621,14 +3621,14 @@ var CardFooter = function (_a) {
|
|
|
3621
3621
|
var children = _a.children;
|
|
3622
3622
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3623
3623
|
};
|
|
3624
|
-
var templateObject_1$
|
|
3624
|
+
var templateObject_1$1f;
|
|
3625
3625
|
|
|
3626
|
-
var Body = newStyled.div(templateObject_1$
|
|
3626
|
+
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"])));
|
|
3627
3627
|
var CardBody = function (_a) {
|
|
3628
3628
|
var children = _a.children;
|
|
3629
3629
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3630
3630
|
};
|
|
3631
|
-
var templateObject_1$
|
|
3631
|
+
var templateObject_1$1e;
|
|
3632
3632
|
|
|
3633
3633
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3634
3634
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3773,7 +3773,7 @@ var AssetsProvider = function (_a) {
|
|
|
3773
3773
|
};
|
|
3774
3774
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
3775
3775
|
|
|
3776
|
-
var Container$
|
|
3776
|
+
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) {
|
|
3777
3777
|
var flex = _a.flex;
|
|
3778
3778
|
return flex &&
|
|
3779
3779
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3786,14 +3786,14 @@ var Container$K = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __
|
|
|
3786
3786
|
var Card$1 = function (_a) {
|
|
3787
3787
|
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;
|
|
3788
3788
|
var theme = useTheme();
|
|
3789
|
-
return (jsxRuntime.jsx(Container$
|
|
3789
|
+
return (jsxRuntime.jsx(Container$L, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3790
3790
|
};
|
|
3791
3791
|
var Card$2 = Object.assign(Card$1, {
|
|
3792
3792
|
Header: CardHeader,
|
|
3793
3793
|
Footer: CardFooter,
|
|
3794
3794
|
Body: CardBody,
|
|
3795
3795
|
});
|
|
3796
|
-
var templateObject_1$
|
|
3796
|
+
var templateObject_1$1d;
|
|
3797
3797
|
|
|
3798
3798
|
var Fragment = jsxRuntime.Fragment;
|
|
3799
3799
|
function jsx(type, props, key) {
|
|
@@ -3935,7 +3935,7 @@ function BaseSelectOption(_a) {
|
|
|
3935
3935
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3936
3936
|
}
|
|
3937
3937
|
|
|
3938
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3938
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3939
3939
|
function BaseSelect(_a) {
|
|
3940
3940
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3941
3941
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3945,7 +3945,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3945
3945
|
Options: BaseSelectOptions,
|
|
3946
3946
|
Option: BaseSelectOption,
|
|
3947
3947
|
});
|
|
3948
|
-
var templateObject_1$
|
|
3948
|
+
var templateObject_1$1c;
|
|
3949
3949
|
|
|
3950
3950
|
var CustomButton = newStyled.button(function (_a) {
|
|
3951
3951
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4158,7 +4158,7 @@ var CustomCheckboxStyles = {
|
|
|
4158
4158
|
},
|
|
4159
4159
|
};
|
|
4160
4160
|
|
|
4161
|
-
var Container$
|
|
4161
|
+
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"])));
|
|
4162
4162
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4163
4163
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4164
4164
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4192,9 +4192,9 @@ var Checkbox = function (_a) {
|
|
|
4192
4192
|
React$2.useEffect(function () {
|
|
4193
4193
|
mounted.current = true;
|
|
4194
4194
|
}, []);
|
|
4195
|
-
return (jsxRuntime.jsxs(Container$
|
|
4195
|
+
return (jsxRuntime.jsxs(Container$K, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4196
4196
|
};
|
|
4197
|
-
var templateObject_1$
|
|
4197
|
+
var templateObject_1$1b, templateObject_2$L;
|
|
4198
4198
|
|
|
4199
4199
|
var CustomOption = newStyled.li(function (_a) {
|
|
4200
4200
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4331,7 +4331,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4331
4331
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4332
4332
|
// `variants` styles that are consistent through all themes.
|
|
4333
4333
|
var TAGS = {
|
|
4334
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4334
|
+
hero1: newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject([""], [""]))),
|
|
4335
4335
|
hero2: newStyled.h2(templateObject_2$K || (templateObject_2$K = __makeTemplateObject([""], [""]))),
|
|
4336
4336
|
hero3: newStyled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject([""], [""]))),
|
|
4337
4337
|
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4454,9 +4454,9 @@ var DEFAULTS = {
|
|
|
4454
4454
|
size: 'regular',
|
|
4455
4455
|
},
|
|
4456
4456
|
};
|
|
4457
|
-
var templateObject_1$
|
|
4457
|
+
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;
|
|
4458
4458
|
|
|
4459
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4459
|
+
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) {
|
|
4460
4460
|
var inline = _a.inline;
|
|
4461
4461
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4462
4462
|
});
|
|
@@ -4474,7 +4474,7 @@ var SizeSelector = function (_a) {
|
|
|
4474
4474
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4475
4475
|
}) }), void 0)] }), void 0));
|
|
4476
4476
|
};
|
|
4477
|
-
var templateObject_1$
|
|
4477
|
+
var templateObject_1$19;
|
|
4478
4478
|
|
|
4479
4479
|
var getStylesBySize$7 = function (size) {
|
|
4480
4480
|
switch (size) {
|
|
@@ -4501,7 +4501,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4501
4501
|
} });
|
|
4502
4502
|
};
|
|
4503
4503
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4504
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4504
|
+
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));
|
|
4505
4505
|
};
|
|
4506
4506
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4507
4507
|
if (disabled)
|
|
@@ -4517,16 +4517,16 @@ var TextButton = function (_a) {
|
|
|
4517
4517
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4518
4518
|
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));
|
|
4519
4519
|
};
|
|
4520
|
-
var templateObject_1$
|
|
4520
|
+
var templateObject_1$18;
|
|
4521
4521
|
|
|
4522
|
-
var Container$
|
|
4522
|
+
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"])));
|
|
4523
4523
|
var P$3 = newStyled.p(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4524
4524
|
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"])));
|
|
4525
4525
|
var SizeFitGuide = function (_a) {
|
|
4526
4526
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4527
|
-
return (jsxRuntime.jsxs(Container$
|
|
4527
|
+
return (jsxRuntime.jsxs(Container$J, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4528
4528
|
};
|
|
4529
|
-
var templateObject_1$
|
|
4529
|
+
var templateObject_1$17, templateObject_2$J, templateObject_3$w;
|
|
4530
4530
|
|
|
4531
4531
|
var getStylesBySize$6 = function (size) {
|
|
4532
4532
|
switch (size) {
|
|
@@ -4556,7 +4556,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4556
4556
|
};
|
|
4557
4557
|
}
|
|
4558
4558
|
};
|
|
4559
|
-
var Container$
|
|
4559
|
+
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) {
|
|
4560
4560
|
var backgroundColor = _a.backgroundColor;
|
|
4561
4561
|
return backgroundColor;
|
|
4562
4562
|
}, function (_a) {
|
|
@@ -4593,9 +4593,9 @@ var H3$2 = newStyled.h3(templateObject_2$I || (templateObject_2$I = __makeTempla
|
|
|
4593
4593
|
var DiscountTag = function (_a) {
|
|
4594
4594
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
4595
4595
|
var theme = useTheme();
|
|
4596
|
-
return (jsxRuntime.jsx(Container$
|
|
4596
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4597
4597
|
};
|
|
4598
|
-
var templateObject_1$
|
|
4598
|
+
var templateObject_1$16, templateObject_2$I;
|
|
4599
4599
|
|
|
4600
4600
|
var getStylesBySize$5 = function (size) {
|
|
4601
4601
|
switch (size) {
|
|
@@ -4625,7 +4625,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4625
4625
|
};
|
|
4626
4626
|
}
|
|
4627
4627
|
};
|
|
4628
|
-
var Container$
|
|
4628
|
+
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"])));
|
|
4629
4629
|
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) {
|
|
4630
4630
|
var weight = _a.weight;
|
|
4631
4631
|
return (weight ? weight : '400');
|
|
@@ -4682,14 +4682,17 @@ var PriceLabel = function (_a) {
|
|
|
4682
4682
|
weight: 700,
|
|
4683
4683
|
};
|
|
4684
4684
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4685
|
-
return (jsxRuntime.jsxs(Container$
|
|
4685
|
+
return (jsxRuntime.jsxs(Container$H, { children: [availableFinalPriceStyled && originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxRuntime.jsxs(FinalPriceContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4686
4686
|
};
|
|
4687
|
-
var templateObject_1$
|
|
4687
|
+
var templateObject_1$15, templateObject_2$H, templateObject_3$v, templateObject_4$n, templateObject_5$d;
|
|
4688
4688
|
|
|
4689
4689
|
var PriceLabelHomeColPDP = function (_a) {
|
|
4690
4690
|
var _b;
|
|
4691
4691
|
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 ? exports.ComponentSize.Medium : _d;
|
|
4692
4692
|
var theme = useTheme();
|
|
4693
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
4694
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
4695
|
+
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
4693
4696
|
var finalPriceArray = typeof finalPrice === 'string' && finalPrice.includes('.') && finalPrice.includes('$')
|
|
4694
4697
|
? finalPrice.split('$')[1].split('.')
|
|
4695
4698
|
: ['', ''];
|
|
@@ -4699,7 +4702,7 @@ var PriceLabelHomeColPDP = function (_a) {
|
|
|
4699
4702
|
weight: 700,
|
|
4700
4703
|
};
|
|
4701
4704
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4702
|
-
return (jsxRuntime.jsxs(Container$
|
|
4705
|
+
return (jsxRuntime.jsxs(Container$H, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
4703
4706
|
};
|
|
4704
4707
|
|
|
4705
4708
|
var OneColorSelector = function (_a) {
|
|
@@ -4741,7 +4744,7 @@ var OutOfStock = function (_a) {
|
|
|
4741
4744
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4742
4745
|
};
|
|
4743
4746
|
|
|
4744
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4747
|
+
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"])));
|
|
4745
4748
|
newStyled(lt.Label)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4746
4749
|
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"])));
|
|
4747
4750
|
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -4763,9 +4766,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4763
4766
|
Option: Option,
|
|
4764
4767
|
OptionsContainer: OptionsContainer,
|
|
4765
4768
|
});
|
|
4766
|
-
var templateObject_1$
|
|
4769
|
+
var templateObject_1$14, templateObject_2$G, templateObject_3$u, templateObject_4$m, templateObject_5$c;
|
|
4767
4770
|
|
|
4768
|
-
var Container$
|
|
4771
|
+
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) {
|
|
4769
4772
|
var borderColor = _a.borderColor;
|
|
4770
4773
|
return borderColor;
|
|
4771
4774
|
});
|
|
@@ -4774,9 +4777,9 @@ var PatternSelector = function (_a) {
|
|
|
4774
4777
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4775
4778
|
var theme = useTheme();
|
|
4776
4779
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4777
|
-
return (jsxRuntime.jsx(Container$
|
|
4780
|
+
return (jsxRuntime.jsx(Container$G, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4778
4781
|
};
|
|
4779
|
-
var templateObject_1$
|
|
4782
|
+
var templateObject_1$13, templateObject_2$F;
|
|
4780
4783
|
|
|
4781
4784
|
var renderOptions$1 = function (options) {
|
|
4782
4785
|
if (options.length === 0) {
|
|
@@ -4834,7 +4837,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4834
4837
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4835
4838
|
};
|
|
4836
4839
|
|
|
4837
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
4840
|
+
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) {
|
|
4838
4841
|
var selected = _a.selected, theme = _a.theme;
|
|
4839
4842
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4840
4843
|
});
|
|
@@ -4843,7 +4846,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4843
4846
|
var theme = useTheme();
|
|
4844
4847
|
return jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4845
4848
|
};
|
|
4846
|
-
var templateObject_1$
|
|
4849
|
+
var templateObject_1$12;
|
|
4847
4850
|
|
|
4848
4851
|
var Button$4 = newStyled.button(function () { return ({
|
|
4849
4852
|
background: 'transparent',
|
|
@@ -9086,14 +9089,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9086
9089
|
return Slider;
|
|
9087
9090
|
}(React__default["default"].Component);
|
|
9088
9091
|
|
|
9089
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9092
|
+
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) {
|
|
9090
9093
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9091
9094
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9092
9095
|
}, function (_a) {
|
|
9093
9096
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9094
9097
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9095
9098
|
});
|
|
9096
|
-
var templateObject_1$
|
|
9099
|
+
var templateObject_1$11;
|
|
9097
9100
|
|
|
9098
9101
|
var getStylesBySize$4 = function (size) {
|
|
9099
9102
|
// rem units
|
|
@@ -9152,22 +9155,22 @@ var SliderNavigation = function (_a) {
|
|
|
9152
9155
|
} }, { 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));
|
|
9153
9156
|
};
|
|
9154
9157
|
|
|
9155
|
-
var horizontalStyles = css(templateObject_1
|
|
9158
|
+
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"])));
|
|
9156
9159
|
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"])));
|
|
9157
|
-
var Container$
|
|
9160
|
+
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) {
|
|
9158
9161
|
var position = _a.position;
|
|
9159
9162
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9160
9163
|
});
|
|
9161
9164
|
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"])));
|
|
9162
9165
|
var ImagePreviewList = function (_a) {
|
|
9163
9166
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
9164
|
-
return (jsxRuntime.jsx(Container$
|
|
9167
|
+
return (jsxRuntime.jsx(Container$F, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9165
9168
|
arrowWidth: 0.75,
|
|
9166
9169
|
arrowHeight: 1.25,
|
|
9167
9170
|
arrowPadding: 1.625,
|
|
9168
9171
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
|
|
9169
9172
|
};
|
|
9170
|
-
var templateObject_1
|
|
9173
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$t, templateObject_4$l;
|
|
9171
9174
|
|
|
9172
9175
|
var propTypes = {exports: {}};
|
|
9173
9176
|
|
|
@@ -10753,19 +10756,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10753
10756
|
afterZoomOut: PropTypes.func
|
|
10754
10757
|
} : {};
|
|
10755
10758
|
|
|
10756
|
-
var Container$
|
|
10759
|
+
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"])));
|
|
10757
10760
|
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"])));
|
|
10758
10761
|
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"])));
|
|
10759
10762
|
var ImageProductWithTags$1 = function (_a) {
|
|
10760
10763
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10761
|
-
return (jsxRuntime.jsxs(Container$
|
|
10764
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
10762
10765
|
alt: image.alt,
|
|
10763
10766
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10764
10767
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
10765
10768
|
};
|
|
10766
|
-
var templateObject_1
|
|
10769
|
+
var templateObject_1$$, templateObject_2$D, templateObject_3$s;
|
|
10767
10770
|
|
|
10768
|
-
var Container$
|
|
10771
|
+
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"])));
|
|
10769
10772
|
var ProductGallery = function (_a) {
|
|
10770
10773
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10771
10774
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10773,11 +10776,11 @@ var ProductGallery = function (_a) {
|
|
|
10773
10776
|
React$2.useEffect(function () {
|
|
10774
10777
|
setSelectedImage(initialValue);
|
|
10775
10778
|
}, [initialValue]);
|
|
10776
|
-
return (jsxRuntime.jsxs(Container$
|
|
10779
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10777
10780
|
setSelectedImage(value);
|
|
10778
10781
|
}, position: thumbnailPosition }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10779
10782
|
};
|
|
10780
|
-
var templateObject_1$
|
|
10783
|
+
var templateObject_1$_;
|
|
10781
10784
|
|
|
10782
10785
|
/* base styles & size variants */
|
|
10783
10786
|
var StarStyles = {
|
|
@@ -10823,8 +10826,8 @@ var StarStyles = {
|
|
|
10823
10826
|
});
|
|
10824
10827
|
},
|
|
10825
10828
|
};
|
|
10826
|
-
var Container$
|
|
10827
|
-
var templateObject_1$
|
|
10829
|
+
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"])));
|
|
10830
|
+
var templateObject_1$Z;
|
|
10828
10831
|
|
|
10829
10832
|
var StarContainer = newStyled.div(function (_a) {
|
|
10830
10833
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10842,7 +10845,7 @@ var sizes = {
|
|
|
10842
10845
|
var StarList = function (_a) {
|
|
10843
10846
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
10844
10847
|
var theme = useTheme();
|
|
10845
|
-
return (jsxRuntime.jsx(Container$
|
|
10848
|
+
return (jsxRuntime.jsx(Container$C, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10846
10849
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
10847
10850
|
}) }, void 0));
|
|
10848
10851
|
};
|
|
@@ -10886,8 +10889,8 @@ var LabelStyles = {
|
|
|
10886
10889
|
});
|
|
10887
10890
|
},
|
|
10888
10891
|
};
|
|
10889
|
-
var Container$
|
|
10890
|
-
var templateObject_1$
|
|
10892
|
+
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"])));
|
|
10893
|
+
var templateObject_1$Y;
|
|
10891
10894
|
|
|
10892
10895
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10893
10896
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10925,10 +10928,10 @@ var Rating = function (_a) {
|
|
|
10925
10928
|
href: reviewsContainerId,
|
|
10926
10929
|
}
|
|
10927
10930
|
: {};
|
|
10928
|
-
return (jsxRuntime.jsxs(Container$
|
|
10931
|
+
return (jsxRuntime.jsxs(Container$B, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
10929
10932
|
};
|
|
10930
10933
|
|
|
10931
|
-
var Container$
|
|
10934
|
+
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"])));
|
|
10932
10935
|
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; });
|
|
10933
10936
|
var textButtonStyles = function (theme) { return ({
|
|
10934
10937
|
border: 'none',
|
|
@@ -10942,9 +10945,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10942
10945
|
var FitPredictor = function (_a) {
|
|
10943
10946
|
var onClick = _a.onClick;
|
|
10944
10947
|
var theme = useTheme();
|
|
10945
|
-
return (jsxs(Container$
|
|
10948
|
+
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));
|
|
10946
10949
|
};
|
|
10947
|
-
var templateObject_1$
|
|
10950
|
+
var templateObject_1$X, templateObject_2$C;
|
|
10948
10951
|
|
|
10949
10952
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10950
10953
|
var color = _a.color;
|
|
@@ -10958,7 +10961,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10958
10961
|
margin: '0.938rem 4.188rem',
|
|
10959
10962
|
});
|
|
10960
10963
|
});
|
|
10961
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10964
|
+
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) {
|
|
10962
10965
|
var backgroundColor = _a.backgroundColor;
|
|
10963
10966
|
return backgroundColor;
|
|
10964
10967
|
}, function (_a) {
|
|
@@ -10981,7 +10984,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10981
10984
|
position: 'absolute',
|
|
10982
10985
|
});
|
|
10983
10986
|
});
|
|
10984
|
-
var Container$
|
|
10987
|
+
var Container$z = newStyled.div(function (_a) {
|
|
10985
10988
|
var widthAuto = _a.widthAuto;
|
|
10986
10989
|
return ({
|
|
10987
10990
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10995,9 +10998,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10995
10998
|
var ProgressBar = function (_a) {
|
|
10996
10999
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10997
11000
|
var theme = useTheme();
|
|
10998
|
-
return (jsxRuntime.jsxs(Container$
|
|
11001
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
10999
11002
|
};
|
|
11000
|
-
var templateObject_1$
|
|
11003
|
+
var templateObject_1$W;
|
|
11001
11004
|
|
|
11002
11005
|
var getStylesBySize$3 = function (size) {
|
|
11003
11006
|
switch (size) {
|
|
@@ -11018,7 +11021,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
11018
11021
|
};
|
|
11019
11022
|
}
|
|
11020
11023
|
};
|
|
11021
|
-
var Container$
|
|
11024
|
+
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) {
|
|
11022
11025
|
var backgroundColor = _a.backgroundColor;
|
|
11023
11026
|
return backgroundColor;
|
|
11024
11027
|
}, function (_a) {
|
|
@@ -11046,9 +11049,9 @@ var Container$x = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
11046
11049
|
var IconButton = function (_a) {
|
|
11047
11050
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11048
11051
|
var theme = useTheme();
|
|
11049
|
-
return (jsxRuntime.jsx(Container$
|
|
11052
|
+
return (jsxRuntime.jsx(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));
|
|
11050
11053
|
};
|
|
11051
|
-
var templateObject_1$
|
|
11054
|
+
var templateObject_1$V;
|
|
11052
11055
|
|
|
11053
11056
|
var TooltipArrow = function (_a) {
|
|
11054
11057
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11128,7 +11131,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11128
11131
|
}
|
|
11129
11132
|
};
|
|
11130
11133
|
|
|
11131
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11134
|
+
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) {
|
|
11132
11135
|
var position = _a.position;
|
|
11133
11136
|
return getWrapperFlexDirection(position);
|
|
11134
11137
|
});
|
|
@@ -11176,7 +11179,7 @@ var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
|
|
|
11176
11179
|
return color;
|
|
11177
11180
|
});
|
|
11178
11181
|
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"])));
|
|
11179
|
-
var templateObject_1$
|
|
11182
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$r, templateObject_4$k, templateObject_5$b, templateObject_6$7, templateObject_7$4;
|
|
11180
11183
|
|
|
11181
11184
|
var Tooltip = function (_a) {
|
|
11182
11185
|
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;
|
|
@@ -11235,6 +11238,11 @@ var AccordionSummaryStyles = {
|
|
|
11235
11238
|
? theme.colors.text.disabled
|
|
11236
11239
|
: theme.component.accordion.variant.box.summary.color }));
|
|
11237
11240
|
},
|
|
11241
|
+
title: function (titleColor) {
|
|
11242
|
+
return css({
|
|
11243
|
+
color: titleColor ? titleColor : '',
|
|
11244
|
+
});
|
|
11245
|
+
},
|
|
11238
11246
|
};
|
|
11239
11247
|
/* base styles & size variants */
|
|
11240
11248
|
var AccordionDetailsStyles = {
|
|
@@ -11252,16 +11260,17 @@ var AccordionDetailsStyles = {
|
|
|
11252
11260
|
};
|
|
11253
11261
|
|
|
11254
11262
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
11255
|
-
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
|
|
11263
|
+
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)]; });
|
|
11256
11264
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
11257
11265
|
var Accordion$1 = function (_a) {
|
|
11258
|
-
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant,
|
|
11266
|
+
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;
|
|
11259
11267
|
var theme = useTheme();
|
|
11260
|
-
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled }, { children: function (_a) {
|
|
11268
|
+
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick }, { children: function (_a) {
|
|
11261
11269
|
var open = _a.open;
|
|
11262
|
-
var
|
|
11263
|
-
var
|
|
11264
|
-
|
|
11270
|
+
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
11271
|
+
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
11272
|
+
var showPanel = openWithForce && !disabled;
|
|
11273
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(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 && (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0))] }, void 0));
|
|
11265
11274
|
} }), void 0));
|
|
11266
11275
|
};
|
|
11267
11276
|
|
|
@@ -11328,8 +11337,8 @@ var ContainerStyles = {
|
|
|
11328
11337
|
},
|
|
11329
11338
|
};
|
|
11330
11339
|
|
|
11331
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11332
|
-
var Container$
|
|
11340
|
+
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"])));
|
|
11341
|
+
var Container$x = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11333
11342
|
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) {
|
|
11334
11343
|
var disabled = _a.disabled;
|
|
11335
11344
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -11345,9 +11354,9 @@ var RadioInput = function (_a) {
|
|
|
11345
11354
|
var value = event.currentTarget.value;
|
|
11346
11355
|
onChange({ value: value, label: label });
|
|
11347
11356
|
};
|
|
11348
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11357
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$x, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11349
11358
|
};
|
|
11350
|
-
var templateObject_1$
|
|
11359
|
+
var templateObject_1$T, templateObject_2$A;
|
|
11351
11360
|
|
|
11352
11361
|
var RadioGroupInput = function (_a) {
|
|
11353
11362
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11361,37 +11370,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11361
11370
|
}) }), void 0));
|
|
11362
11371
|
};
|
|
11363
11372
|
|
|
11364
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11365
|
-
var Container$
|
|
11373
|
+
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n padding: 12px 58px;\n"], ["\n padding: 12px 58px;\n"])));
|
|
11374
|
+
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"])));
|
|
11366
11375
|
var Minimalistic = function (_a) {
|
|
11367
11376
|
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;
|
|
11368
11377
|
var theme = useTheme();
|
|
11369
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11378
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11370
11379
|
};
|
|
11371
|
-
var templateObject_1$
|
|
11380
|
+
var templateObject_1$S, templateObject_2$z;
|
|
11372
11381
|
|
|
11373
|
-
var Container$
|
|
11382
|
+
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"])));
|
|
11374
11383
|
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; });
|
|
11375
11384
|
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; });
|
|
11376
11385
|
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"])));
|
|
11377
11386
|
var Simple = function (_a) {
|
|
11378
11387
|
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;
|
|
11379
11388
|
var theme = useTheme();
|
|
11380
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11389
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11381
11390
|
};
|
|
11382
|
-
var templateObject_1$
|
|
11391
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$j;
|
|
11383
11392
|
|
|
11384
11393
|
var Bundle = {
|
|
11385
11394
|
Minimalistic: Minimalistic,
|
|
11386
11395
|
Simple: Simple,
|
|
11387
11396
|
};
|
|
11388
11397
|
|
|
11389
|
-
var Container$
|
|
11398
|
+
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"])));
|
|
11390
11399
|
var Tag$1 = function (_a) {
|
|
11391
11400
|
var text = _a.text, className = _a.className;
|
|
11392
|
-
return jsxRuntime.jsx(Container$
|
|
11401
|
+
return jsxRuntime.jsx(Container$u, __assign$1({ className: className }, { children: text }), void 0);
|
|
11393
11402
|
};
|
|
11394
|
-
var templateObject_1$
|
|
11403
|
+
var templateObject_1$Q;
|
|
11395
11404
|
|
|
11396
11405
|
var getStylesBySize$2 = function (size) {
|
|
11397
11406
|
switch (size) {
|
|
@@ -11494,7 +11503,7 @@ var Timer = function (_a) {
|
|
|
11494
11503
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11495
11504
|
};
|
|
11496
11505
|
|
|
11497
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11506
|
+
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) {
|
|
11498
11507
|
var color = _a.color;
|
|
11499
11508
|
return color;
|
|
11500
11509
|
});
|
|
@@ -11507,7 +11516,7 @@ var InputLabel = function (_a) {
|
|
|
11507
11516
|
var theme = useTheme();
|
|
11508
11517
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11509
11518
|
};
|
|
11510
|
-
var templateObject_1$
|
|
11519
|
+
var templateObject_1$P, templateObject_2$x;
|
|
11511
11520
|
|
|
11512
11521
|
/**
|
|
11513
11522
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11561,16 +11570,16 @@ var formatPrice = function (value, _a) {
|
|
|
11561
11570
|
}).format(valueToFormat);
|
|
11562
11571
|
};
|
|
11563
11572
|
|
|
11564
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11573
|
+
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; });
|
|
11565
11574
|
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"])));
|
|
11566
11575
|
var Error$1 = function (_a) {
|
|
11567
11576
|
var error = _a.error;
|
|
11568
11577
|
var theme = useTheme();
|
|
11569
11578
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
11570
11579
|
};
|
|
11571
|
-
var templateObject_1$
|
|
11580
|
+
var templateObject_1$O, templateObject_2$w;
|
|
11572
11581
|
|
|
11573
|
-
var Container$
|
|
11582
|
+
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) {
|
|
11574
11583
|
var color = _a.color, hasError = _a.hasError;
|
|
11575
11584
|
return (!hasError ? color : '');
|
|
11576
11585
|
});
|
|
@@ -11636,7 +11645,7 @@ var InputWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __m
|
|
|
11636
11645
|
});
|
|
11637
11646
|
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"])));
|
|
11638
11647
|
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"])));
|
|
11639
|
-
var templateObject_1$
|
|
11648
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$p, templateObject_4$i, templateObject_5$a;
|
|
11640
11649
|
|
|
11641
11650
|
var BaseInput = function (_a) {
|
|
11642
11651
|
var _b;
|
|
@@ -11698,7 +11707,7 @@ var BaseInput = function (_a) {
|
|
|
11698
11707
|
focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
|
|
11699
11708
|
hasError: hasError ? theme.component.input.errorBorder : '',
|
|
11700
11709
|
};
|
|
11701
|
-
return (jsxRuntime.jsxs(Container$
|
|
11710
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
11702
11711
|
? theme.colors.shades['700'].color
|
|
11703
11712
|
: status === exports.InputValidationType.Error
|
|
11704
11713
|
? theme.colors.semantic.urgent.color
|
|
@@ -11724,7 +11733,7 @@ var Button$2 = function (_a) {
|
|
|
11724
11733
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11725
11734
|
};
|
|
11726
11735
|
|
|
11727
|
-
var Container$
|
|
11736
|
+
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) {
|
|
11728
11737
|
var theme = _a.theme;
|
|
11729
11738
|
return theme.component.inputCustom.input.borderRadius;
|
|
11730
11739
|
});
|
|
@@ -11741,11 +11750,11 @@ var Custom = function (_a) {
|
|
|
11741
11750
|
text: text,
|
|
11742
11751
|
disabled: rest.disabled,
|
|
11743
11752
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11744
|
-
return (jsxRuntime.jsx(Container$
|
|
11753
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
11745
11754
|
};
|
|
11746
|
-
var templateObject_1$
|
|
11755
|
+
var templateObject_1$M, templateObject_2$u;
|
|
11747
11756
|
|
|
11748
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11757
|
+
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) {
|
|
11749
11758
|
var size = _a.size;
|
|
11750
11759
|
return (size === 'small' ? '36px' : '');
|
|
11751
11760
|
});
|
|
@@ -11755,9 +11764,9 @@ var Success = function (_a) {
|
|
|
11755
11764
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11756
11765
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
11757
11766
|
};
|
|
11758
|
-
var templateObject_1$
|
|
11767
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$o;
|
|
11759
11768
|
|
|
11760
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11769
|
+
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) {
|
|
11761
11770
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11762
11771
|
return status === exports.InputValidationType.Empty &&
|
|
11763
11772
|
type === 'primary' &&
|
|
@@ -11774,21 +11783,21 @@ var BasePlusButton = function (_a) {
|
|
|
11774
11783
|
}
|
|
11775
11784
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
11776
11785
|
};
|
|
11777
|
-
var templateObject_1$
|
|
11786
|
+
var templateObject_1$K;
|
|
11778
11787
|
|
|
11779
|
-
var Container$
|
|
11788
|
+
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"])));
|
|
11780
11789
|
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; });
|
|
11781
11790
|
var BasePlusIcon = function (_a) {
|
|
11782
11791
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11783
11792
|
var theme = useTheme();
|
|
11784
11793
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11785
|
-
return (jsxRuntime.jsx(Container$
|
|
11794
|
+
return (jsxRuntime.jsx(Container$r, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
11786
11795
|
? theme.colors.shades['700'].color
|
|
11787
11796
|
: status === exports.InputValidationType.Error
|
|
11788
11797
|
? theme.colors.semantic.urgent.color
|
|
11789
11798
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11790
11799
|
};
|
|
11791
|
-
var templateObject_1$
|
|
11800
|
+
var templateObject_1$J, templateObject_2$s;
|
|
11792
11801
|
|
|
11793
11802
|
var Input$1 = {
|
|
11794
11803
|
Simple: BaseInput,
|
|
@@ -11797,7 +11806,7 @@ var Input$1 = {
|
|
|
11797
11806
|
SimplePlusIcon: BasePlusIcon,
|
|
11798
11807
|
};
|
|
11799
11808
|
|
|
11800
|
-
var Container$
|
|
11809
|
+
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) {
|
|
11801
11810
|
var width = _a.width;
|
|
11802
11811
|
return width;
|
|
11803
11812
|
}, function (_a) {
|
|
@@ -11813,11 +11822,11 @@ var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
11813
11822
|
var PaymentMethod = function (_a) {
|
|
11814
11823
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11815
11824
|
var theme = useTheme();
|
|
11816
|
-
return (jsxRuntime.jsx(Container$
|
|
11825
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
11817
11826
|
};
|
|
11818
|
-
var templateObject_1$
|
|
11827
|
+
var templateObject_1$I;
|
|
11819
11828
|
|
|
11820
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
11829
|
+
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) {
|
|
11821
11830
|
var backgroundColor = _a.backgroundColor;
|
|
11822
11831
|
return backgroundColor;
|
|
11823
11832
|
}, function (_a) {
|
|
@@ -11829,21 +11838,21 @@ var OfferBanner = function (_a) {
|
|
|
11829
11838
|
var theme = useTheme();
|
|
11830
11839
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11831
11840
|
};
|
|
11832
|
-
var templateObject_1$
|
|
11841
|
+
var templateObject_1$H;
|
|
11833
11842
|
|
|
11834
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11843
|
+
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"])));
|
|
11835
11844
|
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; });
|
|
11836
11845
|
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"])));
|
|
11837
|
-
var Container$
|
|
11846
|
+
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; });
|
|
11838
11847
|
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"])));
|
|
11839
11848
|
var Total = function (_a) {
|
|
11840
11849
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11841
11850
|
var theme = useTheme();
|
|
11842
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
11851
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
11843
11852
|
};
|
|
11844
|
-
var templateObject_1$
|
|
11853
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$9;
|
|
11845
11854
|
|
|
11846
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11855
|
+
var Wrapper$1 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11847
11856
|
var color = _a.color;
|
|
11848
11857
|
return color;
|
|
11849
11858
|
});
|
|
@@ -11862,22 +11871,22 @@ var Subtotal = function (_a) {
|
|
|
11862
11871
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
11863
11872
|
})] }), void 0));
|
|
11864
11873
|
};
|
|
11865
|
-
var templateObject_1$
|
|
11874
|
+
var templateObject_1$F, templateObject_2$q, templateObject_3$m, templateObject_4$g;
|
|
11866
11875
|
|
|
11867
11876
|
var Totals = {
|
|
11868
11877
|
Total: Total,
|
|
11869
11878
|
Subtotal: Subtotal,
|
|
11870
11879
|
};
|
|
11871
11880
|
|
|
11872
|
-
var Container$
|
|
11881
|
+
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; });
|
|
11873
11882
|
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"])));
|
|
11874
11883
|
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; });
|
|
11875
11884
|
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; });
|
|
11876
11885
|
var Note = function (_a) {
|
|
11877
11886
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11878
|
-
return (jsxRuntime.jsxs(Container$
|
|
11887
|
+
return (jsxRuntime.jsxs(Container$o, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11879
11888
|
};
|
|
11880
|
-
var templateObject_1$
|
|
11889
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
11881
11890
|
|
|
11882
11891
|
/* eslint-disable no-param-reassign */
|
|
11883
11892
|
var index$1 = function (breakpoints) {
|
|
@@ -11963,7 +11972,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11963
11972
|
literal: true,
|
|
11964
11973
|
});
|
|
11965
11974
|
|
|
11966
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
11975
|
+
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; });
|
|
11967
11976
|
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; });
|
|
11968
11977
|
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({
|
|
11969
11978
|
flexDirection: ['column', 'row'],
|
|
@@ -11992,27 +12001,27 @@ var DeliveryDetails = function (_a) {
|
|
|
11992
12001
|
var theme = useTheme();
|
|
11993
12002
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11994
12003
|
};
|
|
11995
|
-
var templateObject_1$
|
|
12004
|
+
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;
|
|
11996
12005
|
|
|
11997
|
-
var Container$
|
|
12006
|
+
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"])));
|
|
11998
12007
|
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; });
|
|
11999
12008
|
var ScrollToTop = function (_a) {
|
|
12000
12009
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
12001
12010
|
var theme = useTheme();
|
|
12002
|
-
return (jsxRuntime.jsxs(Container$
|
|
12011
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
12003
12012
|
};
|
|
12004
|
-
var templateObject_1$
|
|
12013
|
+
var templateObject_1$C, templateObject_2$n;
|
|
12005
12014
|
|
|
12006
|
-
var Container$
|
|
12015
|
+
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"])));
|
|
12007
12016
|
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; });
|
|
12008
12017
|
var OrderBar = function (_a) {
|
|
12009
12018
|
var message = _a.message;
|
|
12010
12019
|
var theme = useTheme();
|
|
12011
|
-
return (jsxRuntime.jsxs(Container$
|
|
12020
|
+
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
12012
12021
|
};
|
|
12013
|
-
var templateObject_1$
|
|
12022
|
+
var templateObject_1$B, templateObject_2$m;
|
|
12014
12023
|
|
|
12015
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12024
|
+
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; });
|
|
12016
12025
|
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; });
|
|
12017
12026
|
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; });
|
|
12018
12027
|
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; });
|
|
@@ -12021,16 +12030,16 @@ var SizeTable = function (_a) {
|
|
|
12021
12030
|
var theme = useTheme();
|
|
12022
12031
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12023
12032
|
};
|
|
12024
|
-
var templateObject_1$
|
|
12033
|
+
var templateObject_1$A, templateObject_2$l, templateObject_3$j, templateObject_4$d;
|
|
12025
12034
|
|
|
12026
|
-
var Img = newStyled.img(templateObject_1$
|
|
12035
|
+
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; });
|
|
12027
12036
|
var Image = function (_a) {
|
|
12028
12037
|
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;
|
|
12029
12038
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12030
12039
|
};
|
|
12031
|
-
var templateObject_1$
|
|
12040
|
+
var templateObject_1$z;
|
|
12032
12041
|
|
|
12033
|
-
var Container$
|
|
12042
|
+
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"])));
|
|
12034
12043
|
var ImageContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12035
12044
|
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({
|
|
12036
12045
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12068,9 +12077,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
12068
12077
|
var SimpleOrderItem = function (_a) {
|
|
12069
12078
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12070
12079
|
var theme = useTheme();
|
|
12071
|
-
return (jsxRuntime.jsxs(Container$
|
|
12080
|
+
return (jsxRuntime.jsxs(Container$l, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12072
12081
|
};
|
|
12073
|
-
var templateObject_1$
|
|
12082
|
+
var templateObject_1$y, templateObject_2$k, templateObject_3$i, templateObject_4$c, templateObject_5$7;
|
|
12074
12083
|
|
|
12075
12084
|
function formatDate(date) {
|
|
12076
12085
|
var day = date.getDate();
|
|
@@ -12079,7 +12088,7 @@ function formatDate(date) {
|
|
|
12079
12088
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12080
12089
|
}
|
|
12081
12090
|
|
|
12082
|
-
var Container$
|
|
12091
|
+
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"])));
|
|
12083
12092
|
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({
|
|
12084
12093
|
fontSize: ['14px', '16px'],
|
|
12085
12094
|
lineHeight: ['22px', '24px'],
|
|
@@ -12102,17 +12111,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
12102
12111
|
var Review = function (_a) {
|
|
12103
12112
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12104
12113
|
var theme = useTheme();
|
|
12105
|
-
return (jsxRuntime.jsxs(Container$
|
|
12114
|
+
return (jsxRuntime.jsxs(Container$k, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12106
12115
|
};
|
|
12107
|
-
var templateObject_1$
|
|
12116
|
+
var templateObject_1$x, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
12108
12117
|
|
|
12109
|
-
var List = newStyled.ul(templateObject_1$
|
|
12118
|
+
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"])));
|
|
12110
12119
|
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"])));
|
|
12111
12120
|
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"])));
|
|
12112
12121
|
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"])));
|
|
12113
12122
|
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; });
|
|
12114
12123
|
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; });
|
|
12115
|
-
var templateObject_1$
|
|
12124
|
+
var templateObject_1$w, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12116
12125
|
|
|
12117
12126
|
var DropdownListIcons = function (_a) {
|
|
12118
12127
|
var items = _a.items;
|
|
@@ -12125,7 +12134,7 @@ var Dropdown = function (_a) {
|
|
|
12125
12134
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12126
12135
|
};
|
|
12127
12136
|
|
|
12128
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12137
|
+
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; });
|
|
12129
12138
|
var AmazonButton = function (_a) {
|
|
12130
12139
|
var onClick = _a.onClick;
|
|
12131
12140
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12134,9 +12143,9 @@ var PaypalButton = function (_a) {
|
|
|
12134
12143
|
var onClick = _a.onClick;
|
|
12135
12144
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12136
12145
|
};
|
|
12137
|
-
var templateObject_1$
|
|
12146
|
+
var templateObject_1$v;
|
|
12138
12147
|
|
|
12139
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12148
|
+
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'); });
|
|
12140
12149
|
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"])));
|
|
12141
12150
|
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) {
|
|
12142
12151
|
return props.rightToLeft &&
|
|
@@ -12150,7 +12159,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12150
12159
|
var theme = useTheme();
|
|
12151
12160
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12152
12161
|
};
|
|
12153
|
-
var templateObject_1$
|
|
12162
|
+
var templateObject_1$u, templateObject_2$h, templateObject_3$f, templateObject_4$9, templateObject_5$4, templateObject_6$3;
|
|
12154
12163
|
|
|
12155
12164
|
var index = /*#__PURE__*/Object.freeze({
|
|
12156
12165
|
__proto__: null,
|
|
@@ -12171,7 +12180,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12171
12180
|
height: height,
|
|
12172
12181
|
});
|
|
12173
12182
|
});
|
|
12174
|
-
var Container$
|
|
12183
|
+
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"])));
|
|
12175
12184
|
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; });
|
|
12176
12185
|
var getStylesBySize = function (size) {
|
|
12177
12186
|
switch (size) {
|
|
@@ -12212,28 +12221,28 @@ var ProductItemMobile = function (_a) {
|
|
|
12212
12221
|
_a[exports.ComponentSize.Small] = 2,
|
|
12213
12222
|
_a)[size];
|
|
12214
12223
|
}, [size]);
|
|
12215
|
-
return (jsxs(Container$
|
|
12224
|
+
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: exports.ComponentSize.Large, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12216
12225
|
};
|
|
12217
|
-
var templateObject_1$
|
|
12226
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$e, templateObject_4$8;
|
|
12218
12227
|
|
|
12219
|
-
var Container$
|
|
12228
|
+
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"])));
|
|
12220
12229
|
function withProductGrid(ProductItemComponent, data) {
|
|
12221
12230
|
function WithProductGrid(props) {
|
|
12222
|
-
return (jsxRuntime.jsx(Container$
|
|
12231
|
+
return (jsxRuntime.jsx(Container$i, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12223
12232
|
}
|
|
12224
12233
|
/* istanbul ignore next */
|
|
12225
12234
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12226
12235
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12227
12236
|
return WithProductGrid;
|
|
12228
12237
|
}
|
|
12229
|
-
var templateObject_1$
|
|
12238
|
+
var templateObject_1$s;
|
|
12230
12239
|
|
|
12231
12240
|
var Collection = {
|
|
12232
12241
|
ProductItemMobile: ProductItemMobile,
|
|
12233
12242
|
withProductGrid: withProductGrid,
|
|
12234
12243
|
};
|
|
12235
12244
|
|
|
12236
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12245
|
+
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) {
|
|
12237
12246
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12238
12247
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12239
12248
|
});
|
|
@@ -12278,9 +12287,9 @@ var Drawer = function (_a) {
|
|
|
12278
12287
|
}, [isOpen, onClose, onOpen]);
|
|
12279
12288
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12280
12289
|
};
|
|
12281
|
-
var templateObject_1$
|
|
12290
|
+
var templateObject_1$r, templateObject_2$f;
|
|
12282
12291
|
|
|
12283
|
-
var Container$
|
|
12292
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12284
12293
|
var size = _a.size;
|
|
12285
12294
|
return (size ? size : '100%');
|
|
12286
12295
|
}, function (_a) {
|
|
@@ -12293,11 +12302,11 @@ var Animation = newStyled.div(templateObject_2$e || (templateObject_2$e = __make
|
|
|
12293
12302
|
});
|
|
12294
12303
|
var Spinner = function (_a) {
|
|
12295
12304
|
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;
|
|
12296
|
-
return (jsxRuntime.jsx(Container$
|
|
12305
|
+
return (jsxRuntime.jsx(Container$h, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12297
12306
|
};
|
|
12298
|
-
var templateObject_1$
|
|
12307
|
+
var templateObject_1$q, templateObject_2$e;
|
|
12299
12308
|
|
|
12300
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12309
|
+
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"])));
|
|
12301
12310
|
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; });
|
|
12302
12311
|
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"])));
|
|
12303
12312
|
var Tags = function (_a) {
|
|
@@ -12307,7 +12316,7 @@ var Tags = function (_a) {
|
|
|
12307
12316
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12308
12317
|
}) }), void 0));
|
|
12309
12318
|
};
|
|
12310
|
-
var templateObject_1$
|
|
12319
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$d;
|
|
12311
12320
|
|
|
12312
12321
|
function FilteringDropdown(_a) {
|
|
12313
12322
|
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;
|
|
@@ -12340,7 +12349,7 @@ function FilteringDropdown(_a) {
|
|
|
12340
12349
|
}) }, void 0)] }), void 0));
|
|
12341
12350
|
}
|
|
12342
12351
|
|
|
12343
|
-
var Container$
|
|
12352
|
+
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"])));
|
|
12344
12353
|
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"])));
|
|
12345
12354
|
var PageNumbersContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12346
12355
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -12359,7 +12368,7 @@ var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
|
|
|
12359
12368
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12360
12369
|
width: ['1.25rem', '1.875rem'],
|
|
12361
12370
|
}));
|
|
12362
|
-
var templateObject_1$
|
|
12371
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$c, templateObject_4$7;
|
|
12363
12372
|
|
|
12364
12373
|
var Pagination = function (_a) {
|
|
12365
12374
|
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;
|
|
@@ -12372,10 +12381,10 @@ var Pagination = function (_a) {
|
|
|
12372
12381
|
setPage(page);
|
|
12373
12382
|
onChange(page);
|
|
12374
12383
|
};
|
|
12375
|
-
return (jsxRuntime.jsxs(Container$
|
|
12384
|
+
return (jsxRuntime.jsxs(Container$g, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12376
12385
|
};
|
|
12377
12386
|
|
|
12378
|
-
var Container$
|
|
12387
|
+
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({
|
|
12379
12388
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12380
12389
|
}));
|
|
12381
12390
|
var Description$1 = newStyled.div({
|
|
@@ -12392,25 +12401,25 @@ var Description$1 = newStyled.div({
|
|
|
12392
12401
|
var ProductItem = function (_a) {
|
|
12393
12402
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12394
12403
|
var theme = useTheme();
|
|
12395
|
-
return (jsxRuntime.jsxs(Container$
|
|
12404
|
+
return (jsxRuntime.jsxs(Container$f, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12396
12405
|
};
|
|
12397
|
-
var templateObject_1$
|
|
12406
|
+
var templateObject_1$n;
|
|
12398
12407
|
|
|
12399
|
-
var Container$
|
|
12408
|
+
var Container$e = newStyled.div({
|
|
12400
12409
|
display: 'flex',
|
|
12401
12410
|
justifyContent: 'center',
|
|
12402
12411
|
padding: '1rem',
|
|
12403
12412
|
});
|
|
12404
12413
|
var Footer = function (_a) {
|
|
12405
12414
|
var text = _a.text, onClick = _a.onClick;
|
|
12406
|
-
return (jsxRuntime.jsx(Container$
|
|
12415
|
+
return (jsxRuntime.jsx(Container$e, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12407
12416
|
};
|
|
12408
12417
|
|
|
12409
12418
|
var Ul = newStyled.ul({
|
|
12410
12419
|
margin: '0px',
|
|
12411
12420
|
padding: '0px',
|
|
12412
12421
|
});
|
|
12413
|
-
var Li = newStyled.li(templateObject_1$
|
|
12422
|
+
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({
|
|
12414
12423
|
padding: [0, '0rem 1rem'],
|
|
12415
12424
|
borderRadius: [0, '0.5rem'],
|
|
12416
12425
|
}));
|
|
@@ -12422,7 +12431,7 @@ var Anchor = newStyled.a({
|
|
|
12422
12431
|
padding: 0,
|
|
12423
12432
|
textDecoration: 'none',
|
|
12424
12433
|
});
|
|
12425
|
-
var Container$
|
|
12434
|
+
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({
|
|
12426
12435
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12427
12436
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12428
12437
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -12433,9 +12442,9 @@ var Header$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeT
|
|
|
12433
12442
|
var ResultsPanel = function (_a) {
|
|
12434
12443
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12435
12444
|
var theme = useTheme();
|
|
12436
|
-
return (jsxRuntime.jsxs(Container$
|
|
12445
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12437
12446
|
};
|
|
12438
|
-
var templateObject_1$
|
|
12447
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$b;
|
|
12439
12448
|
|
|
12440
12449
|
var Input = newStyled.input(function (props) { return ({
|
|
12441
12450
|
padding: props.theme.component.input.padding,
|
|
@@ -12466,7 +12475,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12466
12475
|
},
|
|
12467
12476
|
}); });
|
|
12468
12477
|
|
|
12469
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12478
|
+
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({
|
|
12470
12479
|
right: ['1rem', '7.75rem'],
|
|
12471
12480
|
top: ['0.75rem', '0.75rem'],
|
|
12472
12481
|
}));
|
|
@@ -12475,7 +12484,7 @@ var ClearButton = function (_a) {
|
|
|
12475
12484
|
var theme = useTheme();
|
|
12476
12485
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12477
12486
|
};
|
|
12478
|
-
var templateObject_1$
|
|
12487
|
+
var templateObject_1$l;
|
|
12479
12488
|
|
|
12480
12489
|
var useOnClickOutside = function (ref, handler) {
|
|
12481
12490
|
React$2.useEffect(function () {
|
|
@@ -12561,7 +12570,7 @@ var reducer = function (state, action) {
|
|
|
12561
12570
|
}
|
|
12562
12571
|
}
|
|
12563
12572
|
};
|
|
12564
|
-
var Container$
|
|
12573
|
+
var Container$c = newStyled.div({
|
|
12565
12574
|
position: 'relative',
|
|
12566
12575
|
display: 'flex',
|
|
12567
12576
|
});
|
|
@@ -12597,7 +12606,7 @@ var SearchBar = function (_a) {
|
|
|
12597
12606
|
onClose();
|
|
12598
12607
|
}
|
|
12599
12608
|
};
|
|
12600
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
12609
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$c, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
|
|
12601
12610
|
if (e.key === 'Enter') {
|
|
12602
12611
|
e.preventDefault();
|
|
12603
12612
|
e.stopPropagation();
|
|
@@ -12871,34 +12880,34 @@ function useSwipeable(options) {
|
|
|
12871
12880
|
return handlers;
|
|
12872
12881
|
}
|
|
12873
12882
|
|
|
12874
|
-
var Container$
|
|
12883
|
+
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"])));
|
|
12875
12884
|
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"])));
|
|
12876
12885
|
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"])));
|
|
12877
12886
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12878
12887
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12879
|
-
return (jsxRuntime.jsxs(Container$
|
|
12888
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
12880
12889
|
});
|
|
12881
|
-
var templateObject_1$
|
|
12890
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$a;
|
|
12882
12891
|
|
|
12883
|
-
var Button = newStyled.button(templateObject_1$
|
|
12892
|
+
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"])));
|
|
12884
12893
|
var ArrowButton = function (_a) {
|
|
12885
12894
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12886
12895
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12887
12896
|
};
|
|
12888
|
-
var templateObject_1$
|
|
12897
|
+
var templateObject_1$j;
|
|
12889
12898
|
|
|
12890
|
-
var Container$
|
|
12899
|
+
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"])));
|
|
12891
12900
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12892
12901
|
var SlideDots = function (_a) {
|
|
12893
12902
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12894
12903
|
var theme = useTheme();
|
|
12895
|
-
return (jsxRuntime.jsx(Container$
|
|
12904
|
+
return (jsxRuntime.jsx(Container$a, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12896
12905
|
? theme.colors.shades.white.color
|
|
12897
12906
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12898
12907
|
};
|
|
12899
|
-
var templateObject_1$
|
|
12908
|
+
var templateObject_1$i;
|
|
12900
12909
|
|
|
12901
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12910
|
+
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"])));
|
|
12902
12911
|
var RightButton = newStyled(NavigationButton)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12903
12912
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12904
12913
|
var SlideNavigation = function (_a) {
|
|
@@ -12912,9 +12921,9 @@ var SlideNavigation = function (_a) {
|
|
|
12912
12921
|
onNavigate(selectedIndex + 1);
|
|
12913
12922
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12914
12923
|
};
|
|
12915
|
-
var templateObject_1$
|
|
12924
|
+
var templateObject_1$h, templateObject_2$9, templateObject_3$9;
|
|
12916
12925
|
|
|
12917
|
-
var Container$
|
|
12926
|
+
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"])));
|
|
12918
12927
|
var ProductGalleryMobile = function (_a) {
|
|
12919
12928
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12920
12929
|
var _b = React$2.useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12936,9 +12945,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12936
12945
|
React$2.useEffect(function () {
|
|
12937
12946
|
setSelectedImage(images[index]);
|
|
12938
12947
|
}, [index, images]);
|
|
12939
|
-
return (jsxRuntime.jsxs(Container$
|
|
12948
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12940
12949
|
};
|
|
12941
|
-
var templateObject_1$
|
|
12950
|
+
var templateObject_1$g;
|
|
12942
12951
|
|
|
12943
12952
|
var Portal = function (_a) {
|
|
12944
12953
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13071,14 +13080,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13071
13080
|
var visibleStyle = function (_a) {
|
|
13072
13081
|
var opened = _a.opened;
|
|
13073
13082
|
return opened
|
|
13074
|
-
? css(templateObject_1$
|
|
13083
|
+
? 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 "])));
|
|
13075
13084
|
};
|
|
13076
13085
|
var transformStyle = function (_a) {
|
|
13077
13086
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13078
13087
|
return opened
|
|
13079
13088
|
? 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%)');
|
|
13080
13089
|
};
|
|
13081
|
-
var Container$
|
|
13090
|
+
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({
|
|
13082
13091
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13083
13092
|
}), visibleStyle, transformStyle);
|
|
13084
13093
|
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);
|
|
@@ -13091,7 +13100,7 @@ var Modal = function (_a) {
|
|
|
13091
13100
|
}
|
|
13092
13101
|
close();
|
|
13093
13102
|
};
|
|
13094
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13103
|
+
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));
|
|
13095
13104
|
};
|
|
13096
13105
|
var modalEvent = function (id, detail) {
|
|
13097
13106
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13119,39 +13128,39 @@ var useModal = function (id) {
|
|
|
13119
13128
|
close: close,
|
|
13120
13129
|
}); }, [close, open, opened]);
|
|
13121
13130
|
};
|
|
13122
|
-
var templateObject_1$
|
|
13131
|
+
var templateObject_1$f, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
13123
13132
|
|
|
13124
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13133
|
+
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; });
|
|
13125
13134
|
var Title$1 = function (_a) {
|
|
13126
13135
|
var title = _a.title;
|
|
13127
13136
|
var theme = useTheme();
|
|
13128
13137
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13129
13138
|
};
|
|
13130
|
-
var templateObject_1$
|
|
13139
|
+
var templateObject_1$e;
|
|
13131
13140
|
|
|
13132
|
-
var P = newStyled.p(templateObject_1$
|
|
13141
|
+
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; });
|
|
13133
13142
|
var Promo = function (_a) {
|
|
13134
13143
|
var text = _a.text;
|
|
13135
13144
|
var theme = useTheme();
|
|
13136
13145
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13137
13146
|
};
|
|
13138
|
-
var templateObject_1$
|
|
13147
|
+
var templateObject_1$d;
|
|
13139
13148
|
|
|
13140
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13149
|
+
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; });
|
|
13141
13150
|
var Description = function (_a) {
|
|
13142
13151
|
var text = _a.text;
|
|
13143
13152
|
var theme = useTheme();
|
|
13144
13153
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13145
13154
|
};
|
|
13146
|
-
var templateObject_1$
|
|
13155
|
+
var templateObject_1$c;
|
|
13147
13156
|
|
|
13148
|
-
var Container$
|
|
13157
|
+
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"); });
|
|
13149
13158
|
var CloseButton = function (_a) {
|
|
13150
13159
|
var onClick = _a.onClick, size = _a.size;
|
|
13151
13160
|
var theme = useTheme();
|
|
13152
|
-
return (jsxRuntime.jsx(Container$
|
|
13161
|
+
return (jsxRuntime.jsx(Container$7, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13153
13162
|
};
|
|
13154
|
-
var templateObject_1$
|
|
13163
|
+
var templateObject_1$b;
|
|
13155
13164
|
|
|
13156
13165
|
var CartProductItem = {
|
|
13157
13166
|
Title: Title$1,
|
|
@@ -13161,7 +13170,7 @@ var CartProductItem = {
|
|
|
13161
13170
|
CloseButton: CloseButton,
|
|
13162
13171
|
};
|
|
13163
13172
|
|
|
13164
|
-
var Container$
|
|
13173
|
+
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; });
|
|
13165
13174
|
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"])));
|
|
13166
13175
|
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"])));
|
|
13167
13176
|
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"])));
|
|
@@ -13187,9 +13196,9 @@ var QuantityPicker = function (_a) {
|
|
|
13187
13196
|
return clamp(value);
|
|
13188
13197
|
});
|
|
13189
13198
|
}, [value, clamp]);
|
|
13190
|
-
return (jsxRuntime.jsxs(Container$
|
|
13199
|
+
return (jsxRuntime.jsxs(Container$6, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13191
13200
|
};
|
|
13192
|
-
var templateObject_1$
|
|
13201
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$7, templateObject_4$5;
|
|
13193
13202
|
|
|
13194
13203
|
var htmlReactParser = {exports: {}};
|
|
13195
13204
|
|
|
@@ -16970,7 +16979,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16970
16979
|
HTMLReactParser$1.attributesToProps;
|
|
16971
16980
|
HTMLReactParser$1.Element;
|
|
16972
16981
|
|
|
16973
|
-
var Container$
|
|
16982
|
+
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"])));
|
|
16974
16983
|
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"])));
|
|
16975
16984
|
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"])));
|
|
16976
16985
|
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"])));
|
|
@@ -16980,7 +16989,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 =
|
|
|
16980
16989
|
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"])));
|
|
16981
16990
|
var PackSelector = function (_a) {
|
|
16982
16991
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16983
|
-
return (jsxRuntime.jsx(Container$
|
|
16992
|
+
return (jsxRuntime.jsx(Container$5, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16984
16993
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16985
16994
|
}) }), void 0));
|
|
16986
16995
|
};
|
|
@@ -16997,9 +17006,9 @@ var PackCard = function (_a) {
|
|
|
16997
17006
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16998
17007
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16999
17008
|
};
|
|
17000
|
-
var templateObject_1$
|
|
17009
|
+
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;
|
|
17001
17010
|
|
|
17002
|
-
var Title = newStyled.div(templateObject_1$
|
|
17011
|
+
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; });
|
|
17003
17012
|
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; });
|
|
17004
17013
|
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"])));
|
|
17005
17014
|
var Accordion = function (_a) {
|
|
@@ -17008,9 +17017,9 @@ var Accordion = function (_a) {
|
|
|
17008
17017
|
var _c = React__default["default"].useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
17009
17018
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxRuntime.jsxs(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17010
17019
|
};
|
|
17011
|
-
var templateObject_1$
|
|
17020
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$5;
|
|
17012
17021
|
|
|
17013
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17022
|
+
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; });
|
|
17014
17023
|
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"])));
|
|
17015
17024
|
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"])));
|
|
17016
17025
|
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"])));
|
|
@@ -17020,13 +17029,28 @@ var OptionContainer = newStyled.div(templateObject_7 || (templateObject_7 = __ma
|
|
|
17020
17029
|
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; });
|
|
17021
17030
|
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"])));
|
|
17022
17031
|
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"])));
|
|
17023
|
-
var templateObject_1$
|
|
17032
|
+
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;
|
|
17024
17033
|
|
|
17025
17034
|
var Filters = function (_a) {
|
|
17026
17035
|
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;
|
|
17036
|
+
var getInitialCheckedItems = function () {
|
|
17037
|
+
var checkedItems = [];
|
|
17038
|
+
values.forEach(function (filter, sectionIndex) {
|
|
17039
|
+
filter.items.forEach(function (item, itemIndex) {
|
|
17040
|
+
if (item.checked) {
|
|
17041
|
+
checkedItems.push({
|
|
17042
|
+
sectionIndex: sectionIndex,
|
|
17043
|
+
itemIndex: itemIndex,
|
|
17044
|
+
label: item.label,
|
|
17045
|
+
});
|
|
17046
|
+
}
|
|
17047
|
+
});
|
|
17048
|
+
});
|
|
17049
|
+
return checkedItems;
|
|
17050
|
+
};
|
|
17027
17051
|
var theme = useTheme();
|
|
17028
17052
|
var _c = React$2.useState(values), filters = _c[0], setFilter = _c[1];
|
|
17029
|
-
var _d = React$2.useState(
|
|
17053
|
+
var _d = React$2.useState(getInitialCheckedItems()), checkedItems = _d[0], setCheckedItems = _d[1];
|
|
17030
17054
|
var _e = React$2.useState(), filterState = _e[0], setFilterSection = _e[1];
|
|
17031
17055
|
React$2.useEffect(function () {
|
|
17032
17056
|
if (filters.length && filterState) {
|
|
@@ -17107,20 +17131,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17107
17131
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
17108
17132
|
};
|
|
17109
17133
|
|
|
17110
|
-
var Container$
|
|
17134
|
+
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"])));
|
|
17111
17135
|
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"])));
|
|
17112
17136
|
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"])));
|
|
17113
17137
|
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"])));
|
|
17114
17138
|
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"])));
|
|
17115
17139
|
var SearchNavigation = function (_a) {
|
|
17116
17140
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17117
|
-
return (jsxRuntime.jsxs(Container$
|
|
17141
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17118
17142
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17119
17143
|
}) }, void 0)] }, void 0));
|
|
17120
17144
|
};
|
|
17121
|
-
var templateObject_1$
|
|
17145
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5;
|
|
17122
17146
|
|
|
17123
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17147
|
+
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) {
|
|
17124
17148
|
var titleSize = _a.titleSize;
|
|
17125
17149
|
return titleSize;
|
|
17126
17150
|
}, function (_a) {
|
|
@@ -17137,9 +17161,9 @@ var Tab = function (_a) {
|
|
|
17137
17161
|
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;
|
|
17138
17162
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(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));
|
|
17139
17163
|
};
|
|
17140
|
-
var templateObject_1$
|
|
17164
|
+
var templateObject_1$5;
|
|
17141
17165
|
|
|
17142
|
-
var Container$
|
|
17166
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17143
17167
|
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) {
|
|
17144
17168
|
var backgroundColor = _a.backgroundColor;
|
|
17145
17169
|
return backgroundColor;
|
|
@@ -17154,11 +17178,11 @@ var Tabs = function (_a) {
|
|
|
17154
17178
|
return null;
|
|
17155
17179
|
}
|
|
17156
17180
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17157
|
-
return (jsxRuntime.jsxs(Container$
|
|
17181
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17158
17182
|
};
|
|
17159
|
-
var templateObject_1$
|
|
17183
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$1;
|
|
17160
17184
|
|
|
17161
|
-
var Container$
|
|
17185
|
+
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"])));
|
|
17162
17186
|
var IconWrapper = newStyled.div(function (props) { return ({
|
|
17163
17187
|
borderRadius: '500px',
|
|
17164
17188
|
width: '120px',
|
|
@@ -17183,16 +17207,16 @@ var IconsWithTitle = function (_a) {
|
|
|
17183
17207
|
console.error('Icon', iconName, 'not found');
|
|
17184
17208
|
return null;
|
|
17185
17209
|
}
|
|
17186
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17210
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi", style: {
|
|
17187
17211
|
fontSize: '14px',
|
|
17188
17212
|
textTransform: 'uppercase',
|
|
17189
17213
|
textAlign: 'center',
|
|
17190
17214
|
lineHeight: '18px',
|
|
17191
17215
|
} }, { children: iconTitle }), void 0)] }, void 0) }, void 0));
|
|
17192
17216
|
};
|
|
17193
|
-
var templateObject_1$
|
|
17217
|
+
var templateObject_1$3;
|
|
17194
17218
|
|
|
17195
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
17219
|
+
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"])));
|
|
17196
17220
|
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"])));
|
|
17197
17221
|
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"])));
|
|
17198
17222
|
var ImageVideo = function (_a) {
|
|
@@ -17214,11 +17238,11 @@ var ImageVideo = function (_a) {
|
|
|
17214
17238
|
height: '100%',
|
|
17215
17239
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17216
17240
|
};
|
|
17217
|
-
var templateObject_1$
|
|
17241
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
17218
17242
|
|
|
17219
|
-
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"])));
|
|
17243
|
+
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"])));
|
|
17220
17244
|
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"])));
|
|
17221
|
-
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);
|
|
17245
|
+
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);
|
|
17222
17246
|
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"])));
|
|
17223
17247
|
var TextWithImage = function (_a) {
|
|
17224
17248
|
var _b, _c, _d, _e;
|
|
@@ -17239,7 +17263,7 @@ var TextWithImage = function (_a) {
|
|
|
17239
17263
|
// @ts-ignore
|
|
17240
17264
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17241
17265
|
};
|
|
17242
|
-
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17266
|
+
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17243
17267
|
backgroundColor: props.btnBGColor,
|
|
17244
17268
|
color: '#ffffff',
|
|
17245
17269
|
border: props.btnBGColor,
|
|
@@ -17249,9 +17273,36 @@ var TextWithImage = function (_a) {
|
|
|
17249
17273
|
},
|
|
17250
17274
|
} }, 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));
|
|
17251
17275
|
};
|
|
17252
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17276
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
|
|
17277
|
+
|
|
17278
|
+
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"])));
|
|
17279
|
+
var AccordionOptions = function (_a) {
|
|
17280
|
+
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17281
|
+
var _b = React$2.useState({
|
|
17282
|
+
index: -1,
|
|
17283
|
+
open: false,
|
|
17284
|
+
}), openAccordionIndex = _b[0], setOpenAccordionIndex = _b[1];
|
|
17285
|
+
var getForceOpen = function (index) {
|
|
17286
|
+
if (openAccordionIndex.index === index) {
|
|
17287
|
+
return openAccordionIndex.open;
|
|
17288
|
+
}
|
|
17289
|
+
return false;
|
|
17290
|
+
};
|
|
17291
|
+
return (jsxRuntime.jsx(Container, { children: accordions.map(function (accordion, index) {
|
|
17292
|
+
var forceOpenValue = getForceOpen(index);
|
|
17293
|
+
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17294
|
+
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
17295
|
+
return setOpenAccordionIndex(function (prevState) { return ({
|
|
17296
|
+
index: index,
|
|
17297
|
+
open: prevState.index === index ? !prevState.open : true,
|
|
17298
|
+
}); });
|
|
17299
|
+
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17300
|
+
}) }, void 0));
|
|
17301
|
+
};
|
|
17302
|
+
var templateObject_1;
|
|
17253
17303
|
|
|
17254
17304
|
exports.Accordion = Accordion$1;
|
|
17305
|
+
exports.AccordionOptions = AccordionOptions;
|
|
17255
17306
|
exports.AmazonButton = AmazonButton;
|
|
17256
17307
|
exports.AssetsProvider = AssetsProvider;
|
|
17257
17308
|
exports.Bundle = Bundle;
|