@typeolymp/ui-components 3.0.16 → 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.
Files changed (6) hide show
  1. package/build/components/atoms/Icon/index.d.ts +1 -1
  2. package/build/index.es.js +78 -45
  3. package/build/index.es.js.map +1 -1
  4. package/build/index.js +78 -45
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.js CHANGED
@@ -34,58 +34,74 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
34
34
  var theme = {
35
35
  colors: {
36
36
  red: {
37
- // light: "#FFC1CB",
38
- // base: "#FF5975",
39
- // dark: "#FC032D",
40
- // darker: "#AF0522",
41
- light: "#F7778C",
42
- base: "#F21C40",
43
- dark: "#C21633",
44
- darker: "#911126",
37
+ light: "#FF5975",
38
+ base: "#FC032D",
39
+ dark: "#AF0522",
40
+ darker: "#900C22",
41
+ // light: "#F7778C",
42
+ // base: "#F21C40",
43
+ // dark: "#C21633",
44
+ // darker: "#911126",
45
45
  },
46
46
  yellow: {
47
- light: "#FFE867",
48
- base: "#FFD801",
49
- dark: "#CCAD01",
50
- darker: "#998201",
47
+ light: "#FFDB1B",
48
+ base: "#E29400",
49
+ dark: "#BB6802",
50
+ darker: "#7C420B",
51
+ // light: "#FFE867",
52
+ // base: "#FFD801",
53
+ // dark: "#CCAD01",
54
+ // darker: "#998201",
51
55
  },
52
56
  blue: {
53
- // light: "#B8E0FF",
54
- // base: "#15A1FF",
55
- // dark: "#0074CE",
56
- // darker: "#024E8A",
57
- light: "#78CDFA",
58
- base: "#1AAFF6",
59
- dark: "#148CC5",
60
- darker: "#126994",
57
+ light: "#B8E0FF",
58
+ base: "#15A1FF",
59
+ dark: "#0074CE",
60
+ darker: "#084172",
61
+ // light: "#78CDFA",
62
+ // base: "#1AAFF6",
63
+ // dark: "#148CC5",
64
+ // darker: "#126994",
61
65
  },
62
66
  green: {
63
- // light: "#A4F6D5",
64
- // base: "#2FD8A5",
65
- // dark: "#00906C",
66
- // darker: "#03624D",
67
- light: "#8BDCAE",
68
- base: "#3DC478",
69
- dark: "#319D60",
70
- darker: "#257648",
67
+ light: "#CBFF95",
68
+ base: "#89F625",
69
+ dark: "#4FB100",
70
+ darker: "#32690B",
71
+ // light: "#8BDCAE",
72
+ // base: "#3DC478",
73
+ // dark: "#319D60",
74
+ // darker: "#257648",
71
75
  },
72
76
  purple: {
73
- light: "#C69BDA",
74
- base: "#A059C1",
75
- dark: "#80479A",
76
- darker: "#603574",
77
+ light: "#9870ff",
78
+ base: "#6f0fff",
79
+ dark: "#5b00da",
80
+ darker: "#5100c0",
81
+ // light: "#C69BDA",
82
+ // base: "#A059C1",
83
+ // dark: "#80479A",
84
+ // darker: "#603574",
77
85
  },
78
86
  pink: {
79
- light: "#FE67B7",
80
- base: "#FE0187",
81
- dark: "#CB016C",
82
- darker: "#980151",
87
+ light: "#FCCEFF",
88
+ base: "#FCCEFF",
89
+ dark: "#F73EF7",
90
+ darker: "#791671",
91
+ // light: "#FE67B7",
92
+ // base: "#FE0187",
93
+ // dark: "#CB016C",
94
+ // darker: "#980151",
83
95
  },
84
96
  orange: {
85
- light: "#FFC466",
86
- base: "#FF9D00",
87
- dark: "#CD7E02",
88
- darker: "#995E00",
97
+ light: "#FFB96D",
98
+ base: "#FF5A00",
99
+ dark: "#CC3F02",
100
+ darker: "#822B0C",
101
+ // light: "#FFC466",
102
+ // base: "#FF9D00",
103
+ // dark: "#CD7E02",
104
+ // darker: "#995E00",
89
105
  },
90
106
  darkGray: {
91
107
  light: "#7C7F82",
@@ -3525,6 +3541,8 @@ var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateOb
3525
3541
  return theme.colors.blue.base;
3526
3542
  case "green":
3527
3543
  return theme.colors.green.base;
3544
+ case "darkGreen":
3545
+ return theme.colors.green.darker;
3528
3546
  case "orange":
3529
3547
  return theme.colors.orange.base;
3530
3548
  case "red":
@@ -3553,6 +3571,8 @@ var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateOb
3553
3571
  return theme.colors.blue.dark;
3554
3572
  case "green":
3555
3573
  return theme.colors.green.dark;
3574
+ case "darkGreen":
3575
+ return theme.colors.green.darker;
3556
3576
  case "orange":
3557
3577
  return theme.colors.orange.dark;
3558
3578
  case "red":
@@ -3618,7 +3638,7 @@ var icons = {
3618
3638
  };
3619
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] })) }))); };
3620
3640
 
3621
- 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: 6px;\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: 6px;\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) {
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) {
3622
3642
  var fluid = _a.fluid;
3623
3643
  return (fluid ? "100%" : "fit-content");
3624
3644
  }, function (_a) {
@@ -3655,9 +3675,16 @@ var StyledButton = styled__default["default"].button(templateObject_1$V || (temp
3655
3675
  return color === "white" ? "1px solid #e4e4e4" : "none";
3656
3676
  }, function (_a) {
3657
3677
  var color = _a.color;
3658
- return color === "white"
3659
- ? theme.colors.darkGray.light
3660
- : theme.colors.lightGray.light;
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
+ }
3661
3688
  }, theme.fonts.heading, function (_a) {
3662
3689
  var size = _a.size;
3663
3690
  return !size ? theme.button.medium.fontSize : theme.button[size].fontSize;
@@ -3737,7 +3764,13 @@ var Button$1 = React$3.forwardRef(function (_a, ref) {
3737
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 })] }) })));
3738
3765
  }
3739
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 &&
3740
- renderIcon({ color: color === "white" ? "gray" : "white" }), jsxRuntime.jsx("span", { children: label })] })) })));
3767
+ renderIcon({
3768
+ color: color === "white"
3769
+ ? "gray"
3770
+ : color === "green"
3771
+ ? "darkGreen"
3772
+ : "white",
3773
+ }), jsxRuntime.jsx("span", { children: label })] })) })));
3741
3774
  });
3742
3775
 
3743
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) {