@trafilea/afrodita-components 5.0.0-beta.95 → 5.0.0-beta.97
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.d.ts
CHANGED
|
@@ -1897,6 +1897,7 @@ interface ProductItemProps {
|
|
|
1897
1897
|
|
|
1898
1898
|
interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
1899
1899
|
size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
|
|
1900
|
+
imageHover?: ImageProps;
|
|
1900
1901
|
topTag?: JSX.Element;
|
|
1901
1902
|
bottomTag?: JSX.Element;
|
|
1902
1903
|
onClick?: () => void;
|
|
@@ -1909,7 +1910,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
|
|
|
1909
1910
|
};
|
|
1910
1911
|
|
|
1911
1912
|
declare const Collection: {
|
|
1912
|
-
ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1913
|
+
ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1913
1914
|
withProductGrid: typeof withProductGrid;
|
|
1914
1915
|
};
|
|
1915
1916
|
|
package/build/index.esm.js
CHANGED
|
@@ -4735,7 +4735,7 @@ var TAGS = {
|
|
|
4735
4735
|
hero2: newStyled.h2(templateObject_2$N || (templateObject_2$N = __makeTemplateObject([""], [""]))),
|
|
4736
4736
|
hero3: newStyled.h3(templateObject_3$A || (templateObject_3$A = __makeTemplateObject([""], [""]))),
|
|
4737
4737
|
display1: newStyled.h1(templateObject_4$n || (templateObject_4$n = __makeTemplateObject([""], [""]))),
|
|
4738
|
-
display2: newStyled.h2(templateObject_5$
|
|
4738
|
+
display2: newStyled.h2(templateObject_5$e || (templateObject_5$e = __makeTemplateObject([""], [""]))),
|
|
4739
4739
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4740
4740
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4741
4741
|
heading3: newStyled.h3(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4854,7 +4854,7 @@ var DEFAULTS = {
|
|
|
4854
4854
|
size: 'regular',
|
|
4855
4855
|
},
|
|
4856
4856
|
};
|
|
4857
|
-
var templateObject_1$1d, templateObject_2$N, templateObject_3$A, templateObject_4$n, templateObject_5$
|
|
4857
|
+
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;
|
|
4858
4858
|
|
|
4859
4859
|
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) {
|
|
4860
4860
|
var inline = _a.inline;
|
|
@@ -5144,7 +5144,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$16 || (templateObject_1$16
|
|
|
5144
5144
|
newStyled(lt.Label)(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5145
5145
|
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"])));
|
|
5146
5146
|
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5147
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5147
|
+
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"])));
|
|
5148
5148
|
var Label$2 = function (_a) {
|
|
5149
5149
|
var label = _a.label, values = _a.values;
|
|
5150
5150
|
return (jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5162,7 +5162,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5162
5162
|
Option: Option,
|
|
5163
5163
|
OptionsContainer: OptionsContainer,
|
|
5164
5164
|
});
|
|
5165
|
-
var templateObject_1$16, templateObject_2$J, templateObject_3$x, templateObject_4$m, templateObject_5$
|
|
5165
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$x, templateObject_4$m, templateObject_5$d;
|
|
5166
5166
|
|
|
5167
5167
|
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) {
|
|
5168
5168
|
var borderColor = _a.borderColor;
|
|
@@ -11577,13 +11577,13 @@ var TooltipText = newStyled.div(templateObject_4$k || (templateObject_4$k = __ma
|
|
|
11577
11577
|
var color = _a.color;
|
|
11578
11578
|
return color;
|
|
11579
11579
|
});
|
|
11580
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
11580
|
+
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"])));
|
|
11581
11581
|
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) {
|
|
11582
11582
|
var color = _a.color;
|
|
11583
11583
|
return color;
|
|
11584
11584
|
});
|
|
11585
11585
|
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"])));
|
|
11586
|
-
var templateObject_1$W, templateObject_2$E, templateObject_3$u, templateObject_4$k, templateObject_5$
|
|
11586
|
+
var templateObject_1$W, templateObject_2$E, templateObject_3$u, templateObject_4$k, templateObject_5$c, templateObject_6$7, templateObject_7$4;
|
|
11587
11587
|
|
|
11588
11588
|
var Tooltip = function (_a) {
|
|
11589
11589
|
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;
|
|
@@ -12054,8 +12054,8 @@ var InputWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __m
|
|
|
12054
12054
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12055
12055
|
});
|
|
12056
12056
|
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"])));
|
|
12057
|
-
var ClearInput = newStyled.div(templateObject_5$
|
|
12058
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$i, templateObject_5$
|
|
12057
|
+
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"])));
|
|
12058
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$i, templateObject_5$b;
|
|
12059
12059
|
|
|
12060
12060
|
var BaseInput = function (_a) {
|
|
12061
12061
|
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"]);
|
|
@@ -12210,13 +12210,13 @@ var Wrapper$2 = newStyled.div(templateObject_1$I || (templateObject_1$I = __make
|
|
|
12210
12210
|
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; });
|
|
12211
12211
|
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"])));
|
|
12212
12212
|
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; });
|
|
12213
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
12213
|
+
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"])));
|
|
12214
12214
|
var Total = function (_a) {
|
|
12215
12215
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12216
12216
|
var theme = useTheme();
|
|
12217
12217
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$s, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12218
12218
|
};
|
|
12219
|
-
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h, templateObject_5$
|
|
12219
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q, templateObject_4$h, templateObject_5$a;
|
|
12220
12220
|
|
|
12221
12221
|
var Wrapper$1 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12222
12222
|
var color = _a.color;
|
|
@@ -12350,7 +12350,7 @@ var Col$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemp
|
|
|
12350
12350
|
textAlign: ['center', 'inherit'],
|
|
12351
12351
|
width: ['100%', 'inherit'],
|
|
12352
12352
|
}));
|
|
12353
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
12353
|
+
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({
|
|
12354
12354
|
marginBottom: ['1.875rem', '0'],
|
|
12355
12355
|
width: ['auto', '1.375rem'],
|
|
12356
12356
|
}));
|
|
@@ -12367,7 +12367,7 @@ var DeliveryDetails = function (_a) {
|
|
|
12367
12367
|
var theme = useTheme();
|
|
12368
12368
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12369
12369
|
};
|
|
12370
|
-
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$e, templateObject_5$
|
|
12370
|
+
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;
|
|
12371
12371
|
|
|
12372
12372
|
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"])));
|
|
12373
12373
|
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; });
|
|
@@ -12439,13 +12439,13 @@ var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = _
|
|
|
12439
12439
|
})
|
|
12440
12440
|
: 'justify-content: end';
|
|
12441
12441
|
});
|
|
12442
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
12442
|
+
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"])));
|
|
12443
12443
|
var SimpleOrderItem = function (_a) {
|
|
12444
12444
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12445
12445
|
var theme = useTheme();
|
|
12446
12446
|
return (jsxs$1(Container$o, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12447
12447
|
};
|
|
12448
|
-
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$
|
|
12448
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$8;
|
|
12449
12449
|
|
|
12450
12450
|
function formatDate(date) {
|
|
12451
12451
|
var day = date.getDate();
|
|
@@ -12465,7 +12465,7 @@ var Content = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTe
|
|
|
12465
12465
|
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({
|
|
12466
12466
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12467
12467
|
}));
|
|
12468
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
12468
|
+
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({
|
|
12469
12469
|
fontSize: ['16px', '18px'],
|
|
12470
12470
|
lineHeight: ['24px', '28px'],
|
|
12471
12471
|
}));
|
|
@@ -12479,15 +12479,15 @@ var Review = function (_a) {
|
|
|
12479
12479
|
var theme = useTheme();
|
|
12480
12480
|
return (jsxs$1(Container$n, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12481
12481
|
};
|
|
12482
|
-
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$
|
|
12482
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$k, templateObject_4$b, templateObject_5$7, templateObject_6$5, templateObject_7$2;
|
|
12483
12483
|
|
|
12484
12484
|
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"])));
|
|
12485
12485
|
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"])));
|
|
12486
12486
|
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"])));
|
|
12487
12487
|
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"])));
|
|
12488
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12488
|
+
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; });
|
|
12489
12489
|
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; });
|
|
12490
|
-
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$
|
|
12490
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$j, templateObject_4$a, templateObject_5$6, templateObject_6$4;
|
|
12491
12491
|
|
|
12492
12492
|
var DropdownListIcons = function (_a) {
|
|
12493
12493
|
var items = _a.items;
|
|
@@ -12518,14 +12518,14 @@ var Row = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTempla
|
|
|
12518
12518
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12519
12519
|
});
|
|
12520
12520
|
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; });
|
|
12521
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
12521
|
+
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; });
|
|
12522
12522
|
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; });
|
|
12523
12523
|
var CrossSellCheckbox = function (_a) {
|
|
12524
12524
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12525
12525
|
var theme = useTheme();
|
|
12526
12526
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12527
12527
|
};
|
|
12528
|
-
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$
|
|
12528
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$i, templateObject_4$9, templateObject_5$5, templateObject_6$3;
|
|
12529
12529
|
|
|
12530
12530
|
var index = /*#__PURE__*/Object.freeze({
|
|
12531
12531
|
__proto__: null,
|
|
@@ -12546,8 +12546,9 @@ var ImageContainer$2 = newStyled.div(function (_a) {
|
|
|
12546
12546
|
height: height,
|
|
12547
12547
|
});
|
|
12548
12548
|
});
|
|
12549
|
-
var
|
|
12550
|
-
var
|
|
12549
|
+
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"])));
|
|
12550
|
+
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"])));
|
|
12551
|
+
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; });
|
|
12551
12552
|
var getStylesBySize = function (size) {
|
|
12552
12553
|
switch (size) {
|
|
12553
12554
|
case ComponentSize.Medium:
|
|
@@ -12573,10 +12574,10 @@ var getStylesBySize = function (size) {
|
|
|
12573
12574
|
};
|
|
12574
12575
|
}
|
|
12575
12576
|
};
|
|
12576
|
-
var TopTagContainer$1 = newStyled.div(
|
|
12577
|
-
var BottomTagContainer$1 = newStyled.div(
|
|
12577
|
+
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 z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12578
|
+
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 z-index: 1;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n z-index: 1;\n"])));
|
|
12578
12579
|
var ProductItemMobile = function (_a) {
|
|
12579
|
-
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;
|
|
12580
|
+
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;
|
|
12580
12581
|
var theme = useTheme();
|
|
12581
12582
|
var styles = getStylesBySize(size);
|
|
12582
12583
|
var space = useMemo(function () {
|
|
@@ -12587,9 +12588,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12587
12588
|
_a[ComponentSize.Small] = 2,
|
|
12588
12589
|
_a)[size];
|
|
12589
12590
|
}, [size]);
|
|
12590
|
-
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: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12591
|
+
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: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12591
12592
|
};
|
|
12592
|
-
var templateObject_1$v, templateObject_2$j, templateObject_3$h, templateObject_4$8;
|
|
12593
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$h, templateObject_4$8, templateObject_5$4;
|
|
12593
12594
|
|
|
12594
12595
|
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"])));
|
|
12595
12596
|
function withProductGrid(ProductItemComponent, data) {
|