@gravity-ui/navigation 0.1.0 → 0.2.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 } from '@gravity-ui/uikit';
+import { Button, Icon, Popup, List, TextInput, 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$b = ".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$b);
+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$b = block('action-bar-group');
+const b$e = block('action-bar-group');
 const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default.createElement("ul", { className: b$b({ 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$a = ".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$a);
+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$a = 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$a({ pull, spacing }, className) }, children);
+    return React__default.createElement("li", { className: b$d({ pull, spacing }, className) }, children);
 };
 ActionBarItem.displayName = 'ActionBar.Item';
 
-var css_248z$9 = ".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$9);
+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$9 = block('action-bar-section');
+const b$c = block('action-bar-section');
 const ActionBarSection = ({ children, type = 'primary' }) => {
-    return React__default.createElement("div", { className: b$9({ type }) }, children);
+    return React__default.createElement("div", { className: b$c({ type }) }, children);
 };
 ActionBarSection.displayName = 'ActionBar.Section';
 
-var css_248z$8 = ".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$8);
+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$8 = block('action-bar-separator');
+const b$b = block('action-bar-separator');
 const ActionBarSeparator = () => {
-    return React__default.createElement("li", { role: "separator", className: b$8() });
+    return React__default.createElement("li", { role: "separator", className: b$b() });
 };
 ActionBarSeparator.displayName = 'ActionBar.Separator';
 
-var css_248z$7 = ".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$7);
+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$7 = block('action-bar');
+const b$a = block('action-bar');
 const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default.createElement("section", { className: b$7(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, {
@@ -148,7 +148,7 @@ var Dict;
 const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
 const ASIDE_HEADER_COMPACT_WIDTH = 56;
 const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-const defaultDict = {
+const defaultDict$1 = {
     [Dict.CollapseButton]: 'Collapse',
     [Dict.ExpandButton]: 'Expand',
     [Dict.MoreButton]: 'More',
@@ -158,14 +158,12 @@ function _extends$4() {
   _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$4.apply(this, arguments);
@@ -176,13 +174,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -1449,6 +1445,10 @@ var classNamesShape = process.env.NODE_ENV !== 'production' ? propTypes.exports.
 
 var TransitionGroupContext = React__default.createContext(null);
 
+var forceReflow = function forceReflow(node) {
+  return node.scrollTop;
+};
+
 var UNMOUNTED = 'unmounted';
 var EXITED = 'exited';
 var ENTERING = 'entering';
@@ -1668,6 +1668,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+          // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+          // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+          if (node) forceReflow(node);
+        }
+
         this.performEnter(mounting);
       } else {
         this.performExit();
@@ -1860,7 +1868,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
   nodeRef: propTypes.exports.shape({
-    current: typeof Element === 'undefined' ? propTypes.exports.any : propTypes.exports.instanceOf(Element)
+    current: typeof Element === 'undefined' ? propTypes.exports.any : function (propValue, key, componentName, location, propFullName, secret) {
+      var value = propValue[key];
+      return propTypes.exports.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+    }
   }),
 
   /**
@@ -2268,13 +2279,12 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 
     if (type === 'appear' && phase === 'done' && doneClassName) {
       className += " " + doneClassName;
-    } // This is for to force a repaint,
+    } // This is to force a repaint,
     // which is necessary in order to transition styles when adding a class name.
 
 
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+      if (node) forceReflow(node);
     }
 
     if (className) {
@@ -2460,7 +2470,6 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
-
   return self;
 }
 
@@ -3164,15 +3173,15 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-var css_248z$6 = ".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$6);
+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-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$8);
 
-const b$6 = block('drawer');
+const b$9 = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, className }) => {
     const itemRef = React__default.useRef(null);
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$6('item-transition'), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$6('item', className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$9('item-transition'), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$9('item', className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3230,9 +3239,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$6(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$6('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$6('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) {
@@ -3244,10 +3253,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
-var css_248z$5 = ".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$5);
+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$5 = 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';
@@ -3265,18 +3274,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$5('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$5('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$5() },
-        React__default.createElement("div", { className: b$5('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 ? (wrapper(logo, compact)) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$5('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (wrapper(logo, compact)) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
 };
 
 var classCallCheck = function (instance, Constructor) {
@@ -3808,10 +3817,10 @@ function getItemsMinHeight(items) {
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
 
-var css_248z$4 = ".ycn-item-tooltip.yc-popup {\n  animation-name: none;\n  box-shadow: none;\n  border: none;\n}\n.ycn-item-tooltip__text {\n  padding: 6px 12px;\n  background-color: var(--yc-color-base-float-heavy);\n  color: var(--yc-color-text-light-primary);\n  border-radius: 4px;\n}";
-styleInject(css_248z$4);
+var css_248z$6 = ".ycn-item-tooltip.yc-popup {\n  animation-name: none;\n  box-shadow: none;\n  border: none;\n}\n.ycn-item-tooltip__text {\n  padding: 6px 12px;\n  background-color: var(--yc-color-base-float-heavy);\n  color: var(--yc-color-text-light-primary);\n  border-radius: 4px;\n}";
+styleInject(css_248z$6);
 
-const b$4 = block('item-tooltip');
+const b$7 = block('item-tooltip');
 const popupPlacement = ['right'];
 const ItemTooltip = ({ anchor, text }) => {
     const anchorRef = React__default.useRef(anchor);
@@ -3821,28 +3830,28 @@ const ItemTooltip = ({ anchor, text }) => {
     if (!anchor) {
         return null;
     }
-    return (React__default.createElement(Popup, { className: b$4(), open: true, anchorRef: anchorRef, placement: popupPlacement, disableEscapeKeyDown: true, disableOutsideClick: true, disableLayer: true },
-        React__default.createElement("div", { className: b$4('text') }, text)));
+    return (React__default.createElement(Popup, { className: b$7(), open: true, anchorRef: anchorRef, placement: popupPlacement, disableEscapeKeyDown: true, disableOutsideClick: true, disableLayer: true },
+        React__default.createElement("div", { className: b$7('text') }, text)));
 };
 
-var css_248z$3 = ".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: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$3);
+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: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);
 
-const b$3 = block('composite-bar-item');
+const b$6 = block('composite-bar-item');
 function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$3('title-text') }, item.title);
+    let titleNode = React__default.createElement("div", { className: b$6('title-text') }, item.title);
     if (item.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$3('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$6('title-adornment') }, item.rightAdornment)));
     }
     return titleNode;
 }
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
-const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, }) => {
+const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, }) => {
     if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$3('menu-divider') });
+        return React__default.createElement("div", { className: b$6('menu-divider') });
     }
     const [tooltipAnchor, setTooltipAnchor] = React__default.useState(null);
     const [open, toggleOpen] = React__default.useState(false);
@@ -3863,14 +3872,19 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
         }
         onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
     }, [onClosePopup]);
-    const node = (React__default.createElement("div", { className: b$3({ type, current, compact }, className), ref: ref, onClick: () => {
-            if (typeof item.onItemClick === 'function') {
-                item.onItemClick(item, false);
-            }
+    const node = (React__default.createElement("div", { className: b$6({ type, current, compact }, className), ref: ref, onClick: () => {
             if (collapsedItem) {
+                /**
+                 * If we call onItemClick for collapsedItem then:
+                 * - User get unexpected item in onItemClick callback
+                 * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                 */
                 toggleOpen(!open);
                 setTooltipAnchor(null);
             }
+            else {
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
+            }
         }, onMouseEnter: () => {
             if (!compact) {
                 onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
@@ -3880,7 +3894,7 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
                 onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
             }
         } },
-        React__default.createElement("div", { className: b$3('icon-place') }, compact ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { onMouseEnter: (event) => {
                     if (!open) {
                         setTooltipAnchor(event.currentTarget);
@@ -3889,51 +3903,47 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
                 }, onMouseLeave: () => {
                     setTooltipAnchor(null);
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-                }, className: b$3('btn-icon') }, icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$3('icon') })),
-            enableTooltip && React__default.createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText }))) : (icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$3('icon') }))),
-        React__default.createElement("div", { className: b$3('title'), title: typeof item.title === 'string' ? item.title : undefined }, renderItemTitle(item)),
+                }, className: b$6('btn-icon') }, icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$6('icon') })),
+            enableTooltip && React__default.createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText }))) : (icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$6('icon') }))),
+        React__default.createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, renderItemTitle(item)),
         collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: open, anchorRef: ref, onClose: () => toggleOpen(false) },
-            React__default.createElement("div", { className: b$3('collapse-items-popup-content') },
-                React__default.createElement(List, { itemClassName: b$3('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 collapseNode = (React__default.createElement("div", { className: b$3('collapse-item'), onClick: () => {
-                                if (typeof collapseItem.onItemClick === 'function') {
-                                    collapseItem.onItemClick(collapseItem, true);
-                                }
+            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) => {
+                        const collapseNode = (React__default.createElement("div", { className: b$6('collapse-item'), onClick: () => {
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
                             } }, renderItemTitle(collapseItem)));
                         if (typeof collapseItem.itemWrapper === 'function') {
                             return collapseItem.itemWrapper(collapseNode, collapseItem, true, compact);
                         }
-                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$3('link') }, collapseNode)) : (collapseNode);
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$6('link') }, collapseNode)) : (collapseNode);
                     } })))),
-        renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$3('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        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()))));
     if (typeof item.itemWrapper === 'function') {
         return item.itemWrapper(node, item, false, compact);
     }
-    return item.link ? (React__default.createElement("a", { href: item.link, className: b$3('link') }, node)) : (node);
+    return item.link ? (React__default.createElement("a", { href: item.link, className: b$6('link') }, node)) : (node);
 };
 Item.displayName = 'Item';
 
 var _path$2;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgDots = function SvgDots(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    role: "img"
+    height: 16
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z",
     fill: "currentColor",
     fillRule: "evenodd"
   })));
 };
+var dotsIcon = SvgDots;
 
-var css_248z$2 = ".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$2);
+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);
 
-const b$2 = block('composite-bar');
+const b$5 = block('composite-bar');
 class CompositeBar extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -3948,10 +3958,10 @@ class CompositeBar extends React__default.Component {
             return null;
         }
         if (!enableCollapsing) {
-            return React__default.createElement("div", { className: b$2() }, this.renderMenu());
+            return React__default.createElement("div", { className: b$5() }, this.renderMenu());
         }
         const minHeight = getItemsMinHeight(items);
-        return (React__default.createElement("div", { className: b$2({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+        return (React__default.createElement("div", { className: b$5({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
             const style = {
                 width,
                 height,
@@ -3962,30 +3972,30 @@ 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$2('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, onItemClick: onItemClick, 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$5('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);
                     }
-                }, compact: compact, collapseItems: collapseItems })) }));
+                }, compact: compact, collapseItems: collapseItems, onItemClick: onItemClick })) }));
     }
     renderMenu() {
         const { items, onItemClick, compact } = this.props;
-        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$2('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, onItemClick: onItemClick, 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$5('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);
                     }
-                }, compact: compact })) }));
+                }, compact: compact, onItemClick: onItemClick })) }));
     }
     getMoreButtonItem() {
         var _a;
         const { dict } = this.props;
-        const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict[Dict.MoreButton];
+        const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$1[Dict.MoreButton];
         return {
             id: COLLAPSE_ITEM_ID,
             title,
-            icon: SvgDots,
+            icon: dotsIcon,
             iconSize: 16,
         };
     }
@@ -4041,70 +4051,64 @@ const Content = ({ size, className, renderContent }) => {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgControlMenuButton = function SvgControlMenuButton(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     width: 8,
     height: 8,
     fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img"
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
   })));
 };
+var controlMenuButtonIcon = SvgControlMenuButton;
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 56,
     height: 29,
     fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img"
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
   })));
 };
+var headerDividerCollapsedIcon = SvgDividerCollapsed;
 
-var css_248z$1 = ".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  --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  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\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__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}\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$1);
+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  --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  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\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__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);
 
-const b$1 = block('aside-header');
+const b$4 = block('aside-header');
 class AsideHeader extends React__default.Component {
-    constructor(props) {
-        super(props);
+    constructor() {
+        super(...arguments);
         this.asideRef = React__default.createRef();
         this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems } = this.props;
-            const { compact } = this.state;
-            return (React__default.createElement("div", null,
-                React__default.createElement("div", { className: b$1('aside'), style: { width: size } },
-                    React__default.createElement("div", { className: b$1('aside-popup-anchor'), ref: this.asideRef }),
-                    React__default.createElement("div", { className: b$1('aside-content') },
+            const { dict, menuItems, panelItems, compact } = 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') },
                         this.renderHeader(),
-                        React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onCompositeBarClick }),
+                        React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick }),
                         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$1('content') }));
+            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
         };
         this.renderLogo = () => React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact }));
-        this.renderHeader = () => (React__default.createElement("div", { className: b$1('header') },
+        this.renderHeader = () => (React__default.createElement("div", { className: b$4('header') },
             this.renderLogo(),
-            React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false }),
-            React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$1('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+            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" })));
         this.renderFooter = (size) => {
-            var _a, _b;
-            const { compact } = this.state;
-            return (React__default.createElement("div", { className: b$1('footer') }, (_b = (_a = this.props).renderFooter) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            const { compact, renderFooter } = this.props;
+            return (React__default.createElement("div", { className: b$4('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
                 asideRef: this.asideRef,
@@ -4112,44 +4116,34 @@ class AsideHeader extends React__default.Component {
         };
         this.renderPanels = (size) => {
             const { panelItems } = this.props;
-            return (React__default.createElement(Drawer, { className: b$1('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$4('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$1('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[typeButton] },
-                React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$1('collapse-icon'), width: "16", height: "10" })));
+            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" })));
         };
         this.onCollapseButtonClick = () => {
             var _a, _b;
-            const newCompact = !this.state.compact;
-            this.setState({ compact: newCompact });
-            (_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, newCompact);
+            (_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, !this.props.compact);
         };
         this.onCloseDrawer = () => {
             var _a, _b;
             (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
-        this.onCompositeBarClick = () => {
-            var _a, _b;
+        this.onItemClick = (item, collapsed) => {
+            var _a, _b, _c;
             (_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        this.state = {
-            compact: Boolean(props.compact),
+            (_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
         };
     }
-    componentDidUpdate(prevProps) {
-        if (prevProps.compact !== this.props.compact) {
-            this.setState({ compact: Boolean(this.props.compact) });
-        }
-    }
     render() {
-        const { className } = this.props;
-        const { compact } = this.state;
+        const { className, compact } = this.props;
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement("div", { className: b$1({ compact }, className) },
-            React__default.createElement("div", { className: b$1('pane-container') },
+        return (React__default.createElement("div", { className: b$4({ compact }, className) },
+            React__default.createElement("div", { className: b$4('pane-container') },
                 this.renderFirstPane(size),
                 this.renderSecondPane(size))));
     }
@@ -4187,14 +4181,931 @@ function __rest(s, e) {
     return t;
 }
 
-var css_248z = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
-styleInject(css_248z);
+var css_248z$2 = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
+styleInject(css_248z$2);
 
-const b = block('footer-item');
+const b$3 = 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({ compact: props.compact }) })));
+    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 })));
+};
+
+/**
+ * This method returns the first argument it receives.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {*} value Any value.
+ * @returns {*} Returns `value`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ *
+ * console.log(_.identity(object) === object);
+ * // => true
+ */
+
+function identity(value) {
+  return value;
+}
+
+var identity_1 = identity;
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject$2;
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$2 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$2;
+
+var root$1 = _root;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$1 = function() {
+  return root$1.Date.now();
+};
+
+var now_1 = now$1;
+
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+
+var trimmedEndIndex = _trimmedEndIndex;
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+var _baseTrim = baseTrim$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
+
+var _Symbol = Symbol$3;
+
+var Symbol$2 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol$1;
+
+var baseTrim = _baseTrim,
+    isObject$1 = isObject_1,
+    isSymbol = isSymbol_1;
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber$1(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$1(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$1(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var toNumber_1 = toNumber$1;
+
+var isObject = isObject_1,
+    now = now_1,
+    toNumber = toNumber_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var debounce_1 = debounce;
+
+function useStableCallback(func) {
+    const funcRef = React.useRef();
+    React.useEffect(() => {
+        funcRef.current = func;
+        return () => {
+            funcRef.current = undefined;
+        };
+    }, [func]);
+    return React.useCallback((...args) => {
+        if (typeof funcRef.current === 'function') {
+            return funcRef.current(...args);
+        }
+        return undefined;
+    }, []);
+}
+function useCurrent(value) {
+    const ref = React.useRef(value);
+    ref.current = value;
+    return React.useCallback(() => ref.current, []);
+}
+function invariant(cond, message) {
+    if (!cond) {
+        throw new Error(message);
+    }
+}
+function escapeStringForRegExp(input) {
+    return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+const b$2 = block('settings-search');
+function SettingsSearch({ className, onChange, debounce = 200, inputRef, placeholder, }) {
+    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 })));
+}
+
+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);
+
+const b$1 = 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();
+    const containerRef = React__default.useRef(null);
+    const handleChange = useStableCallback(onChange);
+    const getFocused = useCurrent(focusItem);
+    React__default.useImperativeHandle(ref, () => ({
+        handleKeyDown(event) {
+            if (!containerRef.current) {
+                return false;
+            }
+            const focused = getFocused();
+            if (focused && event.key === 'Enter') {
+                handleChange(focused);
+                return true;
+            }
+            else if (event.key === 'ArrowDown') {
+                setFocus(focusNext(containerRef.current, focused, 1));
+                return true;
+            }
+            else if (event.key === 'ArrowUp') {
+                setFocus(focusNext(containerRef.current, focused, -1));
+                return true;
+            }
+            return false;
+        },
+        clearFocus() {
+            setFocus(undefined);
+        },
+    }), [getFocused, handleChange]);
+    return (React__default.createElement("div", { ref: containerRef, className: b$1() }, 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),
+                firstLevelItem.items.map((item) => {
+                    return renderMenuItem(item, onChange, activeItem, focusItem);
+                })));
+        }
+        return renderMenuItem(firstLevelItem, onChange, activeItem, focusItem);
+    })));
+});
+function renderMenuItem(item, onChange, activeItem, focusItem) {
+    return (React__default.createElement("span", { key: item.title, className: b$1('item', {
+            selected: activeItem === item.id,
+            disabled: item.disabled,
+            focused: focusItem === 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,
+        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)`);
+    if (elements.length === 0) {
+        return undefined;
+    }
+    let currentIndex = direction > 0 ? -1 : 0;
+    if (focused) {
+        currentIndex = Array.prototype.findIndex.call(elements, (element) => element.getAttribute('data-id') === focused);
+    }
+    currentIndex = (elements.length + currentIndex + direction) % elements.length;
+    return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
+}
+
+function getSettingsFromChildren(children, searchText = '') {
+    // 'abc def fg' -> abc.*?cde.*?fg
+    const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
+    const filterRe = new RegExp(preparedFilter, 'i');
+    return getSettingsFromChildrenRecursive(children, '', filterRe);
+}
+function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
+    const menu = [];
+    const pages = {};
+    let hasGroup = false;
+    let hasItems = false;
+    React__default.Children.forEach(children, (element) => {
+        var _a, _b;
+        if (!React__default.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React__default.Fragment) {
+            // Transparently support React.Fragment and its children.
+            const { menu: menuFragment, pages: pagesFragment } = getSettingsFromChildrenRecursive(element.props.children, basepath, filterRe);
+            menu.push(...menuFragment);
+            Object.assign(pages, pagesFragment);
+        }
+        else if (element.props.groupTitle) {
+            if (process.env.NODE_ENV === 'development') {
+                invariant(!hasItems, 'Setting menu must not mix groups and pages on one level');
+            }
+            const pageId = `${basepath}/${(_a = element.props.id) !== null && _a !== void 0 ? _a : element.props.groupTitle}`;
+            hasGroup = true;
+            const { menu: menuFragment, pages: pagesFragment } = getSettingsFromChildrenRecursive(element.props.children, pageId, filterRe);
+            if (process.env.NODE_ENV === 'development') {
+                const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
+                invariant(!hasInnerGroup, `Group ${element.props.groupTitle} should not include groups`);
+            }
+            menu.push({
+                groupTitle: element.props.groupTitle,
+                // @ts-ignore
+                items: menuFragment,
+            });
+            Object.assign(pages, pagesFragment);
+        }
+        else {
+            hasItems = true;
+            const pageId = `${basepath}/${(_b = element.props.id) !== null && _b !== void 0 ? _b : element.props.title}`;
+            if (process.env.NODE_ENV === 'development') {
+                invariant(Boolean(element.props.title), 'Component must include title prop');
+                invariant(!hasGroup, 'Setting menu must not mix groups and pages on one level');
+                invariant(!pages[pageId], `Setting menu page id must be uniq (${pageId})`);
+            }
+            pages[pageId] = getSettingsPageFromChildren(element.props.children, filterRe);
+            pages[pageId].id = pageId;
+            menu.push({
+                id: pageId,
+                title: element.props.title,
+                icon: element.props.icon,
+                withBadge: pages[pageId].withBadge,
+                disabled: pages[pageId].hidden,
+            });
+        }
+    });
+    return { menu, pages };
+}
+function getSettingsPageFromChildren(children, filterRe) {
+    const page = { id: '', sections: [], hidden: true };
+    React__default.Children.forEach(children, (element) => {
+        if (!React__default.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React__default.Fragment) {
+            // Transparently support React.Fragment and its children.
+            const { sections, withBadge, hidden } = getSettingsPageFromChildren(element.props.children, filterRe);
+            page.sections.push(...sections);
+            page.withBadge = withBadge || page.withBadge;
+            page.hidden = hidden && page.hidden;
+        }
+        else {
+            const { title, header, withBadge } = element.props;
+            const { items, hidden } = getSettingsItemsFromChildren(element.props.children, filterRe);
+            page.withBadge = withBadge || page.withBadge;
+            page.hidden = hidden && page.hidden;
+            page.sections.push({
+                title,
+                header,
+                withBadge,
+                items,
+                hidden,
+            });
+        }
+    });
+    return page;
+}
+function getSettingsItemsFromChildren(children, filterRe) {
+    let hidden = true;
+    const items = [];
+    React__default.Children.forEach(children, (element) => {
+        if (!React__default.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React__default.Fragment) {
+            // Transparently support React.Fragment and its children.
+            const fragmentItems = getSettingsItemsFromChildren(element.props.children, filterRe);
+            items.push(...fragmentItems.items);
+            hidden = hidden && fragmentItems.hidden;
+        }
+        else {
+            const item = {
+                title: element.props.title,
+                renderTitleComponent: element.props.renderTitleComponent,
+                element,
+                hidden: !filterRe.test(element.props.title),
+            };
+            items.push(item);
+            hidden = hidden && item.hidden;
+        }
+    });
+    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}";
+styleInject(css_248z);
+
+const b = block('settings');
+const defaultDict = {
+    heading_settings: 'Settings',
+    placeholder_search: 'Search settings',
+    not_found: 'No results found',
+};
+function Settings(_a) {
+    var { loading, renderLoading, children } = _a, props = __rest(_a, ["loading", "renderLoading", "children"]);
+    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(SettingsContent, Object.assign({}, props), children);
+}
+Settings.defaultProps = {
+    dict: defaultDict,
+};
+function SettingsContent({ initialPage, onPageChange, children, renderNotFound, dict, }) {
+    var _a, _b;
+    const [search, setSearch] = React__default.useState('');
+    const { menu, pages } = getSettingsFromChildren(children, search);
+    const pageKeys = Object.keys(pages);
+    const [selectedPage, setCurrentPage] = React__default.useState(initialPage && pageKeys.includes(initialPage) ? initialPage : undefined);
+    const searchInputRef = React__default.useRef(null);
+    const menuRef = React__default.useRef(null);
+    React__default.useEffect(() => {
+        var _a;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clearFocus();
+    }, [search]);
+    React__default.useEffect(() => {
+        const handler = () => {
+            var _a;
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clearFocus();
+        };
+        window.addEventListener('click', handler);
+        return () => {
+            window.removeEventListener('click', handler);
+        };
+    }, []);
+    let activePage = selectedPage;
+    if (!activePage || ((_a = pages[activePage]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+        activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === void 0 ? void 0 : _b.id;
+    }
+    const handlePageChange = (newPage) => {
+        setCurrentPage((prevPage) => {
+            if (prevPage !== newPage) {
+                onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
+            }
+            return newPage;
+        });
+    };
+    React__default.useEffect(() => {
+        if (activePage !== selectedPage) {
+            handlePageChange(activePage);
+        }
+    });
+    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 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.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: () => {
+                if (searchInputRef.current) {
+                    searchInputRef.current.focus();
+                }
+            }, onKeyDown: (event) => {
+                if (menuRef.current) {
+                    if (menuRef.current.handleKeyDown(event)) {
+                        event.preventDefault();
+                    }
+                }
+            } },
+            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("div", { className: b('page') }, renderPageContent())));
+}
+Settings.Group = function SettingsGroup({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+Settings.Page = function SettingsPage({ children }) {
+    return React__default.createElement(React__default.Fragment, null, 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)));
 };
+function prepareTitle(string, search) {
+    let temp = string.slice(0);
+    const title = [];
+    const parts = escapeStringForRegExp(search).split(' ').filter(Boolean);
+    let key = 0;
+    for (const part of parts) {
+        const regex = new RegExp(part, 'ig');
+        const match = regex.exec(temp);
+        if (match) {
+            const m = match[0];
+            const i = match.index;
+            if (i > 0) {
+                title.push(temp.slice(0, i));
+            }
+            title.push(React__default.createElement("strong", { key: key++, className: b('found') }, m));
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}
 
-export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem };
+export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, Settings };
 //# sourceMappingURL=index.js.map