@trafilea/afrodita-components 5.0.0-beta.17 → 5.0.0-beta.18
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 +5 -3
- package/build/index.esm.js +35 -29
- package/build/index.esm.js.map +1 -1
- package/build/index.js +35 -29
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1616,12 +1616,14 @@ declare type ModalProps = {
|
|
|
1616
1616
|
dismissable?: boolean;
|
|
1617
1617
|
maxFullScreen?: boolean;
|
|
1618
1618
|
};
|
|
1619
|
+
interface ContainerProps {
|
|
1620
|
+
maxFullScreen: boolean;
|
|
1621
|
+
opened?: boolean;
|
|
1622
|
+
}
|
|
1619
1623
|
declare const Overlay: _emotion_styled.StyledComponent<{
|
|
1620
1624
|
theme?: _emotion_react.Theme | undefined;
|
|
1621
1625
|
as?: React.ElementType<any> | undefined;
|
|
1622
|
-
} & {
|
|
1623
|
-
opened?: boolean | undefined;
|
|
1624
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
1626
|
+
} & Pick<ContainerProps, "opened">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
1625
1627
|
declare const Modal: FC<ModalProps>;
|
|
1626
1628
|
declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
|
|
1627
1629
|
declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
|
package/build/index.esm.js
CHANGED
|
@@ -4067,8 +4067,8 @@ var TAGS = {
|
|
|
4067
4067
|
hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
|
|
4068
4068
|
hero3: newStyled.h3(templateObject_3$s || (templateObject_3$s = __makeTemplateObject([""], [""]))),
|
|
4069
4069
|
display1: newStyled.h1(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""]))),
|
|
4070
|
-
display2: newStyled.h2(templateObject_5$
|
|
4071
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4070
|
+
display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
|
|
4071
|
+
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4072
4072
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4073
4073
|
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
4074
4074
|
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
@@ -4186,7 +4186,7 @@ var DEFAULTS = {
|
|
|
4186
4186
|
size: 'regular',
|
|
4187
4187
|
},
|
|
4188
4188
|
};
|
|
4189
|
-
var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$
|
|
4189
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4190
4190
|
|
|
4191
4191
|
var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
4192
4192
|
var inline = _a.inline;
|
|
@@ -4429,7 +4429,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ =
|
|
|
4429
4429
|
newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4430
4430
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
4431
4431
|
var Span = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4432
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4432
|
+
var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
4433
4433
|
var Label$2 = function (_a) {
|
|
4434
4434
|
var label = _a.label, values = _a.values;
|
|
4435
4435
|
return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -4447,7 +4447,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4447
4447
|
Option: Option,
|
|
4448
4448
|
OptionsContainer: OptionsContainer,
|
|
4449
4449
|
});
|
|
4450
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$
|
|
4450
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$b;
|
|
4451
4451
|
|
|
4452
4452
|
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
4453
4453
|
var borderColor = _a.borderColor;
|
|
@@ -4943,13 +4943,13 @@ var TooltipText = newStyled.div(templateObject_4$g || (templateObject_4$g = __ma
|
|
|
4943
4943
|
var color = _a.color;
|
|
4944
4944
|
return color;
|
|
4945
4945
|
});
|
|
4946
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
4947
|
-
var Title$5 = newStyled.h1(templateObject_6$
|
|
4946
|
+
var TopSection = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
4947
|
+
var Title$5 = 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) {
|
|
4948
4948
|
var color = _a.color;
|
|
4949
4949
|
return color;
|
|
4950
4950
|
});
|
|
4951
4951
|
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"])));
|
|
4952
|
-
var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$
|
|
4952
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$a, templateObject_6$7, templateObject_7$4;
|
|
4953
4953
|
|
|
4954
4954
|
var Tooltip = function (_a) {
|
|
4955
4955
|
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;
|
|
@@ -5579,13 +5579,13 @@ var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __make
|
|
|
5579
5579
|
var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __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; });
|
|
5580
5580
|
var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
5581
5581
|
var Container$l = newStyled.div(templateObject_4$e || (templateObject_4$e = __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; });
|
|
5582
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
5582
|
+
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"])));
|
|
5583
5583
|
var Total = function (_a) {
|
|
5584
5584
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
5585
5585
|
var theme = useTheme();
|
|
5586
5586
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$l, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
5587
5587
|
};
|
|
5588
|
-
var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$
|
|
5588
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$9;
|
|
5589
5589
|
|
|
5590
5590
|
var Wrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
5591
5591
|
var color = _a.color;
|
|
@@ -5718,11 +5718,11 @@ var Col$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemp
|
|
|
5718
5718
|
textAlign: ['center', 'inherit'],
|
|
5719
5719
|
width: ['100%', 'inherit'],
|
|
5720
5720
|
}));
|
|
5721
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
5721
|
+
var IconContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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({
|
|
5722
5722
|
marginBottom: ['1.875rem', '0'],
|
|
5723
5723
|
width: ['auto', '1.375rem'],
|
|
5724
5724
|
}));
|
|
5725
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
5725
|
+
var SectionTitle = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
5726
5726
|
display: ['block', 'flex'],
|
|
5727
5727
|
}), function (_a) {
|
|
5728
5728
|
var theme = _a.theme;
|
|
@@ -5735,7 +5735,7 @@ var DeliveryDetails = function (_a) {
|
|
|
5735
5735
|
var theme = useTheme();
|
|
5736
5736
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$3, __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));
|
|
5737
5737
|
};
|
|
5738
|
-
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$
|
|
5738
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
5739
5739
|
|
|
5740
5740
|
var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
5741
5741
|
var H1$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __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; });
|
|
@@ -5800,13 +5800,13 @@ var PriceContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = _
|
|
|
5800
5800
|
})
|
|
5801
5801
|
: 'justify-content: end';
|
|
5802
5802
|
});
|
|
5803
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
5803
|
+
var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
5804
5804
|
var SimpleOrderItem = function (_a) {
|
|
5805
5805
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
5806
5806
|
var theme = useTheme();
|
|
5807
5807
|
return (jsxs$1(Container$h, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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 }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
5808
5808
|
};
|
|
5809
|
-
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$
|
|
5809
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$7;
|
|
5810
5810
|
|
|
5811
5811
|
function formatDate(date) {
|
|
5812
5812
|
var day = date.getDate();
|
|
@@ -5826,11 +5826,11 @@ var Content = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTe
|
|
|
5826
5826
|
var ReviewContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
5827
5827
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
5828
5828
|
}));
|
|
5829
|
-
var H2$1 = newStyled.h2(templateObject_5$
|
|
5829
|
+
var H2$1 = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
5830
5830
|
fontSize: ['16px', '18px'],
|
|
5831
5831
|
lineHeight: ['24px', '28px'],
|
|
5832
5832
|
}));
|
|
5833
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
5833
|
+
var H3$1 = newStyled.h3(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
|
|
5834
5834
|
fontSize: ['14px', '16px'],
|
|
5835
5835
|
lineHeight: ['22px', '24px'],
|
|
5836
5836
|
}));
|
|
@@ -5840,7 +5840,7 @@ var Review = function (_a) {
|
|
|
5840
5840
|
var theme = useTheme();
|
|
5841
5841
|
return (jsxs$1(Container$g, { 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));
|
|
5842
5842
|
};
|
|
5843
|
-
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$
|
|
5843
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
5844
5844
|
|
|
5845
5845
|
var Button$3 = newStyled.button(function () { return ({
|
|
5846
5846
|
background: 'transparent',
|
|
@@ -10153,9 +10153,9 @@ var List = newStyled.ul(templateObject_1$q || (templateObject_1$q = __makeTempla
|
|
|
10153
10153
|
var Item$1 = newStyled.li(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
10154
10154
|
var DropdownWrapper = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
10155
10155
|
var ArrowContainer$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
10156
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
10157
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
10158
|
-
var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$
|
|
10156
|
+
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; });
|
|
10157
|
+
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; });
|
|
10158
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4;
|
|
10159
10159
|
|
|
10160
10160
|
var DropdownListIcons = function (_a) {
|
|
10161
10161
|
var items = _a.items;
|
|
@@ -10186,14 +10186,14 @@ var Row = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTempla
|
|
|
10186
10186
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
10187
10187
|
});
|
|
10188
10188
|
var H5 = newStyled.h5(templateObject_4$6 || (templateObject_4$6 = __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; });
|
|
10189
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
10190
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
10189
|
+
var H3 = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
10190
|
+
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; });
|
|
10191
10191
|
var CrossSellCheckbox = function (_a) {
|
|
10192
10192
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
10193
10193
|
var theme = useTheme();
|
|
10194
10194
|
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));
|
|
10195
10195
|
};
|
|
10196
|
-
var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$
|
|
10196
|
+
var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3;
|
|
10197
10197
|
|
|
10198
10198
|
var index = /*#__PURE__*/Object.freeze({
|
|
10199
10199
|
__proto__: null,
|
|
@@ -10990,6 +10990,7 @@ var Portal = function (_a) {
|
|
|
10990
10990
|
throw new Error("Unable to find/create container (".concat(id, ")"));
|
|
10991
10991
|
}
|
|
10992
10992
|
element.dataset.testId = id;
|
|
10993
|
+
element.style.overflow = 'hidden';
|
|
10993
10994
|
setMounted(true);
|
|
10994
10995
|
container.current = element;
|
|
10995
10996
|
}, [id]);
|
|
@@ -11096,12 +11097,17 @@ var react = __toCommonJS(react_exports);
|
|
|
11096
11097
|
var visibleStyle = function (_a) {
|
|
11097
11098
|
var opened = _a.opened;
|
|
11098
11099
|
return opened
|
|
11099
|
-
? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n
|
|
11100
|
+
? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
11100
11101
|
};
|
|
11101
|
-
var
|
|
11102
|
+
var transformStyle = function (_a) {
|
|
11103
|
+
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
11104
|
+
return opened
|
|
11105
|
+
? css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
11106
|
+
};
|
|
11107
|
+
var Container$4 = 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({
|
|
11102
11108
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
11103
|
-
}), visibleStyle);
|
|
11104
|
-
var Overlay = newStyled.div(
|
|
11109
|
+
}), visibleStyle, transformStyle);
|
|
11110
|
+
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);
|
|
11105
11111
|
var Modal = function (_a) {
|
|
11106
11112
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c;
|
|
11107
11113
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -11139,7 +11145,7 @@ var useModal = function (id) {
|
|
|
11139
11145
|
close: close,
|
|
11140
11146
|
}); }, [close, open, opened]);
|
|
11141
11147
|
};
|
|
11142
|
-
var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
11148
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$2;
|
|
11143
11149
|
|
|
11144
11150
|
var Text$2 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __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; });
|
|
11145
11151
|
var Title$1 = function (_a) {
|