@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.d.ts
CHANGED
|
@@ -2729,6 +2729,8 @@ declare const SizeDropdown: react__default.FC<DropdownProps>;
|
|
|
2729
2729
|
interface DialogPositionProps {
|
|
2730
2730
|
top: string;
|
|
2731
2731
|
right: string;
|
|
2732
|
+
containerPosRight?: string;
|
|
2733
|
+
containerPosTop?: string;
|
|
2732
2734
|
}
|
|
2733
2735
|
interface DialogDropdownProps {
|
|
2734
2736
|
options?: {
|
|
@@ -2742,7 +2744,7 @@ interface DialogDropdownProps {
|
|
|
2742
2744
|
dialogContainerText?: string;
|
|
2743
2745
|
className?: string;
|
|
2744
2746
|
}
|
|
2745
|
-
declare const DropdownDialog: ({ options, position: { top, right }, style, dialogDropdownContainerStyle, dialogDropdownListItemStyle, dialogContainerText, className, }: DialogDropdownProps) => JSX.Element;
|
|
2747
|
+
declare const DropdownDialog: ({ options, position: { top, right, containerPosRight, containerPosTop }, style, dialogDropdownContainerStyle, dialogDropdownListItemStyle, dialogContainerText, className, }: DialogDropdownProps) => JSX.Element;
|
|
2746
2748
|
|
|
2747
2749
|
declare type FilteringDropdownProps<T> = {
|
|
2748
2750
|
options: DropdownOption<T>[];
|
|
@@ -2908,6 +2910,7 @@ interface BaseInputCommonProps {
|
|
|
2908
2910
|
name?: string;
|
|
2909
2911
|
autoFocus?: boolean;
|
|
2910
2912
|
requiredPlaceholder?: string;
|
|
2913
|
+
customErrorMessage?: string;
|
|
2911
2914
|
}
|
|
2912
2915
|
declare type BaseInputProps = BaseInputCommonProps;
|
|
2913
2916
|
|
|
@@ -2957,7 +2960,7 @@ declare type CustomProps = BaseInputProps & {
|
|
|
2957
2960
|
};
|
|
2958
2961
|
|
|
2959
2962
|
declare const Input: {
|
|
2960
|
-
Simple: ({ value, onChange, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, hideClear, innerRef, requiredPlaceholder, ...rest }: BaseInputCommonProps) => JSX.Element;
|
|
2963
|
+
Simple: ({ value, onChange, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, hideClear, innerRef, requiredPlaceholder, customErrorMessage, ...rest }: BaseInputCommonProps) => JSX.Element;
|
|
2961
2964
|
Custom: ({ onClick, text, variant, defaultRounded, ...rest }: CustomProps) => JSX.Element;
|
|
2962
2965
|
SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
|
|
2963
2966
|
SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
|
package/build/index.esm.js
CHANGED
|
@@ -4780,7 +4780,7 @@ var TAGS = {
|
|
|
4780
4780
|
hero2: newStyled.h2(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject([""], [""]))),
|
|
4781
4781
|
hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
|
|
4783
|
-
display2: newStyled.h2(templateObject_5$
|
|
4783
|
+
display2: newStyled.h2(templateObject_5$M || (templateObject_5$M = __makeTemplateObject([""], [""]))),
|
|
4784
4784
|
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4785
4785
|
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4786
4786
|
heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4916,13 +4916,13 @@ var DEFAULTS = {
|
|
|
4916
4916
|
size: 'regular',
|
|
4917
4917
|
},
|
|
4918
4918
|
};
|
|
4919
|
-
var templateObject_1$28, templateObject_2$1z, templateObject_3$1e, templateObject_4$$, templateObject_5$
|
|
4919
|
+
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;
|
|
4920
4920
|
|
|
4921
4921
|
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"])));
|
|
4922
4922
|
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"])));
|
|
4923
4923
|
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"])));
|
|
4924
4924
|
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"])));
|
|
4925
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4925
|
+
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"])));
|
|
4926
4926
|
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"])));
|
|
4927
4927
|
var PackSelectorV2 = function (_a) {
|
|
4928
4928
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4948,7 +4948,7 @@ var PackCard$1 = function (_a) {
|
|
|
4948
4948
|
currency: currencyCode || 'USD',
|
|
4949
4949
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4950
4950
|
};
|
|
4951
|
-
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$
|
|
4951
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
|
|
4952
4952
|
|
|
4953
4953
|
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"])));
|
|
4954
4954
|
var DropContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5244,8 +5244,8 @@ var Container$1i = newStyled.div(templateObject_1$21 || (templateObject_1$21 = _
|
|
|
5244
5244
|
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"])));
|
|
5245
5245
|
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"])));
|
|
5246
5246
|
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"])));
|
|
5247
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5248
|
-
var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$
|
|
5247
|
+
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"])));
|
|
5248
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
|
|
5249
5249
|
|
|
5250
5250
|
var CouponCard = function (_a) {
|
|
5251
5251
|
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;
|
|
@@ -6013,7 +6013,7 @@ var TooltipText = newStyled.div(templateObject_4$X || (templateObject_4$X = __ma
|
|
|
6013
6013
|
var color = _a.color;
|
|
6014
6014
|
return color;
|
|
6015
6015
|
});
|
|
6016
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6016
|
+
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"])));
|
|
6017
6017
|
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) {
|
|
6018
6018
|
var color = _a.color;
|
|
6019
6019
|
return color;
|
|
@@ -6023,7 +6023,7 @@ var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o =
|
|
|
6023
6023
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6024
6024
|
return right;
|
|
6025
6025
|
});
|
|
6026
|
-
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X, templateObject_5$
|
|
6026
|
+
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;
|
|
6027
6027
|
|
|
6028
6028
|
var Tooltip = function (_a) {
|
|
6029
6029
|
var _b;
|
|
@@ -6086,7 +6086,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$17 |
|
|
|
6086
6086
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6087
6087
|
});
|
|
6088
6088
|
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6089
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_5$
|
|
6089
|
+
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) {
|
|
6090
6090
|
var theme = _a.theme;
|
|
6091
6091
|
return theme.colors.shades[200].color;
|
|
6092
6092
|
}, function (_a) {
|
|
@@ -6104,7 +6104,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6104
6104
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6105
6105
|
});
|
|
6106
6106
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6107
|
-
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$
|
|
6107
|
+
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;
|
|
6108
6108
|
|
|
6109
6109
|
var radioIds$2 = {
|
|
6110
6110
|
oneTime: {
|
|
@@ -6196,7 +6196,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$V ||
|
|
|
6196
6196
|
var onClick = _a.onClick;
|
|
6197
6197
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6198
6198
|
});
|
|
6199
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6199
|
+
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"])));
|
|
6200
6200
|
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) {
|
|
6201
6201
|
var theme = _a.theme;
|
|
6202
6202
|
return theme.colors.shades[200].color;
|
|
@@ -6217,7 +6217,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6217
6217
|
var theme = _a.theme;
|
|
6218
6218
|
return theme.component.autoship.tooltip.margin;
|
|
6219
6219
|
});
|
|
6220
|
-
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$
|
|
6220
|
+
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;
|
|
6221
6221
|
|
|
6222
6222
|
var radioIds$1 = {
|
|
6223
6223
|
oneTime: {
|
|
@@ -6300,9 +6300,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1T || (templateObject_1$1T
|
|
|
6300
6300
|
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"])));
|
|
6301
6301
|
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"])));
|
|
6302
6302
|
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"])));
|
|
6303
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6303
|
+
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"])));
|
|
6304
6304
|
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"])));
|
|
6305
|
-
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$
|
|
6305
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
|
|
6306
6306
|
|
|
6307
6307
|
var NameWithStars = function (_a) {
|
|
6308
6308
|
var name = _a.name, size = _a.size;
|
|
@@ -6573,7 +6573,7 @@ var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
6573
6573
|
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"])));
|
|
6574
6574
|
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"])));
|
|
6575
6575
|
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"])));
|
|
6576
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6576
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6577
6577
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6578
6578
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6579
6579
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6582,7 +6582,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6582
6582
|
var isMobile = useWindowDimensions().isMobile;
|
|
6583
6583
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$17, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6584
6584
|
};
|
|
6585
|
-
var templateObject_1$1G, templateObject_2$1h, templateObject_3$10, templateObject_4$Q, templateObject_5$
|
|
6585
|
+
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;
|
|
6586
6586
|
|
|
6587
6587
|
var Spacing = function (_a) {
|
|
6588
6588
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6610,7 +6610,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1E || (templateObject_
|
|
|
6610
6610
|
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"])));
|
|
6611
6611
|
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"])));
|
|
6612
6612
|
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6613
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6613
|
+
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"])));
|
|
6614
6614
|
var RegularPriceTag = function () {
|
|
6615
6615
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6616
6616
|
};
|
|
@@ -6664,7 +6664,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6664
6664
|
? finalPriceArray[0]
|
|
6665
6665
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6666
6666
|
};
|
|
6667
|
-
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$
|
|
6667
|
+
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$E;
|
|
6668
6668
|
|
|
6669
6669
|
var STARTS_NUMBER = 5;
|
|
6670
6670
|
|
|
@@ -6904,7 +6904,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6904
6904
|
};
|
|
6905
6905
|
}
|
|
6906
6906
|
};
|
|
6907
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
6907
|
+
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) {
|
|
6908
6908
|
var style = _a.style;
|
|
6909
6909
|
return style.width;
|
|
6910
6910
|
});
|
|
@@ -6914,7 +6914,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$z || (templateObject_6
|
|
|
6914
6914
|
});
|
|
6915
6915
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6916
6916
|
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"])));
|
|
6917
|
-
var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N, templateObject_5$
|
|
6917
|
+
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;
|
|
6918
6918
|
|
|
6919
6919
|
var ProductItemMobile = function (_a) {
|
|
6920
6920
|
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 ? {
|
|
@@ -7018,7 +7018,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7018
7018
|
};
|
|
7019
7019
|
}
|
|
7020
7020
|
};
|
|
7021
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7021
|
+
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) {
|
|
7022
7022
|
var style = _a.style;
|
|
7023
7023
|
return style.width;
|
|
7024
7024
|
});
|
|
@@ -7078,7 +7078,7 @@ var ProductItemTK = function (_a) {
|
|
|
7078
7078
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7079
7079
|
} }, { 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));
|
|
7080
7080
|
};
|
|
7081
|
-
var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$
|
|
7081
|
+
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;
|
|
7082
7082
|
|
|
7083
7083
|
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"])));
|
|
7084
7084
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7102,7 +7102,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1x || (templateObject_1$1x
|
|
|
7102
7102
|
newStyled(lt.Label)(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7103
7103
|
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"])));
|
|
7104
7104
|
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7105
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7105
|
+
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"])));
|
|
7106
7106
|
var Label$5 = function (_a) {
|
|
7107
7107
|
var label = _a.label, values = _a.values;
|
|
7108
7108
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7120,7 +7120,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7120
7120
|
Option: Option,
|
|
7121
7121
|
OptionsContainer: OptionsContainer,
|
|
7122
7122
|
});
|
|
7123
|
-
var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$
|
|
7123
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$B;
|
|
7124
7124
|
|
|
7125
7125
|
var OneColorSelector = function (_a) {
|
|
7126
7126
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7251,14 +7251,14 @@ var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemp
|
|
|
7251
7251
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7252
7252
|
});
|
|
7253
7253
|
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; });
|
|
7254
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7254
|
+
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; });
|
|
7255
7255
|
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; });
|
|
7256
7256
|
var CrossSellCheckbox = function (_a) {
|
|
7257
7257
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7258
7258
|
var theme = useTheme();
|
|
7259
7259
|
return (jsxs$1(Wrapper$5, __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$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { 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));
|
|
7260
7260
|
};
|
|
7261
|
-
var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$
|
|
7261
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x;
|
|
7262
7262
|
|
|
7263
7263
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7264
7264
|
__proto__: null,
|
|
@@ -7426,7 +7426,7 @@ var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTempla
|
|
|
7426
7426
|
textAlign: ['center', 'inherit'],
|
|
7427
7427
|
width: ['100%', 'inherit'],
|
|
7428
7428
|
}));
|
|
7429
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7429
|
+
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({
|
|
7430
7430
|
marginRight: ['0', '0.438rem'],
|
|
7431
7431
|
marginBottom: ['10px', '0'],
|
|
7432
7432
|
width: ['auto', '1.5rem'],
|
|
@@ -7454,7 +7454,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7454
7454
|
var theme = useTheme();
|
|
7455
7455
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (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));
|
|
7456
7456
|
};
|
|
7457
|
-
var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$
|
|
7457
|
+
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;
|
|
7458
7458
|
|
|
7459
7459
|
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) {
|
|
7460
7460
|
var top = _a.top;
|
|
@@ -7521,9 +7521,9 @@ var List = newStyled.ul(templateObject_1$1p || (templateObject_1$1p = __makeTemp
|
|
|
7521
7521
|
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"])));
|
|
7522
7522
|
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"])));
|
|
7523
7523
|
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"])));
|
|
7524
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7524
|
+
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; });
|
|
7525
7525
|
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; });
|
|
7526
|
-
var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$
|
|
7526
|
+
var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$v;
|
|
7527
7527
|
|
|
7528
7528
|
var DropdownListIcons = function (_a) {
|
|
7529
7529
|
var items = _a.items;
|
|
@@ -7540,9 +7540,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1
|
|
|
7540
7540
|
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"])));
|
|
7541
7541
|
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7542
7542
|
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"])));
|
|
7543
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7543
|
+
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"])));
|
|
7544
7544
|
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"])));
|
|
7545
|
-
var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
7545
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$x, templateObject_6$u;
|
|
7546
7546
|
|
|
7547
7547
|
var SizeDropdown = function (_a) {
|
|
7548
7548
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7566,18 +7566,23 @@ var SizeDropdown = function (_a) {
|
|
|
7566
7566
|
};
|
|
7567
7567
|
|
|
7568
7568
|
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; });
|
|
7569
|
-
var
|
|
7570
|
-
var
|
|
7571
|
-
|
|
7569
|
+
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; });
|
|
7570
|
+
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) {
|
|
7571
|
+
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
7572
|
+
}, function (props) {
|
|
7573
|
+
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
7574
|
+
});
|
|
7575
|
+
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"])));
|
|
7576
|
+
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"])));
|
|
7572
7577
|
var DropdownDialog = function (_a) {
|
|
7573
|
-
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;
|
|
7578
|
+
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;
|
|
7574
7579
|
var theme = useTheme$1();
|
|
7575
|
-
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children:
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7580
|
+
return dialogContainerText ? (jsx$1(DialogDropdownWrapper2, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsx$1(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: jsx$1(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: dialogContainerText }), void 0) }), void 0) }), void 0)) : (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsx$1(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) {
|
|
7581
|
+
var label = _a.label, value = _a.value;
|
|
7582
|
+
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7583
|
+
}) }), void 0) }), void 0));
|
|
7579
7584
|
};
|
|
7580
|
-
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F;
|
|
7585
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$w;
|
|
7581
7586
|
|
|
7582
7587
|
function FilteringDropdown(_a) {
|
|
7583
7588
|
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;
|
|
@@ -14232,7 +14237,7 @@ var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __mak
|
|
|
14232
14237
|
var templateObject_1$16, templateObject_2$S, templateObject_3$J, templateObject_4$z, templateObject_5$r, templateObject_6$p;
|
|
14233
14238
|
|
|
14234
14239
|
var BaseInput = function (_a) {
|
|
14235
|
-
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"]);
|
|
14240
|
+
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"]);
|
|
14236
14241
|
var theme = useTheme();
|
|
14237
14242
|
var _d = useState(InputValidationType.Empty), status = _d[0], setStatus = _d[1];
|
|
14238
14243
|
var onBlur = function (_a) {
|
|
@@ -14252,11 +14257,12 @@ var BaseInput = function (_a) {
|
|
|
14252
14257
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14253
14258
|
}, [status]);
|
|
14254
14259
|
var hasValue = Boolean(value);
|
|
14260
|
+
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14255
14261
|
return (jsxs$1(Container$Q, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14256
14262
|
onChange(event.target.value, event);
|
|
14257
14263
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14258
14264
|
onChange('', { target: { value: '' } });
|
|
14259
|
-
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)),
|
|
14265
|
+
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), errorMessage && jsx$1(Error$1, { error: errorMessage }, void 0)] }), void 0));
|
|
14260
14266
|
};
|
|
14261
14267
|
|
|
14262
14268
|
var Button$6 = function (_a) {
|