diff --git a/src/components/ActionTooltip/ActionTooltip.scss b/src/components/ActionTooltip/ActionTooltip.scss
index 38742e3995..efa726b514 100644
--- a/src/components/ActionTooltip/ActionTooltip.scss
+++ b/src/components/ActionTooltip/ActionTooltip.scss
@@ -4,7 +4,12 @@
 $block: '.#{variables.$ns}action-tooltip';
 
 #{$block} {
-    &__layout {
+    --g-popup-border-width: 0;
+    --g-popup-background-color: var(--g-color-base-float-heavy);
+
+    &__content {
+        padding: 6px 12px;
+        color: var(--g-color-text-light-primary);
         max-width: 300px;
         box-sizing: border-box;
     }
diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
index 29f8ec2cbb..1d13cc670e 100644
--- a/src/components/ActionTooltip/ActionTooltip.tsx
+++ b/src/components/ActionTooltip/ActionTooltip.tsx
@@ -1,44 +1,85 @@
 import React from 'react';
 
-import {Hotkey} from '../Hotkey';
-import type {HotkeyProps} from '../Hotkey';
-import {Tooltip} from '../Tooltip';
-import type {TooltipProps} from '../Tooltip';
+import {useForkRef} from '../../hooks';
+import {type TooltipDelayProps, useTooltipVisible} from '../../hooks/private';
+import {Hotkey, type HotkeyProps} from '../Hotkey';
+import {Popup, type PopupPlacement} from '../Popup';
+import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './ActionTooltip.scss';
 
-const b = block('action-tooltip');
-
-export interface ActionTooltipProps
-    extends Pick<
-        TooltipProps,
-        'children' | 'disabled' | 'placement' | 'openDelay' | 'closeDelay' | 'className' | 'qa'
-    > {
+export interface ActionTooltipProps extends QAProps, DOMProps, TooltipDelayProps {
+    id?: string;
+    disablePortal?: boolean;
+    contentClassName?: string;
+    disabled?: boolean;
+    placement?: PopupPlacement;
+    children: React.ReactElement;
     title: string;
     hotkey?: HotkeyProps['value'];
     description?: React.ReactNode;
 }
 
+const DEFAULT_PLACEMENT: PopupPlacement = ['bottom', 'top'];
+const b = block('action-tooltip');
+
 export function ActionTooltip(props: ActionTooltipProps) {
-    const {title, hotkey, description, children, ...tooltipProps} = props;
+    const {
+        placement = DEFAULT_PLACEMENT,
+        title,
+        hotkey,
+        children,
+        className,
+        contentClassName,
+        description,
+        disabled = false,
+        style,
+        qa,
+        id,
+        disablePortal,
+        ...delayProps
+    } = props;
 
-    return (
-        <Tooltip
-            {...tooltipProps}
-            className={b(null, tooltipProps.className)}
-            contentClassName={b('layout')}
-            content={
-                <React.Fragment>
+    const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);
+    const tooltipVisible = useTooltipVisible(anchorElement, delayProps);
+
+    const renderPopup = () => {
+        return (
+            <Popup
+                id={id}
+                disablePortal={disablePortal}
+                role="tooltip"
+                className={b(null, className)}
+                style={style}
+                open={tooltipVisible && !disabled}
+                placement={placement}
+                anchorRef={{current: anchorElement}}
+                disableEscapeKeyDown
+                disableOutsideClick
+                disableLayer
+                qa={qa}
+            >
+                <div className={b('content', contentClassName)}>
                     <div className={b('heading')}>
                         <div className={b('title')}>{title}</div>
                         {hotkey && <Hotkey view="dark" value={hotkey} className={b('hotkey')} />}
                     </div>
                     {description && <div className={b('description')}>{description}</div>}
-                </React.Fragment>
-            }
-        >
-            {children}
-        </Tooltip>
+                </div>
+            </Popup>
+        );
+    };
+
+    const child = React.Children.only(children);
+    const childRef = (child as any).ref;
+
+    const ref = useForkRef(setAnchorElement, childRef);
+
+    return (
+        <React.Fragment>
+            {React.cloneElement(child, {ref})}
+            {anchorElement ? renderPopup() : null}
+        </React.Fragment>
     );
 }
diff --git a/src/components/ActionTooltip/README.md b/src/components/ActionTooltip/README.md
new file mode 100644
index 0000000000..5b40131568
--- /dev/null
+++ b/src/components/ActionTooltip/README.md
@@ -0,0 +1,35 @@
+<!--GITHUB_BLOCK-->
+
+# ActionTooltip
+
+<!--/GITHUB_BLOCK-->
+
+A simple text tip that uses its children node as an anchor. For correct functioning, the anchor node
+must be able to handle mouse events and focus or blur events.
+
+## Usage
+
+```tsx
+import {ActionTooltip} from '@gravity-ui/uikit';
+
+<ActionTooltip title="Content">
+  <div tabIndex={0}>Anchor</div>
+</ActionTooltip>;
+```
+
+## Properties
+
+| Name             | Description                                                                             |                       Type                       | Default |
+| :--------------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: |
+| children         | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. |               `React.ReactElement`               |         |
+| closeDelay       | Number of ms to delay hiding the `Tooltip` after the hover ends                         |                     `number`                     |   `0`   |
+| openDelay        | Number of ms to delay showing the `Tooltip` after the hover begins                      |                     `number`                     |  `250`  |
+| placement        | `Tooltip` position relative to its anchor                                               | [`PopupPlacement`](../Popup/README.md#placement) |         |
+| qa               | HTML `data-qa` attribute, used in tests                                                 |                     `string`                     |         |
+| title            | Tooltip title text                                                                      |                     `string`                     |         |
+| description      | Tooltip description text                                                                |                     `string`                     |         |
+| hotkey           | Hot keys that are assigned to an interface action.                                      |                     `string`                     |         |
+| id               | This prop is used to help implement the accessibility logic.                            |                     `string`                     |         |
+| disablePortal    | Do not use Portal for children                                                          |                    `boolean`                     |         |
+| contentClassName | HTML class attribute for content node                                                   |                     `string`                     |         |
+| disabled         | Prevent popup from opening                                                              |                    `boolean`                     | `false` |
diff --git a/src/components/ActionTooltip/__tests__/ActionTooltip.tsx b/src/components/ActionTooltip/__tests__/ActionTooltip.tsx
new file mode 100644
index 0000000000..d443fb5cd5
--- /dev/null
+++ b/src/components/ActionTooltip/__tests__/ActionTooltip.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+
+import {createEvent, fireEvent, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {ActionTooltip} from '../ActionTooltip';
+
+export function fireAnimationEndEvent(el: Node | Window, animationName = 'animation') {
+    const ev = createEvent.animationEnd(el, {animationName});
+    Object.assign(ev, {
+        animationName,
+    });
+
+    fireEvent(el, ev);
+}
+
+test('should preserve ref on anchor element', () => {
+    const ref = jest.fn();
+    render(
+        <ActionTooltip title="text">
+            <button ref={ref} />
+        </ActionTooltip>,
+    );
+
+    expect(ref).toHaveBeenCalledTimes(1);
+});
+
+test('should show tooltip on hover and hide on un hover', async () => {
+    const user = userEvent.setup();
+
+    render(
+        <ActionTooltip title="test content">
+            <button />
+        </ActionTooltip>,
+    );
+
+    const button = await screen.findByRole('button');
+
+    await user.hover(button);
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+
+    await user.unhover(button);
+
+    fireAnimationEndEvent(tooltip);
+
+    expect(tooltip).not.toBeInTheDocument();
+});
+
+test('should show tooltip on focus and hide on blur', async () => {
+    const user = userEvent.setup();
+    render(
+        <ActionTooltip title="test content">
+            <button />
+        </ActionTooltip>,
+    );
+
+    const button = await screen.findByRole('button');
+
+    await user.tab();
+    expect(button).toHaveFocus();
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+
+    await user.tab();
+
+    fireAnimationEndEvent(tooltip);
+
+    expect(button).not.toHaveFocus();
+    expect(tooltip).not.toBeInTheDocument();
+});
+
+test('should hide on press Escape', async () => {
+    const user = userEvent.setup();
+    render(
+        <ActionTooltip title="test content">
+            <button />
+        </ActionTooltip>,
+    );
+
+    const button = await screen.findByRole('button');
+
+    await user.tab();
+    expect(button).toHaveFocus();
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+
+    await user.keyboard('[Escape]');
+
+    fireAnimationEndEvent(tooltip);
+
+    expect(button).toHaveFocus();
+    expect(tooltip).not.toBeInTheDocument();
+});
+
+test('should show on focus and hide on un hover', async () => {
+    const user = userEvent.setup();
+    render(
+        <ActionTooltip title="test content">
+            <button />
+        </ActionTooltip>,
+    );
+
+    const button = screen.getByRole('button');
+
+    button.focus();
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+
+    await user.hover(button);
+
+    expect(tooltip).toBeVisible();
+
+    await user.unhover(button);
+
+    fireAnimationEndEvent(tooltip);
+
+    expect(button).toHaveFocus();
+    expect(tooltip).not.toBeInTheDocument();
+});
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 3070108ca6..117c792346 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Alert has predicted styles if inline layout rendered 1`] = `
 <div>
   <div
-    class="yc-card yc-card_theme_danger yc-card_view_filled yc-card_type_container yc-card_size_m yc-alert yc-s__py_4 yc-s__px_5"
+    class="yc-box yc-card yc-card_theme_danger yc-card_view_filled yc-card_type_container yc-card_size_m yc-alert yc-s__py_4 yc-s__px_5"
   >
     <div
-      class="yc-flex"
+      class="yc-box yc-flex"
       style="column-gap: 12px; row-gap: 12px; align-items: center;"
     >
       <div
@@ -37,15 +37,15 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
         </svg>
       </div>
       <div
-        class="yc-flex"
+        class="yc-box yc-flex"
         style="flex-direction: row; flex-grow: 1; column-gap: 20px; row-gap: 20px;"
       >
         <div
-          class="yc-flex yc-alert__text-content"
+          class="yc-box yc-flex yc-alert__text-content"
           style="flex-grow: 1; column-gap: 8px; row-gap: 8px;"
         >
           <div
-            class="yc-flex"
+            class="yc-box yc-flex"
             style="flex-direction: column; flex-grow: 1; column-gap: 4px; row-gap: 4px; justify-content: center;"
           >
             <span
@@ -56,7 +56,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
           </div>
         </div>
         <div
-          class="yc-flex yc-alert__actions yc-alert__actions_minContent"
+          class="yc-box yc-flex yc-alert__actions yc-alert__actions_minContent"
           style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
         >
           <button
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 7539d09910..a5bf8988cc 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useActionHandlers} from '../../hooks';
-import type {QAProps} from '../types';
+import {Box, BoxProps} from '../layout';
 import {block} from '../utils/cn';
 
 import './Card.scss';
@@ -16,10 +16,8 @@ export type CardTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | '
 export type CardView = SelectionCardView | ContainerCardView;
 export type CardSize = 'm' | 'l';
 
-export interface CardProps extends QAProps {
+export interface CardProps extends Omit<BoxProps<'div'>, 'as' | 'onClick'> {
     children: React.ReactNode;
-    style?: React.CSSProperties;
-    className?: string;
     /** Card click handler. Available for type: 'selection', 'action' */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     /** Disabled card. Available for type: 'selection', 'action' */
@@ -47,8 +45,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
         onClick,
         disabled,
         selected,
-        style,
-        qa,
+        ...restProps
     } = props;
 
     const isTypeAction = type === 'action';
@@ -68,8 +65,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
     const {onKeyDown} = useActionHandlers(onClick);
 
     return (
-        <div
-            style={style}
+        <Box
             ref={ref}
             role={isClickable ? 'button' : undefined}
             className={b(
@@ -84,12 +80,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
                 },
                 className,
             )}
-            onClick={handleClick}
+            onClick={handleClick as BoxProps['onClick']}
             onKeyDown={isClickable ? onKeyDown : undefined}
             tabIndex={isClickable ? 0 : undefined}
-            data-qa={qa}
+            {...restProps}
         >
             {children}
-        </div>
+        </Box>
     );
 });
diff --git a/src/components/CopyToClipboard/index.ts b/src/components/CopyToClipboard/index.ts
index 9741d12669..4771074e1b 100644
--- a/src/components/CopyToClipboard/index.ts
+++ b/src/components/CopyToClipboard/index.ts
@@ -1,2 +1,2 @@
 export * from './CopyToClipboard';
-export {CopyToClipboardStatus} from './types';
+export type {CopyToClipboardStatus} from './types';
diff --git a/src/components/Progress/Progress.scss b/src/components/Progress/Progress.scss
index d965c57d8b..2ba1cafaff 100644
--- a/src/components/Progress/Progress.scss
+++ b/src/components/Progress/Progress.scss
@@ -11,23 +11,28 @@ $progress-xs-height: 4px;
     font-size: var(--g-text-body-short-font-size);
     font-weight: var(--g-text-body-font-weight);
     font-family: var(--g-text-body-font-family);
-    color: var(--g-color-text-primary);
     padding: 0 10px;
     box-sizing: border-box;
 }
 
 #{$block} {
+    --_--empty-background-color: var(--g-color-base-generic);
+    --_--empty-text-color: var(--g-color-text-primary);
+    --_--filled-text-color: var(--g-color-text-primary);
+    --_--filled-background-color: var(--g-color-base-neutral-medium);
+
     position: relative;
 
     margin: 0 auto;
     overflow: hidden;
 
     border-radius: 3px;
-    background-color: var(--g-color-base-generic);
+    background-color: var(--g-progress-empty-background-color, var(--_--empty-background-color));
 
     text-align: center;
 
     --_--flow-direction: 1;
+
     [dir='rtl'] & {
         --_--flow-direction: -1;
     }
@@ -36,6 +41,7 @@ $progress-xs-height: 4px;
         @include progress-text;
 
         position: relative;
+        color: var(--g-progress-empty-text-color, var(--_--empty-text-color));
     }
 
     &__text-inner {
@@ -45,6 +51,7 @@ $progress-xs-height: 4px;
 
         width: 100%;
         height: 100%;
+        color: var(--g-progress-filled-text-color, var(--_--empty-text-color));
 
         transition: transform 0.6s ease;
     }
@@ -53,6 +60,7 @@ $progress-xs-height: 4px;
         position: relative;
 
         float: left;
+
         [dir='rtl'] & {
             float: right;
         }
@@ -63,28 +71,33 @@ $progress-xs-height: 4px;
 
         transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;
 
+        background-color: var(
+            --g-progress-filled-background-color,
+            var(--_--filled-background-color)
+        );
+
         &_theme_default {
-            background-color: var(--g-color-base-neutral-medium);
+            --_--filled-background-color: var(--g-color-base-neutral-medium);
         }
 
         &_theme_success {
-            background-color: var(--g-color-base-positive-medium);
+            --_--filled-background-color: var(--g-color-base-positive-medium);
         }
 
         &_theme_warning {
-            background-color: var(--g-color-base-warning-medium);
+            --_--filled-background-color: var(--g-color-base-warning-medium);
         }
 
         &_theme_danger {
-            background-color: var(--g-color-base-danger-medium);
+            --_--filled-background-color: var(--g-color-base-danger-medium);
         }
 
         &_theme_info {
-            background-color: var(--g-color-base-info-medium);
+            --_--filled-background-color: var(--g-color-base-info-medium);
         }
 
         &_theme_misc {
-            background-color: var(--g-color-base-misc-medium);
+            --_--filled-background-color: var(--g-color-base-misc-medium);
         }
 
         &_loading {
diff --git a/src/components/Progress/README.md b/src/components/Progress/README.md
index ab525a7c49..7eac4d0319 100644
--- a/src/components/Progress/README.md
+++ b/src/components/Progress/README.md
@@ -256,3 +256,12 @@ LANDING_BLOCK-->
 | theme     | Sets the stack element color                                                                                                        |  `string`   | `"default"` |
 | value     | Current progress value. The available range is from 0 to 100. Using the `stack` property value is optional and is used as maxValue. |  `number`   |             |
 | qa        | HTML `data-qa` attribute, used in tests                                                                                             |  `string`   |             |
+
+## CSS API
+
+| Name                                   | Description                        |
+| :------------------------------------- | :--------------------------------- |
+| `--g-progress-empty-text-color`        | Empty `Progress` text color        |
+| `--g-progress-filled-text-color`       | Filled `Progress` text color       |
+| `--g-progress-empty-background-color`  | Empty `Progress` background color  |
+| `--g-progress-filled-background-color` | Filled `Progress` background color |
diff --git a/src/components/Progress/__stories__/Progress.stories.tsx b/src/components/Progress/__stories__/Progress.stories.tsx
index f0fbea88e5..e4014f3aae 100644
--- a/src/components/Progress/__stories__/Progress.stories.tsx
+++ b/src/components/Progress/__stories__/Progress.stories.tsx
@@ -34,6 +34,22 @@ const ThemeTemplate: StoryFn<typeof Progress> = (args) => {
 
 export const Theme = ThemeTemplate.bind({});
 
+export const Custom: StoryFn<typeof Progress> = (args) => {
+    return (
+        <React.Fragment>
+            <style>
+                {`.g-root {
+                    --g-progress-empty-text-color: var(--g-color-text-primary);
+                    --g-progress-filled-text-color:  var(--g-color-text-light-primary);
+                    --g-progress-empty-background-color: var(--branding-base-selection, rgba(82, 130, 255, 0.15));
+                    --g-progress-filled-background-color: #5282FF;
+                }`}
+            </style>
+            <Progress {...args} value={50} text="custom" />
+        </React.Fragment>
+    );
+};
+
 const StackTemplate: StoryFn<typeof Progress> = (args) => {
     return (
         <React.Fragment>
diff --git a/src/components/Text/README.md b/src/components/Text/README.md
index db2bab04c9..339d5def75 100644
--- a/src/components/Text/README.md
+++ b/src/components/Text/README.md
@@ -163,16 +163,16 @@ LANDING_BLOCK-->
 
 ## Properties
 
-| Name       | Description                                             |                   Type                   |  Default   |
-| :--------- | :------------------------------------------------------ | :--------------------------------------: | :--------: |
-| children   | Text content                                            |            `React.ReactNode`             |            |
-| className  | HTML `class` attribute                                  |                 `string`                 |            |
-| as         | Ability to override default html tag                    |         `React.ElementType<any>`         |            |
-| style      | HTML `style` attribute                                  |          `React.CSSProperties`           |            |
-| variant    | Font of the text                                        |                 `string`                 | `"body-1"` |
-| ellipsis   | Hidden overflow content will be replaced by an ellipsis |                `boolean`                 |            |
-| whiteSpace | The white-space css property                            |       `"nowrap"` `"break-spaces"`        |            |
-| wordBreak  | The word-break css property                             |              `"break-all"`               |            |
-| color      | Color of the text                                       | `string` (see values in "Color" section) |            |
-| ref        |                                                         |                  `any`                   |            |
-| qa         | HTML `data-qa` attribute, used in tests                 |                 `string`                 |            |
+| Name          | Description                                                               |                   Type                   |  Default   |
+| :------------ | :------------------------------------------------------------------------ | :--------------------------------------: | :--------: |
+| children      | Text content                                                              |            `React.ReactNode`             |            |
+| className     | HTML `class` attribute                                                    |                 `string`                 |            |
+| as            | Ability to override default html tag                                      |         `React.ElementType<any>`         |            |
+| style         | HTML `style` attribute                                                    |          `React.CSSProperties`           |            |
+| variant       | Font of the text                                                          |                 `string`                 | `"body-1"` |
+| ellipsis      | Hidden overflow content will be replaced by an ellipsis                   |                `boolean`                 |            |
+| ellipsisLines | The number of whole lines of text after which the content will be cut off |                 `number`                 |            |
+| whiteSpace    | The white-space css property                                              |       `"nowrap"` `"break-spaces"`        |            |
+| wordBreak     | The word-break css property                                               |              `"break-all"`               |            |
+| color         | Color of the text                                                         | `string` (see values in "Color" section) |            |
+| qa            | HTML `data-qa` attribute, used in tests                                   |                 `string`                 |            |
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index dbe290058a..7bd91e5837 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -7,7 +7,10 @@ import type {ColorTextBaseProps} from './colorText/colorText';
 import {text} from './text/text';
 import type {TextBaseProps} from './text/text';
 
-export interface TextProps extends TextBaseProps, ColorTextBaseProps, QAProps {
+export interface TextProps
+    extends Omit<TextBaseProps, 'ellipsisLines'>,
+        ColorTextBaseProps,
+        QAProps {
     /**
      * Ability to override default html tag
      */
@@ -16,11 +19,14 @@ export interface TextProps extends TextBaseProps, ColorTextBaseProps, QAProps {
     className?: string;
     children?: React.ReactNode;
     title?: string;
+    ellipsisLines?: number;
 }
 
 type TextRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
 
-type TextPropsWithoutRef<C extends React.ElementType> = {as?: C} & Omit<TextProps, 'as'>;
+type TextPropsWithoutRef<C extends React.ElementType> = {
+    as?: C;
+} & Omit<TextProps, 'as'>;
 
 /**
  * A component for working with typography.
@@ -48,39 +54,54 @@ type TextPropsWithoutRef<C extends React.ElementType> = {as?: C} & Omit<TextProp
  * <span className={textStyles}>some text</span>
  * ```
  */
-export const Text = React.forwardRef(
-    <C extends React.ElementType = 'span'>(
-        {
-            as,
-            children,
-            variant,
-            className,
-            ellipsis,
-            color,
-            whiteSpace,
-            wordBreak,
-            qa,
-            ...rest
-        }: TextPropsWithoutRef<C>,
-        ref?: TextRef<C>,
-    ) => {
-        const Tag: React.ElementType = as || 'span';
+export const Text = React.forwardRef(function Text<C extends React.ElementType = 'span'>(
+    {
+        as,
+        children,
+        variant,
+        className,
+        ellipsis,
+        color,
+        whiteSpace,
+        wordBreak,
+        ellipsisLines,
+        style: outerStyle,
+        qa,
+        ...rest
+    }: TextPropsWithoutRef<C>,
+    ref?: TextRef<C>,
+) {
+    const Tag: React.ElementType = as || 'span';
 
-        return (
-            <Tag
-                ref={ref}
-                className={text(
-                    {variant, ellipsis, whiteSpace, wordBreak},
-                    color ? colorText({color}, className) : className,
-                )}
-                data-qa={qa}
-                {...rest}
-            >
-                {children}
-            </Tag>
-        );
-    },
-) as (<C extends React.ElementType = 'span'>({
+    const style: React.CSSProperties = {
+        ...outerStyle,
+    };
+
+    if (typeof ellipsisLines === 'number') {
+        style.WebkitLineClamp = ellipsisLines;
+    }
+
+    return (
+        <Tag
+            ref={ref}
+            className={text(
+                {
+                    variant,
+                    ellipsis,
+                    whiteSpace,
+                    wordBreak,
+                    ellipsisLines: typeof ellipsisLines === 'number',
+                },
+                color ? colorText({color}, className) : className,
+            )}
+            style={style}
+            data-qa={qa}
+            {...rest}
+        >
+            {children}
+        </Tag>
+    );
+}) as (<C extends React.ElementType = 'span'>({
     ref,
     ...props
 }: TextPropsWithoutRef<C> & {ref?: TextRef<C>}) => React.ReactElement) & {displayName: string};
diff --git a/src/components/Text/__stories__/Text.stories.tsx b/src/components/Text/__stories__/Text.stories.tsx
index e2f1623e1a..d2c5f13e1b 100644
--- a/src/components/Text/__stories__/Text.stories.tsx
+++ b/src/components/Text/__stories__/Text.stories.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {Text, colorText, text} from '../.';
-import type {TextProps} from '../.';
+import {Flex} from '../../layout';
+import type {TextProps} from '../index';
+import {Text, colorText, text} from '../index';
 
 export default {
     title: 'Components/Data Display/Text',
@@ -26,16 +27,36 @@ export const UsingTextUtilities = () => (
     </div>
 );
 
-const EllipsisDefault: StoryFn<TextProps> = (args) => <Text {...args} />;
+const EllipsisDefault: StoryFn<TextProps> = (args) => (
+    <Flex gap={5} direction="column">
+        <Flex gap={5} width={200} direction="column">
+            <Text variant="header-1">With fixed container size (ellipsis=true)</Text>
+            <Text {...args} ellipsis />
+        </Flex>
+        <Flex gap={5} width={200} direction="column">
+            <Text variant="header-1">
+                With text utility and fixed container size (ellipsis=true)
+            </Text>
+            <span className={text({ellipsis: true})}>{args.children}</span>
+        </Flex>
+        <Flex gap={5} direction="column">
+            <Text variant="header-1">
+                With text utility (ellipsisLines=true, style: WebkitLineClamp: 3)
+            </Text>
+            <span style={{WebkitLineClamp: 3}} className={text({ellipsisLines: true})}>
+                {args.children}
+            </span>
+        </Flex>
+        <Flex gap={5} direction="column">
+            <Text variant="header-1">With line clamp property (ellipsisLines={3})</Text>
+            <Text {...args} ellipsisLines={3} />
+        </Flex>
+    </Flex>
+);
 
 export const Ellipsis = EllipsisDefault.bind({});
 
 Ellipsis.args = {
-    as: 'div',
-    ellipsis: true,
-    style: {
-        width: 200,
-    },
     children:
         'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.',
 };
diff --git a/src/components/Text/text/text.scss b/src/components/Text/text/text.scss
index e563a1cbd1..776fcb684d 100644
--- a/src/components/Text/text/text.scss
+++ b/src/components/Text/text/text.scss
@@ -68,8 +68,20 @@ $block: '.#{variables.$ns}text';
         @include mixins.text-subheader-3();
     }
     &_ellipsis {
+        display: inline-block;
         @include mixins.overflow-ellipsis();
     }
+
+    &_ellipsis-lines {
+        display: -webkit-box; // stylelint-disable-line value-no-vendor-prefix
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        align-self: center;
+        white-space: normal;
+        // by default clamp 2 lines
+        -webkit-line-clamp: 2;
+    }
+
     &_ws_nowrap {
         white-space: nowrap;
     }
diff --git a/src/components/Text/text/text.ts b/src/components/Text/text/text.ts
index 0dc7ae5066..2bc2e9ec2b 100644
--- a/src/components/Text/text/text.ts
+++ b/src/components/Text/text/text.ts
@@ -71,6 +71,13 @@ export interface TextBaseProps {
      * - text-overflow: ellipsis;
      */
     ellipsis?: boolean;
+    /**
+     * With this prop you need to pass `-webkit-line-clamp` css property with number of cropped lines
+     *
+     * !Note: supports only modern browsers
+     * https://caniuse.com/?search=display%3A%20-webkit-box%3B
+     */
+    ellipsisLines?: boolean;
     /**
      * white-space css property
      */
@@ -93,6 +100,16 @@ export interface TextBaseProps {
  *```
  */
 export const text = (
-    {variant = 'body-1', ellipsis, whiteSpace, wordBreak}: TextBaseProps,
+    {variant = 'body-1', ellipsis, ellipsisLines, whiteSpace, wordBreak}: TextBaseProps,
     className?: string,
-) => b({variant, ellipsis, ws: whiteSpace, wb: wordBreak}, className);
+) =>
+    b(
+        {
+            variant,
+            ellipsis,
+            ws: whiteSpace,
+            wb: wordBreak,
+            'ellipsis-lines': ellipsisLines,
+        },
+        className,
+    );
diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md
index 901f7533e8..c56f348e37 100644
--- a/src/components/Toaster/README.md
+++ b/src/components/Toaster/README.md
@@ -114,17 +114,17 @@ import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 Accepts the argument `toastOptions` with ongoing notification details:
 
-| Parameter  | Type                                    | Required | Default     | Description                                                                                                                                                                |
-| :--------- | :-------------------------------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| name       | `string`                                | yes      |             | A unique notification name. Notifications with identical names are collapsed into one                                                                                      |
-| title      | `string`                                |          |             | Notification title                                                                                                                                                         |
-| className  | `string`                                |          |             | CSS-class                                                                                                                                                                  |
-| autoHiding | `number` or `false`                     |          | 5000        | Number of ms to delay before hiding the notification. Use `false` to disable toast hiding after timeout.                                                                   |
-| content    | `node`                                  |          | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)         |
-| type       | `string`                                |          | `undefined` | A notification type. Possible values: `error`, `success`. If `type` is set, the icon (success/error) will be added into notification title. _By default, there is no icon_ |
-| isClosable | `boolean`                               |          | `true`      | A configuration that manages the visibility of the X icon, which allows the user to close the notification                                                                 |
-| actions    | `ToastAction[]`                         |          | `undefined` | An array of [actions](./types.ts#L9) that display after `content`                                                                                                          |
-| renderIcon | `(toastProps: ToastProps) => ReactNode` |          | `undefined` | Used to customize the toast icon. Type-based behavior is used by default                                                                                                   |
+| Parameter  | Type                                    | Required | Default     | Description                                                                                                                                                                                                                              |
+| :--------- | :-------------------------------------- | :------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name       | `string`                                | yes      |             | A unique notification name. Notifications with identical names are collapsed into one                                                                                                                                                    |
+| title      | `string`                                |          |             | Notification title                                                                                                                                                                                                                       |
+| className  | `string`                                |          |             | CSS-class                                                                                                                                                                                                                                |
+| autoHiding | `number` or `false`                     |          | 5000        | Number of ms to delay before hiding the notification. Use `false` to disable toast hiding after timeout.                                                                                                                                 |
+| content    | `node`                                  |          | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)                                                                       |
+| theme      | `string`                                |          | `"normal"`  | A notification theme. Possible values: `"normal"`, `"info"`, `"success"`, `"warning"`, `danger`, `"utility"`. If `theme` is set to other than `"normal"`, the icon will be added into notification title. _By default, there is no icon_ |
+| isClosable | `boolean`                               |          | `true`      | A configuration that manages the visibility of the X icon, which allows the user to close the notification                                                                                                                               |
+| actions    | `ToastAction[]`                         |          | `undefined` | An array of [actions](./types.ts#L9) that display after `content`                                                                                                                                                                        |
+| renderIcon | `(toastProps: ToastProps) => ReactNode` |          | `undefined` | Used to customize the toast icon. Type-based behavior is used by default                                                                                                                                                                 |
 
 Every `action` is an object with following parameters:
 
diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss
index 24a0997812..2a470a87fb 100644
--- a/src/components/Toaster/Toast/Toast.scss
+++ b/src/components/Toaster/Toast/Toast.scss
@@ -7,11 +7,10 @@ $block: '.#{variables.$ns}toast';
     $closeButtonSize: 24px;
     $closeButtonEdgesSpacing: 16px;
     $closeButtonTitleSpacing: 8px;
-    $containerClass: #{&}__container;
-    $iconClass: #{&}__icon;
 
     --_--item-gap: 10px;
     --_--item-padding: 16px;
+    --_--background-color: var(--g-color-base-background);
 
     display: flex;
     box-sizing: border-box;
@@ -22,7 +21,7 @@ $block: '.#{variables.$ns}toast';
     font-size: var(--g-text-body-2-font-size);
     border-radius: 8px;
     box-shadow: 0px 0px 15px var(--g-color-sfx-shadow);
-    background-color: var(--g-color-base-background);
+    background-color: var(--_--background-color);
     overflow: hidden;
     z-index: 0;
 
@@ -30,61 +29,38 @@ $block: '.#{variables.$ns}toast';
         width: 100%;
     }
 
-    &_default {
-        background-color: var(--g-color-base-float);
-    }
-
-    &_info {
-        & #{$containerClass}:before {
-            background-color: var(--g-color-base-info-light);
-        }
-
-        & #{$iconClass} {
-            color: var(--g-color-text-info-heavy);
-        }
-    }
-
-    &_success {
-        & #{$containerClass}:before {
-            background-color: var(--g-color-base-positive-light);
+    &_theme {
+        &_normal {
+            --_--background-color: var(--g-color-base-float);
         }
 
-        & #{$iconClass} {
-            color: var(--g-color-text-positive-heavy);
-        }
-    }
-
-    &_warning {
-        & #{$containerClass}:before {
-            background-color: var(--g-color-base-warning-light);
+        &_info {
+            --_--container-background-color: var(--g-color-base-info-light);
+            --_--icon-color: var(--g-color-text-info-heavy);
         }
 
-        & #{$iconClass} {
-            color: var(--g-color-text-warning-heavy);
+        &_success {
+            --_--container-background-color: var(--g-color-base-positive-light);
+            --_--icon-color: var(--g-color-text-positive-heavy);
         }
-    }
 
-    &_error {
-        & #{$containerClass}:before {
-            background-color: var(--g-color-base-danger-light);
+        &_warning {
+            --_--container-background-color: var(--g-color-base-warning-light);
+            --_--icon-color: var(--g-color-text-warning-heavy);
         }
 
-        & #{$iconClass} {
-            color: var(--g-color-text-danger-heavy);
-        }
-    }
-
-    &_utility {
-        & #{$containerClass}:before {
-            background-color: var(--g-color-base-utility-light);
+        &_danger {
+            --_--container-background-color: var(--g-color-base-danger-light);
+            --_--icon-color: var(--g-color-text-danger-heavy);
         }
 
-        & #{$iconClass} {
-            color: var(--g-color-text-utility-heavy);
+        &_utility {
+            --_--container-background-color: var(--g-color-base-utility-light);
+            --_--icon-color: var(--g-color-text-utility-heavy);
         }
     }
 
-    #{$containerClass} {
+    &__container {
         flex: 1 1 auto;
         display: grid;
         row-gap: 8px;
@@ -103,6 +79,7 @@ $block: '.#{variables.$ns}toast';
             height: 100%;
             pointer-events: none;
             z-index: -1;
+            background-color: var(--_--container-background-color);
         }
     }
 
@@ -110,6 +87,7 @@ $block: '.#{variables.$ns}toast';
         flex: 0 0 auto;
         padding-inline-end: 8px;
         padding-block-start: 2px;
+        color: var(--_--icon-color);
     }
 
     &__title {
diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
index f5a82ee6ec..eda63618bd 100644
--- a/src/components/Toaster/Toast/Toast.tsx
+++ b/src/components/Toaster/Toast/Toast.tsx
@@ -8,17 +8,18 @@ import {Icon} from '../../Icon';
 import type {IconProps} from '../../Icon';
 import {block} from '../../utils/cn';
 import i18n from '../i18n';
-import type {InternalToastProps, ToastAction, ToastType} from '../types';
+import type {InternalToastProps, ToastAction, ToastTheme} from '../types';
 
 import './Toast.scss';
 
 const b = block('toast');
 const DEFAULT_TIMEOUT = 5000;
-const TITLE_ICONS: Record<ToastType, IconProps['data']> = {
+const TITLE_ICONS: Record<ToastTheme, IconProps['data'] | null> = {
+    normal: null,
     info: CircleInfo,
     success: CircleCheck,
     warning: TriangleExclamation,
-    error: TriangleExclamation,
+    danger: TriangleExclamation,
     utility: Thunderbolt,
 };
 
@@ -68,15 +69,15 @@ function renderActions({actions, onClose}: RenderActionsProps) {
 }
 
 interface RenderIconProps {
-    type?: ToastType;
+    theme?: ToastTheme;
 }
 
-function renderIconByType({type}: RenderIconProps) {
-    if (!type) {
+function renderIconByType({theme}: RenderIconProps) {
+    if (!theme || !TITLE_ICONS[theme]) {
         return null;
     }
 
-    return <Icon data={TITLE_ICONS[type]} size={20} className={b('icon', {[type]: true})} />;
+    return <Icon data={TITLE_ICONS[theme]!} size={20} className={b('icon', {[theme]: true})} />;
 }
 
 export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function Toast(props, ref) {
@@ -86,7 +87,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function
         actions,
         title,
         className,
-        type,
+        theme = 'normal',
         renderIcon,
         autoHiding: timeoutProp = DEFAULT_TIMEOUT,
         isClosable = true,
@@ -100,13 +101,13 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function
 
     const mods = {
         mobile,
-        [type || 'default']: true,
+        theme,
     };
 
     const hasTitle = Boolean(title);
     const hasContent = Boolean(content);
 
-    const icon = renderIcon ? renderIcon(props) : renderIconByType({type});
+    const icon = renderIcon ? renderIcon(props) : renderIconByType({theme});
     return (
         <div ref={ref} className={b(mods, className)} {...closeOnTimeoutProps} data-toast>
             {icon && <div className={b('icon-container')}>{icon}</div>}
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.scss b/src/components/Toaster/__stories__/ToasterShowcase.scss
index 5681cc5441..28f471c37f 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.scss
+++ b/src/components/Toaster/__stories__/ToasterShowcase.scss
@@ -18,7 +18,7 @@
             color: var(--g-color-text-warning-heavy);
         }
 
-        &_error {
+        &_danger {
             color: var(--g-color-text-danger-heavy);
         }
 
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
index b490b32ef9..a47a1872f9 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.tsx
+++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -72,7 +72,7 @@ export const ToasterDemo = ({
     function getToastProps(extra: {
         name: string;
         title?: string;
-        type?: ToastProps['type'];
+        theme?: ToastProps['theme'];
         className?: string;
         content?: React.ReactNode;
         actions?: ToastAction[];
@@ -101,7 +101,7 @@ export const ToasterDemo = ({
             name: getToastName(extra.name),
             className: extra.className,
             title,
-            type: extra.type,
+            theme: extra.theme,
             isClosable: showCloseIcon,
             autoHiding: timeout,
             actions: setActions
@@ -113,10 +113,10 @@ export const ToasterDemo = ({
         };
     }
 
-    const createDefaultToast = () => {
+    const createNormalToast = () => {
         const toastProps = getToastProps({
-            name: 'default',
-            title: 'Default toast',
+            name: 'normal',
+            title: 'Normal toast',
         });
 
         toaster.add(toastProps);
@@ -127,7 +127,7 @@ export const ToasterDemo = ({
     const createInfoToast = () => {
         const toastProps = getToastProps({
             name: 'info',
-            type: 'info',
+            theme: 'info',
             title: 'Info toast',
         });
 
@@ -139,7 +139,7 @@ export const ToasterDemo = ({
     const createSuccessToast = () => {
         const toastProps = getToastProps({
             name: 'success',
-            type: 'success',
+            theme: 'success',
             title: 'Success toast',
         });
 
@@ -151,7 +151,7 @@ export const ToasterDemo = ({
     const createWarningToast = () => {
         const toastProps = getToastProps({
             name: 'warning',
-            type: 'warning',
+            theme: 'warning',
             title: 'Warning toast',
         });
 
@@ -160,11 +160,11 @@ export const ToasterDemo = ({
         setState((state) => ({...state, lastToastName: toastProps.name}));
     };
 
-    const createErrorToast = () => {
+    const createDangerToast = () => {
         const toastProps = getToastProps({
-            name: 'error',
-            type: 'error',
-            title: 'Error toast',
+            name: 'danger',
+            theme: 'danger',
+            title: 'Danger toast',
         });
 
         toaster.add(toastProps);
@@ -175,7 +175,7 @@ export const ToasterDemo = ({
     const createUtilityToast = () => {
         const toastProps = getToastProps({
             name: 'utility',
-            type: 'utility',
+            theme: 'utility',
             title: 'Utility toast',
         });
 
@@ -236,7 +236,7 @@ export const ToasterDemo = ({
     const createToastLongContent = () => {
         const toastProps = getToastProps({
             name: 'overflow',
-            type: 'error',
+            theme: 'danger',
             title: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
             content:
                 'Excepturi cumque dicta, et a repellat culpa totam minus vero, error ducimus nesciunt? Dicta soluta earum sapiente explicabo commodi pariatur nulla eius?',
@@ -300,9 +300,9 @@ export const ToasterDemo = ({
 
     const btnStyle = {marginInlineStart: 20};
 
-    const defaultToastBtn = (
-        <Button view="outlined" size="l" onClick={createDefaultToast} style={btnStyle}>
-            Create default toast
+    const normalToastBtn = (
+        <Button view="outlined" size="l" onClick={createNormalToast} style={btnStyle}>
+            Create normal toast
         </Button>
     );
 
@@ -327,10 +327,10 @@ export const ToasterDemo = ({
         </Button>
     );
 
-    const errorToastBtn = (
-        <Button view="outlined" size="l" onClick={createErrorToast} style={btnStyle}>
-            <Icon className={b('icon', {error: true})} data={TriangleExclamation} />
-            Create error toast
+    const dangerToastBtn = (
+        <Button view="outlined" size="l" onClick={createDangerToast} style={btnStyle}>
+            <Icon className={b('icon', {danger: true})} data={TriangleExclamation} />
+            Create danger toast
         </Button>
     );
 
@@ -375,11 +375,11 @@ export const ToasterDemo = ({
 
     return (
         <React.Fragment>
-            <p>{defaultToastBtn}</p>
+            <p>{normalToastBtn}</p>
             <p>{infoToastBtn}</p>
             <p>{successToastBtn}</p>
             <p>{warningToastBtn}</p>
-            <p>{errorToastBtn}</p>
+            <p>{dangerToastBtn}</p>
             <p>{utilityToastBtn}</p>
             <p>{customToastBtn}</p>
             <p>{toastWithLongContent}</p>
diff --git a/src/components/Toaster/types.ts b/src/components/Toaster/types.ts
index fe74158bbb..72dce8616a 100644
--- a/src/components/Toaster/types.ts
+++ b/src/components/Toaster/types.ts
@@ -5,7 +5,7 @@ export type ToasterArgs = {
     mobile?: boolean;
 };
 
-export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'utility';
+export type ToastTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | 'utility';
 
 export type ToastAction = {
     onClick: VoidFunction;
@@ -20,7 +20,7 @@ export type ToastProps = {
     className?: string;
     autoHiding?: number | false;
     content?: React.ReactNode;
-    type?: ToastType;
+    theme?: ToastTheme;
     isClosable?: boolean;
     actions?: ToastAction[];
 
diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
index 563463204a..3b444d0921 100644
--- a/src/components/Tooltip/README.md
+++ b/src/components/Tooltip/README.md
@@ -4,8 +4,9 @@
 
 <!--/GITHUB_BLOCK-->
 
-A simple text tip that uses its children node as an anchor. To function correctly, the anchor node
-must be able to handle mouse events and focus or blur events.
+A simple text tip that uses its children node as an anchor. This component accepts only text content and may be an excellent alternative to the browser title with its small size and increased appearance delay.
+
+Tooltip has a light and dark theme.
 
 ## Usage
 
@@ -19,11 +20,16 @@ import {Tooltip} from '@gravity-ui/uikit';
 
 ## Properties
 
-| Name       | Description                                                                             |                       Type                       | Default |
-| :--------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: |
-| children   | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. |               `React.ReactElement`               |         |
-| content    | Content that will be shown in the `Tooltip`                                             |                `React.ReactNode`                 |         |
-| closeDelay | Number of ms to delay hiding the `Tooltip` after the hover ends                         |                     `number`                     |   `0`   |
-| openDelay  | Number of ms to delay showing the `Tooltip` after the hover begins                      |                     `number`                     |  `250`  |
-| placement  | `Tooltip` position relative to its anchor                                               | [`PopupPlacement`](../Popup/README.md#placement) |         |
-| qa         | HTML `data-qa` attribute, used in tests                                                 |                     `string`                     |         |
+| Name             | Description                                                                             |                       Type                       | Default |
+| :--------------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: |
+| children         | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. |               `React.ReactElement`               |         |
+| closeDelay       | Number of ms to delay hiding the `Tooltip` after the hover ends                         |                     `number`                     |   `0`   |
+| openDelay        | Number of ms to delay showing the `Tooltip` after the hover begins                      |                     `number`                     | `1000`  |
+| placement        | `Tooltip` position relative to its anchor                                               | [`PopupPlacement`](../Popup/README.md#placement) |         |
+| qa               | HTML `data-qa` attribute, used in tests                                                 |                     `string`                     |         |
+| content          | Content that will be shown in the `Tooltip`                                             |                `React.ReactNode`                 |         |
+| id               | This prop is used to help implement the accessibility logic.                            |                     `string`                     |         |
+| disablePortal    | Do not use Portal for children                                                          |                    `boolean`                     |         |
+| contentClassName | HTML class attribute for content node                                                   |                     `string`                     |         |
+| className        | HTML class attribute for popup                                                          |                     `string`                     |         |
+| disabled         | Prevent popup from opening                                                              |                    `boolean`                     | `false` |
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
index 87ca706048..85358bed37 100644
--- a/src/components/Tooltip/Tooltip.scss
+++ b/src/components/Tooltip/Tooltip.scss
@@ -3,16 +3,36 @@
 $block: '.#{variables.$ns}tooltip';
 
 #{$block} {
-    --g-popup-border-width: 0;
-    --g-popup-background-color: var(--g-color-base-float-heavy);
+    // [class] for increasing specificity
+    &[class] {
+        --g-popup-border-width: 0;
 
-    &__popup-content {
-        // prevent glitch between two nearby tooltip refs
-        pointer-events: none;
+        > div {
+            padding: 4px 8px;
+            max-width: 360px;
+            box-sizing: border-box;
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
+
+            animation-duration: unset;
+            animation-timing-function: unset;
+            animation-fill-mode: unset;
+        }
     }
 
     &__content {
-        padding: 6px 12px;
-        color: var(--g-color-text-light-primary);
+        // -webkit-line-clamp will not work without display: -webkit-box;
+        /* stylelint-disable-next-line */
+        display: -webkit-box;
+
+        -webkit-box-orient: vertical;
+        -moz-box-orient: vertical;
+        -ms-box-orient: vertical;
+
+        -webkit-line-clamp: 20;
+        -moz-line-clamp: 20;
+        -ms-line-clamp: 20;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index ce62e2504b..2f0b8a2bd0 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {KeyCode} from '../../constants';
 import {useForkRef} from '../../hooks';
-import {useBoolean} from '../../hooks/private';
+import {type TooltipDelayProps, useTooltipVisible} from '../../hooks/private';
 import {Popup} from '../Popup';
 import type {PopupPlacement} from '../Popup';
+import {Text} from '../Text';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 
@@ -20,36 +20,53 @@ export interface TooltipProps extends QAProps, DOMProps, TooltipDelayProps {
     disablePortal?: boolean;
 }
 
-interface TooltipDelayProps {
-    openDelay?: number;
-    closeDelay?: number;
-}
-
 const b = block('tooltip');
 const DEFAULT_PLACEMENT: PopupPlacement = ['bottom', 'top'];
 
 export const Tooltip = (props: TooltipProps) => {
-    const {children, content, disabled, placement = DEFAULT_PLACEMENT, qa} = props;
+    const {
+        children,
+        content,
+        disabled,
+        placement = DEFAULT_PLACEMENT,
+        qa,
+        id,
+        className,
+        style,
+        disablePortal,
+        contentClassName,
+        openDelay = 1000,
+        closeDelay,
+    } = props;
+
     const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);
-    const tooltipVisible = useTooltipVisible(anchorElement, props);
+    const tooltipVisible = useTooltipVisible(anchorElement, {
+        openDelay,
+        closeDelay,
+        preventTriggerOnFocus: true,
+    });
 
     const renderPopup = () => {
         return (
             <Popup
-                id={props.id}
+                id={id}
                 role="tooltip"
-                className={b(null, props.className)}
-                style={props.style}
+                className={b(null, className)}
+                style={style}
                 open={tooltipVisible && !disabled}
                 placement={placement}
                 anchorRef={{current: anchorElement}}
-                disablePortal={props.disablePortal}
+                disablePortal={disablePortal}
                 disableEscapeKeyDown
                 disableOutsideClick
                 disableLayer
                 qa={qa}
             >
-                <div className={b('content', props.contentClassName)}>{content}</div>
+                <div className={b('content', contentClassName)}>
+                    <Text variant="body-short" color="complementary">
+                        {content}
+                    </Text>
+                </div>
             </Popup>
         );
     };
@@ -66,69 +83,3 @@ export const Tooltip = (props: TooltipProps) => {
         </React.Fragment>
     );
 };
-
-function useTooltipVisible(
-    anchor: HTMLElement | null,
-    {openDelay = 250, closeDelay}: TooltipDelayProps,
-) {
-    const [tooltipVisible, showTooltip, hideTooltip] = useBoolean(false);
-    const timeoutRef = React.useRef<number>();
-    const isFocusWithinRef = React.useRef(false);
-
-    React.useEffect(() => {
-        if (!anchor) {
-            return undefined;
-        }
-
-        function handleMouseEnter() {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = window.setTimeout(showTooltip, openDelay);
-        }
-
-        function handleMouseLeave() {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = window.setTimeout(hideTooltip, closeDelay);
-        }
-
-        function handleFocusWithin(e: FocusEvent) {
-            if (!isFocusWithinRef.current && document.activeElement === e.target) {
-                isFocusWithinRef.current = true;
-                clearTimeout(timeoutRef.current);
-                showTooltip();
-            }
-        }
-
-        function handleBlurWithin(e: FocusEvent) {
-            if (
-                isFocusWithinRef.current &&
-                !(e.currentTarget as Element).contains(e.relatedTarget as Element)
-            ) {
-                isFocusWithinRef.current = false;
-                clearTimeout(timeoutRef.current);
-                hideTooltip();
-            }
-        }
-
-        function handleKeyDown(e: KeyboardEvent) {
-            if (e.key === KeyCode.ESCAPE) {
-                clearTimeout(timeoutRef.current);
-                hideTooltip();
-            }
-        }
-
-        anchor.addEventListener('mouseenter', handleMouseEnter);
-        anchor.addEventListener('mouseleave', handleMouseLeave);
-        anchor.addEventListener('focus', handleFocusWithin);
-        anchor.addEventListener('blur', handleBlurWithin);
-        anchor.addEventListener('keydown', handleKeyDown);
-        return () => {
-            anchor.removeEventListener('mouseenter', handleMouseEnter);
-            anchor.removeEventListener('mouseleave', handleMouseLeave);
-            anchor.removeEventListener('focus', handleFocusWithin);
-            anchor.removeEventListener('blur', handleBlurWithin);
-            anchor.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [anchor, showTooltip, hideTooltip, openDelay, closeDelay]);
-
-    return tooltipVisible;
-}
diff --git a/src/components/Tooltip/__stories__/Tooltip.stories.tsx b/src/components/Tooltip/__stories__/Tooltip.stories.tsx
index 42ef00d7ad..58d2017d95 100644
--- a/src/components/Tooltip/__stories__/Tooltip.stories.tsx
+++ b/src/components/Tooltip/__stories__/Tooltip.stories.tsx
@@ -18,9 +18,7 @@ export const Default: Story = {
     render: (args) => {
         return (
             <Tooltip {...args}>
-                <Button extraProps={{'aria-describedby': args.id}}>
-                    Hover or focus to see tooltip
-                </Button>
+                <Button extraProps={{'aria-describedby': args.id}}>Hover to see tooltip</Button>
             </Tooltip>
         );
     },
diff --git a/src/components/Tooltip/__tests__/Tooltip.test.tsx b/src/components/Tooltip/__tests__/Tooltip.test.tsx
index 4b7846b78b..68e83b4155 100644
--- a/src/components/Tooltip/__tests__/Tooltip.test.tsx
+++ b/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -49,7 +49,7 @@ test('should show tooltip on hover and hide on un hover', async () => {
     expect(tooltip).not.toBeInTheDocument();
 });
 
-test('should show tooltip on focus and hide on blur', async () => {
+test('should not show tooltip on focus', async () => {
     const user = userEvent.setup();
     render(
         <Tooltip content="test content">
@@ -62,15 +62,8 @@ test('should show tooltip on focus and hide on blur', async () => {
     await user.tab();
     expect(button).toHaveFocus();
 
-    const tooltip = await screen.findByRole('tooltip');
-
-    expect(tooltip).toBeVisible();
-
-    await user.tab();
+    const tooltip = screen.queryByRole('tooltip');
 
-    fireAnimationEndEvent(tooltip);
-
-    expect(button).not.toHaveFocus();
     expect(tooltip).not.toBeInTheDocument();
 });
 
@@ -85,7 +78,7 @@ test('should hide on press Escape', async () => {
     const button = await screen.findByRole('button');
 
     await user.tab();
-    expect(button).toHaveFocus();
+    await user.hover(button);
 
     const tooltip = await screen.findByRole('tooltip');
 
@@ -98,31 +91,3 @@ test('should hide on press Escape', async () => {
     expect(button).toHaveFocus();
     expect(tooltip).not.toBeInTheDocument();
 });
-
-test('should show on focus and hide on un hover', async () => {
-    const user = userEvent.setup();
-    render(
-        <Tooltip content="test content">
-            <button />
-        </Tooltip>,
-    );
-
-    const button = screen.getByRole('button');
-
-    button.focus();
-
-    const tooltip = await screen.findByRole('tooltip');
-
-    expect(tooltip).toBeVisible();
-
-    await user.hover(button);
-
-    expect(tooltip).toBeVisible();
-
-    await user.unhover(button);
-
-    fireAnimationEndEvent(tooltip);
-
-    expect(button).toHaveFocus();
-    expect(tooltip).not.toBeInTheDocument();
-});
diff --git a/src/components/controls/TextInput/AdditionalContent.tsx b/src/components/controls/TextInput/AdditionalContent.tsx
index ec878f5550..71bb8e1bb8 100644
--- a/src/components/controls/TextInput/AdditionalContent.tsx
+++ b/src/components/controls/TextInput/AdditionalContent.tsx
@@ -5,7 +5,7 @@ import {block} from '../../utils/cn';
 const b = block('text-input');
 
 type Props = {
-    placement: 'left' | 'right';
+    placement: 'start' | 'end';
     children?: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLDivElement>;
 };
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index de554e0d44..285124e352 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -8,28 +8,32 @@
         @include mixins.text-body-short;
 
         line-height: #{variables.$s-height - control-variables.$border-width * 2};
-        padding: 0 4px 0 8px;
+        padding-block: 0;
+        padding-inline: 8px 4px;
     }
 
     @if $size == 'm' {
         @include mixins.text-body-short;
 
         line-height: #{variables.$m-height - control-variables.$border-width * 2};
-        padding: 0 4px 0 8px;
+        padding-block: 0;
+        padding-inline: 8px 4px;
     }
 
     @if $size == 'l' {
         @include mixins.text-body-short;
 
         line-height: #{variables.$l-height - control-variables.$border-width * 2};
-        padding: 0 4px 0 12px;
+        padding-block: 0;
+        padding-inline: 12px 4px;
     }
 
     @if $size == 'xl' {
         @include mixins.text-body-2;
 
         line-height: #{variables.$xl-height - control-variables.$border-width * 2};
-        padding: 0 4px 0 12px;
+        padding-block: 0;
+        padding-inline: 12px 4px;
     }
 
     @include mixins.text-accent;
@@ -105,7 +109,8 @@ $block: '.#{variables.$ns}text-input';
     &__error-icon {
         box-sizing: content-box;
         color: var(--g-color-text-danger);
-        padding: var(--_--text-input-error-icon-padding);
+        padding-block: var(--_--text-input-error-icon-padding-block);
+        padding-inline: var(--_--text-input-error-icon-padding-inline);
     }
 
     &__additional-content {
@@ -123,7 +128,7 @@ $block: '.#{variables.$ns}text-input';
                 @include input-label(s);
             }
 
-            &#{$block}_has-left-content #{$block}__label {
+            &#{$block}_has-start-content #{$block}__label {
                 padding-inline-start: 2px;
             }
 
@@ -131,15 +136,16 @@ $block: '.#{variables.$ns}text-input';
                 height: #{variables.$s-height - control-variables.$border-width * 2};
             }
 
-            #{$block}__additional-content_placement_left {
+            #{$block}__additional-content_placement_start {
                 padding-inline-start: 1px;
             }
 
-            #{$block}__additional-content_placement_right {
+            #{$block}__additional-content_placement_end {
                 padding-inline-end: 1px;
             }
 
-            --_--text-input-error-icon-padding: 5px 5px 5px 0;
+            --_--text-input-error-icon-padding-block: 5px;
+            --_--text-input-error-icon-padding-inline: 0 5px;
 
             --_--text-input-border-radius: var(--g-border-radius-s);
         }
@@ -153,7 +159,7 @@ $block: '.#{variables.$ns}text-input';
                 @include input-label(m);
             }
 
-            &#{$block}_has-left-content #{$block}__label {
+            &#{$block}_has-start-content #{$block}__label {
                 padding-inline-start: 2px;
             }
 
@@ -161,15 +167,16 @@ $block: '.#{variables.$ns}text-input';
                 height: #{variables.$m-height - control-variables.$border-width * 2};
             }
 
-            #{$block}__additional-content_placement_left {
+            #{$block}__additional-content_placement_start {
                 padding-inline-start: 1px;
             }
 
-            #{$block}__additional-content_placement_right {
+            #{$block}__additional-content_placement_end {
                 padding-inline-end: 1px;
             }
 
-            --_--text-input-error-icon-padding: 5px 5px 5px 0;
+            --_--text-input-error-icon-padding-block: 5px;
+            --_--text-input-error-icon-padding-inline: 0 5px;
 
             --_--text-input-border-radius: var(--g-border-radius-m);
         }
@@ -183,7 +190,7 @@ $block: '.#{variables.$ns}text-input';
                 @include input-label(l);
             }
 
-            &#{$block}_has-left-content #{$block}__label {
+            &#{$block}_has-start-content #{$block}__label {
                 padding-inline-start: 3px;
             }
 
@@ -191,15 +198,16 @@ $block: '.#{variables.$ns}text-input';
                 height: #{variables.$l-height - control-variables.$border-width * 2};
             }
 
-            #{$block}__additional-content_placement_left {
+            #{$block}__additional-content_placement_start {
                 padding-inline-start: 3px;
             }
 
-            #{$block}__additional-content_placement_right {
+            #{$block}__additional-content_placement_end {
                 padding-inline-end: 3px;
             }
 
-            --_--text-input-error-icon-padding: 9px 9px 9px 0;
+            --_--text-input-error-icon-padding-block: 9px;
+            --_--text-input-error-icon-padding-inline: 0 9px;
 
             --_--text-input-border-radius: var(--g-border-radius-l);
         }
@@ -213,7 +221,7 @@ $block: '.#{variables.$ns}text-input';
                 @include input-label(xl);
             }
 
-            &#{$block}_has-left-content #{$block}__label {
+            &#{$block}_has-start-content #{$block}__label {
                 padding-inline-start: 3px;
             }
 
@@ -221,15 +229,16 @@ $block: '.#{variables.$ns}text-input';
                 height: #{variables.$xl-height - control-variables.$border-width * 2};
             }
 
-            #{$block}__additional-content_placement_left {
+            #{$block}__additional-content_placement_start {
                 padding-inline-start: 3px;
             }
 
-            #{$block}__additional-content_placement_right {
+            #{$block}__additional-content_placement_end {
                 padding-inline-end: 3px;
             }
 
-            --_--text-input-error-icon-padding: 13px 13px 13px 0;
+            --_--text-input-error-icon-padding-block: 13px;
+            --_--text-input-error-icon-padding-inline: 0 13px;
 
             --_--text-input-border-radius: var(--g-border-radius-xl);
         }
@@ -296,13 +305,13 @@ $block: '.#{variables.$ns}text-input';
         }
     }
 
-    &_has-left-content {
+    &_has-start-content {
         #{$block}__control {
             padding-inline-start: 2px;
         }
     }
 
-    &_has-right-content {
+    &_has-end-content {
         #{$block}__control {
             padding-inline-end: 2px;
         }
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index bbf6f5c7bf..543df3fb12 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -36,10 +36,18 @@ export type TextInputProps = BaseInputControlProps<HTMLInputElement> & {
     controlProps?: React.InputHTMLAttributes<HTMLInputElement>;
     /** Help text rendered to the left of the input node */
     label?: string;
-    /** User`s node rendered before label and input node */
+    /** User`s node rendered before label and input node
+     * @deprecated use `startContent` instead
+     */
     leftContent?: React.ReactNode;
-    /** User`s node rendered after input node and clear button */
+    /** User`s node rendered after input node and clear button
+     * @deprecated use `endContent` instead
+     */
     rightContent?: React.ReactNode;
+    /** User`s node rendered before label and input node */
+    startContent?: React.ReactNode;
+    /** User`s node rendered after input node and clear button */
+    endContent?: React.ReactNode;
     /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
     note?: React.ReactNode;
 };
@@ -75,6 +83,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         controlProps: originalControlProps,
         leftContent,
         rightContent,
+        startContent = leftContent,
+        endContent = rightContent,
         note,
         onUpdate,
         onChange,
@@ -91,7 +101,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const labelRef = React.useRef<HTMLLabelElement>(null);
-    const leftContentRef = React.useRef<HTMLDivElement>(null);
+    const startContentRef = React.useRef<HTMLDivElement>(null);
     const state = getInputControlState(validationState);
 
     const isControlled = value !== undefined;
@@ -102,8 +112,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
     const isErrorIconVisible =
         validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
-    const isLeftContentVisible = Boolean(leftContent);
-    const isRightContentVisible = Boolean(rightContent);
+    const isStartContentVisible = Boolean(startContent);
+    const isEndContentVisible = Boolean(endContent);
     const isAutoCompleteOff =
         isLabelVisible && !originalId && !name && typeof autoComplete === 'undefined';
 
@@ -111,7 +121,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
     const id = isLabelVisible ? originalId || innerId : originalId;
 
     const labelSize = useElementSize(isLabelVisible ? labelRef : null, size);
-    const leftContentSize = useElementSize(isLeftContentVisible ? leftContentRef : null, size);
+    const startContentSize = useElementSize(isStartContentVisible ? startContentRef : null, size);
 
     const errorMessageId = useUniqId();
     const noteId = useUniqId();
@@ -127,7 +137,9 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         ...originalControlProps,
         style: {
             ...originalControlProps?.style,
-            ...(isLabelVisible && labelSize.width ? {paddingLeft: `${labelSize.width}px`} : {}),
+            ...(isLabelVisible && labelSize.width
+                ? {paddingInlineStart: `${labelSize.width}px`}
+                : {}),
         },
         'aria-invalid': validationState === 'invalid' || undefined,
         'aria-describedby': ariaDescribedBy || undefined,
@@ -199,29 +211,31 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                     state,
                     pin: view === 'clear' ? undefined : pin,
                     'has-clear': isClearControlVisible,
-                    'has-left-content': isLeftContentVisible,
-                    'has-right-content': isClearControlVisible || isRightContentVisible,
+                    'has-start-content': isStartContentVisible,
+                    'has-end-content': isClearControlVisible || isEndContentVisible,
                 },
                 className,
             )}
             data-qa={qa}
         >
             <span className={b('content')}>
-                {isLeftContentVisible && (
+                {isStartContentVisible && (
                     <AdditionalContent
-                        ref={leftContentRef}
-                        placement="left"
+                        ref={startContentRef}
+                        placement="start"
                         onClick={handleAdditionalContentClick}
                     >
-                        {leftContent}
+                        {startContent}
                     </AdditionalContent>
                 )}
                 {isLabelVisible && (
                     <label
                         ref={labelRef}
                         style={{
-                            left: isLeftContentVisible ? leftContentSize.width : undefined,
-                            maxWidth: `calc(50% - ${leftContentSize.width}px)`,
+                            insetInlineStart: isStartContentVisible
+                                ? startContentSize.width
+                                : undefined,
+                            maxWidth: `calc(50% - ${startContentSize.width}px)`,
                         }}
                         className={b('label')}
                         title={label}
@@ -238,9 +252,9 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                         className={b('clear', {size})}
                     />
                 )}
-                {isRightContentVisible && (
-                    <AdditionalContent placement="right" onClick={handleAdditionalContentClick}>
-                        {rightContent}
+                {isEndContentVisible && (
+                    <AdditionalContent placement="end" onClick={handleAdditionalContentClick}>
+                        {endContent}
                     </AdditionalContent>
                 )}
                 {isErrorIconVisible && (
diff --git a/src/components/layout/Box/Box.scss b/src/components/layout/Box/Box.scss
new file mode 100644
index 0000000000..6882040d53
--- /dev/null
+++ b/src/components/layout/Box/Box.scss
@@ -0,0 +1,23 @@
+@use '../variables.scss' as v;
+
+#{v.$boxBlock} {
+    box-sizing: border-box;
+
+    &_overflow_hidden {
+        overflow: hidden;
+    }
+
+    &_overflow_auto {
+        overflow: auto;
+    }
+
+    &_overflow_x {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    &_overflow_y {
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+}
diff --git a/src/components/layout/Box/Box.tsx b/src/components/layout/Box/Box.tsx
new file mode 100644
index 0000000000..1d9915b17b
--- /dev/null
+++ b/src/components/layout/Box/Box.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
+import type {SpacingProps} from '../spacing/spacing';
+import {sp} from '../spacing/spacing';
+
+import './Box.scss';
+
+const b = block('box');
+
+export interface BoxProps<T extends React.ElementType = 'div'>
+    extends QAProps,
+        React.HTMLAttributes<T>,
+        React.PropsWithChildren<
+            Pick<
+                React.CSSProperties,
+                'width' | 'height' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth'
+            >
+        > {
+    as?: T;
+    /**
+     * Add overflow css properties to container
+     */
+    overflow?: 'hidden' | 'x' | 'y' | 'auto';
+    className?: string;
+    /**
+     * All spacing shortcut properties available here.
+     * ```tsx
+     * <Box spacing={{mr: 3, pb: 2}}>...<Box>
+     * // margin-right: 12px
+     * // padding-bottom: 8px
+     * ```
+     */
+    spacing?: SpacingProps;
+    onClick?(e: React.MouseEvent<T>): void;
+}
+
+/**
+ * Basic block to build other components and for standalone usage as a smart block with build in support of most usable css properties and shortcut `spacing` properties.
+ * ```tsx
+ * <Box width={300} height={200} spacing={{mb: 2}}>
+ *      some content
+ * </Box>
+ * <Box width={300} height={200} >
+ *      some content
+ * </Box>
+ * ```
+ */
+export const Box = React.forwardRef(function Box<T extends React.ElementType = 'div'>(
+    {
+        as,
+        children,
+        qa,
+        className,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxHeight,
+        maxWidth,
+        style: outerStyle,
+        spacing,
+        overflow,
+        ...props
+    }: BoxProps<T>,
+    ref?: React.ComponentPropsWithRef<T>['ref'],
+) {
+    const Tag: React.ElementType = as || 'div';
+
+    const style: React.CSSProperties = {
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxHeight,
+        maxWidth,
+        ...outerStyle,
+    };
+
+    return (
+        <Tag
+            {...props}
+            data-qa={qa}
+            style={style}
+            ref={ref}
+            className={b({overflow}, spacing ? sp(spacing, className) : className)}
+        >
+            {children}
+        </Tag>
+    );
+});
diff --git a/src/components/layout/Col/__stories__/Col.stories.tsx b/src/components/layout/Col/__stories__/Col.stories.tsx
index d012b4b875..6cafc60338 100644
--- a/src/components/layout/Col/__stories__/Col.stories.tsx
+++ b/src/components/layout/Col/__stories__/Col.stories.tsx
@@ -10,7 +10,7 @@ import {Col} from '../Col';
 import type {ColProps} from '../Col';
 
 export default {
-    title: 'Layout/Col',
+    title: 'Components/Layout/Col',
     component: Col,
 } as Meta;
 
diff --git a/src/components/layout/Container/__stories__/Container.stories.tsx b/src/components/layout/Container/__stories__/Container.stories.tsx
index 8fd29395bb..2bfe7e435a 100644
--- a/src/components/layout/Container/__stories__/Container.stories.tsx
+++ b/src/components/layout/Container/__stories__/Container.stories.tsx
@@ -9,7 +9,7 @@ import {Container} from '../Container';
 import type {ContainerProps} from '../Container';
 
 export default {
-    title: 'Layout/Container',
+    title: 'Components/Layout/Container',
     component: Container,
 } as Meta;
 
diff --git a/src/components/layout/Flex/Flex.scss b/src/components/layout/Flex/Flex.scss
index 230c6adf44..8b086d2bce 100644
--- a/src/components/layout/Flex/Flex.scss
+++ b/src/components/layout/Flex/Flex.scss
@@ -8,6 +8,11 @@
         display: inline-flex;
     }
 
+    &_center-content {
+        justify-content: center;
+        align-items: center;
+    }
+
     @each $space, $value in v.$SPACE {
         &_s_#{$space} {
             margin-block-start: calc(-1 * $value) !important;
diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
index 9bf7b021be..8c153564b3 100644
--- a/src/components/layout/Flex/Flex.tsx
+++ b/src/components/layout/Flex/Flex.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import type {QAProps} from '../../types';
 import {block} from '../../utils/cn';
+import {Box, BoxProps} from '../Box/Box';
 import {useLayoutContext} from '../hooks/useLayoutContext';
 import type {AdaptiveProp, MediaPartial, Space} from '../types';
 import {makeCssMod} from '../utils';
@@ -10,8 +11,10 @@ import './Flex.scss';
 
 const b = block('flex');
 
-export interface FlexProps<T extends React.ElementType = 'div'> extends QAProps {
-    as?: T;
+export interface FlexProps<T extends React.ElementType = 'div'>
+    extends QAProps,
+        BoxProps<T>,
+        React.HTMLAttributes<T> {
     /**
      * `flex-direction` property
      */
@@ -40,13 +43,21 @@ export interface FlexProps<T extends React.ElementType = 'div'> extends QAProps
     justifyContent?: AdaptiveProp<'justifyContent'>;
     justifyItems?: AdaptiveProp<'justifyItems'>;
     justifySelf?: AdaptiveProp<'justifySelf'>;
+    /**
+     * Shortcut for:
+     * 
+     * ```css
+     *  justify-content: center;
+        align-items: center;
+     * ```
+     */
+    centerContent?: true;
     /**
      * `flex-wrap` property
      *
      * If value equals `true`, add css property `flex-wrap: wrap`;
      */
     wrap?: true | React.CSSProperties['flexWrap'];
-    width?: number;
     /**
      * display: inline-flex;
      */
@@ -54,6 +65,7 @@ export interface FlexProps<T extends React.ElementType = 'div'> extends QAProps
     gap?: Space | MediaPartial<Space>;
     gapRow?: Space | MediaPartial<Space>;
     /**
+     * @deprecated - use native gap property
      * Space between children. Works like gap but supports in old browsers. Under the hoods uses negative margins. Vertical and horizontal directions are also supported
      *
      * ---
@@ -78,11 +90,6 @@ export interface FlexProps<T extends React.ElementType = 'div'> extends QAProps
      * ```
      */
     space?: Space | MediaPartial<Space>;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    className?: string;
-    title?: string;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
 }
 
 /**
@@ -120,13 +127,11 @@ export interface FlexProps<T extends React.ElementType = 'div'> extends QAProps
  * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#flex
  */
 export const Flex = React.forwardRef(function Flex<T extends React.ElementType = 'div'>(
-    props: Omit<FlexProps<T>, 'ref'>,
+    props: FlexProps<T>,
     ref: React.ComponentPropsWithRef<T>['ref'],
 ) {
     const {
-        as: Tag = 'div',
         direction,
-        width,
         grow,
         basis,
         children,
@@ -140,12 +145,11 @@ export const Flex = React.forwardRef(function Flex<T extends React.ElementType =
         shrink,
         wrap,
         inline,
-        title,
         gap,
         gapRow,
         className,
         space,
-        qa,
+        centerContent,
         ...restProps
     } = props;
 
@@ -171,16 +175,16 @@ export const Flex = React.forwardRef(function Flex<T extends React.ElementType =
     const s = !gap && !gapRow && spaceSize ? makeCssMod(spaceSize) : undefined;
 
     return (
-        <Tag
+        <Box
             className={b(
                 {
+                    'center-content': centerContent,
                     inline,
                     s,
                 },
                 className,
             )}
             style={{
-                width,
                 flexDirection: applyMediaProps(direction),
                 flexGrow: grow === true ? 1 : grow,
                 flexWrap: wrap === true ? 'wrap' : wrap,
@@ -196,9 +200,7 @@ export const Flex = React.forwardRef(function Flex<T extends React.ElementType =
                 justifySelf: applyMediaProps(justifySelf),
                 ...style,
             }}
-            title={title}
             ref={ref}
-            data-qa={qa}
             {...restProps}
         >
             {space
@@ -207,6 +209,6 @@ export const Flex = React.forwardRef(function Flex<T extends React.ElementType =
                       child ? <div className={b('wr')}>{child}</div> : child,
                   )
                 : children}
-        </Tag>
+        </Box>
     );
 });
diff --git a/src/components/layout/Flex/__stories__/Flex.stories.tsx b/src/components/layout/Flex/__stories__/Flex.stories.tsx
index adf4853564..483c0b964e 100644
--- a/src/components/layout/Flex/__stories__/Flex.stories.tsx
+++ b/src/components/layout/Flex/__stories__/Flex.stories.tsx
@@ -12,7 +12,7 @@ import {Flex} from '../Flex';
 import type {FlexProps} from '../Flex';
 
 export default {
-    title: 'Layout/Flex',
+    title: 'Components/Layout/Flex',
     component: Flex,
 } as Meta;
 
@@ -112,17 +112,17 @@ export const ChildrenWithBgColor = ChildrenWithBgColorTemplate.bind({});
 ChildrenWithBgColor.args = {};
 
 const WithNullChildrenTemplate: StoryFn<FlexProps<'div'>> = (args) => (
-    <LayoutPresenter title="Change screen size to 's' to see result">
+    <LayoutPresenter title="Null elements don't affect spacings">
         <Container>
             <Row space="5">
                 <Col>
                     <Flex {...args} space={5} direction="column">
-                        <Box />
+                        <Box>Box</Box>
                         {null}
                         {null}
-                        <Box />
+                        <Box>Box</Box>
                         {null}
-                        <Box />
+                        <Box>Box</Box>
                     </Flex>
                 </Col>
             </Row>
diff --git a/src/components/layout/LayoutProvider/__stories__/Layout.mdx b/src/components/layout/LayoutProvider/__stories__/Layout.mdx
index 01208b998a..3d25f6e380 100644
--- a/src/components/layout/LayoutProvider/__stories__/Layout.mdx
+++ b/src/components/layout/LayoutProvider/__stories__/Layout.mdx
@@ -1,8 +1,6 @@
 import {Meta} from '@storybook/addon-docs';
-import * as LayoutStories from './Layout.stories';
 
-
-<Meta of={LayoutStories}/>
+<Meta title="Components/Layout" />
 
 # Layout Components
 
@@ -27,7 +25,6 @@ import {Container, Row, Col, Flex} from '@gravity-ui/uikit';
 
 **All components supports `jsdoc` on hover feature. Just hover over the component or components prop in you favorite editor to see documentation**
 
-
 ### Base concepts:
 
 -   [Spacing](#spacing)
@@ -41,6 +38,7 @@ import {Container, Row, Col, Flex} from '@gravity-ui/uikit';
     -   [Col](#col)
 -   [Container](#container)
 -   [Flex](#flex)
+-   [Box](#box)
 
 ### Hooks
 
@@ -157,6 +155,26 @@ export const App = () => {
 };
 ```
 
+## Box
+
+The `Box` component is a developer friend and basic block to build other components. Aware about spacing, its own sizes and most commonly used CSS properties.
+
+Use it to declaratively describe elements with a fixed height/width. It also has built-in support for the most commonly used properties, such as `overflow`.
+It is mainly used as a base unit for other components such as `Flex` and `Card`.
+
+It is also well suited for use as a base for data loading containers, for example:
+
+```tsx
+import React, {Suspence} from 'react';
+
+// `Flex` extended from `Box` component and enriched flexbox model properties
+<Flex centerContent width="100%" height="100%">
+    <Suspence fallback={<Loader size="m" />}>
+        <LazyLoadedCompepnet>
+    </Suspence>
+</Flex>
+```
+
 ## Layout Grid
 
 Base components to describe 12-th column layout grid for you app.
diff --git a/src/components/layout/LayoutProvider/__stories__/Layout.stories.tsx b/src/components/layout/LayoutProvider/__stories__/Layout.stories.tsx
deleted file mode 100644
index 73b7b8e950..0000000000
--- a/src/components/layout/LayoutProvider/__stories__/Layout.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import type {Meta, StoryFn} from '@storybook/react';
-
-export default {
-    title: 'Layout',
-    id: 'Layout',
-    parameters: {
-        order: -100,
-    },
-} as Meta;
-
-export const Playground: StoryFn = () => <React.Fragment></React.Fragment>;
-Playground.storyName = 'Layout';
diff --git a/src/components/layout/Row/__stories__/Row.stories.tsx b/src/components/layout/Row/__stories__/Row.stories.tsx
index 17f1a3077f..4bb904fe7d 100644
--- a/src/components/layout/Row/__stories__/Row.stories.tsx
+++ b/src/components/layout/Row/__stories__/Row.stories.tsx
@@ -8,7 +8,7 @@ import {Row} from '../Row';
 import type {RowProps} from '../Row';
 
 export default {
-    title: 'Layout/Row',
+    title: 'Components/Layout/Row',
     component: Row,
 } as Meta;
 
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
index eb1aea7bc0..3a565b5525 100644
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -2,6 +2,7 @@ import type {RecursivePartial, LayoutTheme as StrictLayoutTheme} from './types';
 export * from './Col/Col';
 export * from './Row/Row';
 export * from './Flex/Flex';
+export * from './Box/Box';
 export * from './Container/Container';
 export * from './LayoutProvider/LayoutProvider';
 export * from './spacing/spacing';
diff --git a/src/components/layout/variables.scss b/src/components/layout/variables.scss
index 742f8be266..c401825269 100644
--- a/src/components/layout/variables.scss
+++ b/src/components/layout/variables.scss
@@ -1,5 +1,6 @@
 @use '../variables.scss';
 
+$boxBlock: '.#{variables.$ns}box';
 $colBlock: '.#{variables.$ns}col';
 $rowBlock: '.#{variables.$ns}row';
 $flexBlock: '.#{variables.$ns}flex';
diff --git a/src/hooks/private/index.ts b/src/hooks/private/index.ts
index c8e2f6843a..a11e78b6f1 100644
--- a/src/hooks/private/index.ts
+++ b/src/hooks/private/index.ts
@@ -9,3 +9,4 @@ export * from './useRadio';
 export * from './useRadioGroup';
 export * from './useRestoreFocus';
 export * from './useUpdateEffect';
+export * from './useTooltipVisible';
diff --git a/src/hooks/private/useTooltipVisible/index.ts b/src/hooks/private/useTooltipVisible/index.ts
new file mode 100644
index 0000000000..b97ae04b3b
--- /dev/null
+++ b/src/hooks/private/useTooltipVisible/index.ts
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {KeyCode} from '../../../constants';
+import {useBoolean} from '../useBoolean';
+
+export interface TooltipDelayProps {
+    openDelay?: number;
+    closeDelay?: number;
+}
+
+export const useTooltipVisible = (
+    anchor: HTMLElement | null,
+    {
+        openDelay = 250,
+        closeDelay,
+        preventTriggerOnFocus = false,
+    }: TooltipDelayProps & {preventTriggerOnFocus?: boolean},
+) => {
+    const [tooltipVisible, showTooltip, hideTooltip] = useBoolean(false);
+    const timeoutRef = React.useRef<number>();
+    const isFocusWithinRef = React.useRef(false);
+
+    React.useEffect(() => {
+        if (!anchor) {
+            return undefined;
+        }
+
+        function handleMouseEnter() {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = window.setTimeout(showTooltip, openDelay);
+        }
+
+        function handleMouseLeave() {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = window.setTimeout(hideTooltip, closeDelay);
+        }
+
+        function handleFocusWithin(e: FocusEvent) {
+            if (!isFocusWithinRef.current && document.activeElement === e.target) {
+                isFocusWithinRef.current = true;
+                clearTimeout(timeoutRef.current);
+                showTooltip();
+            }
+        }
+
+        function handleBlurWithin(e: FocusEvent) {
+            if (
+                isFocusWithinRef.current &&
+                !(e.currentTarget as Element).contains(e.relatedTarget as Element)
+            ) {
+                isFocusWithinRef.current = false;
+                clearTimeout(timeoutRef.current);
+                hideTooltip();
+            }
+        }
+
+        function handleKeyDown(e: KeyboardEvent) {
+            if (e.key === KeyCode.ESCAPE) {
+                clearTimeout(timeoutRef.current);
+                hideTooltip();
+            }
+        }
+
+        anchor.addEventListener('mouseenter', handleMouseEnter);
+        anchor.addEventListener('mouseleave', handleMouseLeave);
+        anchor.addEventListener('keydown', handleKeyDown);
+
+        if (!preventTriggerOnFocus) {
+            anchor.addEventListener('focus', handleFocusWithin);
+            anchor.addEventListener('blur', handleBlurWithin);
+        }
+        return () => {
+            anchor.removeEventListener('mouseenter', handleMouseEnter);
+            anchor.removeEventListener('mouseleave', handleMouseLeave);
+            anchor.removeEventListener('focus', handleFocusWithin);
+            anchor.removeEventListener('blur', handleBlurWithin);
+            anchor.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [anchor, showTooltip, hideTooltip, openDelay, closeDelay, preventTriggerOnFocus]);
+
+    return tooltipVisible;
+};