@gravity-ui/navigation 0.5.0 → 0.6.0

package/build/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent } from 'react';
-import { Button, Icon, Popup, List, Tooltip, TextInput, Loader } from '@gravity-ui/uikit';
+import { Button, Icon, Popup, List, Tooltip, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -87,48 +87,48 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = ".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$c);
+var css_248z$d = ".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$d);
 
-const b$d = block('action-bar-group');
+const b$e = block('action-bar-group');
 const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default.createElement("ul", { className: b$d({ pull }, className), role: "group" }, children));
+    return (React__default.createElement("ul", { className: b$e({ pull }, className), role: "group" }, children));
 };
 ActionBarGroup.displayName = 'ActionBar.Group';
 
-var css_248z$b = ".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$b);
+var css_248z$c = ".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$c);
 
-const b$c = block('action-bar-item');
+const b$d = block('action-bar-item');
 const ActionBarItem = ({ children, className, pull, spacing = true }) => {
-    return React__default.createElement("li", { className: b$c({ pull, spacing }, className) }, children);
+    return React__default.createElement("li", { className: b$d({ pull, spacing }, className) }, children);
 };
 ActionBarItem.displayName = 'ActionBar.Item';
 
-var css_248z$a = ".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$a);
+var css_248z$b = ".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$b);
 
-const b$b = block('action-bar-section');
+const b$c = block('action-bar-section');
 const ActionBarSection = ({ children, type = 'primary' }) => {
-    return React__default.createElement("div", { className: b$b({ type }) }, children);
+    return React__default.createElement("div", { className: b$c({ type }) }, children);
 };
 ActionBarSection.displayName = 'ActionBar.Section';
 
-var css_248z$9 = ".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$9);
+var css_248z$a = ".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$a);
 
-const b$a = block('action-bar-separator');
+const b$b = block('action-bar-separator');
 const ActionBarSeparator = () => {
-    return React__default.createElement("li", { role: "separator", className: b$a() });
+    return React__default.createElement("li", { role: "separator", className: b$b() });
 };
 ActionBarSeparator.displayName = 'ActionBar.Separator';
 
-var css_248z$8 = ".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$8);
+var css_248z$9 = ".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$9);
 
-const b$9 = block('action-bar');
+const b$a = block('action-bar');
 const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default.createElement("section", { className: b$9(null, className), "aria-label": ariaLabel }, children));
+    return (React__default.createElement("section", { className: b$a(null, className), "aria-label": ariaLabel }, children));
 };
 ActionBar.displayName = 'ActionBar';
 const PublicActionBar = Object.assign(ActionBar, {
@@ -138,6 +138,11 @@ const PublicActionBar = Object.assign(ActionBar, {
     Separator: ActionBarSeparator,
 });
 
+var MobileHeaderDict;
+(function (MobileHeaderDict) {
+    MobileHeaderDict["CloseBurger"] = "button_close-burger";
+    MobileHeaderDict["OpenBurger"] = "button_open-burger";
+})(MobileHeaderDict || (MobileHeaderDict = {}));
 var Dict;
 (function (Dict) {
     Dict["ExpandButton"] = "button_expand";
@@ -152,6 +157,8 @@ const defaultDict$1 = {
     [Dict.CollapseButton]: 'Collapse',
     [Dict.ExpandButton]: 'Expand',
     [Dict.MoreButton]: 'More',
+    [MobileHeaderDict.CloseBurger]: 'Close menu',
+    [MobileHeaderDict.OpenBurger]: 'Open menu',
 };
 
 function _extends$4() {
@@ -3173,15 +3180,15 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-var css_248z$7 = ".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-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-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$7);
+var css_248z$8 = ".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$8);
 
-const b$8 = block('drawer');
+const b$9 = block('drawer');
 const TIMEOUT = 300;
-const DrawerItem = ({ visible, content, className }) => {
+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$8('item-transition'), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$8('item', className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$9('item-transition', { direction }), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$9('item', { direction }, className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3239,9 +3246,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$8(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$8('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$8('veil'), onClick: onVeilClick })),
+        return (React__default.createElement("div", { ref: containerRef, className: b$9(null, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$9('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$9('veil'), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 const childElem = child;
                 if (childElem.type === DrawerItem) {
@@ -3253,10 +3260,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
-var css_248z$6 = ".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}\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}\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$6);
+var css_248z$7 = ".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}\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}\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$7);
 
-const b$7 = block('logo');
+const b$8 = block('logo');
 const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
@@ -3274,18 +3281,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$7('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
+    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$8('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$7('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$8('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default.createElement("div", { className: b$7() },
-        React__default.createElement("div", { className: b$7('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
+    return (React__default.createElement("div", { className: b$8() },
+        React__default.createElement("div", { className: b$8('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$7('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
 };
 
 var classCallCheck = function (instance, Constructor) {
@@ -3817,16 +3824,16 @@ function getItemsMinHeight(items) {
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
 
-var css_248z$5 = ".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$5);
+var css_248z$6 = ".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$6);
 
-const b$6 = block('composite-bar-item');
+const b$7 = block('composite-bar-item');
 function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$6('title-text') }, item.title);
+    let titleNode = React__default.createElement("div", { className: b$7('title-text') }, item.title);
     if (item.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$6('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$7('title-adornment') }, item.rightAdornment)));
     }
     return titleNode;
 }
@@ -3835,7 +3842,7 @@ const defaultPopupOffset = [-20, 8];
 const Item = (props) => {
     const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
     if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$6('menu-divider') });
+        return React__default.createElement("div", { className: b$7('menu-divider') });
     }
     const [open, toggleOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
@@ -3856,7 +3863,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$6({ type, current, compact }, className), ref: ref, onClick: () => {
+        const createdNode = (React__default.createElement("div", { className: b$7({ type, current, compact }, className), ref: ref, onClick: () => {
                 if (collapsedItem) {
                     /**
                      * If we call onItemClick for collapsedItem then:
@@ -3877,13 +3884,13 @@ const Item = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$6('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$6('btn-icon') }, iconEl))) : (iconEl)),
-            React__default.createElement("div", { className: b$6('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$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
-        return item.link ? (React__default.createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
+            React__default.createElement("div", { className: b$7('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$7('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$7('btn-icon') }, iconEl))) : (iconEl)),
+            React__default.createElement("div", { className: b$7('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$7('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        return item.link ? (React__default.createElement("a", { href: item.link, className: b$7('link') }, createdNode)) : (createdNode);
     };
-    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$6('icon') }) : null;
+    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$7('icon') }) : null;
     const titleNode = renderItemTitle(item);
     const params = { icon: iconNode, title: titleNode };
     let node;
@@ -3901,13 +3908,13 @@ const Item = (props) => {
 Item.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$6('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$6('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$7('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b$7('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) => {
                     const makeCollapseNode = ({ title: titleEl }) => {
-                        const res = (React__default.createElement("div", { className: b$6('collapse-item'), onClick: () => {
+                        const res = (React__default.createElement("div", { className: b$7('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$6('link') }, res)) : (res);
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$7('link') }, res)) : (res);
                     };
                     const titleNode = renderItemTitle(collapseItem);
                     const params = { title: titleNode };
@@ -3937,10 +3944,10 @@ var SvgDots = function SvgDots(props) {
 };
 var dotsIcon = SvgDots;
 
-var css_248z$4 = ".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$4);
+var css_248z$5 = ".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$5);
 
-const b$5 = block('composite-bar');
+const b$6 = block('composite-bar');
 class CompositeBar extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -3955,10 +3962,10 @@ class CompositeBar extends React__default.Component {
             return null;
         }
         if (!enableCollapsing) {
-            return React__default.createElement("div", { className: b$5() }, this.renderMenu());
+            return React__default.createElement("div", { className: b$6() }, this.renderMenu());
         }
         const minHeight = getItemsMinHeight(items);
-        return (React__default.createElement("div", { className: b$5({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+        return (React__default.createElement("div", { className: b$6({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
             const style = {
                 width,
                 height,
@@ -3969,7 +3976,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$5('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(listItems), itemHeight: getItemHeight, itemClassName: b$6('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -3978,7 +3985,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$5('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(items), itemHeight: getItemHeight, itemClassName: b$6('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -4043,8 +4050,8 @@ const RenderContent = React__default.memo(({ renderContent, size }) => {
     return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
 });
 RenderContent.displayName = 'RenderContent';
-const Content = ({ size, className, renderContent }) => {
-    return (React__default.createElement("div", { className: className, style: Object.assign({}, { '--aside-header-size': `${size}px` }) }, typeof renderContent === 'function' && (React__default.createElement(RenderContent, { size: size, renderContent: renderContent }))));
+const Content = ({ size, className, cssSizeVariableName = '--aside-header-size', renderContent, }) => {
+    return (React__default.createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default.createElement(RenderContent, { size: size, renderContent: renderContent }))));
 };
 
 var _path$1;
@@ -4077,37 +4084,37 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 };
 var headerDividerCollapsedIcon = SvgDividerCollapsed;
 
-var css_248z$3 = ".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  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__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_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::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::after {\n  display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n  display: block;\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$3);
+var css_248z$4 = ".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$4);
 
-const b$4 = block('aside-header');
+const b$5 = block('aside-header');
 class AsideHeader extends React__default.Component {
     constructor() {
         super(...arguments);
         this.asideRef = React__default.createRef();
         this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems, compact } = this.props;
+            const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
             return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: b$4('aside'), style: { width: size } },
-                    React__default.createElement("div", { className: b$4('aside-popup-anchor'), ref: this.asideRef }),
-                    React__default.createElement("div", { className: b$4('aside-content') },
+                React__default.createElement("div", { className: b$5('aside'), style: { width: size } },
+                    React__default.createElement("div", { className: b$5('aside-popup-anchor'), ref: this.asideRef }),
+                    React__default.createElement("div", { className: b$5('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$4('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$5('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$4('content') }));
+            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$5('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$4('header') },
+        this.renderHeader = () => (React__default.createElement("div", { className: b$5('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$4('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$5('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
             const { compact, renderFooter } = this.props;
-            return (React__default.createElement("div", { className: b$4('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+            return (React__default.createElement("div", { className: b$5('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
                 asideRef: this.asideRef,
@@ -4115,14 +4122,14 @@ class AsideHeader extends React__default.Component {
         };
         this.renderPanels = (size) => {
             const { panelItems } = this.props;
-            return (React__default.createElement(Drawer, { className: b$4('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$5('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$4('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$1[typeButton] },
-                React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$4('collapse-icon'), width: "16", height: "10" })));
+            return (React__default.createElement(Button, { className: b$5('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$1[typeButton] },
+                React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$5('collapse-icon'), width: "16", height: "10" })));
         };
         this.onCollapseButtonClick = () => {
             var _a, _b;
@@ -4146,8 +4153,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$4({ compact }, className) },
-            React__default.createElement("div", { className: b$4('pane-container') },
+        return (React__default.createElement("div", { className: b$5({ compact }, className) },
+            React__default.createElement("div", { className: b$5('pane-container') },
                 this.renderFirstPane(size),
                 this.renderSecondPane(size))));
     }
@@ -4156,6 +4163,7 @@ AsideHeader.defaultProps = {
     panelItems: [],
     subheaderItems: [],
     menuItems: [],
+    headerDecoration: true,
 };
 
 /******************************************************************************
@@ -4185,13 +4193,13 @@ function __rest(s, e) {
     return t;
 }
 
-var css_248z$2 = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
+styleInject(css_248z$3);
 
-const b$3 = block('footer-item');
+const b$4 = block('footer-item');
 const FooterItem = (_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$3({ compact: props.compact }), onItemClick: item.onItemClick })));
+    return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$4({ compact: props.compact }), onItemClick: item.onItemClick })));
 };
 
 /**
@@ -4785,25 +4793,25 @@ function escapeStringForRegExp(input) {
     return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-const b$2 = block('settings-search');
-function SettingsSearch({ className, onChange, debounce = 200, inputRef, placeholder, }) {
+const b$3 = 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$2(null, className) },
-        React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: true, placeholder: placeholder, onUpdate: handleUpdate })));
+    return (React__default.createElement("div", { className: b$3(null, className) },
+        React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
 }
 
-var css_248z$1 = ".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$1);
+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);
 
-const b$1 = block('settings-menu');
+const b$2 = block('settings-menu');
 const SettingsMenu = React__default.forwardRef(
 // eslint-disable-next-line prefer-arrow-callback
-function SettingsMenu({ items, onChange, activeItem }, ref) {
-    const [focusItem, setFocus] = React__default.useState();
+function SettingsMenu({ items, onChange, activeItemId }, ref) {
+    const [focusItemId, setFocusId] = React__default.useState();
     const containerRef = React__default.useRef(null);
     const handleChange = useStableCallback(onChange);
-    const getFocused = useCurrent(focusItem);
+    const getFocused = useCurrent(focusItemId);
     React__default.useImperativeHandle(ref, () => ({
         handleKeyDown(event) {
             if (!containerRef.current) {
@@ -4815,47 +4823,47 @@ function SettingsMenu({ items, onChange, activeItem }, ref) {
                 return true;
             }
             else if (event.key === 'ArrowDown') {
-                setFocus(focusNext(containerRef.current, focused, 1));
+                setFocusId(focusNext(containerRef.current, focused, 1));
                 return true;
             }
             else if (event.key === 'ArrowUp') {
-                setFocus(focusNext(containerRef.current, focused, -1));
+                setFocusId(focusNext(containerRef.current, focused, -1));
                 return true;
             }
             return false;
         },
         clearFocus() {
-            setFocus(undefined);
+            setFocusId(undefined);
         },
     }), [getFocused, handleChange]);
-    return (React__default.createElement("div", { ref: containerRef, className: b$1() }, items.map((firstLevelItem) => {
+    return (React__default.createElement("div", { ref: containerRef, className: b$2() }, items.map((firstLevelItem) => {
         if ('groupTitle' in firstLevelItem) {
-            return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$1('group') },
-                React__default.createElement("span", { className: b$1('group-heading') }, firstLevelItem.groupTitle),
+            return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$2('group') },
+                React__default.createElement("span", { className: b$2('group-heading') }, firstLevelItem.groupTitle),
                 firstLevelItem.items.map((item) => {
-                    return renderMenuItem(item, onChange, activeItem, focusItem);
+                    return renderMenuItem(item, onChange, activeItemId, focusItemId);
                 })));
         }
-        return renderMenuItem(firstLevelItem, onChange, activeItem, focusItem);
+        return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);
     })));
 });
-function renderMenuItem(item, onChange, activeItem, focusItem) {
-    return (React__default.createElement("span", { key: item.title, className: b$1('item', {
-            selected: activeItem === item.id,
+function renderMenuItem(item, onChange, activeItemId, focusItemId) {
+    return (React__default.createElement("span", { key: item.title, className: b$2('item', {
+            selected: activeItemId === item.id,
             disabled: item.disabled,
-            focused: focusItem === item.id,
+            focused: focusItemId === item.id,
             badge: item.withBadge,
         }), onClick: () => {
             if (!item.disabled) {
                 onChange(item.id);
             }
         }, "data-id": item.id },
-        item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$1('item-icon') })) : undefined,
+        item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$2('item-icon') })) : undefined,
         React__default.createElement("span", null, item.title)));
 }
 function focusNext(container, focused, direction) {
     var _a;
-    const elements = container.querySelectorAll(`.${b$1('item')}:not(.${b$1('item')}_disabled)`);
+    const elements = container.querySelectorAll(`.${b$2('item')}:not(.${b$2('item')}_disabled)`);
     if (elements.length === 0) {
         return undefined;
     }
@@ -4867,6 +4875,37 @@ 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);
+
+const b$1 = block('settings-menu-mobile');
+const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
+    const ref = React__default.useRef(null);
+    const tabItems = React__default.useMemo(() => {
+        const tabItems = [];
+        items.forEach((firstLevelItem) => {
+            if ('groupTitle' in firstLevelItem) {
+                tabItems.push(...firstLevelItem.items.map(({ id, title, disabled, withBadge }) => ({
+                    id,
+                    title,
+                    disabled,
+                    className: b$1('item', { badge: withBadge }),
+                })));
+            }
+            else {
+                const { id, title, disabled, withBadge } = firstLevelItem;
+                tabItems.push({ id, title, disabled, className: b$1('item', { badge: withBadge }) });
+            }
+        });
+        return tabItems;
+    }, [items]);
+    const handleTouchMove = (e) => {
+        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 })));
+};
+
 function getSettingsFromChildren(children, searchText = '') {
     // 'abc def fg' -> abc.*?cde.*?fg
     const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
@@ -4944,7 +4983,7 @@ function getSettingsPageFromChildren(children, filterRe) {
             page.hidden = hidden && page.hidden;
         }
         else {
-            const { title, header, withBadge } = element.props;
+            const { title, header, withBadge, showTitle = true } = element.props;
             const { items, hidden } = getSettingsItemsFromChildren(element.props.children, filterRe);
             page.withBadge = withBadge || page.withBadge;
             page.hidden = hidden && page.hidden;
@@ -4954,6 +4993,7 @@ function getSettingsPageFromChildren(children, filterRe) {
                 withBadge,
                 items,
                 hidden,
+                showTitle,
             });
         }
     });
@@ -4987,7 +5027,7 @@ 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_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: 12px 20px 16px;\n}\n.ycn-settings__page {\n  padding: 20px;\n  overflow-y: auto;\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-heading_badge {\n  position: relative;\n}\n.ycn-settings__item-heading_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__found {\n  font-weight: var(--yc-text-accent-font-weight);\n  background: var(--yc-color-base-selection);\n}";
+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(90vh - 56px);\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  padding: 20px 20px;\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: 12px 20px 16px;\n}\n.ycn-settings__page {\n  padding: 20px;\n  overflow-y: auto;\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);
 
 const b = block('settings');
@@ -4997,16 +5037,16 @@ const defaultDict = {
     not_found: 'No results found',
 };
 function Settings(_a) {
-    var { loading, renderLoading, children } = _a, props = __rest(_a, ["loading", "renderLoading", "children"]);
+    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 }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b('loader'), size: "m" }))));
+        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(SettingsContent, Object.assign({}, props), children);
+    return (React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children));
 }
 Settings.defaultProps = {
     dict: defaultDict,
 };
-function SettingsContent({ initialPage, onPageChange, children, renderNotFound, dict, }) {
+function SettingsContent({ initialPage, onPageChange, children, renderNotFound, dict, view, }) {
     var _a, _b;
     const [search, setSearch] = React__default.useState('');
     const { menu, pages } = getSettingsFromChildren(children, search);
@@ -5014,6 +5054,7 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
     const [selectedPage, setCurrentPage] = React__default.useState(initialPage && pageKeys.includes(initialPage) ? initialPage : undefined);
     const searchInputRef = React__default.useRef(null);
     const menuRef = React__default.useRef(null);
+    const isMobile = view === 'mobile';
     React__default.useEffect(() => {
         var _a;
         (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clearFocus();
@@ -5052,12 +5093,14 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
         return pages[activePage].sections
             .filter((section) => !section.hidden)
             .map((section) => (React__default.createElement("div", { key: section.title, className: b('section') },
-            React__default.createElement("h3", { className: b('section-heading') }, section.title),
-            section.header ? section.header : null,
+            section.showTitle ? (React__default.createElement("h3", { className: b('section-heading') }, section.title)) : null,
+            section.header ? (isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)) : null,
             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 ? prepareTitle(title, search) : title }))))))));
     };
-    return (React__default.createElement("div", { className: b() },
-        React__default.createElement("div", { className: b('menu'), onClick: () => {
+    return (React__default.createElement("div", { className: b({ 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: () => {
                 if (searchInputRef.current) {
                     searchInputRef.current.focus();
                 }
@@ -5069,8 +5112,8 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
                 }
             } },
             React__default.createElement("h2", { className: b('heading') }, 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 }),
-            React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItem: activePage })),
+            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(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
         React__default.createElement("div", { className: b('page') }, renderPageContent())));
 }
 Settings.Group = function SettingsGroup({ children }) {
@@ -5082,10 +5125,12 @@ Settings.Page = function SettingsPage({ children }) {
 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, }) {
-    return (React__default.createElement("div", { className: b('item', { align }) },
-        React__default.createElement("label", { className: b('item-heading', { badge: withBadge }) }, renderTitleComponent(title)),
-        React__default.createElement("div", 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)));
 };
 function prepareTitle(string, search) {
     let temp = string.slice(0);
@@ -5111,5 +5156,5 @@ function prepareTitle(string, search) {
     return title;
 }
 
-export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, Settings };
+export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, MobileHeaderDict, Settings };
 //# sourceMappingURL=index.js.map