@typeolymp/ui-components 3.0.17 → 3.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/index.es.js +26 -9
- package/build/index.es.js.map +1 -1
- package/build/index.js +26 -9
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -64,10 +64,10 @@ var theme = {
|
|
|
64
64
|
// darker: "#126994",
|
|
65
65
|
},
|
|
66
66
|
green: {
|
|
67
|
-
light: "#
|
|
68
|
-
base: "#
|
|
69
|
-
dark: "#
|
|
70
|
-
darker: "#
|
|
67
|
+
light: "#CBFF95",
|
|
68
|
+
base: "#89F625",
|
|
69
|
+
dark: "#4FB100",
|
|
70
|
+
darker: "#32690B",
|
|
71
71
|
// light: "#8BDCAE",
|
|
72
72
|
// base: "#3DC478",
|
|
73
73
|
// dark: "#319D60",
|
|
@@ -3541,6 +3541,8 @@ var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateOb
|
|
|
3541
3541
|
return theme.colors.blue.base;
|
|
3542
3542
|
case "green":
|
|
3543
3543
|
return theme.colors.green.base;
|
|
3544
|
+
case "darkGreen":
|
|
3545
|
+
return theme.colors.green.darker;
|
|
3544
3546
|
case "orange":
|
|
3545
3547
|
return theme.colors.orange.base;
|
|
3546
3548
|
case "red":
|
|
@@ -3569,6 +3571,8 @@ var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateOb
|
|
|
3569
3571
|
return theme.colors.blue.dark;
|
|
3570
3572
|
case "green":
|
|
3571
3573
|
return theme.colors.green.dark;
|
|
3574
|
+
case "darkGreen":
|
|
3575
|
+
return theme.colors.green.darker;
|
|
3572
3576
|
case "orange":
|
|
3573
3577
|
return theme.colors.orange.dark;
|
|
3574
3578
|
case "red":
|
|
@@ -3634,7 +3638,7 @@ var icons = {
|
|
|
3634
3638
|
};
|
|
3635
3639
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$a, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3636
3640
|
|
|
3637
|
-
var StyledButton = styled__default["default"].button(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius:
|
|
3641
|
+
var StyledButton = styled__default["default"].button(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 14px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 14px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"])), function (_a) {
|
|
3638
3642
|
var fluid = _a.fluid;
|
|
3639
3643
|
return (fluid ? "100%" : "fit-content");
|
|
3640
3644
|
}, function (_a) {
|
|
@@ -3671,9 +3675,16 @@ var StyledButton = styled__default["default"].button(templateObject_1$V || (temp
|
|
|
3671
3675
|
return color === "white" ? "1px solid #e4e4e4" : "none";
|
|
3672
3676
|
}, function (_a) {
|
|
3673
3677
|
var color = _a.color;
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
:
|
|
3678
|
+
switch (color) {
|
|
3679
|
+
default:
|
|
3680
|
+
case "blue":
|
|
3681
|
+
case "red":
|
|
3682
|
+
return theme.colors.lightGray.light;
|
|
3683
|
+
case "green":
|
|
3684
|
+
return theme.colors.green.darker;
|
|
3685
|
+
case "white":
|
|
3686
|
+
return theme.colors.darkGray.light;
|
|
3687
|
+
}
|
|
3677
3688
|
}, theme.fonts.heading, function (_a) {
|
|
3678
3689
|
var size = _a.size;
|
|
3679
3690
|
return !size ? theme.button.medium.fontSize : theme.button[size].fontSize;
|
|
@@ -3753,7 +3764,13 @@ var Button$1 = React$3.forwardRef(function (_a, ref) {
|
|
|
3753
3764
|
return (jsxRuntime.jsx(DisabledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && renderIcon({ color: "lightGray" }), jsxRuntime.jsx("span", { children: label })] }) })));
|
|
3754
3765
|
}
|
|
3755
3766
|
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsxRuntime.jsx(Loader, { dark: color === "white" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon &&
|
|
3756
|
-
renderIcon({
|
|
3767
|
+
renderIcon({
|
|
3768
|
+
color: color === "white"
|
|
3769
|
+
? "gray"
|
|
3770
|
+
: color === "green"
|
|
3771
|
+
? "darkGreen"
|
|
3772
|
+
: "white",
|
|
3773
|
+
}), jsxRuntime.jsx("span", { children: label })] })) })));
|
|
3757
3774
|
});
|
|
3758
3775
|
|
|
3759
3776
|
var StyledCheckbox = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|