@megafon/ui-core 3.4.0 → 3.5.2

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 (27) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/es/colors/Colors.css +5 -1
  3. package/dist/es/colors/Colors.js +103 -4
  4. package/dist/es/colors/colorsData.js +21 -19
  5. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
  6. package/dist/es/components/Logo/Logo.css +5 -0
  7. package/dist/es/components/Notification/Notification.css +3 -3
  8. package/dist/es/components/Search/Search.js +12 -0
  9. package/dist/es/components/Select/Select.js +5 -22
  10. package/dist/es/components/Switcher/Switcher.css +101 -28
  11. package/dist/es/components/Switcher/Switcher.d.ts +8 -1
  12. package/dist/es/components/Switcher/Switcher.js +39 -10
  13. package/dist/es/components/Tile/Tile.css +1 -1
  14. package/dist/lib/colors/Colors.css +5 -1
  15. package/dist/lib/colors/Colors.js +103 -4
  16. package/dist/lib/colors/colorsData.js +21 -19
  17. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
  18. package/dist/lib/components/Logo/Logo.css +5 -0
  19. package/dist/lib/components/Notification/Notification.css +3 -3
  20. package/dist/lib/components/Search/Search.js +14 -0
  21. package/dist/lib/components/Select/Select.js +5 -22
  22. package/dist/lib/components/Switcher/Switcher.css +101 -28
  23. package/dist/lib/components/Switcher/Switcher.d.ts +8 -1
  24. package/dist/lib/components/Switcher/Switcher.js +38 -9
  25. package/dist/lib/components/Tile/Tile.css +1 -1
  26. package/package.json +4 -4
  27. package/styles/colorsDark.css +14 -14
package/dist/es/components/Switcher/Switcher.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import * as React from 'react';
3
- import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
3
+ import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
4
4
  import * as PropTypes from 'prop-types';
5
5
  import "./Switcher.css";
6
6
  var cn = cnCreate('mfui-switcher');
@@ -12,27 +12,53 @@ var Switcher = function Switcher(_ref) {
12
12
  checked = _ref$checked === void 0 ? false : _ref$checked,
13
13
  _ref$disabled = _ref.disabled,
14
14
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
15
+ _ref$showLoader = _ref.showLoader,
16
+ showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
17
+ children = _ref.children,
18
+ _ref$textSize = _ref.textSize,
19
+ textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
20
+ _ref$textPosition = _ref.textPosition,
21
+ textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
15
22
  onChange = _ref.onChange;
16
23
  var isTouch = detectTouch();
17
-
18
- var handleChange = function handleChange(e) {
19
- if (disabled) {
24
+ var isLeftContent = !!children && textPosition === 'left';
25
+ var isRightContent = !!children && textPosition === 'right';
26
+ var isInteractiveDisabled = showLoader || disabled;
27
+ var handleChange = React.useCallback(function (e) {
28
+ if (isInteractiveDisabled || !checkEventIsClickOrEnterPress(e)) {
20
29
  return;
21
30
  }
22
31
 
23
32
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
24
- };
25
-
26
- return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
33
+ }, [isInteractiveDisabled, onChange]);
34
+ return /*#__PURE__*/React.createElement("div", _extends({
27
35
  className: cn({
36
+ disabled: disabled
37
+ }, className)
38
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
39
+ className: cn('content', {
40
+ size: textSize,
41
+ left: true
42
+ })
43
+ }, children), /*#__PURE__*/React.createElement("div", {
44
+ className: cn('input', {
28
45
  checked: checked,
29
46
  disabled: disabled,
47
+ loaded: showLoader,
30
48
  'no-touch': !isTouch
31
- }, className),
32
- onClick: handleChange
49
+ }),
50
+ onClick: handleChange,
51
+ onKeyDown: handleChange,
52
+ tabIndex: isInteractiveDisabled ? undefined : 0
53
+ }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
54
+ className: cn('loader')
33
55
  }), /*#__PURE__*/React.createElement("div", {
34
56
  className: cn('pointer')
35
- }));
57
+ })), isRightContent && /*#__PURE__*/React.createElement("div", {
58
+ className: cn('content', {
59
+ size: textSize
60
+ })
61
+ }, children));
36
62
  };
37
63
 
38
64
  Switcher.propTypes = {
@@ -40,8 +66,11 @@ Switcher.propTypes = {
40
66
  root: PropTypes.objectOf(PropTypes.string.isRequired)
41
67
  }),
42
68
  className: PropTypes.string,
69
+ textSize: PropTypes.oneOf(['small', 'medium']),
70
+ textPosition: PropTypes.oneOf(['left', 'right']),
43
71
  checked: PropTypes.bool,
44
72
  disabled: PropTypes.bool,
73
+ showLoader: PropTypes.bool,
45
74
  onChange: PropTypes.func
46
75
  };
47
76
  export default Switcher;
package/dist/es/components/Tile/Tile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .mfui-tile {
2
2
  color: var(--content);
3
- background-color: var(--background);
3
+ background-color: var(--base);
4
4
  }
5
5
  .mfui-tile_radius_rounded {
6
6
  border-radius: 8px;
package/dist/lib/colors/Colors.css CHANGED
@@ -18,6 +18,9 @@
18
18
  .colors__title {
19
19
  margin-bottom: 8px;
20
20
  }
21
+ .colors__title-note {
22
+ margin-bottom: 60px;
23
+ }
21
24
  .colors__group-title {
22
25
  margin-bottom: 24px;
23
26
  }
@@ -82,7 +85,8 @@
82
85
  }
83
86
  .colors__description {
84
87
  position: relative;
85
- padding-top: 15px;
88
+ padding-top: 11px;
89
+ color: var(--spbSky3);
86
90
  font-size: 12px;
87
91
  line-height: 18px;
88
92
  text-align: center;
package/dist/lib/colors/Colors.js CHANGED
@@ -45,7 +45,103 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
45
45
 
46
46
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
47
47
 
48
- var Diagram = function Diagram(props) {
48
+ var DiagramDark = function DiagramDark(props) {
49
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
50
+ viewBox: "0 0 260 261",
51
+ fill: "none"
52
+ }, props), /*#__PURE__*/React.createElement("mask", {
53
+ id: "DiagramDark__a",
54
+ style: {
55
+ maskType: 'alpha'
56
+ },
57
+ maskUnits: "userSpaceOnUse",
58
+ x: 0,
59
+ y: 0,
60
+ width: 260,
61
+ height: 261
62
+ }, /*#__PURE__*/React.createElement("path", {
63
+ fillRule: "evenodd",
64
+ clipRule: "evenodd",
65
+ d: "M130.491 260.678c71.526 0 129.509-58.19 129.509-129.972C260 58.925 202.017.734 130.491.734 58.965.734.981 58.924.981 130.706c0 71.782 57.984 129.972 129.51 129.972zm.216-22.279c59.477 0 107.693-48.215 107.693-107.693 0-59.477-48.216-107.693-107.693-107.693-59.478 0-107.694 48.216-107.694 107.693 0 59.478 48.216 107.693 107.694 107.693z",
66
+ fill: "#333"
67
+ })), /*#__PURE__*/React.createElement("g", {
68
+ mask: "url(#DiagramDark__a)"
69
+ }, /*#__PURE__*/React.createElement("path", {
70
+ d: "M75.979 13.036a129.498 129.498 0 01113.346 2.095L130.5 130.499 75.979 13.036z",
71
+ fill: "#314138"
72
+ }), /*#__PURE__*/React.createElement("path", {
73
+ d: "M189.067 15a129.507 129.507 0 0167.808 87.224L130.5 130.499l58.567-115.5z",
74
+ fill: "#35484A"
75
+ }), /*#__PURE__*/React.createElement("path", {
76
+ d: "M256.835 102.042a129.508 129.508 0 01-25.217 109.361L130.5 130.499l126.335-28.457z",
77
+ fill: "#2F2F3C"
78
+ }), /*#__PURE__*/React.createElement("path", {
79
+ d: "M231.817 211.153a129.497 129.497 0 01-101.043 48.846l-.274-129.5 101.317 80.654z",
80
+ fill: "#38273C"
81
+ }), /*#__PURE__*/React.createElement("path", {
82
+ d: "M130.5 259.999a129.505 129.505 0 01-101.147-48.632L130.5 130.499v129.5z",
83
+ fill: "#442B2D"
84
+ }), /*#__PURE__*/React.createElement("path", {
85
+ d: "M29.086 211.032A129.5 129.5 0 014.271 101.579l126.229 28.92-101.414 80.533z",
86
+ fill: "#422A26"
87
+ }), /*#__PURE__*/React.createElement("path", {
88
+ d: "M4.377 101.12a129.5 129.5 0 0171.422-88L130.5 130.498 4.377 101.12z",
89
+ fill: "#4A3D27"
90
+ })), /*#__PURE__*/React.createElement("path", {
91
+ d: "M85.367 33.023a107.695 107.695 0 0194.259 1.742l-48.919 95.941-45.34-97.683z",
92
+ fill: "#24804E"
93
+ }), /*#__PURE__*/React.createElement("path", {
94
+ d: "M179.411 34.656a107.695 107.695 0 0156.391 72.536l-105.095 23.514 48.704-96.05z",
95
+ fill: "#5B9DA3"
96
+ }), /*#__PURE__*/React.createElement("path", {
97
+ d: "M235.768 107.041a107.686 107.686 0 01-20.971 90.946l-84.09-67.281 105.061-23.665z",
98
+ fill: "#4B497C"
99
+ }), /*#__PURE__*/React.createElement("path", {
100
+ d: "M214.963 197.779a107.694 107.694 0 01-84.028 40.62l-.228-107.693 84.256 67.073z",
101
+ fill: "#5C2C64"
102
+ }), /*#__PURE__*/React.createElement("path", {
103
+ d: "M130.707 238.4a107.694 107.694 0 01-84.115-40.443l84.115-67.251V238.4z",
104
+ fill: "#CA3A43"
105
+ }), /*#__PURE__*/React.createElement("path", {
106
+ d: "M46.357 197.664a107.692 107.692 0 01-20.637-91.022l104.973 24.051-84.336 66.971z",
107
+ fill: "#B85B4A"
108
+ }), /*#__PURE__*/React.createElement("path", {
109
+ d: "M25.821 106.274a107.694 107.694 0 0159.396-73.182l45.49 97.614-104.886-24.432z",
110
+ fill: "#BC862E"
111
+ }), /*#__PURE__*/React.createElement("path", {
112
+ d: "M94.146 52.187a86.329 86.329 0 0175.559 1.397l-39.214 76.906-36.345-78.303z",
113
+ fill: "#00B956"
114
+ }), /*#__PURE__*/React.createElement("path", {
115
+ d: "M169.533 53.496a86.332 86.332 0 0145.202 58.146l-84.244 18.848 39.042-76.994z",
116
+ fill: "#5BD9E5"
117
+ }), /*#__PURE__*/React.createElement("path", {
118
+ d: "M214.708 111.52a86.325 86.325 0 01-16.81 72.903l-67.407-53.933 84.217-18.97z",
119
+ fill: "#444189"
120
+ }), /*#__PURE__*/React.createElement("path", {
121
+ d: "M198.031 184.256a86.331 86.331 0 01-67.358 32.561l-.182-86.327 67.54 53.766z",
122
+ fill: "#731982"
123
+ }), /*#__PURE__*/React.createElement("path", {
124
+ d: "M130.491 216.818a86.327 86.327 0 01-67.427-32.419l67.427-53.909v86.328z",
125
+ fill: "#F62434"
126
+ }), /*#__PURE__*/React.createElement("path", {
127
+ d: "M62.886 184.175a86.324 86.324 0 01-16.542-72.964l84.147 19.279-67.605 53.685z",
128
+ fill: "#EB5A40"
129
+ }), /*#__PURE__*/React.createElement("path", {
130
+ d: "M46.414 110.906a86.328 86.328 0 0147.612-58.664l36.465 78.248-84.077-19.584z",
131
+ fill: "#FFA717"
132
+ }), /*#__PURE__*/React.createElement("ellipse", {
133
+ cx: 130.491,
134
+ cy: 130.706,
135
+ rx: 60.429,
136
+ ry: 60.645,
137
+ fill: "#333"
138
+ }), /*#__PURE__*/React.createElement("path", {
139
+ d: "M125.234 15h3.832v-.569h-2.76l1.576-1.536c.704-.688 1.152-1.376 1.152-2.08 0-.984-.672-1.608-1.728-1.608-1.088 0-1.768.712-1.856 1.832h.648c.112-.896.544-1.272 1.208-1.272.648 0 1.024.384 1.024 1.024 0 .584-.304 1.104-.824 1.656l-2.272 2.392V15zm6.991.071c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM243.602 154.771l-.992 3.701.548.147.715-2.666 1.076 1.92c.482.858 1.031 1.469 1.711 1.651.95.255 1.727-.233 2-1.253.282-1.051-.23-1.892-1.289-2.267l-.168.626c.837.34 1.088.855.916 1.496-.168.626-.636.89-1.254.724-.564-.151-.988-.579-1.386-1.224l-1.723-2.814-.154-.041zm-1.879 6.734c-.365 1.36.508 2.43 2.115 2.861l.309.082c1.577.423 2.88-.081 3.244-1.441.362-1.352-.467-2.461-2.097-2.898l-.31-.083c-1.607-.43-2.907.157-3.261 1.479zm.556.149c.247-.92 1.13-1.313 2.529-.938l.309.083c1.36.364 1.984 1.128 1.733 2.063-.25.935-1.23 1.252-2.513.908l-.309-.082c-1.398-.375-2.008-1.068-1.749-2.034zM188.685 229.41l-3.369 1.826.271.5 2.426-1.316-.653 2.101c-.291.941-.357 1.759-.021 2.378.469.865 1.357 1.093 2.285.59.957-.519 1.215-1.469.759-2.495l-.57.309c.329.841.128 1.377-.456 1.694-.569.309-1.083.15-1.388-.412-.278-.514-.259-1.116-.065-1.849l.857-3.186-.076-.14zm-6.18 3.268c-1.238.672-1.414 2.041-.621 3.504l.153.281c.778 1.435 2.04 2.034 3.277 1.363 1.231-.667 1.465-2.032.66-3.516l-.152-.281c-.793-1.463-2.114-2.003-3.317-1.351zm.275.507c.837-.454 1.73-.083 2.42 1.19l.152.282c.671 1.237.546 2.215-.305 2.677-.851.461-1.755-.032-2.388-1.199l-.152-.281c-.69-1.273-.606-2.193.273-2.669zM83.243 236.09l-3.422-1.724-.256.507 2.465 1.242-2.099.662c-.938.298-1.647.711-1.964 1.34-.443.878-.123 1.738.82 2.213.971.49 1.899.16 2.481-.801l-.578-.292c-.503.75-1.058.892-1.651.593-.58-.291-.742-.804-.454-1.375.263-.522.768-.849 1.48-1.108l3.106-1.115.072-.142zm-6.21-3.21c-1.258-.633-2.484.004-3.233 1.49l-.144.285c-.734 1.458-.505 2.836.752 3.47 1.25.629 2.504.043 3.264-1.465l.144-.286c.748-1.486.438-2.878-.784-3.494zm-.26.515c.85.428 1.055 1.373.403 2.666l-.144.286c-.633 1.258-1.507 1.713-2.372 1.277-.864-.435-.976-1.459-.378-2.645l.144-.285c.651-1.294 1.454-1.749 2.347-1.299zM19.766 162.136l-.845-3.737-.555.125.61 2.692-1.846-1.198c-.827-.535-1.597-.82-2.283-.665-.96.217-1.42 1.01-1.188 2.04.24 1.061 1.085 1.568 2.197 1.406l-.143-.632c-.899.089-1.36-.25-1.507-.897-.143-.632.148-1.084.773-1.225.57-.129 1.143.053 1.797.438l2.834 1.689.156-.036zm-1.472-6.834c-.31-1.373-1.581-1.914-3.204-1.547l-.313.071c-1.591.36-2.51 1.412-2.2 2.785.31 1.366 1.56 1.961 3.206 1.588l.312-.07c1.623-.367 2.5-1.493 2.199-2.827zm-.562.127c.21.929-.39 1.688-1.802 2.007l-.312.071c-1.373.31-2.28-.075-2.494-1.019-.213-.944.506-1.681 1.801-1.974l.312-.071c1.412-.319 2.275.011 2.495.986zM36.376 64.413l2.323-3.048-.452-.344-1.673 2.195-.267-2.184c-.12-.977-.396-1.75-.956-2.177-.783-.596-1.686-.44-2.326.4-.66.865-.505 1.838.332 2.587l.393-.516c-.645-.632-.682-1.203-.28-1.732.393-.515.926-.581 1.435-.194.465.354.694.911.818 1.66l.526 3.256.127.097zm4.294-5.516c.853-1.12.452-2.442-.871-3.45l-.255-.194c-1.298-.99-2.695-1.018-3.548.102-.849 1.114-.502 2.454.84 3.477l.255.194c1.324 1.009 2.75.959 3.58-.13zm-.458-.35c-.577.758-1.544.786-2.696-.092l-.254-.194c-1.12-.853-1.407-1.796-.82-2.566.586-.77 1.613-.692 2.67.113l.254.194c1.151.877 1.452 1.75.846 2.545zM215.977 53.57l2.473 2.926.434-.366-1.781-2.108 2.19.212c.98.094 1.795-.008 2.332-.463.752-.635.795-1.55.113-2.357-.702-.831-1.685-.891-2.597-.235l.418.494c.757-.492 1.323-.405 1.751.102.419.495.368 1.03-.121 1.443-.446.377-1.039.48-1.796.44l-3.294-.192-.122.104zm4.457 5.386c.909 1.075 2.286.97 3.557-.105l.244-.206c1.247-1.054 1.577-2.411.668-3.487-.904-1.07-2.287-1.02-3.577.069l-.244.207c-1.271 1.074-1.531 2.477-.648 3.522zm.44-.372c-.614-.727-.432-1.677.674-2.612l.244-.206c1.075-.91 2.058-.986 2.683-.246s.326 1.724-.688 2.582l-.244.206c-1.106.935-2.023 1.04-2.669.276zM127.819 37.071c.968 0 1.968-.568 1.968-1.712 0-.736-.432-1.232-1.096-1.472.528-.232.88-.632.88-1.208 0-.896-.864-1.472-1.752-1.472-.88 0-1.76.56-1.76 1.488 0 .56.32.992.864 1.2-.608.216-1.08.712-1.08 1.48 0 1.136 1.04 1.696 1.976 1.696zm.024-3.424c-.584 0-1.08-.344-1.08-.944 0-.592.464-.952 1.056-.952.592 0 1.048.384 1.048.936 0 .608-.416.96-1.024.96zm-.024 2.856c-.664 0-1.264-.4-1.264-1.152 0-.76.6-1.152 1.28-1.152s1.24.384 1.24 1.136c0 .76-.552 1.168-1.256 1.168zm5.101.568c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM221.613 151.555c-.251.935.039 2.047 1.144 2.344.711.19 1.302-.099 1.705-.678.088.57.383 1.013.939 1.163.866.231 1.646-.454 1.876-1.312.228-.85-.086-1.845-.982-2.085-.541-.145-1.041.052-1.383.524-.051-.643-.408-1.227-1.15-1.426-1.097-.294-1.907.565-2.149 1.47zm3.301.909c.151-.564.612-.954 1.191-.799.572.153.8.695.646 1.266-.153.572-.642.913-1.175.77-.587-.157-.82-.65-.662-1.237zm-2.753-.762c.172-.642.714-1.118 1.44-.923.734.196.958.877.782 1.534-.176.657-.692 1.099-1.419.904-.734-.197-.985-.835-.803-1.515zm-1.869 4.78c-.364 1.36.509 2.43 2.116 2.861l.309.083c1.576.422 2.879-.082 3.244-1.442.362-1.352-.467-2.46-2.098-2.897l-.309-.083c-1.607-.431-2.908.157-3.262 1.478zm.557.149c.246-.92 1.13-1.312 2.528-.937l.31.082c1.36.365 1.983 1.128 1.733 2.063-.251.935-1.23 1.253-2.513.909l-.309-.083c-1.399-.375-2.008-1.068-1.749-2.034zM175.892 211.238c-.851.462-1.459 1.438-.914 2.443.351.647.967.877 1.665.772-.353.455-.472.975-.197 1.481.427.788 1.461.882 2.241.459.774-.419 1.281-1.331.838-2.147-.266-.492-.754-.719-1.331-.643.431-.48.61-1.141.244-1.816-.542-.998-1.723-.995-2.546-.549zm1.611 3.022c.514-.279 1.114-.213 1.4.315.282.52.046 1.058-.475 1.34-.52.282-1.104.162-1.367-.323-.29-.535-.092-1.043.442-1.332zm-1.34-2.523c.584-.316 1.302-.25 1.66.411.363.668.022 1.298-.576 1.623-.598.324-1.273.253-1.631-.408-.363-.668-.072-1.29.547-1.626zm-4.755 1.933c-1.238.671-1.414 2.04-.621 3.503l.152.282c.778 1.434 2.04 2.033 3.278 1.362 1.231-.667 1.465-2.032.66-3.516l-.152-.281c-.794-1.463-2.114-2.002-3.317-1.35zm.274.506c.837-.454 1.73-.082 2.42 1.19l.153.282c.671 1.238.546 2.215-.305 2.677-.851.461-1.755-.032-2.388-1.199l-.152-.281c-.691-1.273-.607-2.192.272-2.669zM90.864 215.214c-.864-.435-2.013-.378-2.528.644-.33.657-.168 1.295.317 1.808-.576-.031-1.07.168-1.33.683-.402.8.11 1.703.903 2.103.786.395 1.824.291 2.241-.538.252-.5.16-1.029-.231-1.46.64.081 1.284-.15 1.63-.836.511-1.014-.166-1.982-1.002-2.404zm-1.562 3.048c.522.262.81.793.54 1.329-.266.528-.842.641-1.371.375-.529-.267-.763-.815-.515-1.308.274-.543.803-.67 1.346-.396zm1.307-2.54c.593.298.949.926.61 1.597-.342.679-1.054.759-1.661.453s-.935-.901-.596-1.572c.341-.679 1.018-.795 1.647-.478zm-4.3-2.802c-1.258-.634-2.483.003-3.232 1.489l-.144.286c-.734 1.457-.506 2.835.752 3.469 1.25.63 2.504.043 3.263-1.464l.144-.286c.749-1.486.438-2.879-.784-3.494zm-.26.514c.85.428 1.055 1.373.404 2.667l-.144.285c-.634 1.258-1.508 1.713-2.373 1.278-.864-.436-.975-1.459-.378-2.645l.144-.286c.651-1.293 1.454-1.749 2.347-1.299zM40.724 154.746c-.214-.944-.988-1.794-2.104-1.542-.718.163-1.107.693-1.194 1.394-.343-.464-.81-.719-1.373-.592-.873.198-1.245 1.168-1.049 2.034.194.858.935 1.593 1.84 1.388.546-.123.897-.531.98-1.107.345.545.932.896 1.681.726 1.108-.25 1.425-1.388 1.219-2.301zm-3.345.732c.129.57-.097 1.129-.683 1.262-.577.13-1.03-.243-1.161-.82-.13-.578.143-1.107.682-1.229.593-.134 1.028.194 1.162.787zm2.79-.607c.147.648-.11 1.321-.844 1.487-.741.168-1.256-.331-1.406-.994-.15-.663.101-1.294.835-1.46.74-.168 1.26.281 1.416.967zm-.57-5.101c-.311-1.373-1.582-1.914-3.205-1.547l-.312.071c-1.592.36-2.51 1.412-2.2 2.786.31 1.365 1.56 1.96 3.206 1.588l.312-.071c1.623-.367 2.5-1.492 2.198-2.827zm-.562.128c.21.928-.39 1.687-1.802 2.006l-.312.071c-1.373.311-2.28-.075-2.494-1.019-.214-.944.505-1.681 1.8-1.974l.313-.07c1.412-.32 2.274.01 2.495.986zM55.5 75.734c.586-.77.74-1.91-.17-2.603-.585-.446-1.242-.403-1.835-.02.136-.56.03-1.083-.427-1.432-.713-.543-1.695-.205-2.233.501-.533.7-.621 1.74.117 2.302.445.34.983.347 1.478.04-.197.614-.088 1.29.523 1.756.903.688 1.979.2 2.546-.544zm-2.71-2.094c-.354.464-.928.65-1.405.287-.471-.359-.476-.946-.117-1.417.358-.471.94-.601 1.38-.266.483.368.51.912.142 1.396zm2.258 1.75c-.403.528-1.085.763-1.683.307-.604-.46-.553-1.175-.14-1.716.412-.541 1.056-.754 1.655-.298.604.46.594 1.147.167 1.707zm3.543-3.714c.853-1.12.452-2.441-.872-3.45l-.254-.193c-1.298-.99-2.695-1.018-3.548.102-.849 1.114-.502 2.454.84 3.477l.255.194c1.324 1.008 2.75.959 3.579-.13zm-.458-.349c-.577.758-1.544.785-2.696-.092l-.254-.194c-1.12-.853-1.407-1.796-.82-2.566.586-.77 1.612-.692 2.669.113l.254.194c1.152.877 1.453 1.75.847 2.545zM200.787 69.79c.625.74 1.704 1.137 2.578.399.562-.475.662-1.125.417-1.787.518.253 1.051.264 1.49-.108.685-.578.567-1.61-.006-2.288-.568-.672-1.564-.983-2.273-.384-.427.361-.551.885-.358 1.434-.558-.325-1.241-.365-1.828.13-.868.734-.624 1.89-.02 2.605zm2.631-2.191c-.377-.446-.435-1.047.024-1.434.452-.383 1.026-.26 1.408.192.383.452.384 1.048-.038 1.404-.464.393-1.002.302-1.394-.162zm-2.197 1.825c-.429-.507-.51-1.224.064-1.709.58-.49 1.267-.285 1.706.234.439.52.507 1.195-.067 1.68-.581.491-1.249.333-1.703-.205zm2.859 4.263c.909 1.075 2.286.97 3.556-.105l.245-.206c1.246-1.053 1.576-2.411.667-3.486-.903-1.07-2.287-1.021-3.576.068l-.245.207c-1.271 1.074-1.53 2.477-.647 3.522zm.44-.372c-.615-.727-.433-1.677.673-2.611l.245-.207c1.075-.909 2.058-.985 2.683-.246.624.74.326 1.725-.688 2.582l-.245.207c-1.106.934-2.023 1.039-2.668.275zM122.259 61.071c1.464 0 2.48-.88 2.48-2.536v-.424h-2.352v.576h1.672c-.024 1.016-.56 1.824-1.8 1.824-1.344 0-2.048-.928-2.048-2.344v-.064c0-1.4.752-2.36 2.064-2.36.832 0 1.456.352 1.616 1.264h.696c-.176-1.288-1.192-1.816-2.328-1.816-1.64 0-2.768 1.248-2.768 2.92v.064c0 1.672 1.008 2.896 2.768 2.896zm3.597-.072h.664v-2.296c0-1.032.536-1.296 1.376-1.336v-.624c-.752.024-1.112.352-1.376.824v-.752h-.664V61zm4.602.072c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zm5.859 2.568c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zM137.84 61h.664v-2.536c0-.752.552-1.144 1.168-1.144.672 0 .984.328.984 1.064V61h.664v-2.568c0-1.216-.608-1.688-1.472-1.688-.688 0-1.152.344-1.344.736v-.664h-.664V61zM205.843 129.705l2.047.548-.277 1.036c-.201.749-.573 1.147-1.322.946l-.031-.008c-.68-.183-.906-.699-.695-1.487l.278-1.035zm-2.757-1.46l-.18.673 2.403.644-.227.85-2.845 1.002-.201.749 2.904-1.036c-.057.797.228 1.528 1.14 1.772l.031.008c1.105.296 1.772-.461 2.055-1.52l.445-1.661-5.525-1.481zm-1.77 6.328c-.244.912.001 1.698.775 2.055l.172-.642c-.449-.211-.583-.636-.416-1.262.222-.827.85-1.131 1.778-.915l-.816 3.044.209.056c1.445.387 2.245-.342 2.495-1.277.298-1.113-.342-2.121-1.563-2.449l-.062-.016c-1.244-.333-2.265.263-2.572 1.406zm2.82-.602c.69.3 1.02.861.844 1.518-.178.664-.626 1.008-1.477.846l.633-2.364zm-3.521 3.498l-.172.642 3.5.938-.265.989.541.145.265-.99.727.195c.409.11.652.349.542.758a1.124 1.124 0 01-.181.399l.541.145c.079-.111.123-.215.179-.424.214-.796-.16-1.318-.979-1.538l-.657-.176.155-.579-.54-.145-.156.579-3.5-.938zm-.653 2.435l-.174.649 5.974 1.6.174-.649-5.974-1.6zm-1.038 3.596c-.244.912.001 1.698.775 2.055l.172-.641c-.449-.212-.583-.637-.416-1.263.222-.827.85-1.131 1.778-.915l-.816 3.045.209.055c1.445.388 2.245-.342 2.495-1.277.298-1.113-.342-2.121-1.563-2.448l-.062-.017c-1.244-.333-2.265.263-2.572 1.406zm2.82-.602c.69.301 1.02.861.844 1.518-.178.665-.626 1.008-1.477.846l.633-2.364zm-3.338 2.813l-.184.688 1.332 1.55-1.922.652-.203.758 2.52-.907 1.559 1.851.186-.696-1.205-1.375 1.733-.595.201-.75-2.325.826-1.692-2.002zm-1.77 6.607l-.507 1.893c-.296 1.105.015 1.951 1.059 2.23l.031.009c.718.192 1.208.001 1.617-.751.047.691.441 1.012.943 1.147l.031.008c1.09.292 1.631-.366 1.906-1.394l.445-1.661-5.525-1.481zm2.938 1.491l1.886.506-.265.989c-.207.772-.56 1.067-1.186.9l-.031-.009c-.68-.182-.89-.57-.673-1.381l.269-1.005zm-2.589-.693l2.064.553-.303 1.128c-.238.888-.664 1.18-1.344.998l-.031-.008c-.672-.18-.928-.647-.713-1.45l.327-1.221zm-1.629 3.978l-.174.649 5.974 1.601.174-.649-5.974-1.601zm-.961 3.311c-.174.649.038 1.186.367 1.473l-.642-.172-.171.642 4.041 1.083.172-.642-2.45-.656c-.726-.195-.96-.837-.807-1.409.17-.634.568-.85 1.279-.66l2.527.678.171-.642-2.557-.685c-1.113-.298-1.715.186-1.93.99zm-1.306 4.874c-.245.912 0 1.698.774 2.055l.172-.642c-.449-.211-.583-.636-.415-1.262.221-.827.849-1.131 1.777-.915l-.816 3.044.209.056c1.445.387 2.245-.343 2.496-1.278.298-1.112-.343-2.121-1.564-2.448l-.062-.016c-1.244-.334-2.265.262-2.571 1.406zm2.82-.603c.689.301 1.019.862.843 1.519-.178.664-.626 1.008-1.477.846l.634-2.365zM172.053 186.101l-.611.332 1.109 2.046-.816.442c-.956.519-1.533 1.369-.953 2.438l.015.028c.568 1.048 1.592 1.039 2.555.516l1.428-.774-2.727-5.028zm.761 2.863l1.087 2.005-.858.465c-.682.37-1.249.331-1.634-.379l-.015-.028c-.351-.647-.155-1.209.562-1.597l.858-.466zm-6.084-.059c-.591.32-.835.844-.817 1.28l-.316-.584-.584.317 1.994 3.678.584-.316-1.209-2.23c-.358-.661-.053-1.272.468-1.555.577-.312 1.007-.173 1.358.474l1.247 2.3.584-.316-1.263-2.328c-.549-1.013-1.315-1.116-2.046-.72zm-2.897 1.653l-.583.316 1.094 2.018c.492.908.147 1.395-.573 1.831l.298.548c.649-.379.809-.839.817-1.38l.358.661.584-.316-1.995-3.678zm-4.187 2.816c.717-.389 1.45-.213 1.961.73l.03.056c.511.942.235 1.675-.447 2.044-.619.336-1.384.15-1.888-.778l-.03-.056c-.485-.894-.358-1.599.374-1.996zm.849-2.663l-.583.317 1.021 1.885c-.409-.252-1.002-.322-1.607.006-1.012.549-1.254 1.681-.644 2.807l.031.056c.621 1.146 1.713 1.464 2.676.942.535-.29.859-.884.875-1.357l.336.619.584-.317-2.689-4.958zm-3.729 3.678l-.591.321 2.948 5.436.591-.32-2.948-5.437zm-3.325 1.721c-.83.45-1.232 1.169-.958 1.976l.584-.317c-.155-.471.061-.861.63-1.17.753-.408 1.405-.161 1.887.661l-2.771 1.502.103.19c.713 1.315 1.793 1.394 2.644.932 1.013-.549 1.304-1.707.702-2.819l-.031-.056c-.614-1.132-1.749-1.463-2.79-.899zm2.378 1.632c.256.708.076 1.333-.522 1.657-.604.328-1.162.239-1.63-.49l2.152-1.167zM105.844 195.968l-.621-.313-1.152 2.286-1.843-.928-.256.507 1.843.929-.91 1.807-2.365-1.191-.256.507 2.987 1.505 2.573-5.109zm-4.95-2.574c-.6-.302-1.17-.204-1.517.06l.299-.593-.593-.299-1.883 3.737.593.299 1.141-2.265c.339-.672 1.015-.77 1.544-.504.586.295.717.729.386 1.386l-1.177 2.336.593.299 1.191-2.365c.518-1.029.166-1.717-.577-2.091zm-3.01-1.436l-.593-.298-1.033 2.05c-.464.922-1.061.916-1.83.574l-.28.558c.682.316 1.151.185 1.6-.117l-.34.671.594.299 1.882-3.737zm-2.402-2.84l-.6-.302-4.602 3.997.607.306 2.386-2.158-.206 3.255.635.321.224-4.089 1.556-1.33zM68.194 167.733l-.14-.617-4.703-.306 4.122-2.261-.14-.624-5.908-.19.143.632 4.777.125-4.221 2.333.11.484 4.798.293-4.246 2.149.157.695 5.25-2.713zm-2.035-6.926c.13.57-.09.832-.511.928-.601.136-.94-.419-1.125-1.239l-.127-.561.507-.115c.632-.143 1.101.3 1.256.987zm.53-.054c-.136-.601-.422-.922-.873-1.14l.515-.116-.147-.648-2.692.609c-1.139.258-1.298 1.04-1.122 1.82.178.789.69 1.452 1.637 1.328l-.146-.648c-.514.051-.818-.208-.945-.77-.141-.624.075-.936.723-1.082l.296-.067.133.585c.236 1.045.782 1.972 1.726 1.758.835-.188 1.066-.872.895-1.629zm-.792-3.176l-.147-.648-2.24.507c-1.006.228-1.382-.237-1.606-1.047l-.609.137c.19.728.589 1.007 1.108 1.161l-.734.165.147.648 4.08-.923zm-.664-2.934l-.147-.647-2.496.564c-.734.166-1.216-.299-1.336-.829-.127-.562.1-.933.818-1.096l2.575-.582-.146-.648-2.497.565c-.734.166-1.216-.299-1.336-.83-.127-.562.1-.933.818-1.095l2.575-.583-.146-.647-2.529.571c-1.186.269-1.478 1.007-1.312 1.741.115.507.487 1.063 1.08 1.224-.498.334-.612.844-.494 1.366.132.586.545.96.97 1.061l-.624.141.146.647 4.081-.923zm-5.203-9.222l-2.067.468-.237-1.045c-.171-.757-.027-1.282.73-1.453l.03-.007c.688-.156 1.128.196 1.308.992l.236 1.045zm3.119.009l-.154-.679-2.426.549-.194-.859 2.05-2.211-.17-.756-2.088 2.268c-.321-.731-.913-1.245-1.834-1.037l-.03.007c-1.117.252-1.354 1.233-1.112 2.302l.379 1.678 5.579-1.262zm-1.38-6.425c-.207-.92-.79-1.502-1.641-1.457l.146.647c.496-.021.813.292.956.924.189.835-.226 1.397-1.147 1.638l-.696-3.075-.21.048c-1.46.33-1.828 1.348-1.614 2.293.254 1.123 1.29 1.717 2.523 1.438l.063-.014c1.256-.284 1.882-1.287 1.62-2.442zm-2.215 1.847c-.75.054-1.303-.288-1.453-.951-.152-.671.085-1.184.913-1.437l.54 2.388zm.688-6.097c.156.686-.21 1.352-1.24 1.585l-.063.014c-.99.224-1.67-.131-1.853-.943-.18-.796.198-1.406 1.244-1.643l.062-.014c1.046-.236 1.68.244 1.85 1.001zm.555-.052c-.134-.593-.638-1.078-1.089-1.222l.703-.159-.147-.647-6.032 1.364.147.648 2.606-.59c-.345.324-.577.82-.424 1.499.254 1.123 1.313 1.704 2.561 1.422l.063-.014c1.271-.288 1.853-1.232 1.612-2.301zm-1.764-7.8c-.283-1.248-1.116-1.995-2.448-1.899l.143.633c.937-.065 1.54.463 1.747 1.376.272 1.202-.424 2.114-1.844 2.435l-.063.014c-1.404.318-2.476-.252-2.737-1.407-.216-.952.11-1.542.929-1.875l-.152-.671c-1.183.391-1.577 1.513-1.314 2.676.342 1.514 1.787 2.352 3.441 1.978l.062-.015c1.717-.388 2.6-1.629 2.236-3.245zM71.376 94.379l.422-.554-4.55-3.467-.393.516-.041 1.638.515.393.044-1.576 4.003 3.05zm2.464-3.116c.718-.942.735-1.994-.092-2.625-.63-.48-1.267-.422-1.815.006.144-.545.07-1.083-.445-1.476-.63-.48-1.585-.413-2.245.452-.659.866-.518 1.908.177 2.488l.368-.484c-.472-.45-.524-1.093-.093-1.66.422-.553.961-.575 1.394-.245.496.378.578.853.127 1.444l-.243.319.465.353.262-.343c.49-.643 1.03-.733 1.616-.287.535.407.631.993.088 1.706-.548.72-1.209.729-1.788.367l-.388.51c.82.574 1.875.443 2.612-.525zm2.047-2.806l.432-.566-3.174-5.114-.076-.058-2.284 2.997.445.34 1.76-2.31 2.897 4.711zm3.783-4.846c.776-1.018.813-2.136-.115-3.095l-.393.515c.65.677.633 1.479.066 2.223-.747.98-1.893 1.032-3.05.15l-.052-.039c-1.145-.873-1.397-2.06-.68-3.002.592-.776 1.254-.906 2.035-.492l.417-.547c-1.06-.656-2.173-.237-2.895.71-.94 1.235-.656 2.88.693 3.909l.051.038c1.4 1.067 2.92.947 3.923-.37zM179.867 82.219c.765.904 1.789 1.149 2.583.478.605-.512.687-1.146.387-1.773.501.258 1.042.303 1.537-.115.605-.511.747-1.459.045-2.29-.703-.83-1.751-.919-2.467-.366l.392.465c.541-.364 1.181-.276 1.641.268.449.531.353 1.063-.062 1.414-.477.403-.957.38-1.438-.189l-.258-.306-.446.377.279.33c.522.617.493 1.166-.07 1.64-.513.435-1.106.402-1.684-.283-.584-.69-.45-1.337.028-1.825l-.413-.489c-.738.676-.838 1.735-.054 2.664zm2.646 3.018l.449.532 4.369-3.692-.418-.495-1.591-.395-.495.419 1.529.383-3.843 3.248zm2.062 2.44l.449.532 4.369-3.692-.418-.495-1.59-.394-.495.418 1.529.384-3.844 3.248zm3.02 3.685c.826.978 1.91 1.257 3.047.557l-.418-.495c-.802.49-1.581.299-2.185-.416-.795-.94-.598-2.071.514-3.01l.049-.042c1.1-.93 2.314-.919 3.078-.014.63.745.613 1.42.04 2.092l.444.526c.87-.892.702-2.07-.068-2.98-1.002-1.186-2.67-1.264-3.965-.169l-.049.041c-1.344 1.136-1.556 2.646-.487 3.91z",
140
+ fill: "#fff"
141
+ }));
142
+ };
143
+
144
+ var DiagramLight = function DiagramLight(props) {
49
145
  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
50
146
  viewBox: "0 0 259 259",
51
147
  fill: "none"
@@ -155,6 +251,7 @@ var cn = (0, _uiHelpers.cnCreate)('colors');
155
251
  var Colors = function Colors() {
156
252
  var _React$useState = React.useState(getThemeFromLocalStorage()),
157
253
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
254
+ currentTheme = _React$useState2[0],
158
255
  setCurrentTheme = _React$useState2[1];
159
256
 
160
257
  var _React$useState3 = React.useState(false),
@@ -304,7 +401,9 @@ var Colors = function Colors() {
304
401
  }, /*#__PURE__*/React.createElement(_Header["default"], {
305
402
  as: "h1",
306
403
  className: cn('title')
307
- }, "\u0426\u0432\u0435\u0442\u0430"), /*#__PURE__*/React.createElement(_Paragraph["default"], null, "\u041F\u0430\u043B\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u0430\u044F \u0432 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u041C\u0435\u0433\u0430\u0424\u043E\u043D"), /*#__PURE__*/React.createElement("div", {
404
+ }, "Colors"), /*#__PURE__*/React.createElement(_Paragraph["default"], {
405
+ className: cn('title-note')
406
+ }, "\u041F\u0430\u043B\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u0430\u044F \u0432 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u041C\u0435\u0433\u0430\u0424\u043E\u043D"), /*#__PURE__*/React.createElement("div", {
308
407
  className: cn('inner')
309
408
  }, /*#__PURE__*/React.createElement("div", {
310
409
  className: cn('container')
@@ -337,9 +436,9 @@ var Colors = function Colors() {
337
436
  className: cn('group-title')
338
437
  }, "Soft"), /*#__PURE__*/React.createElement("div", {
339
438
  className: cn('group')
340
- }, /*#__PURE__*/React.createElement(Diagram, {
439
+ }, /*#__PURE__*/React.createElement("div", {
341
440
  className: cn('diagram')
342
- }), renderSoftColors()))));
441
+ }, currentTheme === 'light' && /*#__PURE__*/React.createElement(DiagramLight, null), currentTheme === 'dark' && /*#__PURE__*/React.createElement(DiagramDark, null)), renderSoftColors()))));
343
442
  };
344
443
 
345
444
  var _default = Colors;
package/dist/lib/colors/colorsData.js CHANGED
@@ -21,18 +21,19 @@ var colors = {
21
21
  colors: [{
22
22
  name: 'Base',
23
23
  code: 'base',
24
- border: '1px solid var(--spbSky1)'
24
+ border: '1px solid var(--spbSky2)'
25
25
  }, {
26
26
  name: 'Content',
27
27
  code: 'content',
28
- border: '1px solid var(--spbSky1)'
28
+ border: '1px solid var(--spbSky2)'
29
29
  }, {
30
30
  name: 'Spb Sky 0',
31
31
  code: 'spbSky0',
32
- border: '2px solid var(--spbSky1)'
32
+ border: '1px solid var(--spbSky2)'
33
33
  }, {
34
34
  name: 'Spb Sky 1',
35
- code: 'spbSky1'
35
+ code: 'spbSky1',
36
+ border: '1px solid var(--spbSky2)'
36
37
  }, {
37
38
  name: 'Spb Sky 2',
38
39
  code: 'spbSky2'
@@ -73,7 +74,8 @@ var colors = {
73
74
  code: 'systemBlue'
74
75
  }, {
75
76
  name: 'Background',
76
- code: 'background'
77
+ code: 'background',
78
+ border: '1px solid var(--spbSky2)'
77
79
  }, {
78
80
  name: 'Button Hov. G.',
79
81
  code: 'buttonHoverGreen'
@@ -112,11 +114,11 @@ var colors = {
112
114
  colors: [{
113
115
  name: 'STC White',
114
116
  code: 'stcWhite',
115
- border: '1px solid var(--spbSky1)'
117
+ border: '1px solid var(--spbSky2)'
116
118
  }, {
117
119
  name: 'STC Black',
118
120
  code: 'stcBlack',
119
- border: '1px solid var(--spbSky1)'
121
+ border: '1px solid var(--spbSky2)'
120
122
  }]
121
123
  }
122
124
  },
@@ -127,35 +129,35 @@ var colors = {
127
129
  colors: [{
128
130
  name: 'STC White 5%',
129
131
  code: 'stcWhite5',
130
- border: '1px solid var(--spbSky1)'
132
+ border: '1px solid var(--spbSky2)'
131
133
  }, {
132
134
  name: 'STC White 10%',
133
135
  code: 'stcWhite10',
134
- border: '1px solid var(--spbSky1)'
136
+ border: '1px solid var(--spbSky2)'
135
137
  }, {
136
138
  name: 'STC White 20%',
137
139
  code: 'stcWhite20',
138
- border: '1px solid var(--spbSky1)'
140
+ border: '1px solid var(--spbSky2)'
139
141
  }, {
140
142
  name: 'STC White 50%',
141
143
  code: 'stcWhite50',
142
- border: '1px solid var(--spbSky1)'
144
+ border: '1px solid var(--spbSky2)'
143
145
  }, {
144
146
  name: 'STC Black 5%',
145
147
  code: 'stcBlack5',
146
- border: '1px solid var(--spbSky1)'
148
+ border: '1px solid var(--spbSky2)'
147
149
  }, {
148
150
  name: 'STC Black 10%',
149
151
  code: 'stcBlack10',
150
- border: '1px solid var(--spbSky1)'
152
+ border: '1px solid var(--spbSky2)'
151
153
  }, {
152
154
  name: 'STC Black 20%',
153
155
  code: 'stcBlack20',
154
- border: '1px solid var(--spbSky1)'
156
+ border: '1px solid var(--spbSky2)'
155
157
  }, {
156
158
  name: 'STC Black 50%',
157
159
  code: 'stcBlack50',
158
- border: '1px solid var(--spbSky1)'
160
+ border: '1px solid var(--spbSky2)'
159
161
  }]
160
162
  }
161
163
  },
@@ -166,11 +168,11 @@ var colors = {
166
168
  colors: [{
167
169
  name: 'Brand Green 80',
168
170
  code: 'brandGreen80',
169
- parentColor: 'green'
171
+ parentColor: 'brandGreen'
170
172
  }, {
171
173
  name: 'Brand Purple 80',
172
174
  code: 'brandPurple80',
173
- parentColor: 'purple'
175
+ parentColor: 'brandPurple'
174
176
  }, {
175
177
  name: 'Warm Red C 80',
176
178
  code: 'warmRedC80',
@@ -194,11 +196,11 @@ var colors = {
194
196
  }, {
195
197
  name: 'Brand Green 20',
196
198
  code: 'brandGreen20',
197
- parentColor: 'green'
199
+ parentColor: 'brandGreen'
198
200
  }, {
199
201
  name: 'Brand Purple 20',
200
202
  code: 'brandPurple20',
201
- parentColor: 'purple'
203
+ parentColor: 'brandPurple'
202
204
  }, {
203
205
  name: 'Warm Red C 20',
204
206
  code: 'warmRedC20',
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css CHANGED
@@ -10,7 +10,7 @@
10
10
  width: -moz-fit-content;
11
11
  width: fit-content;
12
12
  border-radius: 8px;
13
- color: var(--base);
13
+ color: var(--stcWhite);
14
14
  }
15
15
  .mfui-promo-badge_type_hit {
16
16
  background-color: var(--warmRedC);
package/dist/lib/components/Logo/Logo.css CHANGED
@@ -23,6 +23,11 @@
23
23
  display: block;
24
24
  width: 100%;
25
25
  }
26
+ .mfui-logo__img {
27
+ display: -webkit-box;
28
+ display: -ms-flexbox;
29
+ display: flex;
30
+ }
26
31
  .mfui-logo_view_horizontal .mfui-logo__img {
27
32
  min-height: 23px;
28
33
  }
package/dist/lib/components/Notification/Notification.css CHANGED
@@ -8,7 +8,7 @@ h5 {
8
8
  .mfui-notification {
9
9
  position: relative;
10
10
  padding: 16px 12px;
11
- background-color: var(--background);
11
+ background-color: var(--base);
12
12
  }
13
13
  @media screen and (min-width: 768px) {
14
14
  .mfui-notification {
@@ -187,7 +187,7 @@ h5 {
187
187
  fill: var(--311C);
188
188
  }
189
189
  .mfui-notification_colored .mfui-notification__icon-container {
190
- background-color: var(--stcWhite);
190
+ background-color: var(--base);
191
191
  }
192
192
  .mfui-notification_colored.mfui-notification_type_info {
193
193
  background-color: var(--311C20);
@@ -204,7 +204,7 @@ h5 {
204
204
  .mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,
205
205
  .mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,
206
206
  .mfui-notification_colored.mfui-notification_type_success .mfui-notification__text {
207
- color: var(--stcBlack);
207
+ color: var(--content);
208
208
  }
209
209
  .mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
210
210
  .mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link,
package/dist/lib/components/Search/Search.js CHANGED
@@ -95,6 +95,8 @@ var Search = function Search(_ref) {
95
95
  return onChange && onChange(inputValue);
96
96
  }, changeDelay));
97
97
 
98
+ var highlightedItem = _react["default"].useRef(null);
99
+
98
100
  var handleChange = _react["default"].useCallback(function (e) {
99
101
  var _e$target$value = e.target.value,
100
102
  inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -188,6 +190,17 @@ var Search = function Search(_ref) {
188
190
  }
189
191
  }, [disabled, isFocused]);
190
192
 
193
+ _react["default"].useEffect(function () {
194
+ var _a, _b;
195
+
196
+ if (activeIndex !== -1) {
197
+ (_b = (_a = highlightedItem.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
198
+ behavior: 'smooth',
199
+ block: 'nearest'
200
+ });
201
+ }
202
+ }, [activeIndex, items]);
203
+
191
204
  var highlightString = function highlightString(title) {
192
205
  var query = searchQuery.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
193
206
  return "\\".concat(w);
@@ -238,6 +251,7 @@ var Search = function Search(_ref) {
238
251
  var itemValue = _ref2.value,
239
252
  searchView = _ref2.searchView;
240
253
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
254
+ ref: activeIndex === i ? highlightedItem : null,
241
255
  className: cn('list-item', {
242
256
  active: activeIndex === i
243
257
  }),
package/dist/lib/components/Select/Select.js CHANGED
@@ -140,29 +140,12 @@ var Select = function Select(_ref) {
140
140
  }, [onClosed, isOpened]);
141
141
 
142
142
  var scrollList = function scrollList(itemIndex) {
143
- if (!itemsNodeList.current.length) {
144
- return;
145
- }
146
-
147
- var wrapper = itemWrapperNode.current;
148
- var item = itemsNodeList.current[itemIndex];
149
-
150
- if (!item || !wrapper) {
151
- return;
152
- }
143
+ var _a, _b;
153
144
 
154
- var wrapperScroll = wrapper === null || wrapper === void 0 ? void 0 : wrapper.scrollTop;
155
- var wrapperHeight = wrapper === null || wrapper === void 0 ? void 0 : wrapper.offsetHeight;
156
- var itemOffset = item.offsetTop;
157
- var itemHeight = item.offsetHeight;
158
-
159
- if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
160
- wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
161
- }
162
-
163
- if (itemOffset < wrapperScroll) {
164
- wrapper.scrollTop = itemOffset;
165
- }
145
+ (_b = (_a = itemsNodeList.current[itemIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
146
+ behavior: 'smooth',
147
+ block: 'nearest'
148
+ });
166
149
  };
167
150
 
168
151
  (0, React.useEffect)(function () {