@typeolymp/ui-components 2.2.0 → 2.2.1
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/components/molecules/Dropdown/index.d.ts +1 -1
- package/build/components/molecules/LocaleSelect/index.d.ts +0 -1
- package/build/components/molecules/LocaleSelect/styles.d.ts +1 -3
- package/build/components/molecules/LocaleSelect copy/index.d.ts +11 -0
- package/build/components/molecules/LocaleSelect copy/styles.d.ts +4 -0
- package/build/index.es.js +85 -115
- package/build/index.es.js.map +1 -1
- package/build/index.js +85 -115
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -3443,7 +3443,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3443
3443
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3444
3444
|
_this.style = function (i) {
|
|
3445
3445
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3446
|
-
return react_1.css(templateObject_2$
|
|
3446
|
+
return react_1.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
|
|
3447
3447
|
};
|
|
3448
3448
|
return _this;
|
|
3449
3449
|
}
|
|
@@ -3458,7 +3458,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3458
3458
|
return Loader;
|
|
3459
3459
|
}(React$2.PureComponent));
|
|
3460
3460
|
var _default$1 = BeatLoader.default = Loader;
|
|
3461
|
-
var templateObject_1$W, templateObject_2$
|
|
3461
|
+
var templateObject_1$W, templateObject_2$C;
|
|
3462
3462
|
|
|
3463
3463
|
var Wrapper$a = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
3464
3464
|
var size = _a.size;
|
|
@@ -3626,18 +3626,18 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
|
|
|
3626
3626
|
? "calc(".concat(theme.button.medium.height, " - 3px)")
|
|
3627
3627
|
: "calc(".concat(theme.button[size].height, " - 3px)");
|
|
3628
3628
|
});
|
|
3629
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3629
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
3630
3630
|
var size = _a.size;
|
|
3631
3631
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3632
3632
|
});
|
|
3633
|
-
var LoaderWrapper = styled.div(templateObject_3$
|
|
3633
|
+
var LoaderWrapper = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3634
3634
|
var width = _a.width;
|
|
3635
3635
|
return "".concat(width, "px");
|
|
3636
3636
|
}, function (_a) {
|
|
3637
3637
|
var size = _a.size;
|
|
3638
3638
|
return (size === "small" ? "3px" : "");
|
|
3639
3639
|
});
|
|
3640
|
-
var templateObject_1$U, templateObject_2$
|
|
3640
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$f;
|
|
3641
3641
|
|
|
3642
3642
|
var StyledSpacer = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n min-width: ", ";\n min-height: ", ";\n"], ["\n min-width: ", ";\n min-height: ", ";\n"])), function (_a) {
|
|
3643
3643
|
var horizontal = _a.horizontal;
|
|
@@ -3650,7 +3650,7 @@ var templateObject_1$T;
|
|
|
3650
3650
|
|
|
3651
3651
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
3652
3652
|
|
|
3653
|
-
var Button = forwardRef(function (_a, ref) {
|
|
3653
|
+
var Button$1 = forwardRef(function (_a, ref) {
|
|
3654
3654
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, icon = _a.icon, props = __rest$1(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor", "icon"]);
|
|
3655
3655
|
var buttonRef = useRef(null);
|
|
3656
3656
|
var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
|
|
@@ -4159,8 +4159,8 @@ var StyledParagraph = styled.p(templateObject_1$O || (templateObject_1$O = __mak
|
|
|
4159
4159
|
});
|
|
4160
4160
|
var templateObject_1$O;
|
|
4161
4161
|
|
|
4162
|
-
var Container$
|
|
4163
|
-
var InputIconWrapper = styled.div(templateObject_2$
|
|
4162
|
+
var Container$o = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4163
|
+
var InputIconWrapper = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
|
|
4164
4164
|
var size = _a.size;
|
|
4165
4165
|
switch (size) {
|
|
4166
4166
|
case "small":
|
|
@@ -4203,7 +4203,7 @@ var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __
|
|
|
4203
4203
|
return "24px";
|
|
4204
4204
|
}
|
|
4205
4205
|
});
|
|
4206
|
-
var StyledInput = styled.input(templateObject_3$
|
|
4206
|
+
var StyledInput = styled.input(templateObject_3$e || (templateObject_3$e = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4207
4207
|
var size = _a.size;
|
|
4208
4208
|
switch (size) {
|
|
4209
4209
|
case "small":
|
|
@@ -4231,7 +4231,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
|
|
|
4231
4231
|
var isOk = _a.isOk;
|
|
4232
4232
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4233
4233
|
}, fadeIn);
|
|
4234
|
-
var templateObject_1$N, templateObject_2$
|
|
4234
|
+
var templateObject_1$N, templateObject_2$A, templateObject_3$e, templateObject_4$6, templateObject_5$3, templateObject_6$3;
|
|
4235
4235
|
|
|
4236
4236
|
var expressions = {};
|
|
4237
4237
|
|
|
@@ -4437,7 +4437,7 @@ var PasswordInput = function (props) {
|
|
|
4437
4437
|
if (props.onKeyPress)
|
|
4438
4438
|
props.onKeyPress(e);
|
|
4439
4439
|
};
|
|
4440
|
-
return (jsxs(Container$
|
|
4440
|
+
return (jsxs(Container$o, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
|
|
4441
4441
|
};
|
|
4442
4442
|
|
|
4443
4443
|
function toInteger$2(dirtyNumber) {
|
|
@@ -7939,7 +7939,7 @@ var SearchInput = function (props) {
|
|
|
7939
7939
|
if (value.length <= 0)
|
|
7940
7940
|
onSearch();
|
|
7941
7941
|
};
|
|
7942
|
-
return (jsx$1(Container$
|
|
7942
|
+
return (jsx$1(Container$o, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, rest, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
|
|
7943
7943
|
};
|
|
7944
7944
|
|
|
7945
7945
|
var Input = function (props) {
|
|
@@ -7987,7 +7987,7 @@ var Wrapper$6 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTem
|
|
|
7987
7987
|
var disabled = _a.disabled;
|
|
7988
7988
|
return (disabled ? "49.5px" : "");
|
|
7989
7989
|
});
|
|
7990
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
7990
|
+
var StyledInputNumber = styled.input(templateObject_2$z || (templateObject_2$z = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
7991
7991
|
var disabled = _a.disabled;
|
|
7992
7992
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
7993
7993
|
}, function (_a) {
|
|
@@ -8000,7 +8000,7 @@ var StyledInputNumber = styled.input(templateObject_2$A || (templateObject_2$A =
|
|
|
8000
8000
|
var disabled = _a.disabled;
|
|
8001
8001
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8002
8002
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8003
|
-
var templateObject_1$L, templateObject_2$
|
|
8003
|
+
var templateObject_1$L, templateObject_2$z;
|
|
8004
8004
|
|
|
8005
8005
|
var Number$1 = function (props) {
|
|
8006
8006
|
var inputRef = useRef(null);
|
|
@@ -8039,7 +8039,7 @@ var Number$1 = function (props) {
|
|
|
8039
8039
|
onChange();
|
|
8040
8040
|
inputRef.current.focus();
|
|
8041
8041
|
};
|
|
8042
|
-
return (jsxs(Wrapper$6, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: onBlur, ref: inputRef })), jsx$1(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
8042
|
+
return (jsxs(Wrapper$6, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button$1, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: onBlur, ref: inputRef })), jsx$1(Button$1, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
8043
8043
|
};
|
|
8044
8044
|
|
|
8045
8045
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
@@ -8147,7 +8147,7 @@ var Wrapper$5 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTem
|
|
|
8147
8147
|
var disabled = _a.disabled;
|
|
8148
8148
|
return (disabled ? "not-allowed" : "pointer");
|
|
8149
8149
|
});
|
|
8150
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
8150
|
+
var StyledSelect = styled.select(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
8151
8151
|
var disabled = _a.disabled;
|
|
8152
8152
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8153
8153
|
}, function (_a) {
|
|
@@ -8160,7 +8160,7 @@ var StyledSelect = styled.select(templateObject_2$z || (templateObject_2$z = __m
|
|
|
8160
8160
|
var isChanged = _a.isChanged;
|
|
8161
8161
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8162
8162
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8163
|
-
var templateObject_1$I, templateObject_2$
|
|
8163
|
+
var templateObject_1$I, templateObject_2$y;
|
|
8164
8164
|
|
|
8165
8165
|
var Select = function (props) {
|
|
8166
8166
|
var _a;
|
|
@@ -8214,7 +8214,7 @@ var templateObject_1$H;
|
|
|
8214
8214
|
|
|
8215
8215
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8216
8216
|
|
|
8217
|
-
var Container$
|
|
8217
|
+
var Container$n = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"])), function (_a) {
|
|
8218
8218
|
var color = _a.color;
|
|
8219
8219
|
if (!color)
|
|
8220
8220
|
return theme.colors.lightGray.base;
|
|
@@ -8239,7 +8239,7 @@ var templateObject_1$G;
|
|
|
8239
8239
|
|
|
8240
8240
|
var Tag = function (_a) {
|
|
8241
8241
|
var color = _a.color, children = _a.children;
|
|
8242
|
-
return jsx$1(Container$
|
|
8242
|
+
return jsx$1(Container$n, __assign$2({ color: color }, { children: children }));
|
|
8243
8243
|
};
|
|
8244
8244
|
|
|
8245
8245
|
var StyledTextarea = styled.textarea(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
@@ -8265,7 +8265,7 @@ var Textarea = function (props) {
|
|
|
8265
8265
|
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
8266
8266
|
};
|
|
8267
8267
|
|
|
8268
|
-
var Container$
|
|
8268
|
+
var Container$m = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
8269
8269
|
var disabled = _a.disabled;
|
|
8270
8270
|
return (disabled ? "not-allowed" : "pointer");
|
|
8271
8271
|
}, function (_a) {
|
|
@@ -8311,7 +8311,7 @@ var Toggle = function (props) {
|
|
|
8311
8311
|
props.onChange(newValue);
|
|
8312
8312
|
}
|
|
8313
8313
|
};
|
|
8314
|
-
return (jsx$1(Container$
|
|
8314
|
+
return (jsx$1(Container$m, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
8315
8315
|
};
|
|
8316
8316
|
|
|
8317
8317
|
var Wrapper$4 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
@@ -8361,7 +8361,7 @@ var trophies = {
|
|
|
8361
8361
|
};
|
|
8362
8362
|
var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8363
8363
|
|
|
8364
|
-
var Container$
|
|
8364
|
+
var Container$l = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
8365
8365
|
var type = _a.type;
|
|
8366
8366
|
switch (type) {
|
|
8367
8367
|
case "success":
|
|
@@ -8382,7 +8382,7 @@ var Container$m = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
|
|
|
8382
8382
|
return theme.colors.blue.base;
|
|
8383
8383
|
}
|
|
8384
8384
|
});
|
|
8385
|
-
var Action = styled.div(templateObject_2$
|
|
8385
|
+
var Action = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"], ["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
8386
8386
|
var type = _a.type;
|
|
8387
8387
|
switch (type) {
|
|
8388
8388
|
default:
|
|
@@ -8394,7 +8394,7 @@ var Action = styled.div(templateObject_2$y || (templateObject_2$y = __makeTempla
|
|
|
8394
8394
|
return theme.colors.blue.dark;
|
|
8395
8395
|
}
|
|
8396
8396
|
});
|
|
8397
|
-
var templateObject_1$C, templateObject_2$
|
|
8397
|
+
var templateObject_1$C, templateObject_2$x;
|
|
8398
8398
|
|
|
8399
8399
|
var Alert = function (props) {
|
|
8400
8400
|
var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8414,7 +8414,7 @@ var Alert = function (props) {
|
|
|
8414
8414
|
icon = "infoCircle";
|
|
8415
8415
|
if (!isOpen)
|
|
8416
8416
|
return null;
|
|
8417
|
-
return (jsxs(Container$
|
|
8417
|
+
return (jsxs(Container$l, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: icon, color: color }), jsx$1(Paragraph, { children: props.message }), props.action && (jsx$1(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsx$1(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsx$1("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsx$1(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
|
|
8418
8418
|
};
|
|
8419
8419
|
|
|
8420
8420
|
var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
@@ -8429,12 +8429,12 @@ var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __makeTe
|
|
|
8429
8429
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8430
8430
|
: "";
|
|
8431
8431
|
});
|
|
8432
|
-
var Ellipse = styled.div(templateObject_2$
|
|
8432
|
+
var Ellipse = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
8433
8433
|
var color = _a.color;
|
|
8434
8434
|
return color ? theme.colors[color].light : "";
|
|
8435
8435
|
});
|
|
8436
|
-
var Content = styled.div(templateObject_3$
|
|
8437
|
-
var templateObject_1$B, templateObject_2$
|
|
8436
|
+
var Content = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
8437
|
+
var templateObject_1$B, templateObject_2$w, templateObject_3$d;
|
|
8438
8438
|
|
|
8439
8439
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
8440
8440
|
|
|
@@ -14684,13 +14684,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14684
14684
|
htmlReactParser.Text;
|
|
14685
14685
|
|
|
14686
14686
|
var Fieldset$1 = styled.fieldset(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
14687
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
14688
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
14687
|
+
var CheckboxContainer = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14688
|
+
var CheckboxWrapper = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
14689
14689
|
var Label$b = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
14690
14690
|
var weight = _a.weight;
|
|
14691
14691
|
return weight || 500;
|
|
14692
14692
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14693
|
-
var templateObject_1$A, templateObject_2$
|
|
14693
|
+
var templateObject_1$A, templateObject_2$v, templateObject_3$c, templateObject_4$5;
|
|
14694
14694
|
|
|
14695
14695
|
var Checkboxes = function (props) {
|
|
14696
14696
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14713,12 +14713,12 @@ var Checkboxes = function (props) {
|
|
|
14713
14713
|
}) })] }));
|
|
14714
14714
|
};
|
|
14715
14715
|
|
|
14716
|
-
var Container$
|
|
14717
|
-
var Item = styled.div(templateObject_2$
|
|
14716
|
+
var Container$k = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
14717
|
+
var Item = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
14718
14718
|
var isOpen = _a.isOpen;
|
|
14719
14719
|
return (isOpen ? "" : "none");
|
|
14720
14720
|
}, theme.colors.lightGray.dark);
|
|
14721
|
-
var templateObject_1$z, templateObject_2$
|
|
14721
|
+
var templateObject_1$z, templateObject_2$u;
|
|
14722
14722
|
|
|
14723
14723
|
var Collapse = function (props) {
|
|
14724
14724
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14730,18 +14730,18 @@ var Collapse = function (props) {
|
|
|
14730
14730
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14731
14731
|
}
|
|
14732
14732
|
};
|
|
14733
|
-
return (jsx$1(Container$
|
|
14733
|
+
return (jsx$1(Container$k, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14734
14734
|
var isOpen = openItems.includes(index);
|
|
14735
14735
|
return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
14736
14736
|
}) })));
|
|
14737
14737
|
};
|
|
14738
14738
|
|
|
14739
14739
|
var Wrapper$3 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14740
|
-
var Value = styled.div(templateObject_2$
|
|
14740
|
+
var Value = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
|
|
14741
14741
|
var contrast = _a.contrast;
|
|
14742
14742
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14743
14743
|
}, theme.colors.darkGray.base);
|
|
14744
|
-
var templateObject_1$y, templateObject_2$
|
|
14744
|
+
var templateObject_1$y, templateObject_2$t;
|
|
14745
14745
|
|
|
14746
14746
|
var Countdown = function (_a) {
|
|
14747
14747
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14768,20 +14768,20 @@ var Countdown = function (_a) {
|
|
|
14768
14768
|
return (jsxs(Wrapper$3, { children: [jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
|
|
14769
14769
|
};
|
|
14770
14770
|
|
|
14771
|
-
var Container$
|
|
14772
|
-
var Data = styled.div(templateObject_2$
|
|
14773
|
-
var templateObject_1$x, templateObject_2$
|
|
14771
|
+
var Container$j = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"], ["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
|
|
14772
|
+
var Data = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
|
|
14773
|
+
var templateObject_1$x, templateObject_2$s;
|
|
14774
14774
|
|
|
14775
14775
|
var DataSummary = function (_a) {
|
|
14776
14776
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
14777
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$
|
|
14777
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$j, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
|
|
14778
14778
|
return item instanceof Object ? (jsxs("div", { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value, "-").concat(index))) : (jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item }), "".concat(item, "-").concat(index)));
|
|
14779
14779
|
}) })] }) }));
|
|
14780
14780
|
};
|
|
14781
14781
|
|
|
14782
|
-
var Container$
|
|
14783
|
-
var Label$a = styled(StyledParagraph)(templateObject_2$
|
|
14784
|
-
var templateObject_1$w, templateObject_2$
|
|
14782
|
+
var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
14783
|
+
var Label$a = styled(StyledParagraph)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
14784
|
+
var templateObject_1$w, templateObject_2$r;
|
|
14785
14785
|
|
|
14786
14786
|
var DateInputField = function (props) {
|
|
14787
14787
|
var onChange = function (value) {
|
|
@@ -14792,7 +14792,7 @@ var DateInputField = function (props) {
|
|
|
14792
14792
|
if (props.onBlur)
|
|
14793
14793
|
props.onBlur(props.name);
|
|
14794
14794
|
};
|
|
14795
|
-
return (jsxs(Container$
|
|
14795
|
+
return (jsxs(Container$i, { children: [jsx$1(Label$a, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
14796
14796
|
};
|
|
14797
14797
|
|
|
14798
14798
|
var generateRandomString = function (length) {
|
|
@@ -14806,7 +14806,7 @@ var generateRandomString = function (length) {
|
|
|
14806
14806
|
};
|
|
14807
14807
|
|
|
14808
14808
|
var ButtonWrapper$1 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"], ["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"])));
|
|
14809
|
-
var Container$
|
|
14809
|
+
var Container$h = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border-radius: 6px;\n border: 1px solid ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n pointer-events: ", ";\n"], ["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border-radius: 6px;\n border: 1px solid ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n pointer-events: ", ";\n"])), function (_a) {
|
|
14810
14810
|
var isVisible = _a.isVisible;
|
|
14811
14811
|
return (isVisible ? "100%" : "0%");
|
|
14812
14812
|
}, function (_a) {
|
|
@@ -14815,15 +14815,15 @@ var Container$i = styled.div(templateObject_2$r || (templateObject_2$r = __makeT
|
|
|
14815
14815
|
}, function (_a) {
|
|
14816
14816
|
var x = _a.x;
|
|
14817
14817
|
return (x ? "".concat(x, "px") : "");
|
|
14818
|
-
}, theme.colors.lightGray.light, theme.colors.lightGray.dark,
|
|
14818
|
+
}, theme.colors.lightGray.light, theme.colors.lightGray.dark, function (_a) {
|
|
14819
14819
|
var isVisible = _a.isVisible;
|
|
14820
14820
|
return (isVisible ? "all" : "none");
|
|
14821
14821
|
});
|
|
14822
|
-
var MenuItem = styled.div(templateObject_3$
|
|
14823
|
-
var templateObject_1$v, templateObject_2$
|
|
14822
|
+
var MenuItem = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n"], ["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
14823
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$b;
|
|
14824
14824
|
|
|
14825
14825
|
var DropdownButton = function (props) {
|
|
14826
|
-
return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
14826
|
+
return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button$1, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
14827
14827
|
};
|
|
14828
14828
|
|
|
14829
14829
|
var Dropdown = function (_a) {
|
|
@@ -14884,9 +14884,12 @@ var Dropdown = function (_a) {
|
|
|
14884
14884
|
return React__default.cloneElement(child, props_1);
|
|
14885
14885
|
}
|
|
14886
14886
|
});
|
|
14887
|
-
return (jsxs(Fragment$1, { children: [children, jsx$1(Container$
|
|
14887
|
+
return (jsxs(Fragment$1, { children: [children, jsx$1(Container$h, __assign$2({}, position, { isVisible: isVisible && menu.length > 0, ref: dropwdownRef, onMouseLeave: function () { return setIsVisible(false); } }, { children: menu.map(function (_a, index) {
|
|
14888
14888
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14889
|
-
return (
|
|
14889
|
+
return (jsx$1(MenuItem, __assign$2({ onClick: function () {
|
|
14890
|
+
onClick();
|
|
14891
|
+
setIsVisible(false);
|
|
14892
|
+
} }, { children: typeof label === "string" ? (jsxs(Fragment$1, { children: [icon && jsx$1(Icon, { type: icon, size: "tiny" }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: label }))] })) : (label) }), "".concat(label, "-").concat(index)));
|
|
14890
14893
|
}) }))] }));
|
|
14891
14894
|
};
|
|
14892
14895
|
Dropdown.Button = DropdownButton;
|
|
@@ -17408,8 +17411,8 @@ function reducer$1(state, action) {
|
|
|
17408
17411
|
|
|
17409
17412
|
function noop$3() {}
|
|
17410
17413
|
|
|
17411
|
-
var Container$
|
|
17412
|
-
var DropZone = styled.div(templateObject_2$
|
|
17414
|
+
var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
|
|
17415
|
+
var DropZone = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
17413
17416
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17414
17417
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17415
17418
|
if (isDragAccept)
|
|
@@ -17428,8 +17431,8 @@ var DropZone = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemp
|
|
|
17428
17431
|
else
|
|
17429
17432
|
return theme.colors.lightGray.base;
|
|
17430
17433
|
});
|
|
17431
|
-
var FileList = styled.div(templateObject_3$
|
|
17432
|
-
var templateObject_1$u, templateObject_2$
|
|
17434
|
+
var FileList = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
17435
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$a;
|
|
17433
17436
|
|
|
17434
17437
|
var FileUpload = function (_a) {
|
|
17435
17438
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17442,11 +17445,11 @@ var FileUpload = function (_a) {
|
|
|
17442
17445
|
// Max number of files: 1
|
|
17443
17446
|
maxFiles: 1,
|
|
17444
17447
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
17445
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$
|
|
17448
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$g, { children: [jsxs(DropZone, __assign$2({}, getRootProps({
|
|
17446
17449
|
isDragActive: isDragActive,
|
|
17447
17450
|
isDragAccept: isDragAccept,
|
|
17448
17451
|
isDragReject: isDragReject,
|
|
17449
|
-
}), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17452
|
+
}), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button$1, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17450
17453
|
};
|
|
17451
17454
|
|
|
17452
17455
|
var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"])), function (_a) {
|
|
@@ -17474,9 +17477,9 @@ var IconButton = function (props) {
|
|
|
17474
17477
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: props.color === "white" ? "gray" : "white" }) })));
|
|
17475
17478
|
};
|
|
17476
17479
|
|
|
17477
|
-
var Container$
|
|
17478
|
-
var Label$9 = styled(StyledParagraph)(templateObject_2$
|
|
17479
|
-
var templateObject_1$s, templateObject_2$
|
|
17480
|
+
var Container$f = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
17481
|
+
var Label$9 = styled(StyledParagraph)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17482
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17480
17483
|
|
|
17481
17484
|
var InputField = function (props) {
|
|
17482
17485
|
var onChange = function (value) {
|
|
@@ -17487,10 +17490,10 @@ var InputField = function (props) {
|
|
|
17487
17490
|
if (props.onBlur)
|
|
17488
17491
|
props.onBlur(props.name);
|
|
17489
17492
|
};
|
|
17490
|
-
return (jsxs(Container$
|
|
17493
|
+
return (jsxs(Container$f, { children: [jsx$1(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
17491
17494
|
};
|
|
17492
17495
|
|
|
17493
|
-
var Container$
|
|
17496
|
+
var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: ", ";\n min-height: 74px;\n max-height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: ", ";\n min-height: 74px;\n max-height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
17494
17497
|
var char = _a.char;
|
|
17495
17498
|
return (char.length === 1 ? "74px" : "");
|
|
17496
17499
|
}, function (_a) {
|
|
@@ -17537,10 +17540,10 @@ var Container$f = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
|
|
|
17537
17540
|
return theme.colors.darkGray.light;
|
|
17538
17541
|
}
|
|
17539
17542
|
});
|
|
17540
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
17541
|
-
var templateObject_1$r, templateObject_2$
|
|
17543
|
+
var CheckIconWrapper = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
17544
|
+
var templateObject_1$r, templateObject_2$n;
|
|
17542
17545
|
|
|
17543
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
17546
|
+
var Key$1 = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
17544
17547
|
marginTop: "13px",
|
|
17545
17548
|
transform: "scale(2)",
|
|
17546
17549
|
} }, { children: jsx$1("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
@@ -17552,8 +17555,8 @@ var Wrapper$2 = styled.a(templateObject_1$q || (templateObject_1$q = __makeTempl
|
|
|
17552
17555
|
var chevron = _a.chevron;
|
|
17553
17556
|
return (chevron === "right" ? "4px" : "");
|
|
17554
17557
|
});
|
|
17555
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
17556
|
-
var templateObject_1$q, templateObject_2$
|
|
17558
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
17559
|
+
var templateObject_1$q, templateObject_2$m;
|
|
17557
17560
|
|
|
17558
17561
|
var Link = function (props) {
|
|
17559
17562
|
var onClick = function (e) {
|
|
@@ -17565,13 +17568,13 @@ var Link = function (props) {
|
|
|
17565
17568
|
return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
17566
17569
|
};
|
|
17567
17570
|
|
|
17568
|
-
var Container$
|
|
17571
|
+
var Container$d = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
17569
17572
|
var text = _a.text;
|
|
17570
17573
|
return (text ? "20px" : "");
|
|
17571
17574
|
});
|
|
17572
17575
|
var templateObject_1$p;
|
|
17573
17576
|
|
|
17574
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
17577
|
+
var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default$1, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
17575
17578
|
|
|
17576
17579
|
var mappers = {};
|
|
17577
17580
|
|
|
@@ -17690,54 +17693,21 @@ __exportStar(getPricing$1, exports);
|
|
|
17690
17693
|
|
|
17691
17694
|
}(mappers));
|
|
17692
17695
|
|
|
17693
|
-
var
|
|
17694
|
-
|
|
17695
|
-
if (borderless)
|
|
17696
|
-
return "transparent";
|
|
17697
|
-
return theme.colors.lightGray.light;
|
|
17698
|
-
}, function (_a) {
|
|
17699
|
-
var borderless = _a.borderless;
|
|
17700
|
-
return borderless ? "" : "1px solid ".concat(theme.colors.lightGray.dark);
|
|
17701
|
-
}, function (_a) {
|
|
17702
|
-
var borderless = _a.borderless;
|
|
17703
|
-
return borderless ? "" : "0px 2px 0px rgb(0 0 0 / 10%)";
|
|
17704
|
-
}, function (_a) {
|
|
17705
|
-
var reverse = _a.reverse;
|
|
17706
|
-
return reverse ? "column-reverse" : "column";
|
|
17707
|
-
}, function (_a) {
|
|
17708
|
-
var open = _a.open;
|
|
17709
|
-
return (open ? "rotate(180deg)" : "");
|
|
17710
|
-
}, theme.colors.lightGray.base);
|
|
17711
|
-
var LocalesList = styled.ul(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n list-style: none;\n margin: 0;\n padding: 0;\n\n // background-color: ", ";\n // border: 1px solid ", ";\n // border-radius: 0 0 6px 6px;\n // box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n // overflow: hidden;\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n\n // background-color: ", ";\n // border: 1px solid ", ";\n // border-radius: 0 0 6px 6px;\n // box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n // overflow: hidden;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
|
|
17712
|
-
var LocalesListItem = styled.li(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n // min-width: max-content;\n\n display: ", ";\n align-items: center;\n gap: 10px;\n\n // background-color: ", ";\n\n padding: 13px 15px;\n cursor: pointer;\n\n :hover {\n background-color: ", ";\n }\n"], ["\n // min-width: max-content;\n\n display: ", ";\n align-items: center;\n gap: 10px;\n\n // background-color: ", ";\n\n padding: 13px 15px;\n cursor: pointer;\n\n :hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
17713
|
-
var hidden = _a.hidden;
|
|
17714
|
-
return (hidden ? "none" : "flex");
|
|
17715
|
-
}, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
17716
|
-
var templateObject_1$o, templateObject_2$m, templateObject_3$a;
|
|
17696
|
+
var Button = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n all: unset;\n height: 46px;\n box-sizing: border-box;\n padding: 10px 15px;\n background-color: ", ";\n border-radius: 6px;\n border: 1px solid ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n display: flex;\n align-items: center;\n gap: 10px;\n\n svg {\n pointer-events: none;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n }\n"], ["\n all: unset;\n height: 46px;\n box-sizing: border-box;\n padding: 10px 15px;\n background-color: ", ";\n border-radius: 6px;\n border: 1px solid ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n display: flex;\n align-items: center;\n gap: 10px;\n\n svg {\n pointer-events: none;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n }\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark, theme.colors.lightGray.base);
|
|
17697
|
+
var templateObject_1$o;
|
|
17717
17698
|
|
|
17718
17699
|
var LocaleSelect = function (props) {
|
|
17719
|
-
var containerRef = useRef(null);
|
|
17720
17700
|
var _a = useState(props.defaultValue), selectedLocale = _a[0], setSelectedLocale = _a[1];
|
|
17721
|
-
var _b = useState(false), open = _b[0], setOpen = _b[1];
|
|
17722
|
-
var handleClickOutside = useCallback(function (event) {
|
|
17723
|
-
return open &&
|
|
17724
|
-
containerRef.current &&
|
|
17725
|
-
!containerRef.current.contains(event.target)
|
|
17726
|
-
? setOpen(false)
|
|
17727
|
-
: null;
|
|
17728
|
-
}, [open, containerRef]);
|
|
17729
|
-
useEffect(function () {
|
|
17730
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
17731
|
-
return function () {
|
|
17732
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
17733
|
-
};
|
|
17734
|
-
}, [handleClickOutside]);
|
|
17735
17701
|
var onSelectLocale = function (locale) {
|
|
17736
17702
|
setSelectedLocale(locale);
|
|
17737
17703
|
props.onChange(locale);
|
|
17738
|
-
setOpen(false);
|
|
17739
17704
|
};
|
|
17740
|
-
return (
|
|
17705
|
+
return (jsx$1(Dropdown, __assign$2({ trigger: ["click"], menu: props.locales
|
|
17706
|
+
.filter(function (locale) { return locale !== selectedLocale; })
|
|
17707
|
+
.map(function (locale) { return ({
|
|
17708
|
+
onClick: function () { return onSelectLocale(locale); },
|
|
17709
|
+
label: (jsxs(Fragment$1, { children: [jsx$1(Flag, { locale: locale }), !props.iconOnly && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: mappers.getNativeLanguageByLocale(locale) })))] })),
|
|
17710
|
+
}); }) }, { children: jsxs(Button, __assign$2({ "aria-haspopup": "true", "aria-expanded": open, "aria-controls": "locales" }, { children: [jsx$1(Flag, { locale: selectedLocale }), !props.iconOnly && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: mappers.getNativeLanguageByLocale(selectedLocale) })))] })) })));
|
|
17741
17711
|
};
|
|
17742
17712
|
|
|
17743
17713
|
var Wrapper$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
@@ -17755,7 +17725,7 @@ var templateObject_1$m, templateObject_2$l;
|
|
|
17755
17725
|
var Notification = function (props) {
|
|
17756
17726
|
if (!props.isVisible)
|
|
17757
17727
|
return null;
|
|
17758
|
-
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
17728
|
+
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button$1, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
17759
17729
|
};
|
|
17760
17730
|
|
|
17761
17731
|
var Container$c = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
@@ -48436,7 +48406,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
48436
48406
|
return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
48437
48407
|
jsx$1(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
48438
48408
|
}
|
|
48439
|
-
}) })), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48409
|
+
}) })), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button$1, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48440
48410
|
});
|
|
48441
48411
|
|
|
48442
48412
|
var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
|
|
@@ -48701,7 +48671,7 @@ var Modal = function (props) {
|
|
|
48701
48671
|
}, [isOpen]);
|
|
48702
48672
|
if (!isOpen)
|
|
48703
48673
|
return null;
|
|
48704
|
-
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxs(ChildrenWrapper, { children: [props.title && (jsx$1(TitleWrapper$1, { children: jsx$1(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxs(FooterContainer, { children: [props.closeButton && (jsx$1(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsx$1(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
48674
|
+
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxs(ChildrenWrapper, { children: [props.title && (jsx$1(TitleWrapper$1, { children: jsx$1(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxs(FooterContainer, { children: [props.closeButton && (jsx$1(Button$1, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsx$1(Button$1, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
48705
48675
|
};
|
|
48706
48676
|
|
|
48707
48677
|
var Container$2 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
@@ -48875,5 +48845,5 @@ var Transfer = function (props) {
|
|
|
48875
48845
|
}) }) }, selectedTargetKeys)] }))] }));
|
|
48876
48846
|
};
|
|
48877
48847
|
|
|
48878
|
-
export { Alert, Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
|
|
48848
|
+
export { Alert, Button$1 as Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
|
|
48879
48849
|
//# sourceMappingURL=index.es.js.map
|