@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/textarea/index.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const react_1 = __importStar(require("react"));
+const base_input_1 = require("../base-input");
+const field_block_1 = require("../field-block");
+const utils_1 = require("../input/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const textarea_module_scss_1 = __importDefault(require("./textarea.module.scss"));
+const cx = bind_1.default.bind(textarea_module_scss_1.default);
+/**
+ * Текстовая область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Textarea(_a) {
+    var { 
+    // specific Textarea props
+    textareaRef, baseInputProps, 
+    // root props
+    style, className, 
+    // textarea element props (popular)
+    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows = 4, value, 
+    // FieldBlock props
+    label, failed, caption, blockProps, 'data-testid': testId = 'textarea' } = _a, restProps = __rest(_a, ["textareaRef", "baseInputProps", "style", "className", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "rows", "value", "label", "failed", "caption", "blockProps", 'data-testid']);
+    const ref = (0, react_1.useRef)(null);
+    const [filled, updateFilled] = (0, utils_1.useFilledState)(ref, { value, defaultValue });
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const handleMouseDown = (0, utils_1.useFieldMouseDown)(ref, blockProps === null || blockProps === void 0 ? void 0 : blockProps.onMouseDown);
+    (0, react_1.useImperativeHandle)(textareaRef, () => ref.current);
+    return (react_1.default.createElement(field_block_1.FieldBlock, Object.assign({}, restProps, { rootProps: Object.assign(Object.assign({}, restProps.rootProps), { style,
+            className }), "data-testid": testId, caption: caption, disabled: disabled, failed: failed, fixedHeight: false, focused: focused, label: label, labelAsPlaceholder: !focused && !filled, labelProps: { htmlFor: id }, size: 'l', blockProps: Object.assign(Object.assign({}, blockProps), { onMouseDown: handleMouseDown }), main: react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { textareaRef: ref, multiline: true, className: cx('textarea', baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.className), style: Object.assign(Object.assign({}, baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.style), { '--placeholder-color': (0, utils_1.definePlaceholderColor)({ failed, disabled }) }), autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, id: id, name: name, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value, onFocus: (event) => {
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                updateFilled(event);
+                setFocused(true);
+            }, onBlur: (event) => {
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                updateFilled(event);
+                setFocused(false);
+            }, onInput: (event) => {
+                onInput === null || onInput === void 0 ? void 0 : onInput(event);
+                updateFilled(event);
+            }, onChange: (event) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                updateFilled(event);
+            } })), mainProps: { className: cx('main') } })));
+}
+exports.Textarea = Textarea;

package/textarea/textarea.module.scss

@@ -0,0 +1,15 @@
+@use '../colors';
+
+.main {
+  display: flex;
+  width: 100%;
+}
+
+.textarea {
+  min-width: 0;
+  width: 0;
+  flex-grow: 1;
+  background: inherit;
+  font: inherit;
+  line-height: inherit;
+}

package/toggle/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CheckboxProps } from '../_internal/checkbox';
-export declare type ToggleProps = CheckboxProps;
+import { CheckboxInputProps } from '../types';
+export type ToggleProps = CheckboxInputProps;
 /**
  * Компонент стилизованного переключателя (input[type=checkbox]).
  */
-export declare const Toggle: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Toggle: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLInputElement>>;

package/toggle/toggle.module.scss

@@ -11,14 +11,23 @@
 
 .input {
   display: none;
+  &:not(:checked) + .switch {
+    --toggle-slider-position: 2px;
+  }
   &:checked + .switch {
-    background: colors.$basic-blue;
-    &::after {
-      left: calc(100% - 22px);
-    }
+    --toggle-slider-position: calc(100% - 22px);
+  }
+  &:not(:checked):not(:disabled) + .switch {
+    --toggle-primary-color: #{colors.$basic-gray12};
+  }
+  &:checked:not(:disabled) + .switch {
+    --toggle-primary-color: #{colors.$basic-blue};
+  }
+  &:not(:checked):disabled + .switch {
+    --toggle-primary-color: #{colors.$basic-gray4};
   }
-  &:disabled + .switch {
-    background: colors.$basic-gray4;
+  &:checked:disabled + .switch {
+    --toggle-primary-color: #{colors.$basic-gray24};
   }
 }
 
@@ -28,13 +37,13 @@
   width: 44px;
   height: 24px;
   border-radius: 12px;
-  background: colors.$basic-gray12;
+  background: var(--toggle-primary-color);
   transition: background 0.16s ease-in-out;
   &::after {
     content: '';
     position: absolute;
     top: 2px;
-    left: 2px;
+    left: var(--toggle-slider-position);
     display: block;
     width: 20px;
     height: 20px;

package/tooltip/index.d.ts

@@ -11,6 +11,7 @@ export interface TooltipProps {
 }
 /**
  * Компонент подсказки.
+ * @deprecated Можно использовать `popup`.
  * @param props Свойства.
  * @return Элемент.
  */

package/tooltip/index.js

@@ -34,6 +34,7 @@ const tooltip_module_scss_1 = __importDefault(require("./tooltip.module.scss"));
 const cx = bind_1.default.bind(tooltip_module_scss_1.default);
 /**
  * Компонент подсказки.
+ * @deprecated Можно использовать `popup`.
  * @param props Свойства.
  * @return Элемент.
  */

package/top-bar/index.d.ts

@@ -1,40 +1,3 @@
-import React from 'react';
-export declare type TopBarSize = 's' | 'm';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    icon?: React.ReactNode;
-    'data-testid'?: string;
-}
-export interface TopBarProps {
-    /** Свойства кнопок. */
-    buttonsProps?: {
-        start?: ButtonProps;
-        startSecondary?: ButtonProps;
-        end?: ButtonProps;
-        endSecondary?: ButtonProps;
-    };
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Размер. */
-    size?: TopBarSize;
-    /** Подзаголовок. */
-    subtitle?: string;
-    /** Заголовок. */
-    title?: string;
-    /** Нужна ли разделительная черта снизу. */
-    divided?: boolean;
-}
-export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const TopBar: ({ divided, size, title, subtitle, buttonsProps: { start, startSecondary, end, endSecondary }, className, }: TopBarProps) => JSX.Element;
-/**
- * Компонент кнопки-иконки.
- * @param props Свойства. Поддерживаются свойства button.
- * @param props.icon Иконка.
- * @return Элемент.
- */
-export declare const IconButton: ({ icon, ...buttonProps }: ButtonProps) => JSX.Element;
-export {};
+export type { TopBarProps, TopBarSize } from './types';
+export type { navigationButtons } from './utils';
+export { TopBar, TOP_BAR_HEIGHT } from './top-bar';

package/top-bar/index.js

@@ -1,62 +1,6 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.TopBar = exports.TOP_BAR_HEIGHT = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const lodash_1 = require("lodash");
-const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
-const borders_1 = require("../styling/borders");
-// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
-exports.TOP_BAR_HEIGHT = {
-    s: 64,
-    m: 80,
-};
-const cx = bind_1.default.bind(top_bar_module_scss_1.default);
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-const TopBar = ({ divided, size = 'm', title, subtitle, buttonsProps: { start, startSecondary, end, endSecondary } = {}, className, }) => {
-    const hasStart = (0, lodash_1.has)(start, 'icon');
-    const hasStartSecondary = (0, lodash_1.has)(startSecondary, 'icon');
-    const hasEnd = (0, lodash_1.has)(end, 'icon');
-    const hasEndSecondary = (0, lodash_1.has)(endSecondary, 'icon');
-    const stub = hasStart || hasEnd ? iconStub : null;
-    const secondaryStub = hasStartSecondary || hasEndSecondary ? iconStub : null;
-    return (react_1.default.createElement("div", { className: cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom), style: { height: `${exports.TOP_BAR_HEIGHT[size]}px` } },
-        hasStart ? react_1.default.createElement(exports.IconButton, Object.assign({}, start)) : stub,
-        hasStartSecondary ? react_1.default.createElement(exports.IconButton, Object.assign({}, startSecondary)) : secondaryStub,
-        react_1.default.createElement("div", { className: cx('main-section') },
-            react_1.default.createElement("div", { className: cx('title', 'ellipsis') }, title),
-            Boolean(subtitle) && react_1.default.createElement("div", { className: cx('subtitle', 'ellipsis') }, subtitle)),
-        hasEndSecondary ? react_1.default.createElement(exports.IconButton, Object.assign({}, endSecondary)) : secondaryStub,
-        hasEnd ? react_1.default.createElement(exports.IconButton, Object.assign({}, end)) : stub));
-};
-exports.TopBar = TopBar;
-/**
- * Компонент кнопки-иконки.
- * @param props Свойства. Поддерживаются свойства button.
- * @param props.icon Иконка.
- * @return Элемент.
- */
-const IconButton = (_a) => {
-    var { icon } = _a, buttonProps = __rest(_a, ["icon"]);
-    return (react_1.default.createElement("button", Object.assign({}, buttonProps, { type: 'button', className: cx('icon-button') }), icon));
-};
-exports.IconButton = IconButton;
-const iconStub = react_1.default.createElement("div", { className: cx('icon-button', 'stub') });
+exports.TOP_BAR_HEIGHT = exports.TopBar = void 0;
+var top_bar_1 = require("./top-bar");
+Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return top_bar_1.TopBar; } });
+Object.defineProperty(exports, "TOP_BAR_HEIGHT", { enumerable: true, get: function () { return top_bar_1.TOP_BAR_HEIGHT; } });

package/top-bar/top-bar-util.scss

@@ -0,0 +1,29 @@
+$size-s-height: 56px;
+$size-m-height: 64px;
+$size-xl-height: 80px;
+
+@mixin size-s {
+  --top-bar-height: #{$size-s-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 16px;
+  --top-bar-icon-button-width: 52px;
+}
+
+@mixin size-m {
+  --top-bar-height: #{$size-m-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 24px;
+  --top-bar-icon-button-width: 60px;
+}
+
+@mixin size-xl {
+  --top-bar-height: #{$size-xl-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 40px;
+  --top-bar-icon-button-width: 76px;
+  --top-bar-title-only-size: 20px;
+  --top-bar-title-only-height: 28px;
+}

package/top-bar/top-bar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TopBarProps, TopBarSize } from './types';
+export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
+/**
+ * Компонент шапки модальных окон/экранов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TopBar({ divided, size, title, subtitle, buttons: { start, startSecondary, end, endSecondary }, className, 'data-testid': testId, }: TopBarProps): JSX.Element;

package/top-bar/top-bar.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = exports.TOP_BAR_HEIGHT = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+const borders_1 = require("../styling/borders");
+const bind_1 = __importDefault(require("classnames/bind"));
+const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
+// некоторым компонентам нужно знать конкретную высоту
+exports.TOP_BAR_HEIGHT = {
+    s: 56,
+    m: 64,
+    xl: 80,
+};
+const cx = bind_1.default.bind(top_bar_module_scss_1.default);
+/**
+ * Компонент шапки модальных окон/экранов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBar({ divided, size = 'm', title, subtitle, buttons: { start, startSecondary, end, endSecondary } = {}, className, 'data-testid': testId = 'top-bar', }) {
+    const hasStartButtons = start || startSecondary;
+    const hasEndButtons = end || endSecondary;
+    const hasButtons = hasStartButtons || hasEndButtons;
+    const rootClasses = cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom, !subtitle && 'no-subtitle');
+    return (react_1.default.createElement("div", { className: rootClasses, "data-testid": testId },
+        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
+            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, null,
+                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
+                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary)))),
+            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true, end: true },
+                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
+                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))))),
+        react_1.default.createElement("div", { className: cx('main') },
+            title && react_1.default.createElement("div", { className: cx('title') }, title),
+            subtitle && react_1.default.createElement("div", { className: cx('subtitle') }, subtitle)),
+        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
+            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { end: true },
+                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
+                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))),
+            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true },
+                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
+                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary))))))));
+}
+exports.TopBar = TopBar;
+/**
+ * Компонент группы кнопок.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBarButtonGroup({ children, stub, end, }) {
+    return (react_1.default.createElement(utils_1.TopBarButtonGroupContext.Provider, { value: { stub } },
+        react_1.default.createElement("div", { className: cx('button-group', { stub, end }) }, children)));
+}
+/**
+ * Компонент кнопки-иконки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBarButton(_a) {
+    var { text, icon, className, 'data-testid': testId = 'top-bar:button' } = _a, buttonProps = __rest(_a, ["text", "icon", "className", 'data-testid']);
+    const { stub } = (0, react_1.useContext)(utils_1.TopBarButtonGroupContext);
+    return (react_1.default.createElement("button", Object.assign({}, (!stub && Object.assign(Object.assign({}, buttonProps), { 'data-testid': testId })), { type: 'button', className: cx('button', icon && 'iconic', stub && 'stub', className), "aria-hidden": stub }), icon && !stub ? icon : text));
+}

package/top-bar/top-bar.module.scss

@@ -1,95 +1,157 @@
 @use '../colors';
+@use './top-bar-util';
 
 .root {
+  width: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
   background: #fff;
-  overflow: hidden;
-  box-sizing: border-box;
-  .main-section {
-    display: flex;
-    width: 0;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1;
-    flex-shrink: 1;
-    text-align: center;
-    box-sizing: border-box;
+  height: var(--top-bar-height);
+  &.size-s {
+    @include top-bar-util.size-s;
   }
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
+  &.size-m {
+    @include top-bar-util.size-m;
   }
-  .subtitle {
-    font-size: 12px;
-    line-height: 16px;
-    color: colors.$basic-gray38;
+  &.size-xl {
+    @include top-bar-util.size-xl;
   }
-  .icon-button {
-    + .icon-button {
-      margin-left: 24px;
-    }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  overflow: hidden;
+  text-align: center;
+
+  // когда нет кнопок
+  &:first-child:last-child {
+    margin: 0 var(--top-bar-gutter);
   }
-  &.size-s {
-    .main-section {
-      margin: 0 24px;
-    }
-    .icon-button {
-      &:first-child {
-        margin-left: 24px;
+}
+
+.title {
+  color: colors.$basic-gray87;
+  font-size: var(--top-bar-title-size);
+  line-height: var(--top-bar-title-height);
+  font-weight: 600;
+
+  // когда нет подзаголовка
+  &:first-child:last-child {
+    font-size: var(--top-bar-title-only-size, var(--top-bar-title-size));
+    line-height: var(--top-bar-title-only-height, var(--top-bar-title-height));
+  }
+}
+
+.subtitle {
+  color: colors.$basic-gray38;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-top: -4px;
+}
+
+.title,
+.subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  &:not(.end) {
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
       }
-      &:last-child {
-        margin-right: 24px;
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
+      }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
       }
     }
   }
-  &.size-m {
-    .main-section {
-      margin: 0 40px;
-    }
-    .title {
-      font-size: 20px;
-      line-height: 28px;
-    }
-    .icon-button {
-      &:first-child {
-        margin-left: 40px;
+  &.end {
+    justify-content: flex-end;
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
       }
-      &:last-child {
-        margin-right: 40px;
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
       }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
+      }
+    }
+    :not(.iconic) {
+      justify-content: flex-end;
     }
   }
+  &:not(.stub) {
+    height: 100%;
+  }
 }
 
-.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.icon-button {
+.button {
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  margin: 0;
+  outline: 0;
+  text-align: inherit;
+  height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 0;
   padding: 0;
-  border: 0;
-  outline: 0;
-  width: 24px;
-  height: 24px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  overflow: hidden;
-  background: transparent;
-  color: colors.$basic-gray87;
-  &:not(.stub):hover {
+  &:hover {
     cursor: pointer;
-    color: colors.$basic-gray54;
   }
-  > svg {
+  &.iconic {
+    color: colors.$basic-gray87;
+    width: var(--top-bar-icon-button-width);
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  }
+  &:not(.iconic) {
+    color: colors.$basic-blue;
+    width: 100%;
+    padding: 0 var(--top-bar-gutter);
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  }
+  &.stub {
+    height: 0;
+    overflow: hidden;
+  }
+  svg {
+    // чтобы выравнивались по центру по вертикали
+    display: block;
+    flex-shrink: 0;
     fill: currentColor;
   }
 }