@trafilea/afrodita-components 5.0.0-beta.95 → 5.0.0-beta.96
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 +2 -1
- package/build/index.esm.js +28 -27
- package/build/index.esm.js.map +1 -1
- package/build/index.js +28 -27
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4761,7 +4761,7 @@ var TAGS = {
|
|
|
4761
4761
|
hero2: newStyled.h2(templateObject_2$N || (templateObject_2$N = __makeTemplateObject([""], [""]))),
|
|
4762
4762
|
hero3: newStyled.h3(templateObject_3$A || (templateObject_3$A = __makeTemplateObject([""], [""]))),
|
|
4763
4763
|
display1: newStyled.h1(templateObject_4$n || (templateObject_4$n = __makeTemplateObject([""], [""]))),
|
|
4764
|
-
display2: newStyled.h2(templateObject_5$
|
|
4764
|
+
display2: newStyled.h2(templateObject_5$e || (templateObject_5$e = __makeTemplateObject([""], [""]))),
|
|
4765
4765
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4766
4766
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4767
4767
|
heading3: newStyled.h3(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4880,7 +4880,7 @@ var DEFAULTS = {
|
|
|
4880
4880
|
size: 'regular',
|
|
4881
4881
|
},
|
|
4882
4882
|
};
|
|
4883
|
-
var templateObject_1$1d, templateObject_2$N, templateObject_3$A, templateObject_4$n, templateObject_5$
|
|
4883
|
+
var templateObject_1$1d, templateObject_2$N, templateObject_3$A, templateObject_4$n, 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;
|
|
4884
4884
|
|
|
4885
4885
|
var ButtonsContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
4886
4886
|
var inline = _a.inline;
|
|
@@ -5170,7 +5170,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$16 || (templateObject_1$16
|
|
|
5170
5170
|
newStyled(lt.Label)(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5171
5171
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
5172
5172
|
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5173
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5173
|
+
var OptionsContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
5174
5174
|
var Label$2 = function (_a) {
|
|
5175
5175
|
var label = _a.label, values = _a.values;
|
|
5176
5176
|
return (jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5188,7 +5188,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5188
5188
|
Option: Option,
|
|
5189
5189
|
OptionsContainer: OptionsContainer,
|
|
5190
5190
|
});
|
|
5191
|
-
var templateObject_1$16, templateObject_2$J, templateObject_3$x, templateObject_4$m, templateObject_5$
|
|
5191
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$x, templateObject_4$m, templateObject_5$d;
|
|
5192
5192
|
|
|
5193
5193
|
var Container$J = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
5194
5194
|
var borderColor = _a.borderColor;
|
|
@@ -11603,13 +11603,13 @@ var TooltipText = newStyled.div(templateObject_4$k || (templateObject_4$k = __ma
|
|
|
11603
11603
|
var color = _a.color;
|
|
11604
11604
|
return color;
|
|
11605
11605
|
});
|
|
11606
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11606
|
+
var TopSection = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11607
11607
|
var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11608
11608
|
var color = _a.color;
|
|
11609
11609
|
return color;
|
|
11610
11610
|
});
|
|
11611
11611
|
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"])));
|
|
11612
|
-
var templateObject_1$W, templateObject_2$E, templateObject_3$u, templateObject_4$k, templateObject_5$
|
|
11612
|
+
var templateObject_1$W, templateObject_2$E, templateObject_3$u, templateObject_4$k, templateObject_5$c, templateObject_6$7, templateObject_7$4;
|
|
11613
11613
|
|
|
11614
11614
|
var Tooltip = function (_a) {
|
|
11615
11615
|
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;
|
|
@@ -12080,8 +12080,8 @@ var InputWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __m
|
|
|
12080
12080
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12081
12081
|
});
|
|
12082
12082
|
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"])));
|
|
12083
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12084
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$i, templateObject_5$
|
|
12083
|
+
var ClearInput = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
12084
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$i, templateObject_5$b;
|
|
12085
12085
|
|
|
12086
12086
|
var BaseInput = function (_a) {
|
|
12087
12087
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
@@ -12236,13 +12236,13 @@ var Wrapper$2 = newStyled.div(templateObject_1$I || (templateObject_1$I = __make
|
|
|
12236
12236
|
var GrandTotal = newStyled.h1(templateObject_2$u || (templateObject_2$u = __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; });
|
|
12237
12237
|
var Currency = newStyled.span(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
12238
12238
|
var Container$s = 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; });
|
|
12239
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
12239
|
+
var Discount = newStyled.h3(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
12240
12240
|
var Total = function (_a) {
|
|
12241
12241
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12242
12242
|
var theme = useTheme();
|
|
12243
12243
|
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$s, __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));
|
|
12244
12244
|
};
|
|
12245
|
-
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h, templateObject_5$
|
|
12245
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h, templateObject_5$a;
|
|
12246
12246
|
|
|
12247
12247
|
var Wrapper$1 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12248
12248
|
var color = _a.color;
|
|
@@ -12376,7 +12376,7 @@ var Col$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemp
|
|
|
12376
12376
|
textAlign: ['center', 'inherit'],
|
|
12377
12377
|
width: ['100%', 'inherit'],
|
|
12378
12378
|
}));
|
|
12379
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12379
|
+
var IconContainer$2 = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
|
|
12380
12380
|
marginBottom: ['1.875rem', '0'],
|
|
12381
12381
|
width: ['auto', '1.375rem'],
|
|
12382
12382
|
}));
|
|
@@ -12393,7 +12393,7 @@ var DeliveryDetails = function (_a) {
|
|
|
12393
12393
|
var theme = useTheme();
|
|
12394
12394
|
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));
|
|
12395
12395
|
};
|
|
12396
|
-
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$e, templateObject_5$
|
|
12396
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$e, templateObject_5$9, templateObject_6$6, templateObject_7$3, templateObject_8$2;
|
|
12397
12397
|
|
|
12398
12398
|
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
12399
12399
|
var Text$3 = newStyled.p(templateObject_2$q || (templateObject_2$q = __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; });
|
|
@@ -12465,13 +12465,13 @@ var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = _
|
|
|
12465
12465
|
})
|
|
12466
12466
|
: 'justify-content: end';
|
|
12467
12467
|
});
|
|
12468
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12468
|
+
var Quantity = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
12469
12469
|
var SimpleOrderItem = function (_a) {
|
|
12470
12470
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12471
12471
|
var theme = useTheme();
|
|
12472
12472
|
return (jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsxs(ImageContainer$3, { 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));
|
|
12473
12473
|
};
|
|
12474
|
-
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$
|
|
12474
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8;
|
|
12475
12475
|
|
|
12476
12476
|
function formatDate(date) {
|
|
12477
12477
|
var day = date.getDate();
|
|
@@ -12491,7 +12491,7 @@ var Content = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTe
|
|
|
12491
12491
|
var ReviewContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
12492
12492
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12493
12493
|
}));
|
|
12494
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
12494
|
+
var H2$1 = newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
12495
12495
|
fontSize: ['16px', '18px'],
|
|
12496
12496
|
lineHeight: ['24px', '28px'],
|
|
12497
12497
|
}));
|
|
@@ -12505,15 +12505,15 @@ var Review = function (_a) {
|
|
|
12505
12505
|
var theme = useTheme();
|
|
12506
12506
|
return (jsxRuntime.jsxs(Container$n, { 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));
|
|
12507
12507
|
};
|
|
12508
|
-
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$
|
|
12508
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$5, templateObject_7$2;
|
|
12509
12509
|
|
|
12510
12510
|
var List = newStyled.ul(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12511
12511
|
var Item$1 = newStyled.li(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
12512
12512
|
var DropdownWrapper = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
12513
12513
|
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"])));
|
|
12514
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12514
|
+
var StyledDropdown = newStyled.ul(templateObject_5$6 || (templateObject_5$6 = __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; });
|
|
12515
12515
|
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; });
|
|
12516
|
-
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$
|
|
12516
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$4;
|
|
12517
12517
|
|
|
12518
12518
|
var DropdownListIcons = function (_a) {
|
|
12519
12519
|
var items = _a.items;
|
|
@@ -12544,14 +12544,14 @@ var Row = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTempla
|
|
|
12544
12544
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12545
12545
|
});
|
|
12546
12546
|
var H5 = newStyled.h5(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12547
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12547
|
+
var H3 = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12548
12548
|
var FreeShipping = newStyled.span(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12549
12549
|
var CrossSellCheckbox = function (_a) {
|
|
12550
12550
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12551
12551
|
var theme = useTheme();
|
|
12552
12552
|
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));
|
|
12553
12553
|
};
|
|
12554
|
-
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$
|
|
12554
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$3;
|
|
12555
12555
|
|
|
12556
12556
|
var index = /*#__PURE__*/Object.freeze({
|
|
12557
12557
|
__proto__: null,
|
|
@@ -12572,8 +12572,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12572
12572
|
height: height,
|
|
12573
12573
|
});
|
|
12574
12574
|
});
|
|
12575
|
-
var
|
|
12576
|
-
var
|
|
12575
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12576
|
+
var Container$m = newStyled.a(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12577
|
+
var Title$2 = newStyled.p(templateObject_3$h || (templateObject_3$h = __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; });
|
|
12577
12578
|
var getStylesBySize = function (size) {
|
|
12578
12579
|
switch (size) {
|
|
12579
12580
|
case exports.ComponentSize.Medium:
|
|
@@ -12599,10 +12600,10 @@ var getStylesBySize = function (size) {
|
|
|
12599
12600
|
};
|
|
12600
12601
|
}
|
|
12601
12602
|
};
|
|
12602
|
-
var TopTagContainer$1 = newStyled.div(
|
|
12603
|
-
var BottomTagContainer$1 = newStyled.div(
|
|
12603
|
+
var TopTagContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"])));
|
|
12604
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"])));
|
|
12604
12605
|
var ProductItemMobile = function (_a) {
|
|
12605
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c;
|
|
12606
|
+
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c;
|
|
12606
12607
|
var theme = useTheme();
|
|
12607
12608
|
var styles = getStylesBySize(size);
|
|
12608
12609
|
var space = React$2.useMemo(function () {
|
|
@@ -12613,9 +12614,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12613
12614
|
_a[exports.ComponentSize.Small] = 2,
|
|
12614
12615
|
_a)[size];
|
|
12615
12616
|
}, [size]);
|
|
12616
|
-
return (jsxs(Container$m, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __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), priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, 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));
|
|
12617
|
+
return (jsxs(Container$m, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$2, __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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, 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), priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, 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));
|
|
12617
12618
|
};
|
|
12618
|
-
var templateObject_1$v, templateObject_2$j, templateObject_3$h, templateObject_4$8;
|
|
12619
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$h, templateObject_4$8, templateObject_5$4;
|
|
12619
12620
|
|
|
12620
12621
|
var Container$l = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
12621
12622
|
function withProductGrid(ProductItemComponent, data) {
|