@homecode/ui 4.20.4 → 4.21.0

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -19,11 +19,11 @@ import '../Label/Label.styl.js';
 import { Popup } from '../Popup/Popup.js';
 import '../RequiredStar/RequiredStar.styl.js';
 import '../Select/Select.styl.js';
-import 'justorm/react';
-import 'lodash.omit';
 import 'compareq';
 import 'lodash.pick';
 import '../Scroll/Scroll.styl.js';
+import 'justorm/react';
+import 'lodash.omit';
 import 'nanoid';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
@@ -72,7 +72,7 @@ function Autocomplete(props) {
     // @ts-ignore
     const inputRef = useRef(null);
     const isOpen = options.length > 0;
-    const classes = cn(S.root, className);
+    const classes = cn(S.root, className, popupProps.className);
     const handleFocus = (e) => {
         isFocusedRef.current = true;
         inputProps?.onFocus?.(e);

package/dist/esm/src/components/Icon/icons/brain.svg.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgBrain = function SvgBrain(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 604,
+    height: 618.667,
+    fill: "currentColor",
+    viewBox: "0 0 453 464"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M175.9 65.5c-10.3 3.3-18.8 11.3-22 20.7l-1.8 5.3-4.5-.3c-15.5-1.2-31.1 8.2-38 22.8-2.5 5.4-3.2 8-3.4 15.1l-.4 8.6-4.9 3.8c-9 6.8-15.7 19.7-17.4 33.5-1.1 9.1 2.3 21.7 8.5 31.7 1.2 1.9 1.1 2.4-1.9 4.9C77.6 222 70 238.2 70 254c0 17.5 10.4 36.7 25 46 4.9 3.2 5 3.3 5 8.4.1 16.7 10.9 33.9 26.1 41.3 3.5 1.7 7.2 3.4 8.1 3.7s2.9 3 4.3 6c7.6 16 24.7 25.8 42.5 24.3 11.9-1 23.1-6.8 29.3-15.2 1.7-2.4 3.4-4.4 3.7-4.4.3-.1 1.5 1.5 2.7 3.4 3.2 4.9 11.3 11 18 13.5 21.2 8 45.9-1.8 54.4-21.4 2.1-4.9 2.9-5.7 6.8-7.1 17.6-6 32.1-26 32.1-44.1v-5.3l5.5-3.7c7.3-4.8 14.6-13.1 18.5-21 10.6-21.5 6.5-46-10.5-63.1-6.5-6.5-7-7.3-5.7-9 .8-1 2.8-4.7 4.5-8.2 2.4-5.2 3.1-8 3.5-15.5.8-16.8-3-26.9-14.5-38.5l-7.4-7.4-.2-8.1c-.3-10.8-4.1-19-12.7-26.9-7.6-7.1-14.7-9.9-25.4-10.2l-7.9-.2-1.5-4.4c-3-9-9.4-15.8-19-20.2-3.7-1.7-6.6-2.1-13.7-2.2-8.3 0-9.5.3-15.3 3.4-3.4 1.9-7.6 5-9.3 6.9l-3.1 3.5-2.9-3.6c-1.6-2-5.9-5-9.5-6.8-7.8-3.9-18-4.8-25.5-2.4m18.9 13c4.7 2 7.9 5 10.5 10 1.8 3.4 2.2 6.2 2.5 18.2l.4 14.3h-5c-4.1 0-5.2-.4-5.7-1.9-1-3.1-8-8.9-12.5-10.2-3.3-1-5.1-1-8.8 0-9.4 2.5-14.2 8.7-14.2 18.3 0 10.7 7.9 18.3 18.7 18.2 6.3-.1 10.7-2.6 14.8-8.1 2.8-3.9 3.4-4.2 7.8-4.2l4.7-.1v33h-37.6l-3.1-4.3c-3.4-4.8-8.6-7.7-15.1-8.5-4.2-.5-4.4-.7-8.8-8.2-2.4-4.3-5.2-8.4-6.1-9.2-.9-.7-5.2-1.5-10.2-1.8l-8.6-.5.2-5.2c.4-9.1 6-17.5 14.6-21.9 4.8-2.5 13.6-2.9 20-.9 6.2 1.9 9.4 1.1 10.1-2.8.2-1.2.9-4.9 1.5-8.2 2-10.7 9.8-17.5 20.4-17.5 3.2 0 7.4.7 9.5 1.5m56 0c4.7 2 7.9 5 10.3 9.7 3 5.8 2.5 8.9-1.9 11.9-3.8 2.6-10.2 11.1-10.2 13.4 0 .7.9 2.4 2.1 3.9 3.2 4 6.1 3.4 11.1-2.5 5.6-6.7 11.3-10 18.5-10.6 7.5-.7 12.9.8 18.6 5.2 9.1 7 12.6 20.3 7.9 30.7-1.8 4.2-8.5 11.8-10.3 11.8-.5 0-1.6 1.1-2.5 2.5-1.4 2.1-1.4 3-.4 5.5 2.7 6.5 9.5 4.6 18.1-4.8 4.9-5.3 5-5.4 7.4-3.8 3.7 2.4 9.1 11.3 11.1 18 2.8 10 .7 21.8-5.6 30.6-1.7 2.5-2.5 2.8-4 2-1-.6-3.5-1-5.4-1-2.7 0-4 .6-5.2 2.6-2.9 4.4-1 7.3 6.8 10.4 13.3 5.4 22 14.4 25.9 26.9 6.3 20.3-3.3 42.2-22.6 51.7-5.7 2.8-6.6 2.9-19.6 2.9-14.9 0-16.9.6-16.9 5.5 0 1.5.8 3.4 1.8 4.3 2.7 2.5 12.6 4 21.6 3.3l7.9-.6-.6 4.9c-1.1 9.2-7.2 18.6-15.5 24-7.4 4.7-16.6 6.7-24.9 5.3-8.4-1.4-11.3-.1-11.3 5.3 0 4.2 2.6 6.2 9.2 7.1 2.6.4 4.8 1 4.8 1.4 0 2.1-9 10.6-13.5 12.6-6.3 3-16.7 3.2-23.9.7-6.7-2.4-13.8-9-16.7-15.5l-2.4-5.3-.3-49.5c-.3-54-.2-53-6-53-5 0-6.2 2.4-6.2 12.2v8.8h-19.5l-3.7-6.5-3.7-6.6 1.9-3.2c3.8-6.2 1.9-18-3.6-22.8-3.4-3-8.2-4.9-12.3-4.9-3.9 0-4 0-9-8.9-2.8-4.9-5.8-9.2-6.7-9.5S140 204 128 204h-21.9l-2.5-3.3c-5.3-7-7.1-12.5-7.1-22.2 0-7.5.5-9.9 2.6-14.5 3-6.5 7.6-12 12.4-15 2.8-1.7 4.7-2 11.1-1.8l7.8.3 3.4 5.8 3.4 5.9-2.1 4.8c-2.6 6-2.6 10.2-.2 15.5 6.2 13.8 24.3 15.2 32.7 2.5l2.7-4H208v10.2c0 8 .3 10.5 1.7 12 2 2.2 6.1 2.3 8.5.1 1.7-1.5 1.8-4.5 1.8-52.5 0-33.4.4-52.4 1.1-55.2 1.4-5.6 6.2-11.4 11.3-13.7 5-2.3 13.4-2.4 18.4-.4m-66.4 44.1c.9.8 1.6 2.8 1.6 4.4 0 3.6-2.4 6-6 6-3 0-6-3-6-6 0-5 6.9-7.9 10.4-4.4m-28.2 45.1c3.9 3.5 1.1 10.3-4.3 10.3-3.5 0-5.9-2.4-5.9-5.7 0-5.5 6.2-8.3 10.2-4.6m-7.8 54.8 3.8 6.5-2.1 4.3c-5.8 11.9 1.6 25.4 14.5 26.5l5.5.5 5.1 8.7c3 5.1 6.1 9.3 7.5 9.9 1.3.6 7.5 1.1 13.8 1.1H208v31.8c0 34.9-.5 38.7-6 46.7-7.9 11.5-23.9 16.1-36.8 10.5-7.1-3.1-14.3-11-16.6-18.3-1-3.1-2.3-6-3-6.6s-4.2-2-7.8-3.1c-14.1-4.3-23.9-16.4-25-30.6l-.3-4.9 20.7-.3 20.7-.2 3.9 6.7 3.9 6.7-1.7 3c-3.8 6.5-3.3 14.6 1.2 20.9 4.4 6.2 15.9 8.7 23.5 5.1 7.2-3.5 11.7-13.7 9.5-21.3-2.4-7.9-10.3-14-18.2-14.1-3.3 0-3.7-.4-9-9.3l-5.5-9.2-27.5-.5c-31.6-.6-30.4-.2-40.3-11-5.1-5.5-8.3-11.5-10.3-19.5-.6-2.5-.6-2.5 6-2.5 6.2 0 6.6.1 8 2.9 3.4 6.4 12.3 11 18.9 9.5 11.5-2.4 18.2-12 15.8-22.5-3.8-16.8-26.8-19.9-34.7-4.8-1.4 2.7-1.8 2.9-7.9 2.9-3.6 0-6.5-.4-6.5-.8 0-.5.7-3.1 1.5-5.9 2.2-7.5 8.8-16.7 15.3-21.3l5.5-4h39.3zm22 14.6c3.1 2.5 3.4 6.1.6 8.9-2.4 2.4-4.8 2.5-7.7.5-3.9-2.7-3.4-8.7.9-10.5 3.2-1.2 3.2-1.2 6.2 1.1m-52.2 12.6c3.8 3.4 1.1 10.3-4 10.3-5.4 0-8.1-6.2-4.5-10.2 2-2.2 6.1-2.3 8.5-.1m62.3 76.9c2.5 2.5 1.6 7.5-1.7 9.4-2.5 1.3-3.1 1.3-5.5 0-5.4-3-3.4-11 2.8-11 1.5 0 3.5.7 4.4 1.6"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M231.7 131.8c-5.6 6.2 5.2 16.1 19.5 17.8 9.7 1.1 24.5-5 26.8-11.2 2.2-5.8-3.6-10.4-8.9-7.1-8.5 5.3-10.4 5.9-16.2 5.5-4.6-.3-6.8-1.1-10.3-3.6-5-3.6-8.5-4.1-10.9-1.4m43.4 52.7c-1.6 1.4-4.3 5.2-5.8 8.3-2.3 4.8-2.8 7-2.8 13.7s.5 8.9 2.8 13.7c3 6.1 7.7 10.8 10.8 10.8 2.7 0 5.9-3.5 5.9-6.4 0-1.4-1.1-3.8-2.5-5.4-3.2-3.9-4.5-7.4-4.5-12.7s1.3-8.8 4.5-12.7c3-3.6 3.2-7.1.5-9.8s-5.2-2.5-8.9.5m-65.4 35.3c-2.2 2.4-2.1 6.5.1 8.5 4 3.6 10.2.9 10.2-4.5 0-5.1-6.9-7.8-10.3-4m50.7 49.6c-9.8 4.5-16.1 15.4-15.2 26.2.5 6.2 2.8 9.4 6.8 9.4 3.8 0 6.2-3 6-7.7-.1-2.1-.2-5-.1-6.5.1-3.1 5.2-9.4 8.4-10.4 3.2-.9 6.7-4.4 6.7-6.6s-4.3-6.8-6.2-6.8c-.7 0-3.6 1.1-6.4 2.4"
+  })));
+};
+
+export { SvgBrain as default };

package/dist/esm/src/components/Icon/icons/compas.svg.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+var _linearGradient, _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCompas = function SvgCompas(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "compas_svg__a"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    style: {
+      stopColor: "#e4641d",
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.438,
+    style: {
+      stopColor: "#e2771a",
+      stopOpacity: 0
+    }
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.563,
+    style: {
+      stopColor: "#0a69f2",
+      stopOpacity: 0
+    }
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    style: {
+      stopColor: "#2878e5",
+      stopOpacity: 1
+    }
+  })), _linearGradient || (_linearGradient = /*#__PURE__*/React.createElement("linearGradient", {
+    xlinkHref: "#compas_svg__a",
+    id: "compas_svg__b",
+    x1: 16.621,
+    x2: 40.144,
+    y1: 9.343,
+    y2: 9.343,
+    gradientTransform: "rotate(-91.68 21.524 18.62)",
+    gradientUnits: "userSpaceOnUse"
+  }))), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M12.05.285c-.588 0-.958.602-1.697 1.802-1.87 3.053-4.618 7.89-4.617 9.964 0 2.074 2.75 6.914 4.62 9.964.736 1.202 1.106 1.803 1.695 1.802.588 0 .958-.603 1.697-1.802 1.87-3.054 4.619-7.89 4.618-9.964s-2.75-6.911-4.621-9.96C13.009.887 12.639.283 12.05.284"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M12.06.27c-.589 0-.96.601-1.7 1.8-1.872 3.052-4.625 7.886-4.626 9.96s2.744 6.917 4.611 9.97c.735 1.202 1.105 1.804 1.694 1.803.588 0 .958-.602 1.698-1.8 1.873-3.053 4.627-7.886 4.627-9.96.001-2.074-2.743-6.914-4.611-9.964C13.018.873 12.648.268 12.059.269",
+    style: {
+      fill: "url(#compas_svg__b)"
+    }
+  }));
+};
+
+export { SvgCompas as default };

package/dist/esm/src/components/Icon/icons/globe.svg.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgGlobe = function SvgGlobe(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M20.73 16.336a.47.47 0 0 0-.661.073 10 10 0 0 1-.692.778.47.47 0 0 0 .005.666.47.47 0 0 0 .33.136.47.47 0 0 0 .336-.141 11 11 0 0 0 .756-.85.47.47 0 0 0-.073-.662m-1.85 1.958a.47.47 0 0 0-.66-.091c-1.78 1.35-3.939 2.132-6.24 2.262a.47.47 0 0 0 .025.941h.027c2.49-.141 4.826-.99 6.757-2.453a.47.47 0 0 0 .09-.66"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M23.492 9.514c-.268-1.022-.695-2-1.27-2.91a11.3 11.3 0 0 0-3.192-3.29c-2.045-1.398-4.473-2.137-7.023-2.137a13 13 0 0 0-2.129.177 12.26 12.26 0 0 0-5.41 2.333C2.18 5.441.698 7.9.298 10.61a10 10 0 0 0-.111 1.493c0 1.945.56 3.855 1.62 5.523 1.024 1.613 2.489 2.965 4.235 3.91v.001c.992.536 2.06.935 3.173 1.184a12.8 12.8 0 0 0 2.792.307c2.286 0 4.504-.604 6.414-1.747 1.866-1.116 3.35-2.688 4.292-4.544a10.188 10.188 0 0 0 .779-7.221m-4.275-4.888a10.3 10.3 0 0 1 1.581 1.595l-.93-.214a.97.97 0 0 0-.842.199.97.97 0 0 0-.355.788.04.04 0 0 1-.017.032l-.684.447a.04.04 0 0 1-.038 0l-.963-.548a.23.23 0 0 1-.107-.246l.216-.925a.224.224 0 0 1 .213-.173l.816-.023a1.174 1.174 0 0 0 1.11-.932M6.037 19.403l-.137.96c-2.96-1.848-4.771-4.957-4.771-8.26q0-.44.042-.882l.63.102q.24.039.482.039h.32c.442 0 .881.145 1.237.408l.484.359a.19.19 0 0 1 .073.129l.066.606a.185.185 0 0 1-.155.203c-.55.088-.958.574-.949 1.131l.035 2.135a1.12 1.12 0 0 0 .23.666l.768 1.006a3 3 0 0 0 1.416 1.022.346.346 0 0 1 .23.376m3.033 2.314a11.4 11.4 0 0 1-2.29-.858l.189-1.322a1.29 1.29 0 0 0-.855-1.4 2.07 2.07 0 0 1-.974-.704l-.768-1.005a.2.2 0 0 1-.038-.11l-.034-2.135a.186.186 0 0 1 .156-.186 1.126 1.126 0 0 0 .942-1.234l-.065-.606a1.13 1.13 0 0 0-.45-.785l-.483-.358a3.04 3.04 0 0 0-1.799-.594h-.319q-.166 0-.331-.027l-.644-.104c.457-2.285 1.77-4.35 3.733-5.854a11.3 11.3 0 0 1 4.795-2.117 2.1 2.1 0 0 1 .602.832l.026.067a2 2 0 0 1 .132.527l.024.205a2.1 2.1 0 0 1-.161 1.074l-.256.583a2.07 2.07 0 0 1-.796.923l-.319.201a1.06 1.06 0 0 0-.493.949l.043.861a.11.11 0 0 1-.036.09.11.11 0 0 1-.091.032.12.12 0 0 1-.092-.06l-.392-.728a1.06 1.06 0 0 0-.647-.518L5.995 6.97a1.6 1.6 0 0 0-1.098.084l-.33.15a1.614 1.614 0 0 0-.902 1.826 1.6 1.6 0 0 0 .43.776l.9.9a2 2 0 0 1 .145.16l.617.761a1.42 1.42 0 0 0 1.108.529h.005l1.68-.005h.002c.172 0 .333.092.42.24a1.43 1.43 0 0 0 .933.677l.63.135a.49.49 0 0 1 .325.243l.304.557a1.25 1.25 0 0 0 .533.518l1.43.726a.31.31 0 0 1 .169.32.3.3 0 0 1-.104.195l-.543.48a1.26 1.26 0 0 0-.343.5l-.119.316a.37.37 0 0 1-.206.213l-.578.24a1.31 1.31 0 0 0-.811 1.214.4.4 0 0 1-.043.172zm2.936.369a12 12 0 0 1-1.979-.166l1.355-2.585a1.3 1.3 0 0 0 .15-.61.37.37 0 0 1 .23-.345l.579-.24a1.32 1.32 0 0 0 .727-.752l.118-.315a.3.3 0 0 1 .086-.125l.543-.48a1.25 1.25 0 0 0 .414-.785 1.26 1.26 0 0 0-.677-1.275l-1.43-.727a.3.3 0 0 1-.132-.129l-.305-.558a1.43 1.43 0 0 0-.954-.712l-.63-.135a.49.49 0 0 1-.317-.23 1.43 1.43 0 0 0-1.233-.708h-.004l-1.681.005h-.002a.48.48 0 0 1-.377-.18l-.617-.76a3 3 0 0 0-.21-.234l-.9-.9a.67.67 0 0 1-.178-.321.67.67 0 0 1 .374-.757l.33-.15a.67.67 0 0 1 .455-.035l1.385.386a.12.12 0 0 1 .07.057l.393.728a1.06 1.06 0 0 0 .831.552 1.06 1.06 0 0 0 .832-.289 1.06 1.06 0 0 0 .326-.818l-.043-.861a.12.12 0 0 1 .054-.105l.319-.2a3 3 0 0 0 1.156-1.342l.256-.584a3 3 0 0 0 .235-1.56l-.024-.205a3 3 0 0 0-.192-.766l-.027-.067a3 3 0 0 0-.347-.639h.001q.52-.045 1.04-.045c2.275 0 4.444.634 6.288 1.837l.004.436a.226.226 0 0 1-.218.226l-.816.023a1.17 1.17 0 0 0-1.103.9l-.217.924c-.117.5.112 1.026.558 1.28l.963.548a1 1 0 0 0 .485.13 1 1 0 0 0 .534-.16l.684-.447a.98.98 0 0 0 .443-.853.03.03 0 0 1 .013-.03c.014-.011.027-.008.032-.007l1.056.242.08.015.746.107a9.47 9.47 0 0 1 .803 1.691l-.73-.176-.088-.018-.796-.128a2.67 2.67 0 0 0-2.353.786l-.12.125a2.67 2.67 0 0 0-.695 1.333l-.303 1.535a2.66 2.66 0 0 0 .17 1.583 2.68 2.68 0 0 0 2.148 1.591l.148.017a2.7 2.7 0 0 0 1.204-.139l.502-.18a.225.225 0 0 1 .25.07l.066.082a.23.23 0 0 1 .05.134l.024.819c-1.803 3.449-5.64 5.67-9.812 5.67m10.46-7.23-.055-.067a1.17 1.17 0 0 0-.908-.433q-.198 0-.392.068l-.502.18a1.74 1.74 0 0 1-.78.09l-.148-.016a1.74 1.74 0 0 1-1.391-1.03 1.72 1.72 0 0 1-.11-1.026l.303-1.535a1.73 1.73 0 0 1 .45-.863l.12-.125a1.73 1.73 0 0 1 1.524-.51l.796.13q.008 0 .017.003l1.257.303a9.2 9.2 0 0 1 .237 2.078c0 .943-.14 1.865-.419 2.754"
+  })));
+};
+
+export { SvgGlobe as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -2,11 +2,13 @@ var ICONS = {
     avatar: () => import('./avatar.svg.js'),
     bookmark: () => import('./bookmark.svg.js'),
     bookmarkAdd: () => import('./bookmarkAdd.svg.js'),
+    brain: () => import('./brain.svg.js'),
     brokenImage: () => import('./brokenImage.svg.js'),
     camera: () => import('./camera.svg.js'),
     check: () => import('./check.svg.js'),
     close: () => import('./close.svg.js'),
     colors: () => import('./colors.svg.js'),
+    compas: () => import('./compas.svg.js'),
     copy: () => import('./copy.svg.js'),
     chevronUp: () => import('./chevronUp.svg.js'),
     chevronDown: () => import('./chevronDown.svg.js'),
@@ -28,6 +30,7 @@ var ICONS = {
     flyover: () => import('./flyover.svg.js'),
     gear: () => import('./gear.svg.js'),
     geolocation: () => import('./geolocation.svg.js'),
+    globe: () => import('./globe.svg.js'),
     group: () => import('./group.svg.js'),
     history: () => import('./history.svg.js'),
     image: () => import('./image.svg.js'),
@@ -50,6 +53,8 @@ var ICONS = {
     requiredStar: () => import('./requiredStar.svg.js'),
     rewind: () => import('./rewind.svg.js'),
     route: () => import('./route.svg.js'),
+    routeFrom: () => import('./routeFrom.svg.js'),
+    routeTo: () => import('./routeTo.svg.js'),
     save: () => import('./save.svg.js'),
     search: () => import('./search.svg.js'),
     send: () => import('./send.svg.js'),

package/dist/esm/src/components/Icon/icons/routeFrom.svg.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgRouteFrom = function SvgRouteFrom(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23.747 12.005c.084 1.132-2.652 5.013-2.652 5.013l-1.923-.269 2.285-3.717-5.815-.273V11.25l5.768-.203-2.216-4.163 1.983-.41s2.63 4.444 2.57 5.53",
+    style: {
+      strokeWidth: 1.50793
+    }
+  }), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M24 24H0V0h24z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M11.07 15.674c-3.217 0-4.828-3.89-2.553-6.164 2.274-2.275 6.164-.664 6.164 2.553a3.61 3.61 0 0 1-3.611 3.61",
+    style: {
+      strokeWidth: 2.40717
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M.339 11.956c-.014 9.658 11.54 14.637 18.55 7.995l-1.731-.925C13.482 22.733 6.807 21.856 3.65 17.6c-1.115-1.504-1.804-3.388-1.826-5.548-.082-8.273 9.973-12.213 15.405-7.29l1.522-.926C11.697-2.629.324 2.387.34 11.956Z",
+    style: {
+      strokeWidth: 1.50793
+    }
+  }));
+};
+
+export { SvgRouteFrom as default };

package/dist/esm/src/components/Icon/icons/routeTo.svg.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgRouteTo = function SvgRouteTo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M9.068 12.188c-.281-1.075-3.113-4.405-3.113-4.405l-2.511-.379 2.933 3.823-5.76.246v1.508l5.767.202-2.997 4.163 2.669-.629s2.707-3.443 3.012-4.529",
+    style: {
+      strokeWidth: 1.50793
+    }
+  }), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M.01.054h24v24h-24Z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M12.94 8.38c3.218 0 4.828 3.89 2.554 6.164-2.275 2.275-6.164.664-6.164-2.553a3.61 3.61 0 0 1 3.61-3.61",
+    style: {
+      strokeWidth: 2.40717
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.672 12.098c.014-9.658-11.54-14.637-18.55-7.995l2.067.301c3.676-3.708 10.015-2.206 13.17 2.05 1.115 1.504 1.805 3.388 1.826 5.548.082 8.273-9.973 12.213-15.404 7.29l-1.523.926c7.055 6.465 18.429 1.449 18.412-8.12z",
+    style: {
+      strokeWidth: 1.50793
+    }
+  }));
+};
+
+export { SvgRouteTo as default };

package/dist/esm/src/components/Menu/Menu.js

@@ -5,7 +5,9 @@ import { Scroll } from '../Scroll/Scroll.js';
 import S from './Menu.styl.js';
 
 const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx(Scroll, { y: true, ref: ref, className: cn(S.root, className), ...props, children: children }));
+    return (
+    // @ts-ignore
+    jsx(Scroll, { y: true, ref: ref, className: cn(S.root, className), ...props, children: children }));
 });
 const MenuItem = forwardRef((props, ref) => {
     const { children, className, selected, focused, disabled, level = 0, onClick, size = 'm', ...rest } = props;

package/dist/esm/src/components/Scroll/Scroll.js

@@ -1,19 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Component, createRef, createElement } from 'react';
+import { useRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import cn from 'classnames';
-import { createStore } from 'justorm/react';
-import omit from 'lodash.omit';
 import Time from 'timen';
 import { isTouch } from '../../tools/dom.js';
-import { unobserve, observe } from '../../tools/resizeObserver.js';
+import { observe, unobserve } from '../../tools/resizeObserver.js';
 import S from './Scroll.styl.js';
-import debounce from '../../tools/debounce.js';
+import useEvent from '../../hooks/useEvent.js';
+import { useDebounce } from '../../hooks/useDebounce.js';
 
 const getEventCoords = e => ({
     x: e.clientX,
     y: e.clientY,
 });
-const OFFSET_THRESHOL = 5;
+const OFFSET_THRESHOLD = 5;
 const AXES = ['x', 'y'];
 const BY_AXIS = {
     x: {
@@ -33,268 +32,274 @@ const BY_AXIS = {
         posField: 'top',
     },
 };
-class Scroll extends Component {
-    innerElem;
-    onInnerRef = elem => {
-        if (this.innerElem) {
-            unobserve(this.innerElem, this.updateAll);
-        }
-        this.innerElem = elem;
-        this.props.onInnerRef?.(elem);
-        if (elem) {
-            this.updateAll();
-            observe(elem, this.updateAll);
-        }
-    };
-    thumbELem = {
-        x: createRef(),
-        y: createRef(),
+function Scroll(props) {
+    const { x, y, offset, size = 'm', fadeSize, smooth, className, innerClassName, xScrollbarClassName, yScrollbarClassName, innerProps, onInnerRef, thumbClassName, autoHide, children, onScroll, ...rest } = props;
+    const innerElemRef = useRef(null);
+    const thumbXRef = useRef(null);
+    const thumbYRef = useRef(null);
+    const thumbElemRef = {
+        x: thumbXRef,
+        y: thumbYRef,
     };
-    store;
-    isTouch;
-    timers = Time.create();
-    currAxis;
-    pos = { x: 0, y: 0 };
-    prevCoords = { x: 0, y: 0 };
-    prevScrolls = { x: 0, y: 0 };
-    prevBoundings = { x: 0, y: 0 };
-    unsubscribeScrollHeightObserver;
-    static defaultProps = { size: 'm' };
-    constructor(props) {
-        super(props);
-        this.isTouch = isTouch();
-        this.store = createStore(this, {
-            isScrolling: false,
-            activeAxis: null,
-            coeff: { x: 0, y: 0 },
-            hasOffset: {
-                top: false,
-                left: false,
-                right: false,
-                bottom: false,
-            },
-        });
-    }
-    componentDidMount() {
-        this.updateAll();
-        this.unsubscribeScrollHeightObserver = Time.every(100, this.observeScrollHeight);
-        document.addEventListener('scroll', this.onDocScroll);
-    }
-    componentWillUnmount() {
-        this.unsubscribeScrollHeightObserver?.();
-        this.unsubscribePointerMoveUp();
-        document.removeEventListener('scroll', this.onDocScroll);
-    }
-    eachAxis = fn => AXES.map(axis => this.props[axis] && fn(axis));
-    observeScrollHeight = () => {
-        this.eachAxis(axis => {
-            const needUpdate = (this.props[axis] && this.isScrollSizeChanged(axis)) ||
-                this.isBoudingsChanged(axis);
-            if (needUpdate)
-                this.update(axis);
-        });
-    };
-    isScrollSizeChanged(axis) {
-        const currScrolls = this.getScrollSize(axis);
-        const isChanged = this.prevScrolls[axis] !== currScrolls[axis];
-        if (isChanged)
-            this.prevScrolls[axis] = currScrolls;
-        return isChanged;
-    }
-    isBoudingsChanged(axis) {
-        const curroffsetSize = this.getoffsetSize(axis);
-        const isChanged = this.prevBoundings[axis] !== curroffsetSize[axis];
-        if (isChanged)
-            this.prevBoundings[axis] = curroffsetSize[axis];
-        return isChanged;
-    }
-    getoffsetSize = axis => this.innerElem[BY_AXIS[axis].offsetSize];
-    getInnerSize = axis => this.innerElem[BY_AXIS[axis].innerSize];
-    getScrollSize = axis => this.innerElem[BY_AXIS[axis].scrollSize];
-    getScrollPos = axis => this.innerElem[BY_AXIS[axis].scrollPos];
-    getThumbSize = axis => this.thumbELem[axis].current[BY_AXIS[axis].offsetSize];
-    getOffset(axis) {
-        const offset = this.props.offset?.[axis];
+    const [isScrolling, setIsScrolling] = useState(false);
+    const [activeAxis, setActiveAxis] = useState(null);
+    const [coeff, setCoeff] = useState({ x: 0, y: 0 });
+    const [hasOffset, setHasOffset] = useState({
+        top: false,
+        left: false,
+        right: false,
+        bottom: false,
+    });
+    const isTouchDevice = useMemo(() => isTouch(), []);
+    const posRef = useRef({ x: 0, y: 0 });
+    const prevCoordsRef = useRef({ x: 0, y: 0 });
+    const prevScrollsRef = useRef({ x: 0, y: 0 });
+    const prevBoundingsRef = useRef({ x: 0, y: 0 });
+    const eachAxis = useCallback(fn => AXES.map(axis => props[axis] && fn(axis)), [x, y]);
+    const getOffsetSize = axis => innerElemRef.current[BY_AXIS[axis].offsetSize];
+    const getInnerSize = axis => innerElemRef.current[BY_AXIS[axis].innerSize];
+    const getScrollSize = axis => innerElemRef.current[BY_AXIS[axis].scrollSize];
+    const getScrollPos = axis => innerElemRef.current[BY_AXIS[axis].scrollPos];
+    const getThumbSize = axis => thumbElemRef[axis].current[BY_AXIS[axis].offsetSize];
+    const getOffset = useCallback(axis => {
+        const axisOffset = offset?.[axis];
         const isVertical = axis === 'y';
         const before = isVertical ? 'top' : 'left';
         const after = isVertical ? 'bottom' : 'right';
         return {
-            [before]: offset?.before || 0,
-            [after]: offset?.after || 0,
+            [before]: axisOffset?.before || 0,
+            [after]: axisOffset?.after || 0,
         };
-    }
-    getCoeffStyle = axis => `${this.store.coeff[axis] * 100}%`;
-    getPosStyle = axis => `${this.pos[axis]}px`;
-    updateAll = () => {
-        this.eachAxis(this.update);
-        this.updateHasOffsets();
-    };
-    update = axis => {
-        this.updateCoeff(axis);
-        this.updatePos(axis);
-    };
-    updateCoeff(axis) {
-        const thumb = this.thumbELem[axis].current;
-        if (!this.innerElem)
+    }, [offset]);
+    const getCoeffStyle = useCallback(axis => `${coeff[axis] * 100}%`, [coeff]);
+    const getPosStyle = axis => `${posRef.current[axis]}px`;
+    const isScrollSizeChanged = useCallback(axis => {
+        const currScrolls = getScrollSize(axis);
+        const isChanged = prevScrollsRef.current[axis] !== currScrolls;
+        if (isChanged)
+            prevScrollsRef.current[axis] = currScrolls;
+        return isChanged;
+    }, [getScrollSize]);
+    const isBoudingsChanged = useCallback(axis => {
+        const curroffsetSize = getOffsetSize(axis);
+        const isChanged = prevBoundingsRef.current[axis] !== curroffsetSize;
+        if (isChanged)
+            prevBoundingsRef.current[axis] = curroffsetSize;
+        return isChanged;
+    }, [getOffsetSize]);
+    // Update functions
+    const updateCoeff = useCallback(axis => {
+        const thumb = thumbElemRef[axis].current;
+        if (!innerElemRef.current)
             return;
         const sizeField = BY_AXIS[axis].size;
-        this.store.coeff[axis] = this.getInnerSize(axis) / this.getScrollSize(axis);
+        const newCoeff = getInnerSize(axis) / getScrollSize(axis);
+        // Only update if the value has changed
+        if (coeff[axis] !== newCoeff) {
+            setCoeff(prev => ({
+                ...prev,
+                [axis]: newCoeff,
+            }));
+        }
         if (thumb)
-            thumb.style[sizeField] = this.getCoeffStyle(axis);
-    }
-    updatePos(axis) {
-        const thumb = this.thumbELem[axis].current;
-        if (!this.innerElem || !thumb)
+            thumb.style[sizeField] = `${newCoeff * 100}%`;
+    }, [coeff, getInnerSize, getScrollSize, thumbElemRef]);
+    const updatePos = useCallback(axis => {
+        const thumb = thumbElemRef[axis].current;
+        if (!innerElemRef.current || !thumb)
             return;
-        const { offset } = this.props;
         const offsetBefore = offset?.[axis]?.before || 0;
         const offsetAfter = offset?.[axis]?.after || 0;
-        const innerSize = this.getInnerSize(axis);
-        const thumbSize = this.getThumbSize(axis);
-        const scrollSize = this.getScrollSize(axis);
-        const scrollPos = this.getScrollPos(axis);
+        const innerSize = getInnerSize(axis);
+        const thumbSize = getThumbSize(axis);
+        const scrollSize = getScrollSize(axis);
+        const scrollPos = getScrollPos(axis);
         const posField = BY_AXIS[axis].posField;
-        // const AXIS = axis.toUpperCase();
         const pos = thumbSize
             ? (innerSize - thumbSize - offsetBefore - offsetAfter) *
                 (scrollPos / (scrollSize - innerSize))
             : 0;
-        this.pos[axis] = pos;
-        // thumb.style.transform = `translate${AXIS}(${pos}px)`;
-        thumb.style[posField] = this.getPosStyle(axis);
-    }
-    updateScroll(axis, e) {
+        posRef.current[axis] = pos;
+        thumb.style[posField] = `${pos}px`;
+    }, [
+        getInnerSize,
+        getScrollPos,
+        getScrollSize,
+        getThumbSize,
+        offset,
+        thumbElemRef,
+    ]);
+    const update = useCallback(axis => {
+        updateCoeff(axis);
+        updatePos(axis);
+    }, [updateCoeff, updatePos]);
+    const updateHasOffsets = useCallback(() => {
+        if (!innerElemRef.current)
+            return;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth, } = innerElemRef.current;
+        setHasOffset(prev => {
+            const newHasOffset = { ...prev };
+            if (y) {
+                newHasOffset.top = scrollTop > 0;
+                newHasOffset.bottom =
+                    scrollHeight - (scrollTop + offsetHeight) > OFFSET_THRESHOLD;
+            }
+            if (x && !(newHasOffset.top || newHasOffset.bottom)) {
+                newHasOffset.left = scrollLeft > 0;
+                newHasOffset.right =
+                    scrollWidth - (scrollLeft + offsetWidth) > OFFSET_THRESHOLD;
+            }
+            return newHasOffset;
+        });
+    }, [x, y]);
+    const updateAll = useCallback(() => {
+        if (!innerElemRef.current)
+            return;
+        eachAxis(axis => update(axis));
+        updateHasOffsets();
+    }, [eachAxis, update, updateHasOffsets]);
+    const updateScroll = useCallback((axis, e) => {
         const coords = getEventCoords(e);
         const scrollPos = BY_AXIS[axis].scrollPos;
-        const pos = coords[axis] - this.prevCoords[axis];
-        this.prevCoords = coords;
-        this.innerElem[scrollPos] += pos / this.store.coeff[axis];
-    }
-    updateHasOffsets() {
-        const { x, y } = this.props;
-        const { hasOffset } = this.store;
-        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth, } = this.innerElem;
-        if (y) {
-            hasOffset.top = scrollTop > 0;
-            hasOffset.bottom =
-                scrollHeight - (scrollTop + offsetHeight) > OFFSET_THRESHOL;
-        }
-        if (x && !(hasOffset.top || hasOffset.bottom)) {
-            hasOffset.left = scrollLeft > 0;
-            hasOffset.right =
-                scrollWidth - (scrollLeft + offsetWidth) > OFFSET_THRESHOL;
-        }
-    }
-    dropScrollingState = debounce(() => (this.store.isScrolling = false), 2000);
-    subscribePointerMoveUp = () => {
-        document.addEventListener('pointermove', this.onPointerMove, {
-            passive: false, // do not generate passive event warning
+        const pos = coords[axis] - prevCoordsRef.current[axis];
+        prevCoordsRef.current = coords;
+        innerElemRef.current[scrollPos] += pos / coeff[axis];
+    }, [coeff]);
+    // Event handlers
+    const dropScrollingState = useDebounce(() => {
+        setIsScrolling(false);
+    }, 2000);
+    const observeScrollHeight = useCallback(() => {
+        eachAxis(axis => {
+            const needUpdate = (props[axis] && isScrollSizeChanged(axis)) || isBoudingsChanged(axis);
+            if (needUpdate)
+                update(axis);
         });
-        document.addEventListener('pointerup', this.onPointerUp);
-    };
-    unsubscribePointerMoveUp = () => {
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
-    };
-    onDocScroll = e => {
-        const { activeAxis } = this.store;
+    }, [props, isBoudingsChanged, isScrollSizeChanged, update]);
+    const onDocScroll = useCallback(e => {
         // if dragging thumb - prevent any other scrolls
-        if (activeAxis && this.innerElem !== e.target) {
+        if (activeAxis && innerElemRef.current !== e.target) {
             e.preventDefault();
             e.stopPropagation();
         }
-    };
-    onInnerScroll = e => {
-        if (this.innerElem !== e.target)
+    }, [activeAxis]);
+    const onInnerScroll = useCallback(e => {
+        if (innerElemRef.current !== e.target)
             return;
-        const { onScroll } = this.props;
-        const { activeAxis, isScrolling } = this.store;
-        this.updateHasOffsets();
+        updateHasOffsets();
         onScroll?.(e);
-        if (!activeAxis) {
-            this.eachAxis(axis => {
-                if (this.isScrollSizeChanged(axis))
-                    this.update(axis);
-            });
-        }
+        if (!activeAxis)
+            eachAxis(updatePos);
         if (!isScrolling)
-            this.store.isScrolling = true;
-        this.dropScrollingState();
-    };
-    onPointerDown = (axis, e) => {
+            setIsScrolling(true);
+        dropScrollingState();
+    }, [
+        activeAxis,
+        dropScrollingState,
+        eachAxis,
+        isScrollSizeChanged,
+        isScrolling,
+        onScroll,
+        update,
+        updateHasOffsets,
+    ]);
+    const onPointerDown = useCallback((axis, e) => {
         e.preventDefault();
         e.stopPropagation();
-        // TOOD: if target is bar(not thumb) - move thumb to target coords
-        this.prevCoords = getEventCoords(e);
-        this.store.activeAxis = axis;
-        this.subscribePointerMoveUp();
-    };
-    onPointerMove = e => {
-        const { activeAxis } = this.store;
+        prevCoordsRef.current = getEventCoords(e);
+        setActiveAxis(axis);
+    }, []);
+    const onPointerMove = useCallback(e => {
         if (!activeAxis)
             return;
         e.preventDefault();
         e.stopPropagation();
-        this.updateScroll(activeAxis, e);
-        this.updatePos(activeAxis);
-    };
-    onPointerUp = e => {
+        updateScroll(activeAxis, e);
+        updatePos(activeAxis);
+    }, [activeAxis, updatePos, updateScroll]);
+    const onPointerUp = useCallback(e => {
         e.stopPropagation();
-        this.store.activeAxis = null;
-        this.dropScrollingState();
-        this.unsubscribePointerMoveUp();
-    };
-    renderBar = axis => {
-        const { thumbClassName } = this.props;
-        const { activeAxis, coeff } = this.store;
-        if (coeff[axis] === 1)
+        setActiveAxis(null);
+        dropScrollingState();
+    }, [dropScrollingState]);
+    useEffect(() => {
+        if (innerElemRef.current) {
+            // Initial update
+            updateAll();
+            // Set up resize observer
+            observe(innerElemRef.current, updateAll);
+            onInnerRef?.(innerElemRef.current);
+            return () => {
+                unobserve(innerElemRef.current, updateAll);
+            };
+        }
+    }, [onInnerRef]); // Remove updateAll from dependencies
+    useEffect(() => {
+        const unsubscribeScrollHeightObserver = Time.every(100, observeScrollHeight);
+        return () => {
+            unsubscribeScrollHeightObserver?.();
+        };
+    }, [observeScrollHeight]);
+    useEvent({
+        elem: document,
+        event: 'scroll',
+        callback: onDocScroll,
+    });
+    useEvent({
+        elem: document,
+        event: ['pointermove', 'pointerup'],
+        callback: e => {
+            if (e.type === 'pointermove')
+                onPointerMove(e);
+            else if (e.type === 'pointerup')
+                onPointerUp(e);
+        },
+        isActive: !!activeAxis,
+    });
+    const renderBar = useCallback(axis => {
+        if (!props[axis] || coeff[axis] === 1)
             return null;
         const sizeField = BY_AXIS[axis].size;
         const posField = BY_AXIS[axis].posField;
         const thumbStyle = {
-            [sizeField]: this.getCoeffStyle(axis),
-            [posField]: this.getPosStyle(axis),
+            [sizeField]: getCoeffStyle(axis),
+            [posField]: getPosStyle(axis),
         };
-        const className = cn(S.bar, S[axis], activeAxis === axis && S.isActive, this.props[`${axis}ScrollbarClassName`]);
+        const className = cn(S.bar, S[axis], activeAxis === axis && S.isActive, props[`${axis}ScrollbarClassName`]);
         const barProps = {
             className,
-            style: this.getOffset(axis),
-            onPointerDown: this.onPointerDown.bind(this, axis),
+            style: getOffset(axis),
+            onPointerDown: e => onPointerDown(axis, e),
         };
         return (createElement("div", { ...barProps, key: `bar-${axis}` },
-            jsx("div", { className: cn(S.thumb, thumbClassName), style: thumbStyle, ref: this.thumbELem[axis] })));
-    };
-    renderInner() {
-        const { innerClassName, innerProps, children, smooth } = this.props;
-        const { activeAxis, hasOffset } = this.store;
+            jsx("div", { className: cn(S.thumb, thumbClassName), style: thumbStyle, ref: thumbElemRef[axis] })));
+    }, [
+        activeAxis,
+        coeff,
+        getCoeffStyle,
+        getOffset,
+        getPosStyle,
+        onPointerDown,
+        props,
+        thumbClassName,
+        thumbElemRef,
+    ]);
+    const renderInner = useCallback(() => {
         const innerClasses = cn(S.inner, innerProps?.className, innerClassName, !activeAxis && smooth && S.smooth, hasOffset.top && S.hasOffsetTop, hasOffset.bottom && S.hasOffsetBottom, hasOffset.right && S.hasOffsetRight, hasOffset.left && S.hasOffsetLeft);
         const props = { ...innerProps };
-        props.onScrollCapture = this.onInnerScroll;
-        return (createElement("div", { ...props, className: innerClasses, ref: this.onInnerRef, key: "inner" }, children));
-    }
-    render() {
-        const { y, x, size, fadeSize, autoHide, className } = this.props;
-        const { isScrolling, activeAxis } = this.store;
-        const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide, (isScrolling || activeAxis) && S.isScrolling, this.isTouch ? S.isTouch : S.isDesktop, className);
-        const props = omit(this.props, [
-            'x',
-            'y',
-            'offset',
-            'size',
-            'fadeSize',
-            'smooth',
-            'className',
-            'innerClassName',
-            'xScrollbarClassName',
-            'yScrollbarClassName',
-            'innerProps',
-            'onInnerRef',
-            'thumbClassName',
-            'autoHide',
-            'children',
-        ]);
-        return (jsxs("div", { className: classes, ...props, children: [this.renderInner(), this.eachAxis(this.renderBar)] }));
-    }
+        props.onScrollCapture = onInnerScroll;
+        return (createElement("div", { ...props, className: innerClasses, ref: innerElemRef, key: "inner" }, children));
+    }, [
+        activeAxis,
+        children,
+        hasOffset,
+        innerClassName,
+        innerProps,
+        onInnerScroll,
+        smooth,
+    ]);
+    const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide, (isScrolling || activeAxis) && S.isScrolling, isTouchDevice ? S.isTouch : S.isDesktop, className);
+    return (jsxs("div", { className: classes, ...rest, children: [renderInner(), AXES.map(renderBar)] }));
 }
 
 export { Scroll };

package/dist/esm/src/components/Tabs/Tabs.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cn from 'classnames';
+import { Scroll } from '../Scroll/Scroll.js';
 import { Button } from '../Button/Button.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 import S from './Tabs.styl.js';
@@ -32,9 +33,9 @@ function Tabs(props) {
         if (renderAll || forceRender || isActive) {
             tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
         }
-        return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+        return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
     });
-    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }));
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }) }));
     if (typeof children === 'function') {
         return children({
             tabs,

package/dist/esm/src/components/Tabs/Tabs.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "div .Tabs_inactive__H0mPh{display:none}";
-var S = {"inactive":"Tabs_inactive__H0mPh"};
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--indent-m)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--indent-m)*1.2)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}";
+var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-l":"Tabs_size-l__emJzX","tab":"Tabs_tab__-oN-g"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Virtualized/List/ListScroll.js

@@ -11,6 +11,7 @@ function ListScroll({ scrollProps, ...rest }) {
         innerClassName,
     };
     return (jsx(List, { ...rest, customWrapElem: {
+            // @ts-ignore
             component: Scroll,
             props,
             // @ts-ignore

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -3,11 +3,13 @@ export declare const icons: {
     avatar: () => Promise<any>;
     bookmark: () => Promise<any>;
     bookmarkAdd: () => Promise<any>;
+    brain: () => Promise<any>;
     brokenImage: () => Promise<any>;
     camera: () => Promise<any>;
     check: () => Promise<any>;
     close: () => Promise<any>;
     colors: () => Promise<any>;
+    compas: () => Promise<any>;
     copy: () => Promise<any>;
     chevronUp: () => Promise<any>;
     chevronDown: () => Promise<any>;
@@ -29,6 +31,7 @@ export declare const icons: {
     flyover: () => Promise<any>;
     gear: () => Promise<any>;
     geolocation: () => Promise<any>;
+    globe: () => Promise<any>;
     group: () => Promise<any>;
     history: () => Promise<any>;
     image: () => Promise<any>;
@@ -51,6 +54,8 @@ export declare const icons: {
     requiredStar: () => Promise<any>;
     rewind: () => Promise<any>;
     route: () => Promise<any>;
+    routeFrom: () => Promise<any>;
+    routeTo: () => Promise<any>;
     save: () => Promise<any>;
     search: () => Promise<any>;
     send: () => Promise<any>;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -2,11 +2,13 @@ declare const _default: {
     avatar: () => Promise<any>;
     bookmark: () => Promise<any>;
     bookmarkAdd: () => Promise<any>;
+    brain: () => Promise<any>;
     brokenImage: () => Promise<any>;
     camera: () => Promise<any>;
     check: () => Promise<any>;
     close: () => Promise<any>;
     colors: () => Promise<any>;
+    compas: () => Promise<any>;
     copy: () => Promise<any>;
     chevronUp: () => Promise<any>;
     chevronDown: () => Promise<any>;
@@ -28,6 +30,7 @@ declare const _default: {
     flyover: () => Promise<any>;
     gear: () => Promise<any>;
     geolocation: () => Promise<any>;
+    globe: () => Promise<any>;
     group: () => Promise<any>;
     history: () => Promise<any>;
     image: () => Promise<any>;
@@ -50,6 +53,8 @@ declare const _default: {
     requiredStar: () => Promise<any>;
     rewind: () => Promise<any>;
     route: () => Promise<any>;
+    routeFrom: () => Promise<any>;
+    routeTo: () => Promise<any>;
     save: () => Promise<any>;
     search: () => Promise<any>;
     send: () => Promise<any>;

package/dist/esm/types/src/components/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import { Scroll } from 'uilib/components/Scroll/Scroll';
 import { MenuGroupProps, MenuItemProps, MenuProps } from './Menu.types';
-export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<Scroll>> & {
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<typeof Scroll>> & {
     Item: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Group: import("react").FC<MenuGroupProps>;
 };

package/dist/esm/types/src/components/Scroll/Scroll.d.ts

@@ -1,68 +1,2 @@
-import { Component } from 'react';
 import * as T from './Scroll.types';
-export declare class Scroll extends Component<T.Props> {
-    innerElem: HTMLDivElement;
-    onInnerRef: (elem: any) => void;
-    thumbELem: {
-        x: import("react").RefObject<HTMLDivElement>;
-        y: import("react").RefObject<HTMLDivElement>;
-    };
-    store: any;
-    isTouch: any;
-    timers: any;
-    currAxis: any;
-    pos: {
-        x: number;
-        y: number;
-    };
-    prevCoords: {
-        x: number;
-        y: number;
-    };
-    prevScrolls: {
-        x: number;
-        y: number;
-    };
-    prevBoundings: {
-        x: number;
-        y: number;
-    };
-    unsubscribeScrollHeightObserver: any;
-    static defaultProps: {
-        size: string;
-    };
-    constructor(props: any);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    eachAxis: (fn: any) => any[];
-    observeScrollHeight: () => void;
-    isScrollSizeChanged(axis: any): boolean;
-    isBoudingsChanged(axis: any): boolean;
-    getoffsetSize: (axis: any) => any;
-    getInnerSize: (axis: any) => any;
-    getScrollSize: (axis: any) => any;
-    getScrollPos: (axis: any) => any;
-    getThumbSize: (axis: any) => any;
-    getOffset(axis: any): {
-        [x: string]: any;
-    };
-    getCoeffStyle: (axis: any) => string;
-    getPosStyle: (axis: any) => string;
-    updateAll: () => void;
-    update: (axis: any) => void;
-    updateCoeff(axis: any): void;
-    updatePos(axis: any): void;
-    updateScroll(axis: any, e: any): void;
-    updateHasOffsets(): void;
-    dropScrollingState: any;
-    subscribePointerMoveUp: () => void;
-    unsubscribePointerMoveUp: () => void;
-    onDocScroll: (e: any) => void;
-    onInnerScroll: (e: any) => void;
-    onPointerDown: (axis: any, e: any) => void;
-    onPointerMove: (e: any) => void;
-    onPointerUp: (e: any) => void;
-    renderBar: (axis: any) => JSX.Element;
-    renderInner(): JSX.Element;
-    render(): JSX.Element;
-}
+export declare function Scroll(props: T.Props): JSX.Element;

package/dist/esm/types/src/hooks/useResizeObserver.d.ts

@@ -0,0 +1 @@
+export declare const useResizeObserver: (ref: React.RefObject<HTMLElement>, callback: (entry: ResizeObserverEntry) => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.20.4",
+  "version": "4.21.0",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",