@gravity-ui/navigation 0.10.0 → 0.11.1

package/build/esm/index.js

@@ -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,7 +3189,7 @@ 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}";
+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');
@@ -3218,143 +3224,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 +3267,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 +3330,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 +3353,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 +3414,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 +3433,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 +3694,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');
@@ -3859,7 +3757,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;
@@ -3925,7 +3823,7 @@ 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}";
+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(--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$i);
 
 const b$k = block('multiple-tooltip');
@@ -3939,7 +3837,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'))
@@ -4020,14 +3918,14 @@ const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multiple
     }, [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, 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), compact: compact, 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, }) => {
     if (items.length === 0) {
         return null;
     }
-    let node = null;
+    let node;
     if (enableCollapsing) {
         const minHeight = getItemsMinHeight(items);
         const collapseItem = getMoreButtonItem(dict);
@@ -4053,6 +3951,12 @@ const Content = ({ size, className, cssSizeVariableName = '--aside-header-size',
     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,9 +3987,11 @@ 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() {
@@ -4128,7 +4034,7 @@ class AsideHeader extends React__default.Component {
             const { compact, dict } = 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;
@@ -4165,33 +4071,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 +4130,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 +4139,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 +4148,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 +4163,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 +4207,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 +4831,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 +4905,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 +5057,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 +5217,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 +5226,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 +5283,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 +5314,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 +5327,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 +5429,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 +5448,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, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, configure };
 //# sourceMappingURL=index.js.map