@typeolymp/ui-components 2.1.5 → 2.1.7
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.es.js
CHANGED
|
@@ -3633,7 +3633,7 @@ var DisabledButton = styled(StyledButton)(templateObject_2$D || (templateObject_
|
|
|
3633
3633
|
var size = _a.size;
|
|
3634
3634
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3635
3635
|
});
|
|
3636
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
3636
|
+
var GhostButton = styled(StyledButton)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject$1(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
3637
3637
|
var size = _a.size;
|
|
3638
3638
|
return !size
|
|
3639
3639
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3656,7 +3656,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
|
|
|
3656
3656
|
var size = _a.size;
|
|
3657
3657
|
return (size === "small" ? "3px" : "");
|
|
3658
3658
|
});
|
|
3659
|
-
var templateObject_1$U, templateObject_2$D, templateObject_3$
|
|
3659
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$g, templateObject_4$8;
|
|
3660
3660
|
|
|
3661
3661
|
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) {
|
|
3662
3662
|
var horizontal = _a.horizontal;
|
|
@@ -4223,7 +4223,7 @@ var InputIconWrapper = styled.div(templateObject_2$C || (templateObject_2$C = __
|
|
|
4223
4223
|
return "24px";
|
|
4224
4224
|
}
|
|
4225
4225
|
});
|
|
4226
|
-
var StyledInput = styled.input(templateObject_3$
|
|
4226
|
+
var StyledInput = styled.input(templateObject_3$f || (templateObject_3$f = __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) {
|
|
4227
4227
|
var size = _a.size;
|
|
4228
4228
|
switch (size) {
|
|
4229
4229
|
case "small":
|
|
@@ -4251,7 +4251,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
|
|
|
4251
4251
|
var isOk = _a.isOk;
|
|
4252
4252
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4253
4253
|
}, fadeIn);
|
|
4254
|
-
var templateObject_1$N, templateObject_2$C, templateObject_3$
|
|
4254
|
+
var templateObject_1$N, templateObject_2$C, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4255
4255
|
|
|
4256
4256
|
var expressions = {};
|
|
4257
4257
|
|
|
@@ -8451,8 +8451,8 @@ var Ellipse = styled.div(templateObject_2$y || (templateObject_2$y = __makeTempl
|
|
|
8451
8451
|
var color = _a.color;
|
|
8452
8452
|
return color ? theme.colors[color].light : "";
|
|
8453
8453
|
});
|
|
8454
|
-
var Content = styled.div(templateObject_3$
|
|
8455
|
-
var templateObject_1$B, templateObject_2$y, templateObject_3$
|
|
8454
|
+
var Content = styled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
8455
|
+
var templateObject_1$B, templateObject_2$y, templateObject_3$e;
|
|
8456
8456
|
|
|
8457
8457
|
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 })] }))); };
|
|
8458
8458
|
|
|
@@ -14703,12 +14703,12 @@ htmlReactParser.Text;
|
|
|
14703
14703
|
|
|
14704
14704
|
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"])));
|
|
14705
14705
|
var CheckboxContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14706
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
14706
|
+
var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
14707
14707
|
var Label$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
14708
14708
|
var weight = _a.weight;
|
|
14709
14709
|
return weight || 500;
|
|
14710
14710
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14711
|
-
var templateObject_1$A, templateObject_2$x, templateObject_3$
|
|
14711
|
+
var templateObject_1$A, templateObject_2$x, templateObject_3$d, templateObject_4$6;
|
|
14712
14712
|
|
|
14713
14713
|
var Checkboxes = function (props) {
|
|
14714
14714
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14837,8 +14837,8 @@ var Container$i = styled.div(templateObject_2$s || (templateObject_2$s = __makeT
|
|
|
14837
14837
|
var isVisible = _a.isVisible;
|
|
14838
14838
|
return (isVisible ? "all" : "none");
|
|
14839
14839
|
});
|
|
14840
|
-
var MenuItem = styled.div(templateObject_3$
|
|
14841
|
-
var templateObject_1$v, templateObject_2$s, templateObject_3$
|
|
14840
|
+
var MenuItem = styled.div(templateObject_3$c || (templateObject_3$c = __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 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 svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
14841
|
+
var templateObject_1$v, templateObject_2$s, templateObject_3$c;
|
|
14842
14842
|
|
|
14843
14843
|
var DropdownButton = function (props) {
|
|
14844
14844
|
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" }) }) })) }) }));
|
|
@@ -17446,8 +17446,8 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17446
17446
|
else
|
|
17447
17447
|
return theme.colors.lightGray.base;
|
|
17448
17448
|
});
|
|
17449
|
-
var FileList = styled.div(templateObject_3$
|
|
17450
|
-
var templateObject_1$u, templateObject_2$r, templateObject_3$
|
|
17449
|
+
var FileList = styled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
17450
|
+
var templateObject_1$u, templateObject_2$r, templateObject_3$b;
|
|
17451
17451
|
|
|
17452
17452
|
var FileUpload = function (_a) {
|
|
17453
17453
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17743,7 +17743,7 @@ var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
|
|
|
17743
17743
|
return "";
|
|
17744
17744
|
});
|
|
17745
17745
|
var SelectedLocaleWrapper = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
17746
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
17746
|
+
var DropdownContainer = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
17747
17747
|
var color = _a.color;
|
|
17748
17748
|
switch (color) {
|
|
17749
17749
|
default:
|
|
@@ -17754,7 +17754,7 @@ var DropdownContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
17754
17754
|
}
|
|
17755
17755
|
});
|
|
17756
17756
|
var LocaleWrapper = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
17757
|
-
var templateObject_1$o, templateObject_2$m, templateObject_3$
|
|
17757
|
+
var templateObject_1$o, templateObject_2$m, templateObject_3$a, templateObject_4$5;
|
|
17758
17758
|
|
|
17759
17759
|
var LocaleSelect = function (props) {
|
|
17760
17760
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17883,19 +17883,20 @@ var StyledProgressBar = styled.div(templateObject_2$i || (templateObject_2$i = _
|
|
|
17883
17883
|
var showInfo = _a.showInfo;
|
|
17884
17884
|
return (showInfo ? "10px" : "");
|
|
17885
17885
|
});
|
|
17886
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
17886
|
+
var Indicator$1 = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"], ["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"])), function (_a) {
|
|
17887
17887
|
var percent = _a.percent;
|
|
17888
17888
|
return "calc(".concat(percent, "% - 6px)");
|
|
17889
17889
|
}, function (_a) {
|
|
17890
17890
|
var color = _a.color;
|
|
17891
17891
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17892
17892
|
});
|
|
17893
|
-
var templateObject_1$i, templateObject_2$i, templateObject_3$
|
|
17893
|
+
var templateObject_1$i, templateObject_2$i, templateObject_3$9;
|
|
17894
17894
|
|
|
17895
17895
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
17896
17896
|
|
|
17897
|
-
var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n gap: 20px;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style-type: none;\n position: relative;\n\n :after {\n content: \"\";\n height: 4px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n top:
|
|
17898
|
-
var
|
|
17897
|
+
var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n gap: 20px;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style-type: none;\n position: relative;\n\n :after {\n content: \"\";\n height: 4px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n top: 14px;\n z-index: -1;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: 20px;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style-type: none;\n position: relative;\n\n :after {\n content: \"\";\n height: 4px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n top: 14px;\n z-index: -1;\n }\n"])), theme.colors.lightGray.dark);
|
|
17898
|
+
var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n p {\n margin-top: 10px;\n }\n"], ["\n p {\n margin-top: 10px;\n }\n"])));
|
|
17899
|
+
var Dot$2 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n width: 32px;\n height: 32px;\n border-radius: 50%;\n outline: 10px solid ", ";\n cursor: ", ";\n\n background-color: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n :hover {\n background-color: ", ";\n }\n\n > div {\n pointer-events: none;\n }\n"], ["\n width: 32px;\n height: 32px;\n border-radius: 50%;\n outline: 10px solid ", ";\n cursor: ", ";\n\n background-color: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n :hover {\n background-color: ", ";\n }\n\n > div {\n pointer-events: none;\n }\n"])), theme.colors.lightGray.light, function (_a) {
|
|
17899
17900
|
var status = _a.status;
|
|
17900
17901
|
return status === "passed" ? "pointer" : "not-allowed";
|
|
17901
17902
|
}, function (_a) {
|
|
@@ -17919,7 +17920,7 @@ var Dot$2 = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplat
|
|
|
17919
17920
|
return theme.colors.lightGray.base;
|
|
17920
17921
|
}
|
|
17921
17922
|
});
|
|
17922
|
-
var templateObject_1$h, templateObject_2$h;
|
|
17923
|
+
var templateObject_1$h, templateObject_2$h, templateObject_3$8;
|
|
17923
17924
|
|
|
17924
17925
|
var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
|
|
17925
17926
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17933,7 +17934,7 @@ var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.st
|
|
|
17933
17934
|
if (onClick && props.current >= step)
|
|
17934
17935
|
onClick(step);
|
|
17935
17936
|
};
|
|
17936
|
-
return (jsxs(
|
|
17937
|
+
return (jsxs(Step$2, { children: [jsx$1(Dot$2, __assign$2({ status: status, onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6", color: status === "active" ? "white" : "gray" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }, "step-".concat(step)));
|
|
17937
17938
|
}) })); };
|
|
17938
17939
|
|
|
17939
17940
|
var Container$9 = styled.ol(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
@@ -48761,7 +48762,7 @@ var Container$1 = styled.table(templateObject_1$1 || (templateObject_1$1 = __mak
|
|
|
48761
48762
|
var TableHead = styled.thead(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1([""], [""])));
|
|
48762
48763
|
var TableBody = styled.tbody(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1([""], [""])));
|
|
48763
48764
|
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
48764
|
-
var ColumnTitle = styled.th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n"], ["\n text-align: left;\n padding-left: 15px;\n"])));
|
|
48765
|
+
var ColumnTitle = styled.th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n\n :last-child {\n padding-right: 15px;\n }\n"], ["\n text-align: left;\n padding-left: 15px;\n\n :last-child {\n padding-right: 15px;\n }\n"])));
|
|
48765
48766
|
var TableRow = styled.tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
48766
48767
|
var TableCell = styled.td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: normal;\n color: ", ";\n text-align: ", ";\n"], ["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: normal;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.colors.darkGray.light, function (_a) {
|
|
48767
48768
|
var align = _a.align;
|