@gravity-ui/navigation 0.8.1 → 0.9.0

package/build/esm/components/ActionBar/__stories__/ActionBar.stories.d.ts

@@ -42,3 +42,24 @@ export declare const Showcase: ComponentStory<{
         displayName: string;
     };
 }>;
+export declare const SingleSection: ComponentStory<{
+    ({ children, className, "aria-label": ariaLabel }: import("../ActionBar").Props): JSX.Element;
+    displayName: string;
+} & {
+    Section: {
+        ({ children, type }: import("..").ActionBarSectionProps): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ children, className, pull }: import("..").ActionBarGroupProps): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, className, pull, spacing }: import("..").ActionBarItemProps): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+}>;

package/build/esm/components/ActionBar/__stories__/ActionBarSingleSection.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ActionBarSingleSection(): JSX.Element;

package/build/esm/components/index.d.ts

@@ -1,7 +1,7 @@
-export { ActionBar } from './ActionBar';
 export { AsideHeader, AsideHeaderProps } from './AsideHeader/AsideHeader';
 export { Drawer, DrawerProps, DrawerItemProps, DrawerItem } from './Drawer/Drawer';
 export { FooterItem, FooterItemProps } from './FooterItem/FooterItem';
+export * from './ActionBar';
 export * from './Title';
 export * from './HotkeysPanel';
 export * from './Settings';

package/build/esm/index.js

@@ -61,84 +61,6 @@ function block(name) {
     return _default(`${NAMESPACE}${name}`);
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$l = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
-styleInject(css_248z$l);
-
-const b$m = block('action-bar-group');
-const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default.createElement("ul", { className: b$m({ pull }, className), role: "group" }, children));
-};
-ActionBarGroup.displayName = 'ActionBar.Group';
-
-var css_248z$k = ".ycn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
-styleInject(css_248z$k);
-
-const b$l = block('action-bar-item');
-const ActionBarItem = ({ children, className, pull, spacing = true }) => {
-    return React__default.createElement("li", { className: b$l({ pull, spacing }, className) }, children);
-};
-ActionBarItem.displayName = 'ActionBar.Item';
-
-var css_248z$j = ".ycn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n  border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
-styleInject(css_248z$j);
-
-const b$k = block('action-bar-section');
-const ActionBarSection = ({ children, type = 'primary' }) => {
-    return React__default.createElement("div", { className: b$k({ type }) }, children);
-};
-ActionBarSection.displayName = 'ActionBar.Section';
-
-var css_248z$i = ".ycn-action-bar-separator {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-left: 6px;\n  margin-right: 6px;\n  border-right: solid 1px var(--yc-color-line-generic);\n  height: 40px;\n}";
-styleInject(css_248z$i);
-
-const b$j = block('action-bar-separator');
-const ActionBarSeparator = () => {
-    return React__default.createElement("li", { role: "separator", className: b$j() });
-};
-ActionBarSeparator.displayName = 'ActionBar.Separator';
-
-var css_248z$h = ".ycn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--yc-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
-styleInject(css_248z$h);
-
-const b$i = block('action-bar');
-const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default.createElement("section", { className: b$i(null, className), "aria-label": ariaLabel }, children));
-};
-ActionBar.displayName = 'ActionBar';
-const PublicActionBar = Object.assign(ActionBar, {
-    Section: ActionBarSection,
-    Group: ActionBarGroup,
-    Item: ActionBarItem,
-    Separator: ActionBarSeparator,
-});
-
 var MobileHeaderDict;
 (function (MobileHeaderDict) {
     MobileHeaderDict["CloseBurger"] = "button_close-burger";
@@ -3181,15 +3103,42 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-var css_248z$g = ".ycn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
-styleInject(css_248z$g);
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
 
-const b$h = block('drawer');
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$l = ".ycn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
+styleInject(css_248z$l);
+
+const b$m = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, direction, className }) => {
     const itemRef = React__default.useRef(null);
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('item-transition', { direction }), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$h('item', { direction }, className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('item-transition', { direction }), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$m('item', { direction }, className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3220,9 +3169,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$h(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$h('veil'), onClick: onVeilClick })),
+        return (React__default.createElement("div", { ref: containerRef, className: b$m(null, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$m('veil'), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 const childElem = child;
                 if (childElem.type === DrawerItem) {
@@ -3234,10 +3183,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
-var css_248z$f = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
-styleInject(css_248z$f);
+var css_248z$k = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
+styleInject(css_248z$k);
 
-const b$g = block('logo');
+const b$l = block('logo');
 const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
@@ -3255,18 +3204,18 @@ const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, te
     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$g('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
+    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$l('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$g('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$l('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default.createElement("div", { className: b$g() },
-        React__default.createElement("div", { className: b$g('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
+    return (React__default.createElement("div", { className: b$l() },
+        React__default.createElement("div", { className: b$l('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
         !compact &&
-            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$g('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$l('logo-link'), onClick: onClick }), logo)))));
 };
 
 var classCallCheck = function (instance, Constructor) {
@@ -3798,16 +3747,16 @@ function getItemsMinHeight(items) {
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
 
-var css_248z$e = ".ycn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--yc-color-line-generic);\n  cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--yc-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-simple-hover);\n}";
-styleInject(css_248z$e);
+var css_248z$j = ".ycn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--yc-color-line-generic);\n  cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--yc-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-simple-hover);\n}";
+styleInject(css_248z$j);
 
-const b$f = block('composite-bar-item');
+const b$k = block('composite-bar-item');
 function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$f('title-text') }, item.title);
+    let titleNode = React__default.createElement("div", { className: b$k('title-text') }, item.title);
     if (item.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$f('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$k('title-adornment') }, item.rightAdornment)));
     }
     return titleNode;
 }
@@ -3816,7 +3765,7 @@ const defaultPopupOffset = [-20, 8];
 const Item$1 = (props) => {
     const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
     if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$f('menu-divider') });
+        return React__default.createElement("div", { className: b$k('menu-divider') });
     }
     const [open, toggleOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
@@ -3837,7 +3786,7 @@ const Item$1 = (props) => {
         onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
     }, [onClosePopup]);
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const createdNode = (React__default.createElement("div", { className: b$f({ type, current, compact }, className), ref: ref, onClick: () => {
+        const createdNode = (React__default.createElement("div", { className: b$k({ type, current, compact }, className), ref: ref, onClick: () => {
                 if (collapsedItem) {
                     /**
                      * If we call onItemClick for collapsedItem then:
@@ -3858,13 +3807,13 @@ const Item$1 = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default.createElement("div", { className: b$f('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$f('icon-tooltip', { 'item-type': type }) },
-                React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$f('btn-icon') }, iconEl))) : (iconEl)),
-            React__default.createElement("div", { className: b$f('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
-            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$f('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
-        return item.link ? (React__default.createElement("a", { href: item.link, className: b$f('link') }, createdNode)) : (createdNode);
+            React__default.createElement("div", { className: b$k('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$k('icon-tooltip', { 'item-type': type }) },
+                React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$k('btn-icon') }, iconEl))) : (iconEl)),
+            React__default.createElement("div", { className: b$k('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$k('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        return item.link ? (React__default.createElement("a", { href: item.link, className: b$k('link') }, createdNode)) : (createdNode);
     };
-    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$f('icon') }) : null;
+    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$k('icon') }) : null;
     const titleNode = renderItemTitle(item);
     const params = { icon: iconNode, title: titleNode };
     let node;
@@ -3882,13 +3831,13 @@ const Item$1 = (props) => {
 Item$1.displayName = 'Item';
 function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
     return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
-        React__default.createElement("div", { className: b$f('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$f('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
+        React__default.createElement("div", { className: b$k('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b$k('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
                     const makeCollapseNode = ({ title: titleEl }) => {
-                        const res = (React__default.createElement("div", { className: b$f('collapse-item'), onClick: () => {
+                        const res = (React__default.createElement("div", { className: b$k('collapse-item'), onClick: () => {
                                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
                             } }, titleEl));
-                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$f('link') }, res)) : (res);
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$k('link') }, res)) : (res);
                     };
                     const titleNode = renderItemTitle(collapseItem);
                     const params = { title: titleNode };
@@ -3918,10 +3867,10 @@ var SvgDots = function SvgDots(props) {
 };
 var dotsIcon = SvgDots;
 
-var css_248z$d = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$d);
+var css_248z$i = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$i);
 
-const b$e = block('composite-bar');
+const b$j = block('composite-bar');
 class CompositeBar extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -3936,10 +3885,10 @@ class CompositeBar extends React__default.Component {
             return null;
         }
         if (!enableCollapsing) {
-            return React__default.createElement("div", { className: b$e() }, this.renderMenu());
+            return React__default.createElement("div", { className: b$j() }, this.renderMenu());
         }
         const minHeight = getItemsMinHeight(items);
-        return (React__default.createElement("div", { className: b$e({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+        return (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
             const style = {
                 width,
                 height,
@@ -3950,7 +3899,7 @@ class CompositeBar extends React__default.Component {
     renderAutosizeMenu(height) {
         const { compact, onItemClick } = this.props;
         const { listItems, collapseItems } = this.getAutosizeListItems(height);
-        return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
+        return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -3959,7 +3908,7 @@ class CompositeBar extends React__default.Component {
     }
     renderMenu() {
         const { items, onItemClick, compact } = this.props;
-        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
+        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
                         (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
@@ -4059,10 +4008,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 };
 var headerDividerCollapsedIcon = SvgDividerCollapsed;
 
-var css_248z$c = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n  --aside-header-divider-line-color: var(--yc-color-line-solid);\n  --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header__aside-content_with-decoration {\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header_with-decoration::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.ycn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
-styleInject(css_248z$c);
+var css_248z$h = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n  --aside-header-divider-line-color: var(--yc-color-line-solid);\n  --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header__aside-content_with-decoration {\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header_with-decoration::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.ycn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n  z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
+styleInject(css_248z$h);
 
-const b$d = block('aside-header');
+const b$i = block('aside-header');
 class AsideHeader extends React__default.Component {
     constructor() {
         super(...arguments);
@@ -4070,26 +4019,26 @@ class AsideHeader extends React__default.Component {
         this.renderFirstPane = (size) => {
             const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
             return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: b$d('aside'), style: { width: size } },
-                    React__default.createElement("div", { className: b$d('aside-popup-anchor'), ref: this.asideRef }),
-                    React__default.createElement("div", { className: b$d('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
+                    React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
+                    React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$d('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$i('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));
         };
         this.renderSecondPane = (size) => {
-            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$d('content') }));
+            return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
         };
         this.renderLogo = () => (React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
-        this.renderHeader = () => (React__default.createElement("div", { className: b$d('header', { ['with-decoration']: this.props.headerDecoration }) },
+        this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
             this.renderLogo(),
             React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
-            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$d('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+            React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
             const { compact, renderFooter } = this.props;
-            return (React__default.createElement("div", { className: b$d('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+            return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                 size,
                 compact,
                 asideRef: this.asideRef,
@@ -4097,14 +4046,14 @@ class AsideHeader extends React__default.Component {
         };
         this.renderPanels = (size) => {
             const { panelItems } = this.props;
-            return (React__default.createElement(Drawer, { className: b$d('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
+            return (React__default.createElement(Drawer, { className: b$i('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$d('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
-                React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$d('collapse-icon'), width: "16", height: "10" })));
+            return (React__default.createElement(Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
+                React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
         };
         this.onCollapseButtonClick = () => {
             var _a, _b;
@@ -4128,8 +4077,8 @@ class AsideHeader extends React__default.Component {
     render() {
         const { className, compact } = this.props;
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-        return (React__default.createElement("div", { className: b$d({ compact }, className) },
-            React__default.createElement("div", { className: b$d('pane-container') },
+        return (React__default.createElement("div", { className: b$i({ compact }, className) },
+            React__default.createElement("div", { className: b$i('pane-container') },
                 this.renderFirstPane(size),
                 this.renderSecondPane(size))));
     }
@@ -4168,15 +4117,66 @@ function __rest(s, e) {
     return t;
 }
 
-var css_248z$b = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
-styleInject(css_248z$b);
+var css_248z$g = ".ycn-footer-item {\n  width: 100%;\n  height: 40px;\n}";
+styleInject(css_248z$g);
 
-const b$c = block('footer-item');
+const b$h = block('footer-item');
 const FooterItem$1 = (_a) => {
     var { item } = _a, props = __rest(_a, ["item"]);
-    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$c({ compact: props.compact }), onItemClick: item.onItemClick })));
+    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick })));
 };
 
+var css_248z$f = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
+styleInject(css_248z$f);
+
+const b$g = block('action-bar-group');
+const ActionBarGroup = ({ children, className, pull }) => {
+    return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
+};
+ActionBarGroup.displayName = 'ActionBar.Group';
+
+var css_248z$e = ".ycn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
+styleInject(css_248z$e);
+
+const b$f = block('action-bar-item');
+const ActionBarItem = ({ children, className, pull, spacing = true }) => {
+    return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
+};
+ActionBarItem.displayName = 'ActionBar.Item';
+
+var css_248z$d = ".ycn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n  border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
+styleInject(css_248z$d);
+
+const b$e = block('action-bar-section');
+const ActionBarSection = ({ children, type = 'primary' }) => {
+    return React__default.createElement("div", { className: b$e({ type }) }, children);
+};
+ActionBarSection.displayName = 'ActionBar.Section';
+
+var css_248z$c = ".ycn-action-bar-separator {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-left: 6px;\n  margin-right: 6px;\n  border-right: solid 1px var(--yc-color-line-generic);\n  height: 40px;\n}";
+styleInject(css_248z$c);
+
+const b$d = block('action-bar-separator');
+const ActionBarSeparator = () => {
+    return React__default.createElement("li", { role: "separator", className: b$d() });
+};
+ActionBarSeparator.displayName = 'ActionBar.Separator';
+
+var css_248z$b = ".ycn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--yc-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
+styleInject(css_248z$b);
+
+const b$c = block('action-bar');
+const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
+    return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
+};
+ActionBar.displayName = 'ActionBar';
+const PublicActionBar = Object.assign(ActionBar, {
+    Section: ActionBarSection,
+    Group: ActionBarGroup,
+    Item: ActionBarItem,
+    Separator: ActionBarSeparator,
+});
+
 var css_248z$a = ".ycn-title {\n  box-sizing: border-box;\n  padding: 14px 10px 14px 20px;\n  min-height: 64px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ycn-title_separator {\n  border-bottom: 1px solid var(--yc-color-line-generic);\n}\n.ycn-title__text {\n  margin: 0;\n  margin-right: 20px;\n}";
 styleInject(css_248z$a);