@trafilea/afrodita-components 6.39.2 → 6.39.4
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 -2
- package/build/index.esm.js +49 -43
- package/build/index.esm.js.map +1 -1
- package/build/index.js +49 -43
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4806,7 +4806,7 @@ var TAGS = {
|
|
|
4806
4806
|
hero2: newStyled.h2(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject([""], [""]))),
|
|
4807
4807
|
hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
|
|
4808
4808
|
display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
|
|
4809
|
-
display2: newStyled.h2(templateObject_5$
|
|
4809
|
+
display2: newStyled.h2(templateObject_5$M || (templateObject_5$M = __makeTemplateObject([""], [""]))),
|
|
4810
4810
|
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4811
4811
|
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4812
4812
|
heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4942,13 +4942,13 @@ var DEFAULTS = {
|
|
|
4942
4942
|
size: 'regular',
|
|
4943
4943
|
},
|
|
4944
4944
|
};
|
|
4945
|
-
var templateObject_1$28, templateObject_2$1z, templateObject_3$1e, templateObject_4$$, templateObject_5$
|
|
4945
|
+
var templateObject_1$28, templateObject_2$1z, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$G, templateObject_7$x, templateObject_8$p, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4946
4946
|
|
|
4947
4947
|
var Container$1m = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4948
4948
|
var Card$4 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4949
4949
|
var Tag$2 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4950
4950
|
var Label$7 = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4951
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4951
|
+
var Check$1 = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4952
4952
|
var DiscountContainer$1 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4953
4953
|
var PackSelectorV2 = function (_a) {
|
|
4954
4954
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4974,7 +4974,7 @@ var PackCard$1 = function (_a) {
|
|
|
4974
4974
|
currency: currencyCode || 'USD',
|
|
4975
4975
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4976
4976
|
};
|
|
4977
|
-
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$
|
|
4977
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
|
|
4978
4978
|
|
|
4979
4979
|
var Container$1l = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4980
4980
|
var DropContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5270,8 +5270,8 @@ var Container$1i = newStyled.div(templateObject_1$21 || (templateObject_1$21 = _
|
|
|
5270
5270
|
var FlexCentered = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5271
5271
|
var LeftSide = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5272
5272
|
var RightSide = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5273
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5274
|
-
var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$
|
|
5273
|
+
var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5274
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
|
|
5275
5275
|
|
|
5276
5276
|
var CouponCard = function (_a) {
|
|
5277
5277
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -6039,7 +6039,7 @@ var TooltipText = newStyled.div(templateObject_4$X || (templateObject_4$X = __ma
|
|
|
6039
6039
|
var color = _a.color;
|
|
6040
6040
|
return color;
|
|
6041
6041
|
});
|
|
6042
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6042
|
+
var TopSection = newStyled.div(templateObject_5$J || (templateObject_5$J = __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"])));
|
|
6043
6043
|
var Title$b = newStyled.h1(templateObject_6$E || (templateObject_6$E = __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) {
|
|
6044
6044
|
var color = _a.color;
|
|
6045
6045
|
return color;
|
|
@@ -6049,7 +6049,7 @@ var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o =
|
|
|
6049
6049
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6050
6050
|
return right;
|
|
6051
6051
|
});
|
|
6052
|
-
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X, templateObject_5$
|
|
6052
|
+
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X, templateObject_5$J, templateObject_6$E, templateObject_7$w, templateObject_8$o;
|
|
6053
6053
|
|
|
6054
6054
|
var Tooltip = function (_a) {
|
|
6055
6055
|
var _b;
|
|
@@ -6112,7 +6112,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$17 |
|
|
|
6112
6112
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6113
6113
|
});
|
|
6114
6114
|
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6115
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_5$
|
|
6115
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6116
6116
|
var theme = _a.theme;
|
|
6117
6117
|
return theme.colors.shades[200].color;
|
|
6118
6118
|
}, function (_a) {
|
|
@@ -6130,7 +6130,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6130
6130
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6131
6131
|
});
|
|
6132
6132
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6133
|
-
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$
|
|
6133
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$I, templateObject_6$D, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6134
6134
|
|
|
6135
6135
|
var radioIds$2 = {
|
|
6136
6136
|
oneTime: {
|
|
@@ -6222,7 +6222,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$V ||
|
|
|
6222
6222
|
var onClick = _a.onClick;
|
|
6223
6223
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6224
6224
|
});
|
|
6225
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6225
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6226
6226
|
var SubscriptionHeader$2 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6227
6227
|
var theme = _a.theme;
|
|
6228
6228
|
return theme.colors.shades[200].color;
|
|
@@ -6243,7 +6243,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6243
6243
|
var theme = _a.theme;
|
|
6244
6244
|
return theme.component.autoship.tooltip.margin;
|
|
6245
6245
|
});
|
|
6246
|
-
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$
|
|
6246
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$H, templateObject_6$C, templateObject_7$u, templateObject_8$m, templateObject_9$c, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6247
6247
|
|
|
6248
6248
|
var radioIds$1 = {
|
|
6249
6249
|
oneTime: {
|
|
@@ -6326,9 +6326,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1T || (templateObject_1$1T
|
|
|
6326
6326
|
var CustomerInfo = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6327
6327
|
var Name = newStyled.h4(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6328
6328
|
var StarIconContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6329
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6329
|
+
var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6330
6330
|
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6331
|
-
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$
|
|
6331
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
|
|
6332
6332
|
|
|
6333
6333
|
var NameWithStars = function (_a) {
|
|
6334
6334
|
var name = _a.name, size = _a.size;
|
|
@@ -6599,7 +6599,7 @@ var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
6599
6599
|
var MobileContainer = newStyled(Container$17)(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6600
6600
|
var DollarPart = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6601
6601
|
var ClubMembersText = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6602
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6602
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6603
6603
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6604
6604
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6605
6605
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6608,7 +6608,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6608
6608
|
var isMobile = useWindowDimensions().isMobile;
|
|
6609
6609
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6610
6610
|
};
|
|
6611
|
-
var templateObject_1$1G, templateObject_2$1h, templateObject_3$10, templateObject_4$Q, templateObject_5$
|
|
6611
|
+
var templateObject_1$1G, templateObject_2$1h, templateObject_3$10, templateObject_4$Q, templateObject_5$F, templateObject_6$A, templateObject_7$t, templateObject_8$l;
|
|
6612
6612
|
|
|
6613
6613
|
var Spacing = function (_a) {
|
|
6614
6614
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6636,7 +6636,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1E || (templateObject_
|
|
|
6636
6636
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6637
6637
|
var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6638
6638
|
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6639
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6639
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6640
6640
|
var RegularPriceTag = function () {
|
|
6641
6641
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6642
6642
|
};
|
|
@@ -6690,7 +6690,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6690
6690
|
? finalPriceArray[0]
|
|
6691
6691
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6692
6692
|
};
|
|
6693
|
-
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$
|
|
6693
|
+
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$E;
|
|
6694
6694
|
|
|
6695
6695
|
var STARTS_NUMBER = 5;
|
|
6696
6696
|
|
|
@@ -6930,7 +6930,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6930
6930
|
};
|
|
6931
6931
|
}
|
|
6932
6932
|
};
|
|
6933
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
6933
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6934
6934
|
var style = _a.style;
|
|
6935
6935
|
return style.width;
|
|
6936
6936
|
});
|
|
@@ -6940,7 +6940,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$z || (templateObject_6
|
|
|
6940
6940
|
});
|
|
6941
6941
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6942
6942
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6943
|
-
var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N, templateObject_5$
|
|
6943
|
+
var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N, templateObject_5$D, templateObject_6$z, templateObject_7$s, templateObject_8$k;
|
|
6944
6944
|
|
|
6945
6945
|
var ProductItemMobile = function (_a) {
|
|
6946
6946
|
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, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -7044,7 +7044,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7044
7044
|
};
|
|
7045
7045
|
}
|
|
7046
7046
|
};
|
|
7047
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7047
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7048
7048
|
var style = _a.style;
|
|
7049
7049
|
return style.width;
|
|
7050
7050
|
});
|
|
@@ -7104,7 +7104,7 @@ var ProductItemTK = function (_a) {
|
|
|
7104
7104
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7105
7105
|
} }, { children: title }), void 0)) : (jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7106
7106
|
};
|
|
7107
|
-
var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$
|
|
7107
|
+
var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$C, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
7108
7108
|
|
|
7109
7109
|
var Container$11 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
7110
7110
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7128,7 +7128,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1x || (templateObject_1$1x
|
|
|
7128
7128
|
newStyled(lt.Label)(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7129
7129
|
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"])));
|
|
7130
7130
|
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7131
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7131
|
+
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"])));
|
|
7132
7132
|
var Label$5 = function (_a) {
|
|
7133
7133
|
var label = _a.label, values = _a.values;
|
|
7134
7134
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7146,7 +7146,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7146
7146
|
Option: Option,
|
|
7147
7147
|
OptionsContainer: OptionsContainer,
|
|
7148
7148
|
});
|
|
7149
|
-
var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$
|
|
7149
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$B;
|
|
7150
7150
|
|
|
7151
7151
|
var OneColorSelector = function (_a) {
|
|
7152
7152
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7277,14 +7277,14 @@ var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemp
|
|
|
7277
7277
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7278
7278
|
});
|
|
7279
7279
|
var H5 = newStyled.h5(templateObject_4$K || (templateObject_4$K = __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; });
|
|
7280
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7280
|
+
var H3 = newStyled.h3(templateObject_5$A || (templateObject_5$A = __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; });
|
|
7281
7281
|
var FreeShipping = newStyled.span(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7282
7282
|
var CrossSellCheckbox = function (_a) {
|
|
7283
7283
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7284
7284
|
var theme = useTheme();
|
|
7285
7285
|
return (jsxRuntime.jsxs(Wrapper$5, __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$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { 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));
|
|
7286
7286
|
};
|
|
7287
|
-
var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$
|
|
7287
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x;
|
|
7288
7288
|
|
|
7289
7289
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7290
7290
|
__proto__: null,
|
|
@@ -7452,7 +7452,7 @@ var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTempla
|
|
|
7452
7452
|
textAlign: ['center', 'inherit'],
|
|
7453
7453
|
width: ['100%', 'inherit'],
|
|
7454
7454
|
}));
|
|
7455
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7455
|
+
var IconContainer$4 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7456
7456
|
marginRight: ['0', '0.438rem'],
|
|
7457
7457
|
marginBottom: ['10px', '0'],
|
|
7458
7458
|
width: ['auto', '1.5rem'],
|
|
@@ -7480,7 +7480,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7480
7480
|
var theme = useTheme();
|
|
7481
7481
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].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, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (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));
|
|
7482
7482
|
};
|
|
7483
|
-
var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$
|
|
7483
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$z, templateObject_6$w, templateObject_7$q, templateObject_8$i;
|
|
7484
7484
|
|
|
7485
7485
|
var Backdrop = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7486
7486
|
var top = _a.top;
|
|
@@ -7547,9 +7547,9 @@ var List = newStyled.ul(templateObject_1$1p || (templateObject_1$1p = __makeTemp
|
|
|
7547
7547
|
var Item$2 = newStyled.li(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
7548
7548
|
var DropdownWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
7549
7549
|
var ArrowContainer$1 = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
7550
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7550
|
+
var StyledDropdown = newStyled.ul(templateObject_5$y || (templateObject_5$y = __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; });
|
|
7551
7551
|
var DropdownItem = newStyled.li(templateObject_6$v || (templateObject_6$v = __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; });
|
|
7552
|
-
var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$
|
|
7552
|
+
var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$v;
|
|
7553
7553
|
|
|
7554
7554
|
var DropdownListIcons = function (_a) {
|
|
7555
7555
|
var items = _a.items;
|
|
@@ -7566,9 +7566,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1
|
|
|
7566
7566
|
var DropdownLabel = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7567
7567
|
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7568
7568
|
var DetailLabel = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7569
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7569
|
+
var DropdownOptions = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7570
7570
|
var DropdownOption = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7571
|
-
var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
7571
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$x, templateObject_6$u;
|
|
7572
7572
|
|
|
7573
7573
|
var SizeDropdown = function (_a) {
|
|
7574
7574
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7592,18 +7592,23 @@ var SizeDropdown = function (_a) {
|
|
|
7592
7592
|
};
|
|
7593
7593
|
|
|
7594
7594
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7595
|
-
var
|
|
7596
|
-
var
|
|
7597
|
-
|
|
7595
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7596
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
7597
|
+
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
7598
|
+
}, function (props) {
|
|
7599
|
+
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
7600
|
+
});
|
|
7601
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7602
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7598
7603
|
var DropdownDialog = function (_a) {
|
|
7599
|
-
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
7604
|
+
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
7600
7605
|
var theme = useTheme$1();
|
|
7601
|
-
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxRuntime.
|
|
7602
|
-
|
|
7603
|
-
|
|
7604
|
-
|
|
7606
|
+
return dialogContainerText ? (jsxRuntime.jsx(DialogDropdownWrapper2, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: containerPosTop !== null && containerPosTop !== void 0 ? containerPosTop : top, right: containerPosRight !== null && containerPosRight !== void 0 ? containerPosRight : right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: jsxRuntime.jsx(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: dialogContainerText }), void 0) }), void 0) }), void 0)) : (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: options === null || options === void 0 ? void 0 : options.map(function (_a, idx) {
|
|
7607
|
+
var label = _a.label, value = _a.value;
|
|
7608
|
+
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7609
|
+
}) }), void 0) }), void 0));
|
|
7605
7610
|
};
|
|
7606
|
-
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F;
|
|
7611
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$w;
|
|
7607
7612
|
|
|
7608
7613
|
function FilteringDropdown(_a) {
|
|
7609
7614
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -14258,7 +14263,7 @@ var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __mak
|
|
|
14258
14263
|
var templateObject_1$16, templateObject_2$S, templateObject_3$J, templateObject_4$z, templateObject_5$r, templateObject_6$p;
|
|
14259
14264
|
|
|
14260
14265
|
var BaseInput = function (_a) {
|
|
14261
|
-
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, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
14266
|
+
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, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
14262
14267
|
var theme = useTheme();
|
|
14263
14268
|
var _d = React$2.useState(exports.InputValidationType.Empty), status = _d[0], setStatus = _d[1];
|
|
14264
14269
|
var onBlur = function (_a) {
|
|
@@ -14278,11 +14283,12 @@ var BaseInput = function (_a) {
|
|
|
14278
14283
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14279
14284
|
}, [status]);
|
|
14280
14285
|
var hasValue = Boolean(value);
|
|
14286
|
+
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14281
14287
|
return (jsxRuntime.jsxs(Container$Q, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14282
14288
|
onChange(event.target.value, event);
|
|
14283
14289
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14284
14290
|
onChange('', { target: { value: '' } });
|
|
14285
|
-
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)),
|
|
14291
|
+
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), errorMessage && jsxRuntime.jsx(Error$1, { error: errorMessage }, void 0)] }), void 0));
|
|
14286
14292
|
};
|
|
14287
14293
|
|
|
14288
14294
|
var Button$6 = function (_a) {
|