npm - @gravity-ui/navigation - Versions diffs - 0.10.1 → 0.12.0 - Mend

@gravity-ui/navigation 0.10.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/build/esm/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useRef, useContext, useCallback, useState, useMemo, useEffect } 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 ReactDOM from 'react-dom';
 import { Ellipsis, Xmark } from '@gravity-ui/icons';
@@ -22,7 +22,13 @@ var lib = {exports: {}};
 Object.defineProperty(lib$1, "__esModule", { value: true });
 var bem_cn_1 = lib.exports;
-var block$1 = bem_cn_1.setup();
+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() {
@@ -33,7 +39,7 @@ function bemClassNameLite(blockName) {
         var elementName = args.shift();
         var modifiers = args[0], mixin = args[1];
         var result;
-        if (typeof elementName !== 'string' || typeof modifiers === 'string') {
+        if (typeof elementName !== 'string' || hasMixinShape(modifiers)) {
             mixin = modifiers;
             modifiers = null;
         }
@@ -49,10 +55,10 @@ function bemClassNameLite(blockName) {
     return element;
 }
 bemClassNameLite.setup = function (config) {
-    block$1 = bem_cn_1.setup(config);
+    block$1 = (0, bem_cn_1.setup)(config);
 };
 bemClassNameLite.reset = function () {
-    block$1 = bem_cn_1.setup();
+    block$1 = (0, bem_cn_1.setup)();
 };
 var _default = lib$1.default = bemClassNameLite;
@@ -84,8 +90,8 @@ const defaultDict$2 = {
     [MobileHeaderDict.OpenBurger]: 'Open menu',
 };
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -96,7 +102,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -1351,7 +1357,7 @@ function removeClass$1(element, className) {
   }
 }
-var config = {
+var config$1 = {
   disabled: false
 };
@@ -1631,7 +1637,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 () {
@@ -1663,7 +1669,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 () {
@@ -2249,7 +2255,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
         _this$props.classNames;
         var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
-    return /*#__PURE__*/React__default.createElement(Transition, _extends$3({}, props, {
+    return /*#__PURE__*/React__default.createElement(Transition, _extends$2({}, props, {
       onEnter: this.onEnter,
       onEntered: this.onEntered,
       onEntering: this.onEntering,
@@ -2265,7 +2271,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 CSSTransition.defaultProps = {
   classNames: ''
 };
-CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({}, Transition.propTypes, {
+CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$2({}, Transition.propTypes, {
   /**
    * The animation classNames applied to the component as it appears, enters,
    * exits or has finished the transition. A single name can be provided, which
@@ -2627,7 +2633,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) {
     if (this.mounted) {
       this.setState(function (state) {
-        var children = _extends$3({}, state.children);
+        var children = _extends$2({}, state.children);
         delete children[child.key];
         return {
@@ -3130,7 +3136,7 @@ function styleInject(css, ref) {
   }
 }
-var css_248z$m = ".ycn-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(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
+var css_248z$m = ".ycn-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.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-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.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
 styleInject(css_248z$m);
 const b$n = block('drawer');
@@ -3183,11 +3189,19 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
-var css_248z$l = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-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.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
+const AsideHeaderContext = React__default.createContext({
+    compact: false,
+    size: ASIDE_HEADER_COMPACT_WIDTH,
+});
+const AsideHeaderContextProvider = AsideHeaderContext.Provider;
+const useAsideHeaderContext = () => React__default.useContext(AsideHeaderContext);
+var css_248z$l = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-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.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-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.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
 styleInject(css_248z$l);
 const b$m = block('logo');
-const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+    const { compact } = useAsideHeaderContext();
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
     const linkProps = hasClickHandler
@@ -3218,143 +3232,38 @@ const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, te
             (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$m('logo-link'), onClick: onClick }), logo)))));
 };
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-var _extends$2 = Object.assign || 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;
-};
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
 /**
  * Detect Element Resize.
  * https://github.com/sdecima/javascript-detect-element-resize
  * Sebastian Decima
  *
  * Forked from version 0.5.3; includes the following modifications:
- * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
- * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
  * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
  * 4) Add nonce for style element.
+ * 5) Use 'export' statement over 'module.exports' assignment
  **/
 // Check `document` and `window` in case of server-side rendering
-var windowObject = void 0;
-if (typeof window !== 'undefined') {
+let windowObject;
+if (typeof window !== "undefined") {
   windowObject = window;
   // eslint-disable-next-line no-restricted-globals
-} else if (typeof self !== 'undefined') {
+} else if (typeof self !== "undefined") {
   // eslint-disable-next-line no-restricted-globals
   windowObject = self;
 } else {
   windowObject = global;
 }
-var cancelFrame = null;
-var requestFrame = null;
-var TIMEOUT_DURATION = 20;
-var clearTimeoutFn = windowObject.clearTimeout;
-var setTimeoutFn = windowObject.setTimeout;
-var cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
-var requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+let cancelFrame = null;
+let requestFrame = null;
+const TIMEOUT_DURATION = 20;
+const clearTimeoutFn = windowObject.clearTimeout;
+const setTimeoutFn = windowObject.setTimeout;
+const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
 if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
   // For environments that don't support animation frame,
   // fallback to a setTimeout based approach.
@@ -3366,64 +3275,53 @@ if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
   // Counter intuitively, environments that support animation frames can be trickier.
   // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
   // In this case, we should fallback to a setTimeout() implementation.
-  cancelFrame = function cancelFrame(_ref) {
-    var _ref2 = slicedToArray(_ref, 2),
-        animationFrameID = _ref2[0],
-        timeoutID = _ref2[1];
+  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
     cancelAnimationFrameFn(animationFrameID);
     clearTimeoutFn(timeoutID);
   };
   requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
-    var animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
       clearTimeoutFn(timeoutID);
       callback();
     });
-    var timeoutID = setTimeoutFn(function timeoutCallback() {
+    const timeoutID = setTimeoutFn(function timeoutCallback() {
       cancelAnimationFrameFn(animationFrameID);
       callback();
     }, TIMEOUT_DURATION);
     return [animationFrameID, timeoutID];
   };
 }
 function createDetectElementResize(nonce) {
-  var animationKeyframes = void 0;
-  var animationName = void 0;
-  var animationStartEvent = void 0;
-  var animationStyle = void 0;
-  var checkTriggers = void 0;
-  var resetTriggers = void 0;
-  var scrollListener = void 0;
-  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
+  let animationKeyframes;
+  let animationName;
+  let animationStartEvent;
+  let animationStyle;
+  let checkTriggers;
+  let resetTriggers;
+  let scrollListener;
+  const attachEvent = typeof document !== "undefined" && document.attachEvent;
   if (!attachEvent) {
-    resetTriggers = function resetTriggers(element) {
-      var triggers = element.__resizeTriggers__,
-          expand = triggers.firstElementChild,
-          contract = triggers.lastElementChild,
-          expandChild = expand.firstElementChild;
+    resetTriggers = function (element) {
+      const triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
       contract.scrollLeft = contract.scrollWidth;
       contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + 'px';
-      expandChild.style.height = expand.offsetHeight + 1 + 'px';
+      expandChild.style.width = expand.offsetWidth + 1 + "px";
+      expandChild.style.height = expand.offsetHeight + 1 + "px";
       expand.scrollLeft = expand.scrollWidth;
       expand.scrollTop = expand.scrollHeight;
     };
-    checkTriggers = function checkTriggers(element) {
+    checkTriggers = function (element) {
       return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
     };
-    scrollListener = function scrollListener(e) {
+    scrollListener = function (e) {
       // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className && typeof e.target.className.indexOf === 'function' && e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
+      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
         return;
       }
-      var element = this;
+      const element = this;
       resetTriggers(this);
       if (this.__resizeRAF__) {
         cancelFrame(this.__resizeRAF__);
@@ -3440,23 +3338,22 @@ function createDetectElementResize(nonce) {
     };
     /* Detect CSS Animations support to detect element display/re-attach */
-    var animation = false;
-    var keyframeprefix = '';
-    animationStartEvent = 'animationstart';
-    var domPrefixes = 'Webkit Moz O ms'.split(' ');
-    var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-    var pfx = '';
+    let animation = false;
+    let keyframeprefix = "";
+    animationStartEvent = "animationstart";
+    const domPrefixes = "Webkit Moz O ms".split(" ");
+    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
+    let pfx = "";
     {
-      var elm = document.createElement('fakeelement');
+      const elm = document.createElement("fakeelement");
       if (elm.style.animationName !== undefined) {
         animation = true;
       }
       if (animation === false) {
-        for (var i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
             pfx = domPrefixes[i];
-            keyframeprefix = '-' + pfx.toLowerCase() + '-';
+            keyframeprefix = "-" + pfx.toLowerCase() + "-";
             animationStartEvent = startEvents[i];
             animation = true;
             break;
@@ -3464,60 +3361,53 @@ function createDetectElementResize(nonce) {
         }
       }
     }
-    animationName = 'resizeanim';
-    animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-    animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+    animationName = "resizeanim";
+    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
   }
-  var createStyles = function createStyles(doc) {
-    if (!doc.getElementById('detectElementResize')) {
+  const createStyles = function (doc) {
+    if (!doc.getElementById("detectElementResize")) {
       //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-          head = doc.head || doc.getElementsByTagName('head')[0],
-          style = doc.createElement('style');
-      style.id = 'detectElementResize';
-      style.type = 'text/css';
+      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName("head")[0],
+        style = doc.createElement("style");
+      style.id = "detectElementResize";
+      style.type = "text/css";
       if (nonce != null) {
-        style.setAttribute('nonce', nonce);
+        style.setAttribute("nonce", nonce);
       }
       if (style.styleSheet) {
         style.styleSheet.cssText = css;
       } else {
         style.appendChild(doc.createTextNode(css));
       }
       head.appendChild(style);
     }
   };
-  var addResizeListener = function addResizeListener(element, fn) {
+  const addResizeListener = function (element, fn) {
     if (attachEvent) {
-      element.attachEvent('onresize', fn);
+      element.attachEvent("onresize", fn);
     } else {
       if (!element.__resizeTriggers__) {
-        var doc = element.ownerDocument;
-        var elementStyle = windowObject.getComputedStyle(element);
-        if (elementStyle && elementStyle.position === 'static') {
-          element.style.position = 'relative';
+        const doc = element.ownerDocument;
+        const elementStyle = windowObject.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === "static") {
+          element.style.position = "relative";
         }
         createStyles(doc);
         element.__resizeLast__ = {};
         element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = doc.createElement('div')).className = 'resize-triggers';
-        var expandTrigger = doc.createElement('div');
-        expandTrigger.className = 'expand-trigger';
-        expandTrigger.appendChild(doc.createElement('div'));
-        var contractTrigger = doc.createElement('div');
-        contractTrigger.className = 'contract-trigger';
+        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
+        const expandTrigger = doc.createElement("div");
+        expandTrigger.className = "expand-trigger";
+        expandTrigger.appendChild(doc.createElement("div"));
+        const contractTrigger = doc.createElement("div");
+        contractTrigger.className = "contract-trigger";
         element.__resizeTriggers__.appendChild(expandTrigger);
         element.__resizeTriggers__.appendChild(contractTrigger);
         element.appendChild(element.__resizeTriggers__);
         resetTriggers(element);
-        element.addEventListener('scroll', scrollListener, true);
+        element.addEventListener("scroll", scrollListener, true);
         /* Listen for a css animation to detect element display/re-attach */
         if (animationStartEvent) {
@@ -3532,14 +3422,13 @@ function createDetectElementResize(nonce) {
       element.__resizeListeners__.push(fn);
     }
   };
-  var removeResizeListener = function removeResizeListener(element, fn) {
+  const removeResizeListener = function (element, fn) {
     if (attachEvent) {
-      element.detachEvent('onresize', fn);
+      element.detachEvent("onresize", fn);
     } else {
       element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
       if (!element.__resizeListeners__.length) {
-        element.removeEventListener('scroll', scrollListener, true);
+        element.removeEventListener("scroll", scrollListener, true);
         if (element.__resizeTriggers__.__animationListener__) {
           element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
           element.__resizeTriggers__.__animationListener__ = null;
@@ -3552,154 +3441,171 @@ function createDetectElementResize(nonce) {
       }
     }
   };
   return {
-    addResizeListener: addResizeListener,
-    removeResizeListener: removeResizeListener
+    addResizeListener,
+    removeResizeListener
   };
 }
-var AutoSizer = function (_React$PureComponent) {
-  inherits(AutoSizer, _React$PureComponent);
-  function AutoSizer() {
-    var _ref;
-    var _temp, _this, _ret;
-    classCallCheck(this, AutoSizer);
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = AutoSizer.__proto__ || Object.getPrototypeOf(AutoSizer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      height: _this.props.defaultHeight || 0,
-      width: _this.props.defaultWidth || 0
-    }, _this._onResize = function () {
-      var _this$props = _this.props,
-          disableHeight = _this$props.disableHeight,
-          disableWidth = _this$props.disableWidth,
-          onResize = _this$props.onResize;
-      if (_this._parentNode) {
+class AutoSizer extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: this.props.defaultHeight || 0,
+      scaledHeight: this.props.defaultHeight || 0,
+      scaledWidth: this.props.defaultWidth || 0,
+      width: this.props.defaultWidth || 0
+    };
+    this._autoSizer = null;
+    this._detectElementResize = null;
+    this._parentNode = null;
+    this._resizeObserver = null;
+    this._timeoutId = null;
+    this._onResize = () => {
+      this._timeoutId = null;
+      const {
+        disableHeight,
+        disableWidth,
+        onResize
+      } = this.props;
+      if (this._parentNode) {
+        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
         // Guard against AutoSizer component being removed from the DOM immediately after being added.
         // This can result in invalid style values which can result in NaN values if we don't handle them.
         // See issue #150 for more context.
-        var _height = _this._parentNode.offsetHeight || 0;
-        var _width = _this._parentNode.offsetWidth || 0;
-        var _style = window.getComputedStyle(_this._parentNode) || {};
-        var paddingLeft = parseInt(_style.paddingLeft, 10) || 0;
-        var paddingRight = parseInt(_style.paddingRight, 10) || 0;
-        var paddingTop = parseInt(_style.paddingTop, 10) || 0;
-        var paddingBottom = parseInt(_style.paddingBottom, 10) || 0;
-        var newHeight = _height - paddingTop - paddingBottom;
-        var newWidth = _width - paddingLeft - paddingRight;
-        if (!disableHeight && _this.state.height !== newHeight || !disableWidth && _this.state.width !== newWidth) {
-          _this.setState({
-            height: _height - paddingTop - paddingBottom,
-            width: _width - paddingLeft - paddingRight
+        const style = window.getComputedStyle(this._parentNode) || {};
+        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
+        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
+        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
+        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const rect = this._parentNode.getBoundingClientRect();
+        const scaledHeight = rect.height - paddingTop - paddingBottom;
+        const scaledWidth = rect.width - paddingLeft - paddingRight;
+        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
+        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
+        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+          this.setState({
+            height,
+            width,
+            scaledHeight,
+            scaledWidth
           });
-          onResize({ height: _height, width: _width });
+          if (typeof onResize === "function") {
+            onResize({
+              height,
+              scaledHeight,
+              scaledWidth,
+              width
+            });
+          }
         }
       }
-    }, _this._setRef = function (autoSizer) {
-      _this._autoSizer = autoSizer;
-    }, _temp), possibleConstructorReturn(_this, _ret);
+    };
+    this._setRef = autoSizer => {
+      this._autoSizer = autoSizer;
+    };
   }
-  createClass(AutoSizer, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var nonce = this.props.nonce;
-      if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
-        // Delay access of parentNode until mount.
-        // This handles edge-cases where the component has already been unmounted before its ref has been set,
-        // As well as libraries like react-lite which have a slightly different lifecycle.
-        this._parentNode = this._autoSizer.parentNode;
-        // Defer requiring resize handler in order to support server-side rendering.
-        // See issue #41
-        this._detectElementResize = createDetectElementResize(nonce);
-        this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+  componentDidMount() {
+    const {
+      nonce
+    } = this.props;
+    if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      if (this._parentNode != null) {
+        if (typeof ResizeObserver !== "undefined") {
+          this._resizeObserver = new ResizeObserver(() => {
+            // Guard against "ResizeObserver loop limit exceeded" error;
+            // could be triggered if the state update causes the ResizeObserver handler to run long.
+            // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
+            this._timeoutId = setTimeout(this._onResize, 0);
+          });
+          this._resizeObserver.observe(this._parentNode);
+        } else {
+          this._detectElementResize = createDetectElementResize(nonce);
+          this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+        }
         this._onResize();
       }
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this._detectElementResize && this._parentNode) {
+  }
+  componentWillUnmount() {
+    if (this._parentNode) {
+      if (this._detectElementResize) {
         this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
       }
+      if (this._timeoutId !== null) {
+        clearTimeout(this._timeoutId);
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.observe(this._parentNode);
+        this._resizeObserver.disconnect();
+      }
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          className = _props.className,
-          disableHeight = _props.disableHeight,
-          disableWidth = _props.disableWidth,
-          style = _props.style;
-      var _state = this.state,
-          height = _state.height,
-          width = _state.width;
-      // Outer div should not force width/height since that may prevent containers from shrinking.
-      // Inner component should overflow and use calculated width/height.
-      // See issue #68 for more information.
-      var outerStyle = { overflow: 'visible' };
-      var childParams = {};
-      // Avoid rendering children before the initial measurements have been collected.
-      // At best this would just be wasting cycles.
-      var bailoutOnChildren = false;
-      if (!disableHeight) {
-        if (height === 0) {
-          bailoutOnChildren = true;
-        }
-        outerStyle.height = 0;
-        childParams.height = height;
+  }
+  render() {
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight = false,
+      disableWidth = false,
+      nonce,
+      onResize,
+      style = {},
+      tagName = "div",
+      ...rest
+    } = this.props;
+    const {
+      height,
+      scaledHeight,
+      scaledWidth,
+      width
+    } = this.state;
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle = {
+      overflow: "visible"
+    };
+    const childParams = {};
+    // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles.
+    let bailoutOnChildren = false;
+    if (!disableHeight) {
+      if (height === 0) {
+        bailoutOnChildren = true;
       }
-      if (!disableWidth) {
-        if (width === 0) {
-          bailoutOnChildren = true;
-        }
-        outerStyle.width = 0;
-        childParams.width = width;
+      outerStyle.height = 0;
+      childParams.height = height;
+      childParams.scaledHeight = scaledHeight;
+    }
+    if (!disableWidth) {
+      if (width === 0) {
+        bailoutOnChildren = true;
       }
-      return createElement(
-        'div',
-        {
-          className: className,
-          ref: this._setRef,
-          style: _extends$2({}, outerStyle, style)
-        },
-        !bailoutOnChildren && children(childParams)
-      );
+      outerStyle.width = 0;
+      childParams.width = width;
+      childParams.scaledWidth = scaledWidth;
     }
-  }]);
-  return AutoSizer;
-}(PureComponent);
-AutoSizer.defaultProps = {
-  onResize: function onResize() {},
-  disableHeight: false,
-  disableWidth: false,
-  style: {}
-};
+    return createElement(tagName, {
+      ref: this._setRef,
+      style: {
+        ...outerStyle,
+        ...style
+      },
+      ...rest
+    }, !bailoutOnChildren && children(childParams));
+  }
+}
 const ICON_SIZE = 24;
 const ITEM_HEIGHT = 40;
@@ -3796,7 +3702,7 @@ function getAutosizeListItems(items, height, collapseItem) {
     return { listItems, collapseItems };
 }
-var css_248z$k = ".ycn-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.ycn-composite-bar-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-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.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-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.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--yc-color-line-generic);\n  cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-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(--yc-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.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-simple-hover);\n}";
+var css_248z$k = ".ycn-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.ycn-composite-bar-item__icon {\n  color: var(--g-color-text-misc);\n}\n.ycn-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.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-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.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-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.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-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.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--g-color-base-float-hover);\n}\n.ycn-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.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-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');
@@ -3812,7 +3718,8 @@ function renderItemTitle(item) {
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
 const Item$1 = (props) => {
-    const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
+    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
+    const { compact } = useAsideHeaderContext();
     if (item.type === 'divider') {
         return React__default.createElement("div", { className: b$l('menu-divider') });
     }
@@ -3859,7 +3766,7 @@ const Item$1 = (props) => {
             React__default.createElement("div", { className: b$l('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), 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, { className: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+            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;
@@ -3878,7 +3785,8 @@ const Item$1 = (props) => {
         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({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
+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) => {
@@ -3900,9 +3808,6 @@ function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClos
                 } })))) : null;
 }
-var css_248z$j = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$j);
 const multipleTooltipContextDefaults = {
     active: false,
     activeIndex: undefined,
@@ -3925,8 +3830,8 @@ class MultipleTooltipProvider extends React__default.PureComponent {
     }
 }
-var css_248z$i = ".yc-root_theme_dark .ycn-multiple-tooltip,\n.yc-root_theme_dark-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--yc-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.yc-root_theme_light .ycn-multiple-tooltip,\n.yc-root_theme_light-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--yc-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.ycn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.ycn-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.ycn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.ycn-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(--yc-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider), .ycn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.ycn-multiple-tooltip__item_divider + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.ycn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.ycn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
-styleInject(css_248z$i);
+var css_248z$j = ".yc-root_theme_dark .ycn-multiple-tooltip,\n.yc-root_theme_dark-hc .ycn-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.yc-root_theme_light .ycn-multiple-tooltip,\n.yc-root_theme_light-hc .ycn-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.ycn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.ycn-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.ycn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.ycn-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.ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider), .ycn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.ycn-multiple-tooltip__item_divider + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.ycn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.ycn-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];
@@ -3939,7 +3844,7 @@ const POPUP_MODIFIERS = [
 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, className: b$k(null), modifiers: POPUP_MODIFIERS },
+    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'))
@@ -3955,11 +3860,15 @@ const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
         }))));
 };
+var css_248z$i = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$i);
 const b$j = block('composite-bar');
-const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multipleTooltip = true, }) => {
+const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip = true, }) => {
     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 &&
@@ -4006,7 +3915,7 @@ const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multiple
             }
         }
     }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
-    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed) => {
+    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
         if (compact &&
             multipleTooltip &&
             itemIndex !== lastClickedItemIndex &&
@@ -4016,30 +3925,30 @@ const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multiple
                 active: false,
             });
         }
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed);
+        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: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default.createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), compact: compact, collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
+            React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default.createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
         React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items })));
 };
-const CompositeBar = ({ items, compact, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
+const CompositeBar = ({ items, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
     if (items.length === 0) {
         return null;
     }
-    let node = null;
+    let node;
     if (enableCollapsing) {
         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, { items: listItems, compact: compact, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+                React__default.createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
         }))));
     }
     else {
         node = (React__default.createElement("div", { className: b$j() },
-            React__default.createElement(CompositeBarView, { items: items, compact: compact, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
+            React__default.createElement(CompositeBarView, { items: items, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
     }
     return React__default.createElement(MultipleTooltipProvider, null, node);
 };
@@ -4049,10 +3958,17 @@ const RenderContent = React__default.memo(({ renderContent, size }) => {
     return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
 });
 RenderContent.displayName = 'RenderContent';
-const Content = ({ size, className, cssSizeVariableName = '--aside-header-size', 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 }))));
 };
+function fakeDisplayName(newDisplayName, Component) {
+    const Fake = (props) => React__default.createElement(Component, Object.assign({}, props));
+    Fake.displayName = newDisplayName;
+    return Fake;
+}
 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) {
@@ -4083,22 +3999,24 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 };
 var headerDividerCollapsedIcon = SvgDividerCollapsed;
-var css_248z$h = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n  --aside-header-divider-line-color: var(--yc-color-line-solid);\n  --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-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(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-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.ycn-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.ycn-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.ycn-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.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-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.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-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.ycn-aside-header__header .ycn-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.ycn-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.ycn-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.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.ycn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-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.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-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.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
+var css_248z$h = ".yc-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.yc-root_theme_light,\n.yc-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.yc-root_theme_dark,\n.yc-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.ycn-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.ycn-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.ycn-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.ycn-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.ycn-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.ycn-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.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-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.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-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.ycn-aside-header__header .ycn-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.ycn-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.ycn-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.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.ycn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-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.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-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.ycn-aside-header__collapse-button > .yc-button__text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--g-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-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 { dict, menuItems, panelItems, compact, headerDecoration, multipleTooltip } = this.props;
+            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, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, enableCollapsing: true, 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)));
@@ -4106,13 +4024,13 @@ class AsideHeader extends React__default.Component {
         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, { compact: this.props.compact, onClick: this.onLogoClick })));
+        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, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
+            React__default.createElement(CompositeBar, { items: this.props.subheaderItems, enableCollapsing: false, 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 { compact, renderFooter } = this.props;
+            const { renderFooter, compact } = this.props;
             return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
@@ -4125,10 +4043,10 @@ class AsideHeader extends React__default.Component {
         };
         this.renderCollapseButton = () => {
             var _a;
-            const { compact, dict } = this.props;
+            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(Icon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
+                React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
         };
         this.onCollapseButtonClick = () => {
             var _a, _b;
@@ -4138,10 +4056,10 @@ class AsideHeader extends React__default.Component {
             var _a, _b;
             (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
-        this.onItemClick = (item, collapsed) => {
+        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);
+            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
         };
         this.onLogoClick = (event) => {
             var _a, _b, _c, _d;
@@ -4152,10 +4070,11 @@ class AsideHeader extends React__default.Component {
     render() {
         const { className, compact } = this.props;
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement("div", { className: b$i({ compact }, className) },
-            React__default.createElement("div", { className: b$i('pane-container') },
-                this.renderFirstPane(size),
-                this.renderSecondPane(size))));
+        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 = {
@@ -4165,33 +4084,38 @@ AsideHeader.defaultProps = {
     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;
+/******************************************************************************
+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;
 }
+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 css_248z$g = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
 styleInject(css_248z$g);
@@ -4219,7 +4143,7 @@ const ActionBarItem = ({ children, className, pull, spacing = true }) => {
 };
 ActionBarItem.displayName = 'ActionBar.Item';
-var css_248z$d = ".ycn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n  border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
+var css_248z$d = ".ycn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n  border-left: solid 1px var(--g-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
 styleInject(css_248z$d);
 const b$e = block('action-bar-section');
@@ -4228,7 +4152,7 @@ const ActionBarSection = ({ children, type = 'primary' }) => {
 };
 ActionBarSection.displayName = 'ActionBar.Section';
-var css_248z$c = ".ycn-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(--yc-color-line-generic);\n  height: 40px;\n}";
+var css_248z$c = ".ycn-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');
@@ -4237,7 +4161,7 @@ const ActionBarSeparator = () => {
 };
 ActionBarSeparator.displayName = 'ActionBar.Separator';
-var css_248z$b = ".ycn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--yc-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
+var css_248z$b = ".ycn-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');
@@ -4252,7 +4176,7 @@ const PublicActionBar = Object.assign(ActionBar, {
     Separator: ActionBarSeparator,
 });
-var css_248z$a = ".ycn-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.ycn-title_separator {\n  border-bottom: 1px solid var(--yc-color-line-generic);\n}\n.ycn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
+var css_248z$a = ".ycn-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.ycn-title_separator {\n  border-bottom: 1px solid var(--g-color-line-generic);\n}\n.ycn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
 styleInject(css_248z$a);
 const b$b = block('title');
@@ -4296,7 +4220,7 @@ function filterHotkeys(hotkeys, filter) {
     return hotkeys;
 }
-var css_248z$9 = ".ycn-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.ycn-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.ycn-hotkeys-panel__title {\n  margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__search {\n  padding: 0 var(--hotkeys-panel-horizontal-padding);\n  margin-bottom: 14px;\n}\n.ycn-hotkeys-panel__list {\n  flex: 1;\n  overflow-y: auto;\n}\n.ycn-hotkeys-panel__item {\n  height: auto;\n  padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__item.yc-list__item_active {\n  background: inherit;\n}\n.ycn-hotkeys-panel__item-content {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  width: 100%;\n  font-size: var(--yc-text-body-1-font-size);\n  line-height: var(--yc-text-body-1-line-height);\n  color: var(--yc-color-text-primary);\n}\n.ycn-hotkeys-panel__item-content_group {\n  font-size: var(--yc-text-body-2-font-size);\n  font-weight: 500;\n  line-height: var(--yc-text-body-2-line-height);\n}\n.ycn-hotkeys-panel__hotkey {\n  color: var(--yc-color-text-complementary);\n}";
+var css_248z$9 = ".ycn-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.ycn-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.ycn-hotkeys-panel__title {\n  margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__search {\n  padding: 0 var(--hotkeys-panel-horizontal-padding);\n  margin-bottom: 14px;\n}\n.ycn-hotkeys-panel__list {\n  flex: 1;\n  overflow-y: auto;\n}\n.ycn-hotkeys-panel__item {\n  height: auto;\n  padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__item.yc-list__item_active {\n  background: inherit;\n}\n.ycn-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.ycn-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.ycn-hotkeys-panel__hotkey {\n  color: var(--g-color-text-complementary);\n}";
 styleInject(css_248z$9);
 const b$a = block('hotkeys-panel');
@@ -4920,7 +4844,7 @@ function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSi
         React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
 }
-var css_248z$8 = ".ycn-settings-menu__group-heading {\n  font-weight: var(--yc-text-accent-font-weight);\n  display: inline-block;\n  padding: 0 20px;\n  margin-bottom: 12px;\n  line-height: 18px;\n}\n.ycn-settings-menu__group + .ycn-settings-menu__group {\n  margin-top: 24px;\n}\n.ycn-settings-menu__item {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 20px;\n  cursor: pointer;\n  color: var(--yc-color-text-primary);\n}\n.ycn-settings-menu__item-icon {\n  color: var(--yc-color-text-misc);\n  margin-right: 5px;\n}\n.ycn-settings-menu__item:hover, .ycn-settings-menu__item_focused {\n  background: var(--yc-color-base-simple-hover);\n}\n.ycn-settings-menu__item_selected {\n  background: var(--yc-color-base-selection);\n}\n.ycn-settings-menu__item_selected:hover, .ycn-settings-menu__item_selected.ycn-settings-menu__item_focused {\n  background: var(--yc-color-base-selection-hover);\n}\n.ycn-settings-menu__item_disabled {\n  color: var(--yc-color-text-secondary);\n  cursor: auto;\n}\n.ycn-settings-menu__item_disabled:hover {\n  background: none;\n}\n.ycn-settings-menu__item_disabled .ycn-settings-menu__item-icon {\n  color: var(--yc-color-base-misc-heavy);\n}\n.ycn-settings-menu__item_badge {\n  position: relative;\n}\n.ycn-settings-menu__item_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--yc-color-text-danger);\n  position: absolute;\n  right: 9px;\n  top: calc(50% - 3px);\n}";
+var css_248z$8 = ".ycn-settings-menu__group-heading {\n  font-weight: var(--g-text-accent-font-weight);\n  display: inline-block;\n  padding: 0 20px;\n  margin-bottom: 12px;\n  line-height: 18px;\n}\n.ycn-settings-menu__group + .ycn-settings-menu__group {\n  margin-top: 24px;\n}\n.ycn-settings-menu__item {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 20px;\n  cursor: pointer;\n  color: var(--g-color-text-primary);\n}\n.ycn-settings-menu__item-icon {\n  color: var(--g-color-text-misc);\n  margin-right: 5px;\n}\n.ycn-settings-menu__item:hover, .ycn-settings-menu__item_focused {\n  background: var(--g-color-base-simple-hover);\n}\n.ycn-settings-menu__item_selected {\n  background: var(--g-color-base-selection);\n}\n.ycn-settings-menu__item_selected:hover, .ycn-settings-menu__item_selected.ycn-settings-menu__item_focused {\n  background: var(--g-color-base-selection-hover);\n}\n.ycn-settings-menu__item_disabled {\n  color: var(--g-color-text-secondary);\n  cursor: auto;\n}\n.ycn-settings-menu__item_disabled:hover {\n  background: none;\n}\n.ycn-settings-menu__item_disabled .ycn-settings-menu__item-icon {\n  color: var(--g-color-base-misc-heavy);\n}\n.ycn-settings-menu__item_badge {\n  position: relative;\n}\n.ycn-settings-menu__item_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--g-color-text-danger);\n  position: absolute;\n  right: 9px;\n  top: calc(50% - 3px);\n}";
 styleInject(css_248z$8);
 const b$8 = block('settings-menu');
@@ -4994,7 +4918,7 @@ function focusNext(container, focused, direction) {
     return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
 }
-var css_248z$7 = ".ycn-settings-menu-mobile.yc-tabs_direction_horizontal {\n  overflow-x: auto;\n  flex-wrap: nowrap;\n  overscroll-behavior-x: none;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.ycn-settings-menu-mobile.yc-tabs_direction_horizontal::-webkit-scrollbar {\n  display: none;\n}\n.ycn-settings-menu-mobile__item_badge {\n  position: relative;\n}\n.ycn-settings-menu-mobile__item_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--yc-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 11px;\n}";
+var css_248z$7 = ".ycn-settings-menu-mobile.yc-tabs_direction_horizontal {\n  overflow-x: auto;\n  flex-wrap: nowrap;\n  overscroll-behavior-x: none;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.ycn-settings-menu-mobile.yc-tabs_direction_horizontal::-webkit-scrollbar {\n  display: none;\n}\n.ycn-settings-menu-mobile__item_badge {\n  position: relative;\n}\n.ycn-settings-menu-mobile__item_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--g-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 11px;\n}";
 styleInject(css_248z$7);
 const b$7 = block('settings-menu-mobile');
@@ -5146,7 +5070,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
     return { items, hidden };
 }
-var css_248z$6 = ".ycn-settings {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  width: 834px;\n  height: 100%;\n}\n.ycn-settings_view_mobile {\n  display: block;\n  width: auto;\n  height: calc(80vh - 56px);\n  overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n  .ycn-settings_view_mobile {\n    /* stylelint-disable-next-line */\n    height: calc(90dvh - 56px);\n  }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n  text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n  margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n  padding: 0 20px;\n  margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n  overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n  margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n  margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n  font-size: var(--yc-text-subheader-3-font-size);\n  line-height: var(--yc-text-subheader-3-line-height);\n  font-weight: var(--yc-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n  margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n  margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n  margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n  margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n  font-size: var(--yc-text-body-1-font-size);\n  line-height: var(--yc-text-body-1-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n  grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n  padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n  width: 100%;\n}\n.ycn-settings_loading {\n  grid-template-columns: auto;\n}\n.ycn-settings__loader {\n  align-self: center;\n  justify-self: center;\n}\n.ycn-settings__not-found {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n  height: 100%;\n}\n.ycn-settings__menu {\n  border-right: 1px solid var(--yc-color-line-generic);\n}\n.ycn-settings__heading {\n  font-size: var(--yc-text-subheader-2-font-size);\n  line-height: var(--yc-text-subheader-2-line-height);\n  font-weight: var(--yc-text-subheader-font-weight);\n  margin: 20px 20px 0;\n}\n.ycn-settings__search {\n  margin: 0 20px 16px;\n}\n.ycn-settings__page {\n  overflow-y: auto;\n}\n.ycn-settings__content {\n  padding: 20px;\n}\n.ycn-settings__section-heading {\n  font-size: var(--yc-text-subheader-2-font-size);\n  line-height: var(--yc-text-subheader-2-line-height);\n  font-weight: var(--yc-text-subheader-font-weight);\n  margin: 0;\n}\n.ycn-settings__section-item {\n  margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n  margin-top: 32px;\n}\n.ycn-settings__item {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  justify-items: start;\n}\n.ycn-settings__item_align_top {\n  align-items: start;\n}\n.ycn-settings__item_align_center {\n  align-items: center;\n}\n.ycn-settings__item-title_badge {\n  position: relative;\n}\n.ycn-settings__item-title_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--yc-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 1px;\n}\n.ycn-settings__item-description {\n  font-size: var(--yc-text-caption-2-font-size);\n  line-height: var(--yc-text-caption-2-line-height);\n  font-weight: var(--yc-text-caption-font-weight);\n  display: block;\n  margin-top: 2px;\n  padding-right: 20px;\n  color: var(--yc-color-text-secondary);\n}\n.ycn-settings__found {\n  font-weight: var(--yc-text-accent-font-weight);\n  background: var(--yc-color-base-selection);\n}";
+var css_248z$6 = ".ycn-settings {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  width: 834px;\n  height: 100%;\n}\n.ycn-settings_view_mobile {\n  display: block;\n  width: auto;\n  height: calc(80vh - 56px);\n  overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n  .ycn-settings_view_mobile {\n    /* stylelint-disable-next-line */\n    height: calc(90dvh - 56px);\n  }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n  text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n  margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n  padding: 0 20px;\n  margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n  overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n  margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n  margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n  font-size: var(--g-text-subheader-3-font-size);\n  line-height: var(--g-text-subheader-3-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n  color: var(--g-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n  margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n  margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n  margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n  margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\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}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n  font-weight: var(--g-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n  grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n  padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n  width: 100%;\n}\n.ycn-settings_loading {\n  grid-template-columns: auto;\n}\n.ycn-settings__loader {\n  align-self: center;\n  justify-self: center;\n}\n.ycn-settings__not-found {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n  height: 100%;\n}\n.ycn-settings__menu {\n  border-right: 1px solid var(--g-color-line-generic);\n}\n.ycn-settings__heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 20px 20px 0;\n}\n.ycn-settings__search {\n  margin: 0 20px 16px;\n}\n.ycn-settings__page {\n  overflow-y: auto;\n}\n.ycn-settings__content {\n  padding: 20px;\n}\n.ycn-settings__section-heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 0;\n}\n.ycn-settings__section-item {\n  margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n  margin-top: 32px;\n}\n.ycn-settings__item {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  justify-items: start;\n}\n.ycn-settings__item_align_top {\n  align-items: start;\n}\n.ycn-settings__item_align_center {\n  align-items: center;\n}\n.ycn-settings__item-title_badge {\n  position: relative;\n}\n.ycn-settings__item-title_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--g-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 1px;\n}\n.ycn-settings__item-description {\n  font-size: var(--g-text-caption-2-font-size);\n  line-height: var(--g-text-caption-2-line-height);\n  font-weight: var(--g-text-caption-font-weight);\n  display: block;\n  margin-top: 2px;\n  padding-right: 20px;\n  color: var(--g-color-text-secondary);\n}\n.ycn-settings__found {\n  font-weight: var(--g-text-accent-font-weight);\n  background: var(--g-color-base-selection);\n}";
 styleInject(css_248z$6);
 const b$6 = block('settings');
@@ -5306,7 +5230,7 @@ const useForwardRef = (ref, initialValue = null) => {
     return targetRef;
 };
-var css_248z$5 = ".ycn-mobile-header-burger {\n  margin: 0;\n  padding: 0;\n  font-family: var(--yc-text-body-font-family);\n  font-size: inherit;\n  font-weight: 400;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  left: 3px;\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before {\n  transform: rotate(45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after {\n  transform: rotate(-45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  opacity: 0;\n}\n.ycn-mobile-header-burger__icon {\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  height: var(--mobile-header-icon-size);\n  width: var(--mobile-header-icon-size);\n  position: relative;\n}\n.ycn-mobile-header-burger__icon:after, .ycn-mobile-header-burger__icon:before {\n  content: \"\";\n  transform-origin: left center;\n  transition: transform 0.2s, left 0.2s;\n}\n.ycn-mobile-header-burger__icon:before {\n  top: 2px;\n}\n.ycn-mobile-header-burger__icon:after {\n  bottom: 2px;\n}\n.ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  background-color: var(--yc-color-text-primary);\n  border-radius: 1px;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  margin-top: -1px;\n  top: 50%;\n  transition: opacity 0.2s;\n}";
+var css_248z$5 = ".ycn-mobile-header-burger {\n  margin: 0;\n  padding: 0;\n  font-family: var(--g-font-family-sans);\n  font-size: inherit;\n  font-weight: 400;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  left: 3px;\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before {\n  transform: rotate(45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after {\n  transform: rotate(-45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  opacity: 0;\n}\n.ycn-mobile-header-burger__icon {\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  height: var(--mobile-header-icon-size);\n  width: var(--mobile-header-icon-size);\n  position: relative;\n}\n.ycn-mobile-header-burger__icon:after, .ycn-mobile-header-burger__icon:before {\n  content: \"\";\n  transform-origin: left center;\n  transition: transform 0.2s, left 0.2s;\n}\n.ycn-mobile-header-burger__icon:before {\n  top: 2px;\n}\n.ycn-mobile-header-burger__icon:after {\n  bottom: 2px;\n}\n.ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  background-color: var(--g-color-text-primary);\n  border-radius: 1px;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n  margin-top: -1px;\n  top: 50%;\n  transition: opacity 0.2s;\n}";
 styleInject(css_248z$5);
 const b$5 = block('mobile-header-burger');
@@ -5315,7 +5239,7 @@ const Burger = React__default.memo(({ opened, className, onClick }) => (React__d
         React__default.createElement("span", { className: b$5('icon-dash') })))));
 Burger.displayName = 'Burger';
-var css_248z$4 = ".ycn-mobile-header-logo {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  gap: 8px;\n}\n.ycn-mobile-header-logo:is(a), .ycn-mobile-header-logo:is(a):hover, .ycn-mobile-header-logo:is(a):active, .ycn-mobile-header-logo:is(a):visited, .ycn-mobile-header-logo:is(a):focus {\n  text-decoration: none;\n  outline: none;\n  color: var(--yc-color-text-primary);\n}\n.ycn-mobile-header-logo__icon {\n  flex-shrink: 0;\n}\n.ycn-mobile-header-logo__title {\n  font-size: var(--yc-text-header-1-font-size);\n  line-height: var(--yc-text-header-1-line-height);\n  font-weight: var(--yc-text-header-font-weight);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}";
+var css_248z$4 = ".ycn-mobile-header-logo {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  gap: 8px;\n}\n.ycn-mobile-header-logo:is(a), .ycn-mobile-header-logo:is(a):hover, .ycn-mobile-header-logo:is(a):active, .ycn-mobile-header-logo:is(a):visited, .ycn-mobile-header-logo:is(a):focus {\n  text-decoration: none;\n  outline: none;\n  color: var(--g-color-text-primary);\n}\n.ycn-mobile-header-logo__icon {\n  flex-shrink: 0;\n}\n.ycn-mobile-header-logo__title {\n  font-size: var(--g-text-header-1-font-size);\n  line-height: var(--g-text-header-1-line-height);\n  font-weight: var(--g-text-header-font-weight);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}";
 styleInject(css_248z$4);
 const b$4 = block('mobile-header-logo');
@@ -5372,7 +5296,7 @@ const getSelectedItemIndex = (items) => {
     return index === -1 ? undefined : index;
 };
-var css_248z$3 = ".ycn-burger-composite-bar {\n  overflow-y: auto;\n}\n.ycn-burger-composite-bar__item {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  flex-grow: 1;\n  box-sizing: border-box;\n  padding: 4px 22px 4px 12px;\n  overflow: hidden;\n}\n.ycn-burger-composite-bar__item-icon-place {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 40px;\n  margin-right: 8px;\n}\n.ycn-burger-composite-bar .ycn-burger-composite-bar__item-icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-burger-composite-bar__item-title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-burger-composite-bar__link {\n  display: flex;\n  flex-grow: 1;\n  height: 100%;\n  align-items: center;\n}\n.ycn-burger-composite-bar__link, .ycn-burger-composite-bar__link:hover, .ycn-burger-composite-bar__link:active, .ycn-burger-composite-bar__link:visited, .ycn-burger-composite-bar__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-burger-composite-bar__menu-divider {\n  margin: 0;\n  flex-grow: 1;\n  border-top: 1px solid var(--yc-color-line-generic);\n}\n.ycn-burger-composite-bar__root-menu-item.yc-list__item_selected {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-burger-composite-bar__root-menu-item:not(.yc-list__item_selected).yc-list__item_active {\n  background: none;\n}";
+var css_248z$3 = ".ycn-burger-composite-bar {\n  overflow-y: auto;\n}\n.ycn-burger-composite-bar__item {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  flex-grow: 1;\n  box-sizing: border-box;\n  padding: 4px 22px 4px 12px;\n  overflow: hidden;\n}\n.ycn-burger-composite-bar__item-icon-place {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 40px;\n  margin-right: 8px;\n}\n.ycn-burger-composite-bar .ycn-burger-composite-bar__item-icon {\n  color: var(--g-color-text-misc);\n}\n.ycn-burger-composite-bar__item-title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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}\n.ycn-burger-composite-bar__link {\n  display: flex;\n  flex-grow: 1;\n  height: 100%;\n  align-items: center;\n}\n.ycn-burger-composite-bar__link, .ycn-burger-composite-bar__link:hover, .ycn-burger-composite-bar__link:active, .ycn-burger-composite-bar__link:visited, .ycn-burger-composite-bar__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-burger-composite-bar__menu-divider {\n  margin: 0;\n  flex-grow: 1;\n  border-top: 1px solid var(--g-color-line-generic);\n}\n.ycn-burger-composite-bar__root-menu-item.yc-list__item_selected {\n  background-color: var(--g-color-base-selection);\n}\n.ycn-burger-composite-bar__root-menu-item:not(.yc-list__item_selected).yc-list__item_active {\n  background: none;\n}";
 styleInject(css_248z$3);
 const b$3 = block('burger-composite-bar');
@@ -5403,7 +5327,7 @@ const BurgerCompositeBar = React__default.memo(({ items, onItemClick }) => {
 });
 BurgerCompositeBar.displayName = 'BurgerCompositeBar';
-var css_248z$2 = ".ycn-mobile-header-burger-menu {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.ycn-mobile-header-burger-menu__footer {\n  display: flex;\n  border-top: 1px solid var(--yc-color-base-generic);\n  margin-top: auto;\n}";
+var css_248z$2 = ".ycn-mobile-header-burger-menu {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.ycn-mobile-header-burger-menu__footer {\n  display: flex;\n  border-top: 1px solid var(--g-color-base-generic);\n  margin-top: auto;\n}";
 styleInject(css_248z$2);
 const b$2 = block('mobile-header-burger-menu');
@@ -5416,7 +5340,7 @@ const BurgerMenu = React__default.memo(({ items = [], renderFooter, modalItem, c
 });
 BurgerMenu.displayName = 'BurgerMenu';
-var css_248z$1 = ".ycn-mobile-header {\n  --mobile-header-min-heigth: 50px;\n  --mobile-header-icon-size: 20px;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-mobile-header__header {\n  background-color: var(--yc-color-base-background);\n  border-bottom: 1px solid var(--yc-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.ycn-mobile-header__burger {\n  padding: 12px;\n}\n.ycn-mobile-header__burger-menu, .ycn-mobile-header__panel-item {\n  background-color: var(--yc-color-base-background);\n  width: 320px;\n  max-width: 90vw;\n  max-height: 100%;\n}\n.ycn-mobile-header__user-menu {\n  overflow-y: auto;\n}\n.ycn-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.ycn-mobile-header__content {\n  overflow: auto;\n}";
+var css_248z$1 = ".ycn-mobile-header {\n  --mobile-header-min-heigth: 50px;\n  --mobile-header-icon-size: 20px;\n  background-color: var(--g-color-base-background);\n}\n.ycn-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.ycn-mobile-header__burger {\n  padding: 12px;\n}\n.ycn-mobile-header__burger-menu, .ycn-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.ycn-mobile-header__user-menu {\n  overflow-y: auto;\n}\n.ycn-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.ycn-mobile-header__content {\n  overflow: auto;\n}";
 styleInject(css_248z$1);
 const b$1 = block('mobile-header');
@@ -5518,7 +5442,7 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems =
 });
 MobileHeader.displayName = 'MobileHeader';
-var css_248z = ".ycn-mobile-header-footer-item {\n  flex-grow: 1;\n  position: relative;\n}\n.ycn-mobile-header-footer-item__button {\n  margin: 0;\n  padding: 0;\n  font-family: var(--yc-text-body-font-family);\n  font-size: inherit;\n  font-weight: 400;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 13px 10px;\n  width: 100%;\n  box-sizing: border-box;\n}\n.ycn-mobile-header-footer-item .ycn-mobile-header-footer-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-mobile-header-footer-item + .ycn-mobile-header-footer-item::before {\n  content: \"\";\n  border-left: 1px solid var(--yc-color-base-generic);\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 0;\n}\n.ycn-mobile-header-footer-item:empty {\n  display: none;\n}";
+var css_248z = ".ycn-mobile-header-footer-item {\n  flex-grow: 1;\n  position: relative;\n}\n.ycn-mobile-header-footer-item__button {\n  margin: 0;\n  padding: 0;\n  font-family: var(--g-font-family-sans);\n  font-size: inherit;\n  font-weight: 400;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 13px 10px;\n  width: 100%;\n  box-sizing: border-box;\n}\n.ycn-mobile-header-footer-item .ycn-mobile-header-footer-item__icon {\n  color: var(--g-color-text-misc);\n}\n.ycn-mobile-header-footer-item + .ycn-mobile-header-footer-item::before {\n  content: \"\";\n  border-left: 1px solid var(--g-color-base-generic);\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 0;\n}\n.ycn-mobile-header-footer-item:empty {\n  display: none;\n}";
 styleInject(css_248z);
 const b = block('mobile-header-footer-item');
@@ -5537,5 +5461,21 @@ 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, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title };
+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);
+    });
+};
+export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
 //# sourceMappingURL=index.js.map