@gravity-ui/navigation 0.15.0 → 0.17.0

package/build/esm/index.js

@@ -1,94 +1,17 @@
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement, Component, createElement, useRef, useContext, useCallback, useState, useMemo, useEffect } from 'react';
-import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
+import React__default, { Children, isValidElement, cloneElement, Component, createElement, useState, useCallback, useEffect, useRef, useContext, useMemo } from 'react';
+import { withNaming } from '@bem-react/classname';
+import { useBodyScrollLock, Button, Icon, Portal, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
 import { Ellipsis, Xmark } from '@gravity-ui/icons';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var lib$1 = {};
-
-var lib = {exports: {}};
-
-/*!
- * bem-cn v3.0.1
- * Friendly BEM class names generator, greate for React
- * @author Alexander Burtsev, https://github.com/albburtsev
- */
-
-(function (module, exports) {
-	!function(n,t){module.exports=t();}(commonjsGlobal,function(){return function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=n,e.c=t,e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:r});},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0});},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(r,o,function(t){return n[t]}.bind(null,o));return r},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){Object.defineProperty(t,"__esModule",{value:!0});var r=e(1);t.ERROR_BLOCK_NAME_TYPE="Block name should be a string",t.ERROR_BLOCK_NAME_EMPTY="Block name should be non-empty";var o={ns:"",el:"__",mod:"_",modValue:"_"},i=function(n){return "string"==typeof n},u=function(n){return "string"!=typeof n},s=function(n,t){for(var e=[],o=2;o<arguments.length;o++)e[o-2]=arguments[o];var i=r.assign({},t);return i.mixes=i.mixes.concat(e),c(i,n)},a=function(n,t,e){for(var o=[],i=3;i<arguments.length;i++)o[i-3]=arguments[i];var u=r.assign({},t),s=r.assign({},u.states||{});return s[e]=r.assign.apply(void 0,[{},s[e]||{}].concat(o)),u.states=s,c(u,n)},l=function(n,t,e,r){return String.prototype.split.call(f(n,t),e,r)},f=function(n,t){var e=t.name,r=t.mods,o=t.mixes,i=t.states,u=[e];if(r&&(u=u.concat(Object.keys(r).filter(function(n){return r[n]}).map(function(t){var o=r[t];return !0===o?e+n.mod+t:e+n.mod+t+n.modValue+o}))),i&&Object.keys(i).forEach(function(n){var t=i[n];u=u.concat(Object.keys(t).filter(function(n){return t[n]}).map(function(t){return n+t}));}),n.ns&&(u=u.map(function(t){return n.ns+t})),o&&(u=u.concat(function(n){return void 0===n&&(n=[]),n.map(function(n){return Array.isArray(n)?n.join(" "):"object"==typeof n&&null!==n?n.toString():"function"==typeof n?n.toString():"string"==typeof n?n:""}).filter(function(n){return !!n})}(o))),n.classMap){var s=n.classMap;u=u.map(function(n){return s[n]||n});}return u.join(" ")},c=function(n,t){return {mix:s.bind(null,t,n),split:l.bind(null,t,n),is:a.bind(null,t,n,"is-"),has:a.bind(null,t,n,"has-"),state:a.bind(null,t,n,"is-"),toString:f.bind(null,t,n)}},d=function(n,t){var e={name:n,mods:{},mixes:[],states:{"is-":{},"has-":{}}},o=function(n,t){for(var e=[],o=2;o<arguments.length;o++)e[o-2]=arguments[o];if(!e.length)return f(n,t);var s=r.assign({},t),a=e.filter(i).reduce(function(t,e){return t+n.el+e},"");a&&(s.name=s.name+a);var l=e.filter(u).reduce(function(n,t){return r.assign(n,t)},{});return s.mods=r.assign({},s.mods,l),c(s,n)}.bind(null,t,e);return o.mix=s.bind(null,t,e),o.split=l.bind(null,t,e),o.is=a.bind(null,t,e,"is-"),o.has=a.bind(null,t,e,"has-"),o.state=a.bind(null,t,e,"is-"),o.toString=f.bind(null,t,e),o};t.setup=function(n){return void 0===n&&(n={}),function(e){if("string"!=typeof e)throw new Error(t.ERROR_BLOCK_NAME_TYPE);var i=e.trim();if(!i)throw new Error(t.ERROR_BLOCK_NAME_EMPTY);return d(i,r.assign({},o,n))}},t.block=t.setup(),t.default=t.block;},function(n,t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.assign=function(n){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];for(var r=0;r<t.length;r++){var o=t[r];for(var i in o)o.hasOwnProperty(i)&&(n[i]=o[i]);}return n};}])});
-} (lib));
-
-Object.defineProperty(lib$1, "__esModule", { value: true });
-var bem_cn_1 = lib.exports;
-var block$1 = (0, bem_cn_1.setup)();
-function isString(data) {
-    return typeof data === 'string';
-}
-function hasMixinShape(data) {
-    return isString(data) || (Array.isArray(data) && data.every(isString));
-}
-function bemClassNameLite(blockName) {
-    var b = block$1(blockName);
-    function element() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var elementName = args.shift();
-        var modifiers = args[0], mixin = args[1];
-        var result;
-        if (typeof elementName !== 'string' || hasMixinShape(modifiers)) {
-            mixin = modifiers;
-            modifiers = null;
-        }
-        result = b(elementName, modifiers);
-        if (mixin) {
-            result = result.mix(mixin);
-        }
-        return result.toString();
-    }
-    element.builder = function () {
-        return b;
-    };
-    return element;
-}
-bemClassNameLite.setup = function (config) {
-    block$1 = (0, bem_cn_1.setup)(config);
-};
-bemClassNameLite.reset = function () {
-    block$1 = (0, bem_cn_1.setup)();
-};
-var _default = lib$1.default = bemClassNameLite;
-
 const NAMESPACE = 'gn-';
-function block(name) {
-    return _default(`${NAMESPACE}${name}`);
-}
+withNaming({ e: '__', m: '_' });
+const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
 
-var MobileHeaderDict;
-(function (MobileHeaderDict) {
-    MobileHeaderDict["CloseBurger"] = "button_close-burger";
-    MobileHeaderDict["OpenBurger"] = "button_open-burger";
-})(MobileHeaderDict || (MobileHeaderDict = {}));
-var Dict;
-(function (Dict) {
-    Dict["ExpandButton"] = "button_expand";
-    Dict["CollapseButton"] = "button_collapse";
-    Dict["MoreButton"] = "button_more";
-})(Dict || (Dict = {}));
-
-const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
+const ASIDE_HEADER_ICON_SIZE = 18;
 const ASIDE_HEADER_COMPACT_WIDTH = 56;
 const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-const defaultDict$2 = {
-    [Dict.CollapseButton]: 'Collapse',
-    [Dict.ExpandButton]: 'Expand',
-    [Dict.MoreButton]: 'More',
-    [MobileHeaderDict.CloseBurger]: 'Close menu',
-    [MobileHeaderDict.OpenBurger]: 'Open menu',
-};
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -132,6 +55,8 @@ function _inheritsLoose(subClass, superClass) {
   _setPrototypeOf(subClass, superClass);
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 var propTypes = {exports: {}};
 
 var reactIs = {exports: {}};
@@ -1357,7 +1282,7 @@ function removeClass$1(element, className) {
   }
 }
 
-var config = {
+var config$1 = {
   disabled: false
 };
 
@@ -1637,7 +1562,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
     // if we are mounting and running this it means appear _must_ be set
 
-    if (!mounting && !enter || config.disabled) {
+    if (!mounting && !enter || config$1.disabled) {
       this.safeSetState({
         status: ENTERED
       }, function () {
@@ -1669,7 +1594,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     var timeouts = this.getTimeouts();
     var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
 
-    if (!exit || config.disabled) {
+    if (!exit || config$1.disabled) {
       this.safeSetState({
         status: EXITED
       }, function () {
@@ -3136,15 +3061,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$m = ".gn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--g-color-base-background);\n}\n.gn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.gn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-enter-active, .gn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.gn-drawer__item-transition-enter-done, .gn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.gn-drawer__item-transition-exit, .gn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.gn-drawer__item-transition-exit-active, .gn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.gn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-exit-done, .gn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.gn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--g-color-sfx-veil);\n}\n.gn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.gn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.gn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
-styleInject(css_248z$m);
+var css_248z$n = ".gn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--g-color-base-background);\n}\n.gn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.gn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-enter-active, .gn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.gn-drawer__item-transition-enter-done, .gn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.gn-drawer__item-transition-exit, .gn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.gn-drawer__item-transition-exit-active, .gn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.gn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-exit-done, .gn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.gn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--g-color-sfx-veil);\n}\n.gn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.gn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.gn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
+styleInject(css_248z$n);
 
-const b$n = block('drawer');
+const b$o = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, direction, className }) => {
     const itemRef = React__default.useRef(null);
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('item-transition', { direction }), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$n('item', { direction }, className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$o('item-transition', { direction }), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$o('item', { direction }, className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3175,9 +3100,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     const veilRef = React__default.useRef(null);
     return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
-        return (React__default.createElement("div", { ref: containerRef, className: b$n(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$n('veil'), onClick: onVeilClick })),
+        return (React__default.createElement("div", { ref: containerRef, className: b$o(null, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$o('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$o('veil'), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 const childElem = child;
                 if (childElem.type === DrawerItem) {
@@ -3196,10 +3121,10 @@ const AsideHeaderContext = React__default.createContext({
 const AsideHeaderContextProvider = AsideHeaderContext.Provider;
 const useAsideHeaderContext = () => React__default.useContext(AsideHeaderContext);
 
-var css_248z$l = ".gn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.gn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.gn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.gn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.gn-logo__logo {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.gn-logo__logo-link, .gn-logo__logo-link:hover, .gn-logo__logo-link:active, .gn-logo__logo-link:visited, .gn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
-styleInject(css_248z$l);
+var css_248z$m = ".gn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.gn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--gn-aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.gn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.gn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: var(--gn-aside-header-item-icon-background-size);\n}\n.gn-logo__logo {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.gn-logo__logo-link, .gn-logo__logo-link:hover, .gn-logo__logo-link:active, .gn-logo__logo-link:visited, .gn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
+styleInject(css_248z$m);
 
-const b$m = block('logo');
+const b$n = block('logo');
 const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, wrapper, onClick, }) => {
     const { compact } = useAsideHeaderContext();
     const hasWrapper = typeof wrapper === 'function';
@@ -3211,18 +3136,18 @@ const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize =
     else if (icon) {
         buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
     }
-    const button = (React__default.createElement(Button, { view: "flat", size: "l", className: b$m('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: "_self", href: href }, buttonIcon));
+    const button = (React__default.createElement(Button, { view: "flat", size: "l", className: b$n('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: "_self", href: href }, buttonIcon));
     let logo;
     if (typeof text === 'function') {
         logo = text();
     }
     else {
-        logo = (React__default.createElement("div", { className: b$m('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$n('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default.createElement("div", { className: b$m() },
-        React__default.createElement("div", { className: b$m('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
+    return (React__default.createElement("div", { className: b$n() },
+        React__default.createElement("div", { className: b$n('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
         !compact &&
-            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b$m('logo-link'), onClick: onClick }, logo)))));
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b$n('logo-link'), onClick: onClick }, logo)))));
 };
 
 /**
@@ -3600,7 +3525,6 @@ class AutoSizer extends Component {
   }
 }
 
-const ICON_SIZE = 24;
 const ITEM_HEIGHT = 40;
 const ITEM_TYPE_REGULAR = 'regular';
 const COLLAPSE_ITEM_ID = 'collapse-item-id';
@@ -3648,12 +3572,10 @@ function getItemsMinHeight(items) {
         getItemsHeight(afterMoreButtonItems) +
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
-function getMoreButtonItem(dict) {
-    var _a;
-    const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[Dict.MoreButton];
+function getMoreButtonItem(menuMoreTitle) {
     return {
         id: COLLAPSE_ITEM_ID,
-        title,
+        title: menuMoreTitle,
         icon: Ellipsis,
         iconSize: 18,
     };
@@ -3701,872 +3623,300 @@ function isMenuItem(item) {
     return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
 }
 
-var css_248z$k = ".gn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n  color: var(--g-color-text-misc);\n}\n.gn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.gn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--g-color-line-generic);\n  cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--g-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n  background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-simple-hover);\n}";
-styleInject(css_248z$k);
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
 
-const b$l = block('composite-bar-item');
-function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$l('title-text') }, item.title);
-    if (item.rightAdornment) {
-        titleNode = (React__default.createElement(React__default.Fragment, null,
-            titleNode,
-            React__default.createElement("div", { className: b$l('title-adornment') }, item.rightAdornment)));
-    }
-    return titleNode;
-}
-const defaultPopupPlacement = ['right-end'];
-const defaultPopupOffset = [-20, 8];
-const Item$1 = (props) => {
-    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, } = props;
-    const { compact } = useAsideHeaderContext();
-    if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$l('menu-divider') });
-    }
-    const [open, toggleOpen] = React__default.useState(false);
-    const ref = React__default.useRef(null);
-    const anchorRef = popupAnchor || ref;
-    const type = item.type || ITEM_TYPE_REGULAR;
-    const current = item.current || false;
-    const tooltipText = item.tooltipText || item.title;
-    const icon = item.icon;
-    const iconSize = item.iconSize || ICON_SIZE;
-    const collapsedItem = item.id === COLLAPSE_ITEM_ID;
-    const onClose = React__default.useCallback((event) => {
-        var _a;
-        if (event instanceof MouseEvent &&
-            event.target &&
-            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            return;
-        }
-        onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
-    }, [onClosePopup]);
-    const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const createdNode = (React__default.createElement("div", { className: b$l({ type, current, compact }, className), ref: ref, onClick: (event) => {
-                if (collapsedItem) {
-                    /**
-                     * If we call onItemClick for collapsedItem then:
-                     * - User get unexpected item in onItemClick callback
-                     * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
-                     */
-                    toggleOpen(!open);
-                }
-                else {
-                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
-                }
-            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
-                if (!compact) {
-                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
-                }
-            }, onMouseLeave: () => {
-                if (!compact) {
-                    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-                }
-            } },
-            React__default.createElement("div", { className: b$l('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
-                React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$l('btn-icon') }, iconEl))) : (iconEl)),
-            React__default.createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
-            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
-        return item.link ? (React__default.createElement("a", { href: item.link, className: b$l('link') }, createdNode)) : (createdNode);
-    };
-    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$l('icon') }) : null;
-    const titleNode = renderItemTitle(item);
-    const params = { icon: iconNode, title: titleNode };
-    let node;
-    const opts = { compact, collapsed: false, item, ref };
-    if (typeof item.itemWrapper === 'function') {
-        node = item.itemWrapper(params, makeNode, opts);
-    }
-    else {
-        node = makeNode(params);
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        node,
-        open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
-};
-Item$1.displayName = 'Item';
-function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
-    const { compact } = useAsideHeaderContext();
-    return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
-        React__default.createElement("div", { className: b$l('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
-                    const makeCollapseNode = ({ title: titleEl }) => {
-                        const res = (React__default.createElement("div", { className: b$l('collapse-item'), onClick: (event) => {
-                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
-                            } }, titleEl));
-                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$l('link') }, res)) : (res);
-                    };
-                    const titleNode = renderItemTitle(collapseItem);
-                    const params = { title: titleNode };
-                    const opts = { compact, collapsed: true, item: collapseItem, ref: anchorRef };
-                    if (typeof collapseItem.itemWrapper === 'function') {
-                        return collapseItem.itemWrapper(params, makeCollapseNode, opts);
-                    }
-                    else {
-                        return makeCollapseNode(params);
-                    }
-                } })))) : null;
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
 }
 
-const multipleTooltipContextDefaults = {
-    active: false,
-    activeIndex: undefined,
-    hideCollapseItemTooltip: false,
-    lastClickedItemIndex: undefined,
-    setValue: () => { },
-};
-const MultipleTooltipContext = React__default.createContext(multipleTooltipContextDefaults);
-class MultipleTooltipProvider extends React__default.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = Object.assign({}, multipleTooltipContextDefaults);
-        this.setValue = (value) => {
-            this.setState(Object.assign({}, value));
-        };
-    }
-    render() {
-        const { children } = this.props;
-        return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
-    }
-}
+var isObject_1 = isObject$2;
 
-var css_248z$j = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #313036 0%,\n      rgba(49, 48, 54, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      rgba(255, 255, 255, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n  content: \"\";\n  box-shadow: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background: var(--multiple-tooltip-backdrop-background);\n  filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n  display: flex;\n  box-sizing: border-box;\n  height: 30px;\n  padding: 8px 12px;\n  background-color: var(--multiple-tooltip-item-bg-color);\n  position: relative;\n  border-radius: 5px;\n  align-items: center;\n  color: var(--g-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
-styleInject(css_248z$j);
+/** Detect free variable `global` from Node.js. */
 
-const b$k = block('multiple-tooltip');
-const POPUP_OFFSET = [-32, 4];
-const POPUP_MODIFIERS = [
-    {
-        name: 'preventOverflow',
-        enabled: false,
-    },
-];
-const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
-    const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
-    const activeItem = activeIndex === undefined ? null : items[activeIndex];
-    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$k(null), modifiers: POPUP_MODIFIERS },
-        React__default.createElement("div", { className: b$k('items-container') }, items
-            .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
-            (id !== COLLAPSE_ITEM_ID && type !== 'action'))
-            .map((item, idx) => {
-            switch (item.type) {
-                case 'divider':
-                    return (React__default.createElement("div", { className: b$k('item', { divider: true }), key: idx }, item.title));
-                default:
-                    return (React__default.createElement("div", { className: b$k('item', {
-                            active: item === activeItem,
-                        }), key: idx }, item.title));
-            }
-        }))));
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$2 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$2;
+
+var root$1 = _root;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$1 = function() {
+  return root$1.Date.now();
 };
 
-var css_248z$i = ".gn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$i);
+var now_1 = now$1;
 
-const b$j = block('composite-bar');
-const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
-    const ref = useRef(null);
-    const tooltipRef = useRef(null);
-    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
-    const { compact } = useAsideHeaderContext();
-    const onTooltipMouseEnter = useCallback((e) => {
-        if (!multipleTooltipActive &&
-            activeIndex !== lastClickedItemIndex &&
-            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
-                active: true,
-            });
-        }
-    }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
-    const onTooltipMouseLeave = useCallback(() => {
-        if (multipleTooltipActive) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
-                active: false,
-                lastClickedItemIndex: undefined,
-            });
-        }
-    }, [multipleTooltipActive, setMultipleTooltipContextValue]);
-    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
-        if (multipleTooltip) {
-            let multipleTooltipActiveValue = multipleTooltipActive;
-            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
-                multipleTooltipActiveValue = true;
-            }
-            if (activeIndex === itemIndex &&
-                multipleTooltipActive === multipleTooltipActiveValue) {
-                return;
-            }
-            setMultipleTooltipContextValue({
-                activeIndex: itemIndex,
-                active: multipleTooltipActiveValue,
-            });
-        }
-    }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
-    const onMouseLeave = useCallback(() => {
-        var _a;
-        if (compact) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
-            if (multipleTooltip &&
-                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
-                setMultipleTooltipContextValue({
-                    activeIndex: undefined,
-                    lastClickedItemIndex: undefined,
-                });
-            }
-        }
-    }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
-    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
-        if (compact &&
-            multipleTooltip &&
-            itemIndex !== lastClickedItemIndex &&
-            item.id !== COLLAPSE_ITEM_ID) {
-            setMultipleTooltipContextValue({
-                lastClickedItemIndex: itemIndex,
-                active: false,
-            });
-        }
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
-    }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
-                    const itemExtraProps = isMenuItem(item) ? { item } : item;
-                    const enableTooltip = isMenuItem(item)
-                        ? !multipleTooltip
-                        : item.enableTooltip;
-                    return (React__default.createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
-                } })),
-        type === 'menu' && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
-};
-const CompositeBar = ({ type, items, dict, onItemClick, multipleTooltip = false, }) => {
-    if (items.length === 0) {
-        return null;
-    }
-    let node;
-    if (type === 'menu') {
-        const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(dict);
-        node = (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
-            const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
-            return (React__default.createElement("div", { style: { width, height } },
-                React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
-        }))));
-    }
-    else {
-        node = (React__default.createElement("div", { className: b$j() },
-            React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
-    }
-    return React__default.createElement(MultipleTooltipProvider, null, node);
-};
+/** Used to match a single whitespace character. */
 
-/* Used by renderContent AsideHeader prop */
-const RenderContent = React__default.memo(({ renderContent, size }) => {
-    return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
-});
-RenderContent.displayName = 'RenderContent';
-const Content = ({ size, // TODO: move to context when MobileHeader will support it
-className, cssSizeVariableName = '--aside-header-size', renderContent, }) => {
-    return (React__default.createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default.createElement(RenderContent, { size: size, renderContent: renderContent }))));
-};
+var reWhitespace = /\s/;
 
-function fakeDisplayName(newDisplayName, Component) {
-    const Fake = (props) => React__default.createElement(Component, Object.assign({}, props));
-    Fake.displayName = newDisplayName;
-    return Fake;
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
 }
 
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgControlMenuButton = function SvgControlMenuButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    width: 8,
-    height: 8,
-    viewBox: "0 0 8 8",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
-  })));
-};
-var controlMenuButtonIcon = SvgControlMenuButton;
+var _trimmedEndIndex = trimmedEndIndex$1;
 
-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 SvgDividerCollapsed = function SvgDividerCollapsed(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 56,
-    height: 29,
-    viewBox: "0 0 56 29",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
-  })));
-};
-var headerDividerCollapsedIcon = SvgDividerCollapsed;
+var trimmedEndIndex = _trimmedEndIndex;
 
-var css_248z$h = ".g-root {\n  --aside-header-background-color: var(--g-color-base-warning-light);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n  --aside-header-divider-line-color: var(--g-color-line-generic-solid);\n  --aside-header-header-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--g-color-base-background);\n}\n.gn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--g-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.gn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.gn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.gn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n}\n.gn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.gn-aside-header__aside-content > .gn-aside-header-logo {\n  margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n  background: transparent;\n}\n.gn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.gn-aside-header__header .gn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.gn-aside-header__header_with-decoration::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.gn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.gn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.gn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.gn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.gn-aside-header__panel {\n  height: 100%;\n}\n.gn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.gn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.gn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-primary);\n}";
-styleInject(css_248z$h);
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
 
-// TODO: remove temporary fix for expand button
-const NotIcon = fakeDisplayName('NotIcon', Icon);
-const b$i = block('aside-header');
-class AsideHeader extends React__default.Component {
-    constructor() {
-        super(...arguments);
-        this.asideRef = React__default.createRef();
-        this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems, headerDecoration, multipleTooltip } = this.props;
-            return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
-                    React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
-                    React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
-                        this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: menuItems, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
-                        this.renderFooter(size),
-                        this.renderCollapseButton())),
-                panelItems && this.renderPanels(size)));
-        };
-        this.renderSecondPane = (size) => {
-            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
-        };
-        this.renderLogo = () => React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
-        this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
-            this.renderLogo(),
-            React__default.createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
-            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
-        this.renderFooter = (size) => {
-            const { renderFooter, compact } = this.props;
-            return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
-                size,
-                compact,
-                asideRef: this.asideRef,
-            })));
-        };
-        this.renderPanels = (size) => {
-            const { panelItems } = this.props;
-            return (React__default.createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
-        };
-        this.renderCollapseButton = () => {
-            var _a;
-            const { dict, compact } = this.props;
-            const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
-            return (React__default.createElement(Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
-                React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
-        };
-        this.onCollapseButtonClick = () => {
-            var _a, _b;
-            (_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, !this.props.compact);
-        };
-        this.onCloseDrawer = () => {
-            var _a, _b;
-            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        this.onItemClick = (item, collapsed, event) => {
-            var _a, _b, _c;
-            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
-        };
-        this.onLogoClick = (event) => {
-            var _a, _b, _c, _d;
-            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
-        };
-    }
-    render() {
-        const { className, compact } = this.props;
-        const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement(AsideHeaderContextProvider, { value: { compact, size } },
-            React__default.createElement("div", { className: b$i({ compact }, className) },
-                React__default.createElement("div", { className: b$i('pane-container') },
-                    this.renderFirstPane(size),
-                    this.renderSecondPane(size)))));
-    }
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
 }
-AsideHeader.defaultProps = {
-    panelItems: [],
-    subheaderItems: [],
-    menuItems: [],
-    headerDecoration: true,
-};
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
+var _baseTrim = baseTrim$1;
 
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
+var root = _root;
 
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
 
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-              t[p[i]] = s[p[i]];
-      }
-  return t;
-}
+var _Symbol = Symbol$3;
 
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+var Symbol$2 = _Symbol;
 
-var css_248z$g = ".gn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
-styleInject(css_248z$g);
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
 
-const b$h = block('footer-item');
-const FooterItem$1 = (_a) => {
-    var { item } = _a, props = __rest(_a, ["item"]);
-    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
-};
-
-var css_248z$f = ".gn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.gn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.gn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.gn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
-styleInject(css_248z$f);
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
 
-const b$g = block('action-bar-group');
-const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
-};
-ActionBarGroup.displayName = 'ActionBar.Group';
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
 
-var css_248z$e = ".gn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.gn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.gn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.gn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.gn-action-bar-item + .gn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
-styleInject(css_248z$e);
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
 
-const b$f = block('action-bar-item');
-const ActionBarItem = ({ children, className, pull, spacing = true }) => {
-    return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
-};
-ActionBarItem.displayName = 'ActionBar.Item';
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
 
-var css_248z$d = ".gn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.gn-action-bar-section + .gn-action-bar-section {\n  border-left: solid 1px var(--g-color-line-generic);\n}\n.gn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.gn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
-styleInject(css_248z$d);
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
 
-const b$e = block('action-bar-section');
-const ActionBarSection = ({ children, type = 'primary' }) => {
-    return React__default.createElement("div", { className: b$e({ type }) }, children);
-};
-ActionBarSection.displayName = 'ActionBar.Section';
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
 
-var css_248z$c = ".gn-action-bar-separator {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-left: 6px;\n  margin-right: 6px;\n  border-right: solid 1px var(--g-color-line-generic);\n  height: 40px;\n}";
-styleInject(css_248z$c);
+var _getRawTag = getRawTag$1;
 
-const b$d = block('action-bar-separator');
-const ActionBarSeparator = () => {
-    return React__default.createElement("li", { role: "separator", className: b$d() });
-};
-ActionBarSeparator.displayName = 'ActionBar.Separator';
+/** Used for built-in method references. */
 
-var css_248z$b = ".gn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--g-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
-styleInject(css_248z$b);
+var objectProto = Object.prototype;
 
-const b$c = block('action-bar');
-const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
-};
-ActionBar.displayName = 'ActionBar';
-const PublicActionBar = Object.assign(ActionBar, {
-    Section: ActionBarSection,
-    Group: ActionBarGroup,
-    Item: ActionBarItem,
-    Separator: ActionBarSeparator,
-});
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
 
-var css_248z$a = ".gn-title {\n  box-sizing: border-box;\n  padding: 14px 10px 14px 20px;\n  min-height: 64px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.gn-title_separator {\n  border-bottom: 1px solid var(--g-color-line-generic);\n}\n.gn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
-styleInject(css_248z$a);
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
 
-const b$b = block('title');
-const defaultDict$1 = {
-    close: 'Close',
-};
-const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
-    return (React__default.createElement("div", { className: b$b({ separator: hasSeparator }) },
-        React__default.createElement(Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
-        onClose && (React__default.createElement(Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
-                'aria-label': dict['close'],
-            } },
-            React__default.createElement(Icon, { data: Xmark, size: closeIconSize })))));
-};
-Title.displayName = 'Title';
+var _objectToString = objectToString$1;
 
-function flattenHotkeyGroups(hotkeys) {
-    const result = [];
-    for (const hotkeysGroup of hotkeys) {
-        result.push({
-            title: hotkeysGroup.title,
-            group: true,
-        });
-        result.push(...hotkeysGroup.items);
-    }
-    return result;
-}
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
 
-function filterHotkeys(hotkeys, filter) {
-    if (filter) {
-        const result = [];
-        const normalizedFilter = filter.toLowerCase();
-        for (const hotkeysBlock of hotkeys) {
-            const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
-            if (filteredItems.length > 0) {
-                result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
-            }
-        }
-        return result;
-    }
-    return hotkeys;
-}
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
 
-var css_248z$9 = ".gn-hotkeys-panel {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  --hotkeys-panel-width: 400px;\n  --hotkeys-panel-vertical-padding: 18px;\n  --hotkeys-panel-horizontal-padding: 24px;\n}\n.gn-hotkeys-panel__drawer-item {\n  width: var(--hotkeys-panel-width);\n  padding: var(--hotkeys-panel-vertical-padding) 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.gn-hotkeys-panel__title {\n  margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__search {\n  padding: 0 var(--hotkeys-panel-horizontal-padding);\n  margin-bottom: 14px;\n}\n.gn-hotkeys-panel__list {\n  flex: 1;\n  overflow-y: auto;\n}\n.gn-hotkeys-panel__item {\n  height: auto;\n  padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__item.yc-list__item_active {\n  background: inherit;\n}\n.gn-hotkeys-panel__item-content {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  width: 100%;\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n  color: var(--g-color-text-primary);\n}\n.gn-hotkeys-panel__item-content_group {\n  font-size: var(--g-text-body-2-font-size);\n  font-weight: 500;\n  line-height: var(--g-text-body-2-line-height);\n}\n.gn-hotkeys-panel__hotkey {\n  color: var(--g-color-text-complementary);\n}";
-styleInject(css_248z$9);
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
-const b$a = block('hotkeys-panel');
-function HotkeysPanel(_a) {
-    var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
-    const [filter, setFilter] = useState('');
-    const hotkeysList = useMemo(() => {
-        const filteredHotkeys = filterHotkeys(hotkeys, filter);
-        return flattenHotkeyGroups(filteredHotkeys);
-    }, [hotkeys, filter]);
-    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
-        item.title,
-        item.value && React__default.createElement(Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
-    const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("h2", { className: b$a('title') }, title),
-        React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
-        React__default.createElement(List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
-    return (React__default.createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
-            left: leftOffset,
-            top: topOffset,
-        } },
-        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
 }
 
+var _baseGetTag = baseGetTag$1;
+
 /**
- * This method returns the first argument it receives.
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
  *
  * @static
- * @since 0.1.0
  * @memberOf _
- * @category Util
- * @param {*} value Any value.
- * @returns {*} Returns `value`.
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
  * @example
  *
- * var object = { 'a': 1 };
+ * _.isObjectLike({});
+ * // => true
  *
- * console.log(_.identity(object) === object);
+ * _.isObjectLike([1, 2, 3]);
  * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
  */
 
-function identity(value) {
-  return value;
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
 }
 
-var identity_1 = identity;
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
 
 /**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ * Checks if `value` is classified as a `Symbol` primitive or object.
  *
  * @static
  * @memberOf _
- * @since 0.1.0
+ * @since 4.0.0
  * @category Lang
  * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
  * @example
  *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
+ * _.isSymbol(Symbol.iterator);
  * // => true
  *
- * _.isObject(null);
+ * _.isSymbol('abc');
  * // => false
  */
-
-function isObject$2(value) {
-  var type = typeof value;
-  return value != null && (type == 'object' || type == 'function');
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
 }
 
-var isObject_1 = isObject$2;
+var isSymbol_1 = isSymbol$1;
 
-/** Detect free variable `global` from Node.js. */
+var baseTrim = _baseTrim,
+    isObject$1 = isObject_1,
+    isSymbol = isSymbol_1;
 
-var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
 
-var _freeGlobal = freeGlobal$1;
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 
-var freeGlobal = _freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root$2 = freeGlobal || freeSelf || Function('return this')();
-
-var _root = root$2;
-
-var root$1 = _root;
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now$1 = function() {
-  return root$1.Date.now();
-};
-
-var now_1 = now$1;
-
-/** Used to match a single whitespace character. */
-
-var reWhitespace = /\s/;
-
-/**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
- */
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
-}
-
-var _trimmedEndIndex = trimmedEndIndex$1;
-
-var trimmedEndIndex = _trimmedEndIndex;
-
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
-/**
- * The base implementation of `_.trim`.
- *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
- */
-function baseTrim$1(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
-}
-
-var _baseTrim = baseTrim$1;
-
-var root = _root;
-
-/** Built-in value references. */
-var Symbol$3 = root.Symbol;
-
-var _Symbol = Symbol$3;
-
-var Symbol$2 = _Symbol;
-
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto$1.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$1.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag$1;
-
-/** Used for built-in method references. */
-
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-
-var _objectToString = objectToString$1;
-
-var Symbol$1 = _Symbol,
-    getRawTag = _getRawTag,
-    objectToString = _objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag$1(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? getRawTag(value)
-    : objectToString(value);
-}
-
-var _baseGetTag = baseGetTag$1;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-
-function isObjectLike$1(value) {
-  return value != null && typeof value == 'object';
-}
-
-var isObjectLike_1 = isObjectLike$1;
-
-var baseGetTag = _baseGetTag,
-    isObjectLike = isObjectLike_1;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol$1(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && baseGetTag(value) == symbolTag);
-}
-
-var isSymbol_1 = isSymbol$1;
-
-var baseTrim = _baseTrim,
-    isObject$1 = isObject_1,
-    isSymbol = isSymbol_1;
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
 
 /** Used to detect octal string values. */
 var reIsOctal = /^0o[0-7]+$/i;
@@ -4697,120 +4047,1004 @@ function debounce(func, wait, options) {
       maxing = false,
       trailing = true;
 
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var debounce_1 = debounce;
+
+var css_248z$l = ".gn-composite-bar-highlighted-item {\n  position: absolute;\n  z-index: 10000;\n  display: flex;\n  justify-content: center;\n}\n.gn-composite-bar-highlighted-item__icon {\n  width: var(--gn-aside-header-item-icon-background-size);\n  height: var(--gn-aside-header-item-icon-background-size);\n  border-radius: 7px;\n  cursor: pointer;\n  background-color: var(--g-color-base-background);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  transform: translateY(1px);\n  overflow: hidden;\n  box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);\n}\n.gn-composite-bar-highlighted-item__icon::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-highlighted-item__icon:hover::before {\n  background-color: var(--g-color-base-selection-hover);\n}";
+styleInject(css_248z$l);
+
+const b$m = block('composite-bar-highlighted-item');
+const DEBOUNCE_TIME = 200;
+const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, openModalSubscriber, }) => {
+    const [{ top, left, width, height }, setPosition] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const handleResize = useCallback(debounce_1(() => {
+        var _a;
+        const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === void 0 ? void 0 : iconRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
+        setPosition({
+            top: top + window.scrollY,
+            left: left + window.scrollX,
+            width,
+            height,
+        });
+    }, DEBOUNCE_TIME, { leading: true }), []);
+    useEffect(() => {
+        if (!isModalOpen) {
+            return;
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [handleResize, isModalOpen]);
+    openModalSubscriber === null || openModalSubscriber === void 0 ? void 0 : openModalSubscriber((open) => {
+        setIsModalOpen(open);
+    });
+    if (!iconNode || !isModalOpen) {
+        return null;
+    }
+    return (React__default.createElement(Portal, null,
+        React__default.createElement("div", { className: b$m(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
+            React__default.createElement("div", { className: b$m('icon') }, iconNode))));
+};
+HighlightedItem.displayName = 'HighlightedItem';
+
+var css_248z$k = ".gn-composite-bar-item {\n  --gn-composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n  color: var(--g-color-text-misc);\n}\n.gn-footer-item .gn-composite-bar-item__icon, .gn-composite-bar-highlighted-item .gn-composite-bar-item__icon {\n  color: var(--gn-aside-header-footer-item-icon-color);\n}\n.gn-composite-bar_subheader .gn-composite-bar-item__icon {\n  color: var(--gn-aside-header-subheader-item-icon-color);\n}\n.gn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--gn-aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.gn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--g-color-line-generic);\n  cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--gn-composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--g-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--gn-composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n  background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n  width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n  width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: var(--gn-aside-header-item-icon-background-size);\n  height: var(--gn-aside-header-item-icon-background-size);\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: var(--gn-aside-header-item-icon-background-size);\n  height: var(--gn-aside-header-item-icon-background-size);\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-simple-hover);\n}";
+styleInject(css_248z$k);
+
+const b$l = block('composite-bar-item');
+function renderItemTitle(item) {
+    let titleNode = React__default.createElement("div", { className: b$l('title-text') }, item.title);
+    if (item.rightAdornment) {
+        titleNode = (React__default.createElement(React__default.Fragment, null,
+            titleNode,
+            React__default.createElement("div", { className: b$l('title-adornment') }, item.rightAdornment)));
+    }
+    return titleNode;
+}
+const defaultPopupPlacement = ['right-end'];
+const defaultPopupOffset = [-20, 8];
+const Item$1 = (props) => {
+    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, bringForward, openModalSubscriber, } = props;
+    const { compact } = useAsideHeaderContext();
+    if (item.type === 'divider') {
+        return React__default.createElement("div", { className: b$l('menu-divider') });
+    }
+    const [open, toggleOpen] = React__default.useState(false);
+    const ref = React__default.useRef(null);
+    const anchorRef = popupAnchor || ref;
+    const highlightedRef = React__default.useRef(null);
+    const type = item.type || ITEM_TYPE_REGULAR;
+    const current = item.current || false;
+    const tooltipText = item.tooltipText || item.title;
+    const icon = item.icon;
+    const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE;
+    const collapsedItem = item.id === COLLAPSE_ITEM_ID;
+    const onClose = React__default.useCallback((event) => {
+        var _a;
+        if (event instanceof MouseEvent &&
+            event.target &&
+            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
+    }, [onClosePopup]);
+    const makeIconNode = (iconEl) => {
+        return compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
+            React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$l('btn-icon') }, iconEl))) : (iconEl);
+    };
+    const makeNode = ({ icon: iconEl, title: titleEl }) => {
+        const createdNode = (React__default.createElement("div", { className: b$l({ type, current, compact }, className), ref: ref, onClick: (event) => {
+                if (collapsedItem) {
+                    /**
+                     * If we call onItemClick for collapsedItem then:
+                     * - User get unexpected item in onItemClick callback
+                     * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                     */
+                    toggleOpen(!open);
+                }
+                else {
+                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
+                }
+            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+                if (!compact) {
+                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+                }
+            }, onMouseLeave: () => {
+                if (!compact) {
+                    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+                }
+            } },
+            React__default.createElement("div", { className: b$l('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
+            React__default.createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        return item.link ? (React__default.createElement("a", { href: item.link, className: b$l('link') }, createdNode)) : (createdNode);
+    };
+    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$l('icon') }) : null;
+    const titleNode = renderItemTitle(item);
+    const params = { icon: iconNode, title: titleNode };
+    let node;
+    const opts = { compact, collapsed: false, item, ref };
+    if (typeof item.itemWrapper === 'function') {
+        node = item.itemWrapper(params, makeNode, opts);
+    }
+    else {
+        node = makeNode(params);
+    }
+    const highlightedNode = makeIconNode(iconNode);
+    return (React__default.createElement(React__default.Fragment, null,
+        bringForward && (React__default.createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event), onClickCapture: onItemClickCapture, openModalSubscriber: openModalSubscriber })),
+        node,
+        open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
+};
+Item$1.displayName = 'Item';
+function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
+    const { compact } = useAsideHeaderContext();
+    return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
+        React__default.createElement("div", { className: b$l('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
+                    const makeCollapseNode = ({ title: titleEl }) => {
+                        const res = (React__default.createElement("div", { className: b$l('collapse-item'), onClick: (event) => {
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
+                            } }, titleEl));
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$l('link') }, res)) : (res);
+                    };
+                    const titleNode = renderItemTitle(collapseItem);
+                    const params = { title: titleNode };
+                    const opts = { compact, collapsed: true, item: collapseItem, ref: anchorRef };
+                    if (typeof collapseItem.itemWrapper === 'function') {
+                        return collapseItem.itemWrapper(params, makeCollapseNode, opts);
+                    }
+                    else {
+                        return makeCollapseNode(params);
+                    }
+                } })))) : null;
+}
+
+const multipleTooltipContextDefaults = {
+    active: false,
+    activeIndex: undefined,
+    hideCollapseItemTooltip: false,
+    lastClickedItemIndex: undefined,
+    setValue: () => { },
+};
+const MultipleTooltipContext = React__default.createContext(multipleTooltipContextDefaults);
+class MultipleTooltipProvider extends React__default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = Object.assign({}, multipleTooltipContextDefaults);
+        this.setValue = (value) => {
+            this.setState(Object.assign({}, value));
+        };
+    }
+    render() {
+        const { children } = this.props;
+        return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
+    }
+}
+
+var css_248z$j = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #313036 0%,\n      rgba(49, 48, 54, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      rgba(255, 255, 255, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n  content: \"\";\n  box-shadow: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background: var(--multiple-tooltip-backdrop-background);\n  filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n  display: flex;\n  box-sizing: border-box;\n  height: 30px;\n  padding: 8px 12px;\n  background-color: var(--multiple-tooltip-item-bg-color);\n  position: relative;\n  border-radius: 5px;\n  align-items: center;\n  color: var(--g-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
+styleInject(css_248z$j);
+
+const b$k = block('multiple-tooltip');
+const POPUP_OFFSET = [-32, 4];
+const POPUP_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        enabled: false,
+    },
+];
+const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
+    const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
+    const activeItem = activeIndex === undefined ? null : items[activeIndex];
+    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$k(null), modifiers: POPUP_MODIFIERS },
+        React__default.createElement("div", { className: b$k('items-container') }, items
+            .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
+            (id !== COLLAPSE_ITEM_ID && type !== 'action'))
+            .map((item, idx) => {
+            switch (item.type) {
+                case 'divider':
+                    return (React__default.createElement("div", { className: b$k('item', { divider: true }), key: idx }, item.title));
+                default:
+                    return (React__default.createElement("div", { className: b$k('item', {
+                            active: item === activeItem,
+                        }), key: idx }, item.title));
+            }
+        }))));
+};
+
+var css_248z$i = ".gn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$i);
+
+const b$j = block('composite-bar');
+const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
+    const ref = useRef(null);
+    const tooltipRef = useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
+    const { compact } = useAsideHeaderContext();
+    React__default.useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({ active: false });
+            }
+        }
+        window.addEventListener('blur', handleBlurWindow);
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onTooltipMouseEnter = useCallback((e) => {
+        if (multipleTooltip &&
+            compact &&
+            !multipleTooltipActive &&
+            document.hasFocus() &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: true,
+            });
+        }
+    }, [
+        multipleTooltip,
+        compact,
+        multipleTooltipActive,
+        activeIndex,
+        lastClickedItemIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onTooltipMouseLeave = useCallback(() => {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
+        if (multipleTooltip) {
+            let multipleTooltipActiveValue = multipleTooltipActive;
+            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
+                multipleTooltipActiveValue = true;
+            }
+            if (activeIndex === itemIndex &&
+                multipleTooltipActive === multipleTooltipActiveValue) {
+                return;
+            }
+            setMultipleTooltipContextValue({
+                activeIndex: itemIndex,
+                active: multipleTooltipActiveValue,
+            });
+        }
+    }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
+    const onMouseLeave = useCallback(() => {
+        var _a;
+        if (compact) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
+            if (multipleTooltip &&
+                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
+                setMultipleTooltipContextValue({
+                    activeIndex: undefined,
+                    lastClickedItemIndex: undefined,
+                });
+            }
+        }
+    }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
+    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
+        }
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
+    }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+                    const itemExtraProps = isMenuItem(item) ? { item } : item;
+                    const enableTooltip = isMenuItem(item)
+                        ? !multipleTooltip
+                        : item.enableTooltip;
+                    return (React__default.createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
+                } })),
+        type === 'menu' && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+};
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    let node;
+    if (type === 'menu') {
+        const minHeight = getItemsMinHeight(items);
+        const collapseItem = getMoreButtonItem(menuMoreTitle);
+        node = (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+            const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
+            return (React__default.createElement("div", { style: { width, height } },
+                React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React__default.createElement("div", { className: b$j({ subheader: true }) },
+            React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
+    }
+    return React__default.createElement(MultipleTooltipProvider, null, node);
+};
+
+/* Used by renderContent AsideHeader prop */
+const RenderContent = React__default.memo(({ renderContent, size }) => {
+    return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
+});
+RenderContent.displayName = 'RenderContent';
+const Content = ({ size, // TODO: move to context when MobileHeader will support it
+className, cssSizeVariableName = '--gn-aside-header-size', renderContent, }) => {
+    return (React__default.createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default.createElement(RenderContent, { size: size, renderContent: renderContent }))));
+};
+
+function fakeDisplayName(newDisplayName, Component) {
+    const Fake = (props) => React__default.createElement(Component, Object.assign({}, props));
+    Fake.displayName = newDisplayName;
+    return Fake;
+}
+
+const PARAM_REGEXP = /{{(.*?)}}/g;
+function replaceParams(keyValue, params) {
+    let result = '';
+    let lastIndex = (PARAM_REGEXP.lastIndex = 0);
+    let match;
+    while ((match = PARAM_REGEXP.exec(keyValue))) {
+        if (lastIndex !== match.index) {
+            result += keyValue.slice(lastIndex, match.index);
+        }
+        lastIndex = PARAM_REGEXP.lastIndex;
+        const [all, key] = match;
+        if (Object.prototype.hasOwnProperty.call(params, key)) {
+            result += params[key];
+        }
+        else {
+            result += all;
+        }
+    }
+    if (lastIndex < keyValue.length) {
+        result += keyValue.slice(lastIndex);
+    }
+    return result;
+}
+
+var PluralForm;
+(function (PluralForm) {
+    PluralForm[PluralForm["One"] = 0] = "One";
+    PluralForm[PluralForm["Few"] = 1] = "Few";
+    PluralForm[PluralForm["Many"] = 2] = "Many";
+    PluralForm[PluralForm["None"] = 3] = "None";
+})(PluralForm || (PluralForm = {}));
+
+function pluralizerEn (count, pluralForms) {
+    if (count === 0) {
+        return pluralForms.None;
+    }
+    if (count === 1 || count === -1) {
+        return pluralForms.One;
+    }
+    return pluralForms.Many;
+}
+
+function pluralizerRu (count, pluralForms) {
+    // the rules for negative numbers are the same
+    const lastDigit = Math.abs(count % 10);
+    const last2Digits = Math.abs(count % 100);
+    if (count === 0) {
+        return pluralForms.None;
+    }
+    if (lastDigit === 1 && last2Digits !== 11) {
+        return pluralForms.One;
+    }
+    if ((lastDigit > 1 && lastDigit < 5) && (last2Digits < 10 || last2Digits > 20)) {
+        return pluralForms.Few;
+    }
+    return pluralForms.Many;
+}
+
+class I18N {
+    constructor(options) {
+        this.data = {};
+        this.lang = undefined;
+        this.pluralizers = {
+            en: pluralizerEn,
+            ru: pluralizerRu,
+        };
+        this.logger = null;
+        this.logger = (options === null || options === void 0 ? void 0 : options.logger) || null;
+    }
+    setLang(lang) {
+        this.lang = lang;
+    }
+    configurePluralization(pluralizers) {
+        this.pluralizers = Object.assign({}, this.pluralizers, pluralizers);
+    }
+    registerKeyset(lang, keysetName, data = {}) {
+        if (this.data[lang] && Object.prototype.hasOwnProperty.call(this.data[lang], keysetName)) {
+            throw new Error(`Keyset '${keysetName}' is already registered, aborting!`);
+        }
+        this.data[lang] = Object.assign({}, this.data[lang], { [keysetName]: data });
+    }
+    registerKeysets(lang, data) {
+        Object.keys(data).forEach((keysetName) => {
+            this.registerKeyset(lang, keysetName, data[keysetName]);
+        });
+    }
+    has(keysetName, key, lang) {
+        const languageData = this.getLanguageData(lang);
+        return Boolean(languageData && languageData[keysetName] && languageData[keysetName][key]);
+    }
+    i18n(keysetName, key, params) {
+        const languageData = this.getLanguageData(this.lang);
+        if (typeof languageData === 'undefined') {
+            throw new Error(`Language '${this.lang}' is not defined, make sure you call setLang for the same language you called registerKeysets for!`);
+        }
+        if (Object.keys(languageData).length === 0) {
+            this.warn('Language data is empty.');
+            return key;
+        }
+        const keyset = languageData[keysetName];
+        if (!keyset) {
+            this.warn('Keyset not found.', keysetName);
+            return key;
+        }
+        if (Object.keys(keyset).length === 0) {
+            this.warn('Keyset is empty.', keysetName);
+            return key;
+        }
+        const keyValue = keyset && keyset[key];
+        let result;
+        if (typeof keyValue === 'undefined') {
+            this.warn('Missing key.', keysetName, key);
+            return key;
+        }
+        if (Array.isArray(keyValue)) {
+            if (keyValue.length < 3) {
+                this.warn('Missing required plurals', keysetName, key);
+                return key;
+            }
+            const count = Number(params === null || params === void 0 ? void 0 : params.count);
+            if (Number.isNaN(count)) {
+                this.warn('Missing params.count for key.', keysetName, key);
+                return key;
+            }
+            const pluralizer = this.getLanguagePluralizer(this.lang);
+            result = keyValue[pluralizer(count, PluralForm)] || keyValue[PluralForm.Many];
+            if (keyValue[PluralForm.None] === undefined) {
+                this.warn('Missing key for 0', keysetName, key);
+            }
+        }
+        else {
+            result = keyValue;
+        }
+        if (params) {
+            result = replaceParams(result, params);
+        }
+        return result;
+    }
+    keyset(keysetName) {
+        return (key, params) => {
+            return this.i18n(keysetName, key, params);
+        };
+    }
+    warn(msg, keyset, key) {
+        var _a;
+        let cacheKey = '';
+        if (keyset) {
+            cacheKey += keyset;
+            if (key) {
+                cacheKey += `.${key}`;
+            }
+        }
+        else {
+            cacheKey = 'languageData';
+        }
+        (_a = this.logger) === null || _a === void 0 ? void 0 : _a.log(`I18n: ${msg}`, {
+            level: 'info',
+            logger: cacheKey,
+            extra: {
+                type: 'i18n'
+            }
+        });
+    }
+    getLanguageData(lang) {
+        const langCode = lang || this.lang;
+        return langCode ? this.data[langCode] : undefined;
+    }
+    getLanguagePluralizer(lang) {
+        const pluralizer = lang ? this.pluralizers[lang] : undefined;
+        if (!pluralizer) {
+            this.warn(`Pluralization is not configured for language '${lang}', falling back to the english ruleset`);
+        }
+        return pluralizer || pluralizerEn;
+    }
+}
+
+var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang || (Lang = {}));
+let subs = [];
+const config = {
+    lang: Lang.En,
+};
+const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+const getConfig = () => config;
+
+const i18n$4 = new I18N();
+i18n$4.setLang(getConfig().lang);
+subscribeConfigure((config) => {
+    i18n$4.setLang(config.lang);
+});
+
+function registerKeyset(data, keysetName) {
+    Object.entries(data).forEach(([lang, keys]) => i18n$4.registerKeyset(lang, keysetName, keys));
+    return i18n$4.keyset(keysetName);
+}
+
+var button_collapse$1 = "Collapse";
+var button_expand$1 = "Expand";
+var label_more$1 = "More";
+var en$3 = {
+	button_collapse: button_collapse$1,
+	button_expand: button_expand$1,
+	label_more: label_more$1
+};
+
+var button_collapse = "Свернуть";
+var button_expand = "Развернуть";
+var label_more = "Ещё";
+var ru$3 = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
+};
+
+const COMPONENT$3 = 'AsideHeader';
+var i18n$3 = registerKeyset({ en: en$3, ru: ru$3 }, COMPONENT$3);
+
+var _path$1;
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var SvgControlMenuButton = function SvgControlMenuButton(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    width: 8,
+    height: 8,
+    viewBox: "0 0 8 8",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
+  })));
+};
+var controlMenuButtonIcon = SvgControlMenuButton;
+
+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 SvgDividerCollapsed = function SvgDividerCollapsed(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 56,
+    height: 29,
+    viewBox: "0 0 56 29",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
+  })));
+};
+var headerDividerCollapsedIcon = SvgDividerCollapsed;
+
+var css_248z$h = ".g-root {\n  --gn-aside-header-background-color: var(--g-color-base-warning-light);\n  --gn-aside-header-collapse-button-divider-line-color: var(\n      --gn-aside-header-subheader-divider-line-color\n  );\n  --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);\n  --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);\n  --gn-aside-header-item-icon-background-size: 38px;\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n  --gn-aside-header-divider-line-color: transparent;\n  --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n  --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);\n  --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n  --gn-aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--g-color-base-background);\n}\n.gn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--g-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.gn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--gn-aside-header-divider-line-color);\n}\n.gn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.gn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n}\n.gn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.gn-aside-header__aside-content > .gn-aside-header-logo {\n  margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n  background: linear-gradient(180deg, var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n  background: transparent;\n}\n.gn-aside-header__header {\n  --gn-aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.gn-aside-header__header .gn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header_with-decoration::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--gn-aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--gn-aside-header-subheader-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.gn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.gn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.gn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.gn-aside-header__panel {\n  height: 100%;\n}\n.gn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.gn-aside-header__content {\n  width: calc(100% - var(--gn-aside-header-size));\n  z-index: 95;\n}\n.gn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--gn-aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-primary);\n}";
+styleInject(css_248z$h);
+
+// TODO: remove temporary fix for expand button
+const NotIcon = fakeDisplayName('NotIcon', Icon);
+const b$i = block('aside-header');
+class AsideHeader extends React__default.Component {
+    constructor() {
+        super(...arguments);
+        this.asideRef = React__default.createRef();
+        this.renderFirstPane = (size) => {
+            const { menuItems, panelItems, headerDecoration, multipleTooltip, menuMoreTitle } = this.props;
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
+                    React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
+                    React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
+                        this.renderHeader(),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: menuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
+                        this.renderFooter(size),
+                        this.renderCollapseButton())),
+                panelItems && this.renderPanels(size)));
+        };
+        this.renderSecondPane = (size) => {
+            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
+        };
+        this.renderLogo = () => React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
+        this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
+            this.renderLogo(),
+            React__default.createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
+            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+        this.renderFooter = (size) => {
+            const { renderFooter, compact } = this.props;
+            return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+                size,
+                compact,
+                asideRef: this.asideRef,
+            })));
+        };
+        this.renderPanels = (size) => {
+            const { panelItems } = this.props;
+            return (React__default.createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
+        };
+        this.renderCollapseButton = () => {
+            const { expandTitle, collapseTitle, compact } = this.props;
+            const buttonTitle = compact
+                ? expandTitle || i18n$3('button_expand')
+                : collapseTitle || i18n$3('button_collapse');
+            return (React__default.createElement(Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: buttonTitle },
+                React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
+        };
+        this.onCollapseButtonClick = () => {
+            var _a, _b;
+            (_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, !this.props.compact);
+        };
+        this.onCloseDrawer = () => {
+            var _a, _b;
+            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        this.onItemClick = (item, collapsed, event) => {
+            var _a, _b, _c;
+            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
+        };
+        this.onLogoClick = (event) => {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
+        };
+    }
+    render() {
+        const { className, compact } = this.props;
+        const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
+        return (React__default.createElement(AsideHeaderContextProvider, { value: { compact, size } },
+            React__default.createElement("div", { className: b$i({ compact }, className) },
+                React__default.createElement("div", { className: b$i('pane-container') },
+                    this.renderFirstPane(size),
+                    this.renderSecondPane(size)))));
+    }
+}
+AsideHeader.defaultProps = {
+    panelItems: [],
+    subheaderItems: [],
+    menuItems: [],
+    headerDecoration: true,
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
 
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
+var css_248z$g = ".gn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
+styleInject(css_248z$g);
 
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
+const b$h = block('footer-item');
+const FooterItem$1 = (_a) => {
+    var { item } = _a, props = __rest(_a, ["item"]);
+    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
+};
 
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
+var css_248z$f = ".gn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.gn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.gn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.gn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
+styleInject(css_248z$f);
 
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
+const b$g = block('action-bar-group');
+const ActionBarGroup = ({ children, className, pull }) => {
+    return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
+};
+ActionBarGroup.displayName = 'ActionBar.Group';
 
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
+var css_248z$e = ".gn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.gn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.gn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.gn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.gn-action-bar-item + .gn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
+styleInject(css_248z$e);
 
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
+const b$f = block('action-bar-item');
+const ActionBarItem = ({ children, className, pull, spacing = true }) => {
+    return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
+};
+ActionBarItem.displayName = 'ActionBar.Item';
 
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
+var css_248z$d = ".gn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.gn-action-bar-section + .gn-action-bar-section {\n  border-left: solid 1px var(--g-color-line-generic);\n}\n.gn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.gn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
+styleInject(css_248z$d);
 
-  function trailingEdge(time) {
-    timerId = undefined;
+const b$e = block('action-bar-section');
+const ActionBarSection = ({ children, type = 'primary' }) => {
+    return React__default.createElement("div", { className: b$e({ type }) }, children);
+};
+ActionBarSection.displayName = 'ActionBar.Section';
 
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
+var css_248z$c = ".gn-action-bar-separator {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-left: 6px;\n  margin-right: 6px;\n  border-right: solid 1px var(--g-color-line-generic);\n  height: 40px;\n}";
+styleInject(css_248z$c);
+
+const b$d = block('action-bar-separator');
+const ActionBarSeparator = () => {
+    return React__default.createElement("li", { role: "separator", className: b$d() });
+};
+ActionBarSeparator.displayName = 'ActionBar.Separator';
+
+var css_248z$b = ".gn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--g-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
+styleInject(css_248z$b);
+
+const b$c = block('action-bar');
+const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
+    return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
+};
+ActionBar.displayName = 'ActionBar';
+const PublicActionBar = Object.assign(ActionBar, {
+    Section: ActionBarSection,
+    Group: ActionBarGroup,
+    Item: ActionBarItem,
+    Separator: ActionBarSeparator,
+});
+
+var button_close$1 = "Close";
+var en$2 = {
+	button_close: button_close$1
+};
+
+var button_close = "Закрыть";
+var ru$2 = {
+	button_close: button_close
+};
+
+const COMPONENT$2 = 'Title';
+var i18n$2 = registerKeyset({ en: en$2, ru: ru$2 }, COMPONENT$2);
+
+var css_248z$a = ".gn-title {\n  box-sizing: border-box;\n  padding: 14px 10px 14px 20px;\n  min-height: 64px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.gn-title_separator {\n  border-bottom: 1px solid var(--g-color-line-generic);\n}\n.gn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
+styleInject(css_248z$a);
+
+const b$b = block('title');
+const Title = ({ children, closeIconSize = 23, hasSeparator, closeTitle = i18n$2('button_close'), onClose, }) => {
+    return (React__default.createElement("div", { className: b$b({ separator: hasSeparator }) },
+        React__default.createElement(Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
+        onClose && (React__default.createElement(Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
+                'aria-label': closeTitle,
+            } },
+            React__default.createElement(Icon, { data: Xmark, size: closeIconSize })))));
+};
+Title.displayName = 'Title';
+
+function flattenHotkeyGroups(hotkeys) {
+    const result = [];
+    for (const hotkeysGroup of hotkeys) {
+        result.push({
+            title: hotkeysGroup.title,
+            group: true,
+        });
+        result.push(...hotkeysGroup.items);
     }
-    lastArgs = lastThis = undefined;
     return result;
-  }
+}
 
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
+function filterHotkeys(hotkeys, filter) {
+    if (filter) {
+        const result = [];
+        const normalizedFilter = filter.toLowerCase();
+        for (const hotkeysBlock of hotkeys) {
+            const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
+            if (filteredItems.length > 0) {
+                result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
+            }
+        }
+        return result;
     }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
+    return hotkeys;
+}
 
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
+var css_248z$9 = ".gn-hotkeys-panel {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  --hotkeys-panel-width: 400px;\n  --hotkeys-panel-vertical-padding: 18px;\n  --hotkeys-panel-horizontal-padding: 24px;\n}\n.gn-hotkeys-panel__drawer-item {\n  width: var(--hotkeys-panel-width);\n  padding: var(--hotkeys-panel-vertical-padding) 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.gn-hotkeys-panel__title {\n  margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__search {\n  padding: 0 var(--hotkeys-panel-horizontal-padding);\n  margin-bottom: 14px;\n}\n.gn-hotkeys-panel__list {\n  flex: 1;\n  overflow-y: auto;\n}\n.gn-hotkeys-panel__item {\n  height: auto;\n  padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__item.yc-list__item_active {\n  background: inherit;\n}\n.gn-hotkeys-panel__item-content {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  width: 100%;\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n  color: var(--g-color-text-primary);\n}\n.gn-hotkeys-panel__item-content_group {\n  font-size: var(--g-text-body-2-font-size);\n  font-weight: 500;\n  line-height: var(--g-text-body-2-line-height);\n}\n.gn-hotkeys-panel__hotkey {\n  color: var(--g-color-text-complementary);\n}";
+styleInject(css_248z$9);
 
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
+const b$a = block('hotkeys-panel');
+function HotkeysPanel(_a) {
+    var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
+    const [filter, setFilter] = useState('');
+    const hotkeysList = useMemo(() => {
+        const filteredHotkeys = filterHotkeys(hotkeys, filter);
+        return flattenHotkeyGroups(filteredHotkeys);
+    }, [hotkeys, filter]);
+    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
+        item.title,
+        item.value && React__default.createElement(Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
+    const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("h2", { className: b$a('title') }, title),
+        React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
+        React__default.createElement(List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
+    return (React__default.createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
+            left: leftOffset,
+            top: topOffset,
+        } },
+        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
+}
 
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
+/**
+ * This method returns the first argument it receives.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {*} value Any value.
+ * @returns {*} Returns `value`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ *
+ * console.log(_.identity(object) === object);
+ * // => true
+ */
 
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
+function identity(value) {
+  return value;
 }
 
-var debounce_1 = debounce;
+var identity_1 = identity;
 
 function useStableCallback(func) {
     const funcRef = React.useRef();
@@ -4954,6 +5188,23 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         React__default.createElement(Tabs, { items: tabItems, className: b$7(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
 };
 
+var label_title$1 = "Settings";
+var en$1 = {
+	label_title: label_title$1,
+	"label_filter-placeholder": "Search settings",
+	"label_empty-placeholder": "No results found"
+};
+
+var label_title = "Настройки";
+var ru$1 = {
+	label_title: label_title,
+	"label_filter-placeholder": "Найти настройки",
+	"label_empty-placeholder": "Ничего не найдено"
+};
+
+const COMPONENT$1 = 'Settings';
+var i18n$1 = registerKeyset({ en: en$1, ru: ru$1 }, COMPONENT$1);
+
 function getSettingsFromChildren(children, searchText = '') {
     // 'abc def fg' -> abc.*?cde.*?fg
     const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
@@ -5079,11 +5330,6 @@ var css_248z$6 = ".gn-settings {\n  display: grid;\n  grid-template-columns: 216
 styleInject(css_248z$6);
 
 const b$6 = block('settings');
-const defaultDict = {
-    heading_settings: 'Settings',
-    placeholder_search: 'Search settings',
-    not_found: 'No results found',
-};
 function Settings(_a) {
     var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
     if (loading) {
@@ -5103,10 +5349,7 @@ const getPageTitleById = (menu, activePage) => {
     }
     return '';
 };
-Settings.defaultProps = {
-    dict: defaultDict,
-};
-function SettingsContent({ initialPage, children, renderNotFound, dict, view, onPageChange, onClose, }) {
+function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
     var _a, _b;
     const [search, setSearch] = React__default.useState('');
     const { menu, pages } = getSettingsFromChildren(children, search);
@@ -5148,7 +5391,7 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
     });
     const renderPageContent = () => {
         if (!activePage) {
-            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b$6('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b$6('not-found') }, emptyPlaceholder));
         }
         const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
         return (React__default.createElement(React__default.Fragment, null,
@@ -5175,8 +5418,8 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
                     }
                 }
             } },
-            React__default.createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
-            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
+            React__default.createElement(Title, null, title),
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
             React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
         React__default.createElement("div", { className: b$6('page') }, renderPageContent())));
 }
@@ -5239,7 +5482,7 @@ var css_248z$5 = ".gn-mobile-header-burger {\n  margin: 0;\n  padding: 0;\n  fon
 styleInject(css_248z$5);
 
 const b$5 = block('mobile-header-burger');
-const Burger = React__default.memo(({ opened, className, onClick }) => (React__default.createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? defaultDict$2['button_close-burger'] : defaultDict$2['button_open-burger'] },
+const Burger = React__default.memo(({ closeTitle, openTitle, opened, className, onClick }) => (React__default.createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? closeTitle : openTitle },
     React__default.createElement("span", { className: b$5('icon') },
         React__default.createElement("span", { className: b$5('icon-dash') })))));
 Burger.displayName = 'Burger';
@@ -5345,11 +5588,28 @@ const BurgerMenu = React__default.memo(({ items = [], renderFooter, modalItem, c
 });
 BurgerMenu.displayName = 'BurgerMenu';
 
+var burger_button_close$1 = "Close menu";
+var burger_button_open$1 = "Open menu";
+var en = {
+	burger_button_close: burger_button_close$1,
+	burger_button_open: burger_button_open$1
+};
+
+var burger_button_close = "Закрыть меню";
+var burger_button_open = "Открыть меню";
+var ru = {
+	burger_button_close: burger_button_close,
+	burger_button_open: burger_button_open
+};
+
+const COMPONENT = 'MobileHeader';
+var i18n = registerKeyset({ en, ru }, COMPONENT);
+
 var css_248z$1 = ".gn-mobile-header {\n  --mobile-header-min-heigth: 50px;\n  --mobile-header-icon-size: 20px;\n  background-color: var(--g-color-base-background);\n}\n.gn-mobile-header__header {\n  background-color: var(--g-color-base-background);\n  border-bottom: 1px solid var(--g-color-line-generic);\n  position: sticky;\n  top: 0;\n  padding: 0 10px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 100;\n}\n.gn-mobile-header__burger {\n  padding: 12px;\n}\n.gn-mobile-header__burger-menu, .gn-mobile-header__panel-item {\n  background-color: var(--g-color-base-background);\n  width: 320px;\n  max-width: 90vw;\n  max-height: 100%;\n}\n.gn-mobile-header__user-menu {\n  overflow-y: auto;\n}\n.gn-mobile-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: var(--mobile-header-min-heigth);\n  overflow: hidden;\n}\n.gn-mobile-header__content {\n  overflow: auto;\n}";
 styleInject(css_248z$1);
 
 const b$1 = block('mobile-header');
-const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
+const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
     const targetRef = useForwardRef(ref);
     const [compact] = useState(true);
     const [visiblePanel, setVisiblePanel] = useState(null);
@@ -5439,7 +5699,7 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems =
     }, [targetRef, onBurgerClose, onBurgerOpen]);
     return (React__default.createElement("div", { className: b$1({ compact }, className), ref: targetRef },
         React__default.createElement("header", { className: b$1('header'), style: { height: size } },
-            React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger') }),
+            React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
             React__default.createElement(Logo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
             React__default.createElement("div", { className: b$1('side-item') }, sideItemRenderContent === null || sideItemRenderContent === void 0 ? void 0 : sideItemRenderContent({ size }))),
         React__default.createElement(Drawer, { className: b$1('panels'), onVeilClick: onCloseDrawer, onEscape: onCloseDrawer, style: { top: size } }, [burgerPanelItem, ...panelItems].map((item) => (React__default.createElement(DrawerItem, Object.assign({}, item, { key: item.id, visible: visiblePanel === item.id, className: b$1('panel-item', item.className) }))))),
@@ -5466,5 +5726,5 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
         React__default.createElement(Sheet, { id: modalItem.id, title: modalItem.title, visible: modalItem.visible, className: b('modal', modalItem.className), contentClassName: b('modal-content', modalItem.contentClassName), allowHideOnContentScroll: modalItem.modalAllowHideOnContentScroll, onClose: modalItem.onClose }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))));
 };
 
-export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, useAsideHeaderContext };
+export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
 //# sourceMappingURL=index.js.map