@gravity-ui/navigation 0.8.0 → 0.8.1

package/build/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback } from 'react';
-import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
+import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback, 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 { Xmark } from '@gravity-ui/icons';
 
@@ -88,48 +88,48 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
-styleInject(css_248z$f);
+var css_248z$l = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
+styleInject(css_248z$l);
 
-const b$g = block('action-bar-group');
+const b$m = block('action-bar-group');
 const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
+    return (React__default.createElement("ul", { className: b$m({ pull }, className), role: "group" }, children));
 };
 ActionBarGroup.displayName = 'ActionBar.Group';
 
-var css_248z$e = ".ycn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
-styleInject(css_248z$e);
+var css_248z$k = ".ycn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
+styleInject(css_248z$k);
 
-const b$f = block('action-bar-item');
+const b$l = block('action-bar-item');
 const ActionBarItem = ({ children, className, pull, spacing = true }) => {
-    return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
+    return React__default.createElement("li", { className: b$l({ pull, spacing }, className) }, children);
 };
 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}";
-styleInject(css_248z$d);
+var css_248z$j = ".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}";
+styleInject(css_248z$j);
 
-const b$e = block('action-bar-section');
+const b$k = block('action-bar-section');
 const ActionBarSection = ({ children, type = 'primary' }) => {
-    return React__default.createElement("div", { className: b$e({ type }) }, children);
+    return React__default.createElement("div", { className: b$k({ type }) }, children);
 };
 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}";
-styleInject(css_248z$c);
+var css_248z$i = ".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}";
+styleInject(css_248z$i);
 
-const b$d = block('action-bar-separator');
+const b$j = block('action-bar-separator');
 const ActionBarSeparator = () => {
-    return React__default.createElement("li", { role: "separator", className: b$d() });
+    return React__default.createElement("li", { role: "separator", className: b$j() });
 };
 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}";
-styleInject(css_248z$b);
+var css_248z$h = ".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}";
+styleInject(css_248z$h);
 
-const b$c = block('action-bar');
+const b$i = block('action-bar');
 const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
+    return (React__default.createElement("section", { className: b$i(null, className), "aria-label": ariaLabel }, children));
 };
 ActionBar.displayName = 'ActionBar';
 const PublicActionBar = Object.assign(ActionBar, {
@@ -3181,15 +3181,15 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-var css_248z$a = ".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}";
-styleInject(css_248z$a);
+var css_248z$g = ".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}";
+styleInject(css_248z$g);
 
-const b$b = block('drawer');
+const b$h = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, direction, className }) => {
     const itemRef = React__default.useRef(null);
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('item-transition', { direction }), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$b('item', { direction }, className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('item-transition', { direction }), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$h('item', { direction }, className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3220,9 +3220,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     const veilRef = React__default.useRef(null);
     return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
-        return (React__default.createElement("div", { ref: containerRef, className: b$b(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$b('veil'), onClick: onVeilClick })),
+        return (React__default.createElement("div", { ref: containerRef, className: b$h(null, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$h('veil'), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 const childElem = child;
                 if (childElem.type === DrawerItem) {
@@ -3234,11 +3234,11 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
-var css_248z$9 = ".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}";
-styleInject(css_248z$9);
+var css_248z$f = ".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}";
+styleInject(css_248z$f);
 
-const b$a = block('logo');
-const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+const b$g = block('logo');
+const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
     const linkProps = hasClickHandler
@@ -3255,18 +3255,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
     else if (icon) {
         buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
     }
-    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$a('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
+    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$g('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
     let logo;
     if (typeof text === 'function') {
         logo = text();
     }
     else {
-        logo = (React__default.createElement("div", { className: b$a('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$g('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default.createElement("div", { className: b$a() },
-        React__default.createElement("div", { className: b$a('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
+    return (React__default.createElement("div", { className: b$g() },
+        React__default.createElement("div", { className: b$g('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
         !compact &&
-            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$a('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$g('logo-link'), onClick: onClick }), logo)))));
 };
 
 var classCallCheck = function (instance, Constructor) {
@@ -3759,7 +3759,7 @@ const COLLAPSE_ITEM_ID = 'collapse-item-id';
 const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
 const POPUP_ITEM_HEIGHT = 28;
 
-function getItemHeight(item) {
+function getItemHeight$1(item) {
     switch (item.type) {
         case 'action':
             return 50;
@@ -3770,9 +3770,9 @@ function getItemHeight(item) {
     }
 }
 function getItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+    return items.reduce((sum, item) => sum + getItemHeight$1(item), 0);
 }
-function getSelectedItemIndex(items) {
+function getSelectedItemIndex$1(items) {
     const index = items.findIndex(({ current }) => Boolean(current));
     return index === -1 ? undefined : index;
 }
@@ -3798,25 +3798,25 @@ function getItemsMinHeight(items) {
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
 
-var css_248z$8 = ".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}";
-styleInject(css_248z$8);
+var css_248z$e = ".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}";
+styleInject(css_248z$e);
 
-const b$9 = block('composite-bar-item');
+const b$f = block('composite-bar-item');
 function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$9('title-text') }, item.title);
+    let titleNode = React__default.createElement("div", { className: b$f('title-text') }, item.title);
     if (item.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$9('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$f('title-adornment') }, item.rightAdornment)));
     }
     return titleNode;
 }
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
-const Item = (props) => {
+const Item$1 = (props) => {
     const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
     if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$9('menu-divider') });
+        return React__default.createElement("div", { className: b$f('menu-divider') });
     }
     const [open, toggleOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
@@ -3837,7 +3837,7 @@ const Item = (props) => {
         onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
     }, [onClosePopup]);
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const createdNode = (React__default.createElement("div", { className: b$9({ type, current, compact }, className), ref: ref, onClick: () => {
+        const createdNode = (React__default.createElement("div", { className: b$f({ type, current, compact }, className), ref: ref, onClick: () => {
                 if (collapsedItem) {
                     /**
                      * If we call onItemClick for collapsedItem then:
@@ -3858,13 +3858,13 @@ const Item = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default.createElement("div", { className: b$9('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$9('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$9('btn-icon') }, iconEl))) : (iconEl)),
-            React__default.createElement("div", { className: b$9('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$9('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$9('link') }, createdNode)) : (createdNode);
+            React__default.createElement("div", { className: b$f('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$f('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$f('btn-icon') }, iconEl))) : (iconEl)),
+            React__default.createElement("div", { className: b$f('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$f('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$f('link') }, createdNode)) : (createdNode);
     };
-    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$9('icon') }) : null;
+    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$f('icon') }) : null;
     const titleNode = renderItemTitle(item);
     const params = { icon: iconNode, title: titleNode };
     let node;
@@ -3879,16 +3879,16 @@ const Item = (props) => {
         node,
         open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
 };
-Item.displayName = 'Item';
+Item$1.displayName = 'Item';
 function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
     return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
-        React__default.createElement("div", { className: b$9('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$9('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
+        React__default.createElement("div", { className: b$f('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b$f('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
                     const makeCollapseNode = ({ title: titleEl }) => {
-                        const res = (React__default.createElement("div", { className: b$9('collapse-item'), onClick: () => {
+                        const res = (React__default.createElement("div", { className: b$f('collapse-item'), onClick: () => {
                                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
                             } }, titleEl));
-                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$9('link') }, res)) : (res);
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$f('link') }, res)) : (res);
                     };
                     const titleNode = renderItemTitle(collapseItem);
                     const params = { title: titleNode };
@@ -3918,10 +3918,10 @@ var SvgDots = function SvgDots(props) {
 };
 var dotsIcon = SvgDots;
 
-var css_248z$7 = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$7);
+var css_248z$d = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$d);
 
-const b$8 = block('composite-bar');
+const b$e = block('composite-bar');
 class CompositeBar extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -3936,10 +3936,10 @@ class CompositeBar extends React__default.Component {
             return null;
         }
         if (!enableCollapsing) {
-            return React__default.createElement("div", { className: b$8() }, this.renderMenu());
+            return React__default.createElement("div", { className: b$e() }, this.renderMenu());
         }
         const minHeight = getItemsMinHeight(items);
-        return (React__default.createElement("div", { className: b$8({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+        return (React__default.createElement("div", { className: b$e({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
             const style = {
                 width,
                 height,
@@ -3950,7 +3950,7 @@ class CompositeBar extends React__default.Component {
     renderAutosizeMenu(height) {
         const { compact, onItemClick } = this.props;
         const { listItems, collapseItems } = this.getAutosizeListItems(height);
-        return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
+        return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -3959,7 +3959,7 @@ class CompositeBar extends React__default.Component {
     }
     renderMenu() {
         const { items, onItemClick, compact } = this.props;
-        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
+        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -3988,7 +3988,7 @@ class CompositeBar extends React__default.Component {
             return { listItems, collapseItems: [] };
         }
         const collapseItem = this.getMoreButtonItem();
-        const collapseItemHeight = getItemHeight(collapseItem);
+        const collapseItemHeight = getItemHeight$1(collapseItem);
         listItems.splice(regularItems.length, 0, collapseItem);
         const collapseItems = [];
         let listHeight = allItemsHeight + collapseItemHeight;
@@ -4004,12 +4004,12 @@ class CompositeBar extends React__default.Component {
             }
             if (item.type === 'divider') {
                 if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
-                    listHeight -= getItemHeight(item);
+                    listHeight -= getItemHeight$1(item);
                     listItems.splice(index, 1);
                 }
                 continue;
             }
-            listHeight -= getItemHeight(item);
+            listHeight -= getItemHeight$1(item);
             collapseItems.unshift(...listItems.splice(index, 1));
         }
         if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
@@ -4059,10 +4059,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 };
 var headerDividerCollapsedIcon = SvgDividerCollapsed;
 
-var css_248z$6 = ".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}";
-styleInject(css_248z$6);
+var css_248z$c = ".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}";
+styleInject(css_248z$c);
 
-const b$7 = block('aside-header');
+const b$d = block('aside-header');
 class AsideHeader extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -4070,26 +4070,26 @@ class AsideHeader extends React__default.Component {
         this.renderFirstPane = (size) => {
             const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
             return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: b$7('aside'), style: { width: size } },
-                    React__default.createElement("div", { className: b$7('aside-popup-anchor'), ref: this.asideRef }),
-                    React__default.createElement("div", { className: b$7('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default.createElement("div", { className: b$d('aside'), style: { width: size } },
+                    React__default.createElement("div", { className: b$d('aside-popup-anchor'), ref: this.asideRef }),
+                    React__default.createElement("div", { className: b$d('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$7('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$d('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));
         };
         this.renderSecondPane = (size) => {
-            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$7('content') }));
+            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$d('content') }));
         };
-        this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
-        this.renderHeader = () => (React__default.createElement("div", { className: b$7('header', { ['with-decoration']: this.props.headerDecoration }) },
+        this.renderLogo = () => (React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
+        this.renderHeader = () => (React__default.createElement("div", { className: b$d('header', { ['with-decoration']: this.props.headerDecoration }) },
             this.renderLogo(),
             React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
-            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$7('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$d('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
             const { compact, renderFooter } = this.props;
-            return (React__default.createElement("div", { className: b$7('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+            return (React__default.createElement("div", { className: b$d('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
                 asideRef: this.asideRef,
@@ -4097,14 +4097,14 @@ class AsideHeader extends React__default.Component {
         };
         this.renderPanels = (size) => {
             const { panelItems } = this.props;
-            return (React__default.createElement(Drawer, { className: b$7('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
+            return (React__default.createElement(Drawer, { className: b$d('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
         };
         this.renderCollapseButton = () => {
             var _a;
             const { compact, dict } = this.props;
             const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
-            return (React__default.createElement(Button, { className: b$7('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$7('collapse-icon'), width: "16", height: "10" })));
+            return (React__default.createElement(Button, { className: b$d('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$d('collapse-icon'), width: "16", height: "10" })));
         };
         this.onCollapseButtonClick = () => {
             var _a, _b;
@@ -4128,8 +4128,8 @@ class AsideHeader extends React__default.Component {
     render() {
         const { className, compact } = this.props;
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement("div", { className: b$7({ compact }, className) },
-            React__default.createElement("div", { className: b$7('pane-container') },
+        return (React__default.createElement("div", { className: b$d({ compact }, className) },
+            React__default.createElement("div", { className: b$d('pane-container') },
                 this.renderFirstPane(size),
                 this.renderSecondPane(size))));
     }
@@ -4168,25 +4168,25 @@ function __rest(s, e) {
     return t;
 }
 
-var css_248z$5 = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
-styleInject(css_248z$5);
+var css_248z$b = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
+styleInject(css_248z$b);
 
-const b$6 = block('footer-item');
-const FooterItem = (_a) => {
+const b$c = block('footer-item');
+const FooterItem$1 = (_a) => {
     var { item } = _a, props = __rest(_a, ["item"]);
-    return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$6({ compact: props.compact }), onItemClick: item.onItemClick })));
+    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$c({ compact: props.compact }), onItemClick: item.onItemClick })));
 };
 
-var css_248z$4 = ".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}";
-styleInject(css_248z$4);
+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}";
+styleInject(css_248z$a);
 
-const b$5 = block('title');
+const b$b = block('title');
 const defaultDict$1 = {
     close: 'Close',
 };
 const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
-    return (React__default.createElement("div", { className: b$5({ separator: hasSeparator }) },
-        React__default.createElement(Text, { className: b$5('text'), as: 'h3', variant: 'subheader-3' }, children),
+    return (React__default.createElement("div", { className: b$b({ separator: hasSeparator }) },
+        React__default.createElement(Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
         onClose && (React__default.createElement(Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
                 'aria-label': dict['close'],
             } },
@@ -4221,10 +4221,10 @@ function filterHotkeys(hotkeys, filter) {
     return hotkeys;
 }
 
-var css_248z$3 = ".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}";
-styleInject(css_248z$3);
+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}";
+styleInject(css_248z$9);
 
-const b$4 = block('hotkeys-panel');
+const b$a = block('hotkeys-panel');
 function HotkeysPanel(_a) {
     var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
     const [filter, setFilter] = useState('');
@@ -4232,18 +4232,18 @@ function HotkeysPanel(_a) {
         const filteredHotkeys = filterHotkeys(hotkeys, filter);
         return flattenHotkeyGroups(filteredHotkeys);
     }, [hotkeys, filter]);
-    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$4('item-content', { group: item.group }), key: item.title },
+    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
         item.title,
-        item.value && React__default.createElement(Hotkey, { className: b$4('hotkey'), value: item.value }))), []);
+        item.value && React__default.createElement(Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
     const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("h2", { className: b$4('title') }, title),
-        React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$4('search') }),
-        React__default.createElement(List, Object.assign({ className: b$4('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$4('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
-    return (React__default.createElement(Drawer, { className: b$4(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
+        React__default.createElement("h2", { className: b$a('title') }, title),
+        React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
+        React__default.createElement(List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
+    return (React__default.createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
             left: leftOffset,
             top: topOffset,
         } },
-        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$4('drawer-item'), content: drawerItemContent })));
+        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
 }
 
 /**
@@ -4837,18 +4837,18 @@ function escapeStringForRegExp(input) {
     return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-const b$3 = block('settings-search');
+const b$9 = block('settings-search');
 function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
     const onChangeStable = useStableCallback(onChange);
     const handleUpdate = React__default.useCallback(debounce_1(onChangeStable, debounce), [debounce]);
-    return (React__default.createElement("div", { className: b$3(null, className) },
+    return (React__default.createElement("div", { className: b$9(null, className) },
         React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
 }
 
-var css_248z$2 = ".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}";
-styleInject(css_248z$2);
+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}";
+styleInject(css_248z$8);
 
-const b$2 = block('settings-menu');
+const b$8 = block('settings-menu');
 const SettingsMenu = React__default.forwardRef(
 // eslint-disable-next-line prefer-arrow-callback
 function SettingsMenu({ items, onChange, activeItemId }, ref) {
@@ -4880,10 +4880,10 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
             setFocusId(undefined);
         },
     }), [getFocused, handleChange]);
-    return (React__default.createElement("div", { ref: containerRef, className: b$2() }, items.map((firstLevelItem) => {
+    return (React__default.createElement("div", { ref: containerRef, className: b$8() }, items.map((firstLevelItem) => {
         if ('groupTitle' in firstLevelItem) {
-            return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$2('group') },
-                React__default.createElement("span", { className: b$2('group-heading') }, firstLevelItem.groupTitle),
+            return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$8('group') },
+                React__default.createElement("span", { className: b$8('group-heading') }, firstLevelItem.groupTitle),
                 firstLevelItem.items.map((item) => {
                     return renderMenuItem(item, onChange, activeItemId, focusItemId);
                 })));
@@ -4892,7 +4892,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
     })));
 });
 function renderMenuItem(item, onChange, activeItemId, focusItemId) {
-    return (React__default.createElement("span", { key: item.title, className: b$2('item', {
+    return (React__default.createElement("span", { key: item.title, className: b$8('item', {
             selected: activeItemId === item.id,
             disabled: item.disabled,
             focused: focusItemId === item.id,
@@ -4902,12 +4902,12 @@ function renderMenuItem(item, onChange, activeItemId, focusItemId) {
                 onChange(item.id);
             }
         }, "data-id": item.id },
-        item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$2('item-icon') })) : undefined,
+        item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$8('item-icon') })) : undefined,
         React__default.createElement("span", null, item.title)));
 }
 function focusNext(container, focused, direction) {
     var _a;
-    const elements = container.querySelectorAll(`.${b$2('item')}:not(.${b$2('item')}_disabled)`);
+    const elements = container.querySelectorAll(`.${b$8('item')}:not(.${b$8('item')}_disabled)`);
     if (elements.length === 0) {
         return undefined;
     }
@@ -4919,10 +4919,10 @@ function focusNext(container, focused, direction) {
     return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
 }
 
-var css_248z$1 = ".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}";
-styleInject(css_248z$1);
+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}";
+styleInject(css_248z$7);
 
-const b$1 = block('settings-menu-mobile');
+const b$7 = block('settings-menu-mobile');
 const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
     const ref = React__default.useRef(null);
     const tabItems = React__default.useMemo(() => {
@@ -4933,12 +4933,12 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
                     id,
                     title,
                     disabled,
-                    className: b$1('item', { badge: withBadge }),
+                    className: b$7('item', { badge: withBadge }),
                 })));
             }
             else {
                 const { id, title, disabled, withBadge } = firstLevelItem;
-                tabItems.push({ id, title, disabled, className: b$1('item', { badge: withBadge }) });
+                tabItems.push({ id, title, disabled, className: b$7('item', { badge: withBadge }) });
             }
         });
         return tabItems;
@@ -4947,7 +4947,7 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         e.stopPropagation();
     };
     return (React__default.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
-        React__default.createElement(Tabs, { items: tabItems, className: b$1(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
+        React__default.createElement(Tabs, { items: tabItems, className: b$7(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
 };
 
 function getSettingsFromChildren(children, searchText = '') {
@@ -5071,10 +5071,10 @@ function getSettingsItemsFromChildren(children, filterRe) {
     return { items, hidden };
 }
 
-var css_248z = ".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}";
-styleInject(css_248z);
+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}";
+styleInject(css_248z$6);
 
-const b = block('settings');
+const b$6 = block('settings');
 const defaultDict = {
     heading_settings: 'Settings',
     placeholder_search: 'Search settings',
@@ -5083,7 +5083,7 @@ const defaultDict = {
 function Settings(_a) {
     var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
     if (loading) {
-        return (React__default.createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b('loader'), size: "m" }))));
+        return (React__default.createElement("div", { className: b$6({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b$6('loader'), size: "m" }))));
     }
     return (React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children));
 }
@@ -5144,23 +5144,23 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
     });
     const renderPageContent = () => {
         if (!activePage) {
-            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b$6('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
         }
         const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
         return (React__default.createElement(React__default.Fragment, null,
             !isMobile && (React__default.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, activePage))),
-            React__default.createElement("div", { className: b('content') }, filteredSections.map((section) => (React__default.createElement("div", { key: section.title, className: b('section') },
-                section.showTitle && (React__default.createElement("h3", { className: b('section-heading') }, section.title)),
+            React__default.createElement("div", { className: b$6('content') }, filteredSections.map((section) => (React__default.createElement("div", { key: section.title, className: b$6('section') },
+                section.showTitle && (React__default.createElement("h3", { className: b$6('section-heading') }, section.title)),
                 section.header &&
-                    (isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
-                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
+                    (isMobile ? (React__default.createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
+                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b$6('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
                         ? prepareTitle(title, search)
                         : title })))))))))));
     };
-    return (React__default.createElement("div", { className: b({ view }) },
+    return (React__default.createElement("div", { className: b$6({ view }) },
         isMobile ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
-            React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React__default.createElement("div", { className: b('menu'), onClick: () => {
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
+            React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default.createElement("div", { className: b$6('menu'), onClick: () => {
                 if (searchInputRef.current) {
                     searchInputRef.current.focus();
                 }
@@ -5172,9 +5172,9 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
                 }
             } },
             React__default.createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
-            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
             React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
-        React__default.createElement("div", { className: b('page') }, renderPageContent())));
+        React__default.createElement("div", { className: b$6('page') }, renderPageContent())));
 }
 Settings.Group = function SettingsGroup({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
@@ -5186,11 +5186,11 @@ Settings.Section = function SettingsSection({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
 };
 Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
-    return (React__default.createElement("div", { className: b('item', { align, mode }) },
-        React__default.createElement("label", { className: b('item-heading') },
-            React__default.createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
-            description ? React__default.createElement("span", { className: b('item-description') }, description) : null),
-        React__default.createElement("div", { className: b('item-content') }, children)));
+    return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
+        React__default.createElement("label", { className: b$6('item-heading') },
+            React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
+            description ? React__default.createElement("span", { className: b$6('item-description') }, description) : null),
+        React__default.createElement("div", { className: b$6('item-content') }, children)));
 };
 function prepareTitle(string, search) {
     let temp = string.slice(0);
@@ -5206,7 +5206,7 @@ function prepareTitle(string, search) {
             if (i > 0) {
                 title.push(temp.slice(0, i));
             }
-            title.push(React__default.createElement("strong", { key: key++, className: b('found') }, m));
+            title.push(React__default.createElement("strong", { key: key++, className: b$6('found') }, m));
             temp = temp.slice(i + m.length);
         }
     }
@@ -5216,5 +5216,251 @@ function prepareTitle(string, search) {
     return title;
 }
 
-export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, HotkeysPanel, MobileHeaderDict, Settings, Title };
+const useForwardRef = (ref, initialValue = null) => {
+    const targetRef = React__default.useRef(initialValue);
+    React__default.useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(targetRef.current);
+        }
+        else {
+            ref.current = targetRef.current;
+        }
+    }, [ref]);
+    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}";
+styleInject(css_248z$5);
+
+const b$5 = block('mobile-header-burger');
+const Burger = React__default.memo(({ opened, className, onClick }) => (React__default.createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? defaultDict$2['button_close-burger'] : defaultDict$2['button_open-burger'] },
+    React__default.createElement("span", { className: b$5('icon') },
+        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}";
+styleInject(css_248z$4);
+
+const b$4 = block('mobile-header-logo');
+const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', wrapper, onClick, }) => {
+    const hasClickHandler = typeof onClick === 'function';
+    const hasWrapper = typeof wrapper === 'function';
+    const linkProps = hasClickHandler
+        ? {}
+        : {
+            target: '_self',
+            href,
+        };
+    let logoIcon;
+    if (iconSrc) {
+        logoIcon = (React__default.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize, className: iconClassName }));
+    }
+    else if (icon) {
+        logoIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: b$4('icon', iconClassName) });
+    }
+    let logoTitle;
+    if (typeof text === 'function') {
+        logoTitle = text();
+    }
+    else {
+        logoTitle = (React__default.createElement("span", { className: b$4('title'), style: { fontSize: textSize } }, text));
+    }
+    const logo = (React__default.createElement(React__default.Fragment, null,
+        logoIcon,
+        logoTitle));
+    return hasWrapper ? (React__default.createElement("div", { className: b$4(), onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$4(), onClick: onClick }), logo));
+};
+
+const MOBILE_ITEM_HEIGHT = 48;
+const MOBILE_HEADER_COMPACT_HEIGHT = 50;
+const MOBILE_HEADER_EXPANDED_HEIGHT = 120;
+const MOBILE_HEADER_ICON_SIZE = 20;
+const EVENT_NAMES = {
+    toggleEvent: 'MOBILE_PANEL_TOGGLE',
+    closeEvent: 'MOBILE_PANEL_CLOSE',
+    openEvent: 'MOBILE_PANEL_OPEN',
+};
+const BURGER_PANEL_ITEM_ID = 'burger';
+
+const getItemHeight = (item) => {
+    switch (item.type) {
+        case 'divider':
+            return 1;
+        default:
+            return MOBILE_ITEM_HEIGHT;
+    }
+};
+const getSelectedItemIndex = (items) => {
+    const index = items.findIndex(({ current }) => Boolean(current));
+    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}";
+styleInject(css_248z$3);
+
+const b$3 = block('burger-composite-bar');
+const Item = ({ item, onItemClick }) => {
+    const { icon, type = 'regular', iconSize = MOBILE_HEADER_ICON_SIZE } = item;
+    if (type === 'divider') {
+        return React__default.createElement("div", { className: b$3('menu-divider') });
+    }
+    const node = (React__default.createElement("div", { className: b$3('item', { type }), onClick: () => {
+            if (typeof item.onItemClick === 'function') {
+                item.onItemClick(item);
+            }
+            if (type === 'regular') {
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+            }
+        } },
+        React__default.createElement("div", { className: b$3('item-icon-place') }, icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$3('item-icon') })),
+        React__default.createElement("div", { className: b$3('item-title') }, item.title)));
+    if (typeof item.itemWrapper === 'function') {
+        return item.itemWrapper(node, item);
+    }
+    return item.link ? (React__default.createElement("a", { href: item.link, className: b$3('link') }, node)) : (node);
+};
+Item.displayName = 'Item';
+const BurgerCompositeBar = React__default.memo(({ items, onItemClick }) => {
+    return (React__default.createElement("nav", { className: b$3() },
+        React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$3('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item) => React__default.createElement(Item, { item: item, onItemClick: 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}";
+styleInject(css_248z$2);
+
+const b$2 = block('mobile-header-burger-menu');
+const BurgerMenu = React__default.memo(({ items = [], renderFooter, modalItem, className, onItemClick }) => {
+    var _a;
+    return (React__default.createElement("div", { className: b$2(null, className) },
+        modalItem && (React__default.createElement(Sheet, { visible: modalItem.visible, id: modalItem.id, title: modalItem.title, onClose: modalItem.onClose, contentClassName: modalItem.contentClassName, className: modalItem.className }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))),
+        React__default.createElement(BurgerCompositeBar, { items: items, onItemClick: onItemClick }),
+        renderFooter && React__default.createElement("div", { className: b$2('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter())));
+});
+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}";
+styleInject(css_248z$1);
+
+const b$1 = block('mobile-header');
+const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
+    const targetRef = useForwardRef(ref);
+    const [compact] = useState(true);
+    const [visiblePanel, setVisiblePanel] = useState(null);
+    // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
+    const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;
+    const onPanelToggle = useCallback((name) => {
+        if (!name)
+            return;
+        setVisiblePanel((prev) => {
+            const panelOpen = prev === name;
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
+            return panelOpen ? null : name;
+        });
+    }, [visiblePanel, onEvent]);
+    const onMobilePanelToggle = useCallback(({ detail }) => {
+        if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
+            onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
+        }
+    }, [onEvent]);
+    const onMobilePanelOpen = useCallback(({ detail }) => {
+        if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
+            setVisiblePanel(detail === null || detail === void 0 ? void 0 : detail.panelName);
+        }
+    }, [onEvent]);
+    const onMobilePanelClose = useCallback(({ detail }) => {
+        if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.closeEvent);
+            setVisiblePanel(null);
+        }
+    }, [onEvent]);
+    const onBurgerOpen = useCallback(() => {
+        onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.openEvent);
+        setVisiblePanel(BURGER_PANEL_ITEM_ID);
+    }, [onEvent]);
+    const onBurgerClose = useCallback(() => {
+        onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.closeEvent);
+        setVisiblePanel(null);
+    }, [onEvent]);
+    const onCloseDrawer = useCallback(() => {
+        if (visiblePanel) {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent(visiblePanel, EVENT_NAMES.closeEvent);
+        }
+        setVisiblePanel(null);
+    }, [visiblePanel, onEvent]);
+    const onBurgerMenuItemClick = useCallback((item) => {
+        var _a;
+        const closeMenuOnClick = (_a = item.closeMenuOnClick) !== null && _a !== void 0 ? _a : true;
+        if (closeMenuOnClick) {
+            onBurgerClose();
+        }
+    }, [onBurgerClose]);
+    const renderBurgerMenuFooter = useCallback(() => {
+        var _a;
+        return (_a = burgerMenu.renderFooter) === null || _a === void 0 ? void 0 : _a.call(burgerMenu, {
+            size,
+            isCompact: compact,
+        });
+    }, [burgerMenu.renderFooter, size, compact]);
+    const onLogoClick = useCallback((event) => {
+        var _a;
+        onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
+        (_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
+    }, [logo.onClick, onClosePanel]);
+    const burgerPanelItem = useMemo(() => ({
+        id: BURGER_PANEL_ITEM_ID,
+        content: (React__default.createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
+    }), [burgerMenu]);
+    useEffect(() => {
+        const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+        if (node) {
+            node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
+            node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
+            node.addEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
+            node.addEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
+            node.addEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
+        }
+        return () => {
+            if (node) {
+                node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
+                node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
+                node.removeEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
+                node.removeEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
+                node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
+            }
+        };
+    }, [targetRef, onBurgerClose, onBurgerOpen]);
+    return (React__default.createElement("div", { className: b$1({ compact }, className), ref: targetRef },
+        React__default.createElement("header", { className: b$1('header'), style: { height: size } },
+            React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger') }),
+            React__default.createElement(Logo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
+            React__default.createElement("div", { className: b$1('side-item') }, sideItemRenderContent === null || sideItemRenderContent === void 0 ? void 0 : sideItemRenderContent({ size }))),
+        React__default.createElement(Drawer, { className: b$1('panels'), onVeilClick: onCloseDrawer, onEscape: onCloseDrawer, style: { top: size } }, [burgerPanelItem, ...panelItems].map((item) => (React__default.createElement(DrawerItem, Object.assign({}, item, { key: item.id, visible: visiblePanel === item.id, className: b$1('panel-item', item.className) }))))),
+        React__default.createElement(Content, { size: size, renderContent: renderContent, className: b$1('content'), cssSizeVariableName: "--mobile-header-size" })));
+});
+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}";
+styleInject(css_248z);
+
+const b = block('mobile-header-footer-item');
+const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modalItem = { visible: false }, onClick, }) => {
+    var _a;
+    const handleClick = React__default.useCallback((event) => {
+        eventBroker.publish({
+            componentId: 'MobileHeaderFooterItem',
+            eventId: 'click',
+            domEvent: event,
+        });
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [onClick]);
+    return (React__default.createElement("div", { className: b() },
+        React__default.createElement("button", { className: b('button', className), onClick: handleClick }, icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b('icon') }) : null),
+        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 };
 //# sourceMappingURL=index.js.map