-`.trim();
diff --git a/src/components/Label/README_OLD.md b/src/components/Label/README_OLD.md
deleted file mode 100644
index b68fbcee0f..0000000000
--- a/src/components/Label/README_OLD.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Label
-
-## PropTypes
-
-| Name | Type | Required | Default | Description |
-| :--------------- | :------------------------------------------------------------ | :------- | :---------- | :------------------------------------------------------- |
-| theme | `String` | | `normal ` | Label appearance |
-| type | `String` | | `default` | Label type (plain, with text to copy or with cross icon) |
-| size | `String` | | `xs` | Label size |
-| tooltip | `TooltipProps` | | `undefined` | Tooltip |
-| icon | `ReactNode` | | `undefined` | Icon at the left |
-| disabled | `Boolean` | | `undefined` | Disabled state |
-| interactive | `Boolean` | | `undefined` | Display hover |
-| onClose | `onClose?(event: React.MouseEvent): void;` | | `undefined` | Button with cross handler |
-| copyText | `String` | | `undefined` | Text to copy |
-| closeButtonLabel | `String` | | `undefined` | Text of `aria-label` of button with cross |
-| copyButtonLabel | `String` | | `undefined` | Text of `aria-label` of button with copy |
-| onCopy | `onCopy?(text: string, result: boolean): void;` | | `undefined` | Callback after copy |
-| onClick | `onClick?(event: React.MouseEvent): void;` | | `undefined` | Handler for element click |
-| className | `String` | | `undefined` | Class name |
-
-## Example
-
-```tsx
-
-```
diff --git a/src/components/Label/__stories__/Docs.mdx b/src/components/Label/__stories__/Docs.mdx
new file mode 100644
index 0000000000..42484ac62d
--- /dev/null
+++ b/src/components/Label/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Label.stories';
+import Readme from '../README.md?raw';
+
+
+
+{Readme}
diff --git a/src/components/Label/__stories__/Label.mdx b/src/components/Label/__stories__/Label.mdx
deleted file mode 100644
index 87852bb931..0000000000
--- a/src/components/Label/__stories__/Label.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import {Meta, ArgsTable} from '@storybook/addon-docs';
-import {DocsSource} from '../../../demo/DocsSource/DocsSource';
-import {
- LabelExampleViewTheme,
- LabelExampleViewType,
- LabelExampleViewIcon,
- LabelExampleValue,
- LabelExampleState,
- LabelExampleSize,
-} from './examples/LabelExampleView/LabelExampleView';
-import {Label} from '../Label';
-
-import * as LabelStories from './Label.new.stories';
-
-
-
-# Label
-
-```ts
-import {Label} from '@gravity-ui/uikit';
-```
-
-[Description](#description)
-
-[Appearance](#appearance)
-
-- [Theme](#theme)
-- [Type](#type)
-- [Icon](#icon)
-
-[Label value](#label-value)
-
-[States](#states)
-
-[Size](#size)
-
-[Properties](#properties)
-
-## Description
-
-Label component can be used for display some marking information. Label with close button or copy button may be usefull for for various simple actions.
-
-Label component is best designed to display one line text information with different color indication of its importance.
-
-## Appearance
-
-Label can be displayed with multiple styled combination
-
-- theme (`normal`, `info`, `danger`, `warning`, `success`, `unknown`, `clear`)
-- type (`default`, `copy`, `close`)
-
-### Theme
-
-Used for specify theme of the label. Info, Warning, Danger and Success are standard types for display varios statuses.
-
-
-
-
-### Type
-
-Used for add close or copy button after label for user interaction. Button of copy type automatically copy `copyText` property value to clipboard.
-
-
-
-
-### Icon
-
-Used for add prefix icon for the label, works combined with all other properties.
-
-
-
-
-## Label value
-
-Label with value property for display key-value pairs. Can be useful for display object properties or tags.
-
-
-
-
-## States
-
-
-
-
-1. Default – The main state of a label without interactive.
-2. Disabled – The state when a label is indicated some property in unavailable.
-3. Interactive – The state of a label with hover effect.
-
-## Size
-
-
-
-
-XS – Used for small labels with simple to highlight a some small attribute.
-
-S – Basic size, used in most components.
-
-M – Used when standard labels are too small.
-
-## Properties
-
-
diff --git a/src/components/Label/__stories__/examples/LabelExampleView/LabelExampleView.tsx b/src/components/Label/__stories__/examples/LabelExampleView/LabelExampleView.tsx
deleted file mode 100644
index 5af7f82a94..0000000000
--- a/src/components/Label/__stories__/examples/LabelExampleView/LabelExampleView.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-
-import {Gear} from '@gravity-ui/icons';
-import {Unstyled} from '@storybook/blocks';
-
-import {Label} from '../../..';
-import {DocsExample} from '../../../../../demo/DocsExample/DocsExample';
-import {Icon} from '../../../../Icon';
-
-export function LabelExampleViewTheme() {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-LabelExampleViewTheme.code = `
-
-
-
-
-
-
-
-`.trim();
-
-export function LabelExampleViewType() {
- return (
-
-
-
-
-
-
-
- );
-}
-LabelExampleViewType.code = `
-
-
-
-`.trim();
-
-export function LabelExampleViewIcon() {
- return (
-
-
- }>
- Default with Icon
-
- }>
- Info with icon
-
- }>
- Close action and icon
-
- }>
- M-size icon
-
-
-
- );
-}
-LabelExampleViewIcon.code = `
-}>Default with icon
-}>Info with icon
-}>Close action and icon
-}>M-size icon
-`.trim();
-
-export function LabelExampleValue() {
- return (
-
-
-
-
-
-
-
- );
-}
-LabelExampleValue.code = `
-
-
-
-`.trim();
-
-export function LabelExampleState() {
- return (
-
-
-
-
-
-
-
- );
-}
-LabelExampleState.code = `
-
-
-
-`.trim();
-
-export function LabelExampleSize() {
- return (
-
-
-
-
-
-
-
- );
-}
-LabelExampleSize.code = `
-
-
-
-`.trim();
diff --git a/src/components/Link/__stories__/Docs.mdx b/src/components/Link/__stories__/Docs.mdx
new file mode 100644
index 0000000000..e6ea3e28fe
--- /dev/null
+++ b/src/components/Link/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Link.stories';
+import Readme from '../README.md?raw';
+
+
+
+{Readme}
diff --git a/src/components/Link/__stories__/Link.mdx b/src/components/Link/__stories__/Link.mdx
deleted file mode 100644
index 654ada235a..0000000000
--- a/src/components/Link/__stories__/Link.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
-import {Meta, ArgsTable} from '@storybook/addon-docs';
-import {DocsSource} from '../../../demo/DocsSource/DocsSource';
-import {
- LinkExampleViewNormal,
- LinkExampleViewPrimary,
- LinkExampleViewSecondary,
- LinkExampleHref,
- LinkExampleVisitable,
- LinkExampleUsage,
-} from './examples/LinkExampleView/LinkExampleView';
-import {Link} from '../Link';
-import * as LinkStories from './Link.new.stories';
-
-
-
-
-# Link
-
-```ts
-import {Link} from '@gravity-ui/uikit';
-```
-
-[Description](#description)
-
-[Appearance](#appearance)
-
-- [Normal](#normal)
-- [Primary](#primary)
-- [Secondary](#secondary)
-- [Visitable](#visitable)
-
-[Href](#href)
-
-[Usage](#usage)
-
-## Description
-Link - is a part of the text, that, when clicked, takes the user to another part of the page, another page inside the service, or to a page of another external service.
-
-The main difference from the [Buttons](/docs/components-button) is the navigation function. Links more often lead to other pages or open new browser tabs.
-
-## Appearance
-There can be three types: `normal`(the usual brown), `primary`(black), `secondary`(gray). it is controlled by the `view` property. It is also possible to display visited state using the `visitable` property.
-
-### Normal
-The most familiar and well-established pattern of use for users. It is used to visually highlight an element inside a text, table, and as part of navigation. It is used to navigate to pages inside the service and to external sources, including documentation. Also, they are used on error pages and zero states.
-
-
-
-
-### Primary
-They are used when it is natively clear to the user that it is possible to interact with an element, but visually using blue links will overload the interface and disrupt the balance of accents on the page.
-
-
-
-
-### Secondary
-Like primary links, they are used when it is natively clear to the user that an element can be interacted with, and the need to navigate through them is secondary and affects a small number of scenarios. The main task is not to argue with the accents on the page. It is more often used in bread crumbs or when displaying secondary attributes.
-
-
-
-
-### Visitable
-Used to show that the link has already been visited.
-
-
-
-
-## Href
-`href` property is optional. If it is absent, then Link wil act like Button.
-
-
-
-## Usage
-Сan be used as an independent text element, or as part of the text
-
-
-
-## Properties
-
diff --git a/src/components/Link/__stories__/examples/LinkExampleView/LinkExampleView.tsx b/src/components/Link/__stories__/examples/LinkExampleView/LinkExampleView.tsx
deleted file mode 100644
index d64c720b30..0000000000
--- a/src/components/Link/__stories__/examples/LinkExampleView/LinkExampleView.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-
-import {Link} from '../../..';
-import {DocsExample} from '../../../../../demo/DocsExample/DocsExample';
-import {Text} from '../../../../Text';
-
-export function LinkExampleViewNormal() {
- return (
-
-
- Link
-
-
- );
-}
-LinkExampleViewNormal.code = `
-
- Link
-
-`.trim();
-
-export function LinkExampleViewPrimary() {
- return (
-
-
- Link
-
-
- );
-}
-LinkExampleViewPrimary.code = `
-
- Link
-
-`.trim();
-
-export function LinkExampleViewSecondary() {
- return (
-
-
- Link
-
-
- );
-}
-LinkExampleViewSecondary.code = `
-
- Link
-
-`.trim();
-
-export function LinkExampleVisitable() {
- return (
-
-
- Visitable link
-
-
- Non visitable link
-
-
- );
-}
-LinkExampleVisitable.code = `
-Visitable link
-Non visitable link
-`.trim();
-
-export function LinkExampleHref() {
- return (
-
- Link with href
- Link without href
-
- );
-}
-LinkExampleHref.code = `
-Link with href
-Link without href
-`.trim();
-
-export function LinkExampleUsage() {
- return (
-
-
-
- what roles are active in the service
-
-
-
-
- Currently, this role can only be assigned to a folder or{' '}
- cloud
-
-
-
- );
-}
-LinkExampleUsage.code = `
-
- what roles are active in the service
-
-
- Currently, this role can only be assigned to a folder or cloud
-
-`.trim();
diff --git a/src/components/List/README_OLD.md b/src/components/List/README_OLD.md
deleted file mode 100644
index 303651cda4..0000000000
--- a/src/components/List/README_OLD.md
+++ /dev/null
@@ -1,112 +0,0 @@
-## List
-
-Universal list.
-
-Lets you filter and sort items, render items of different height, and select them using the keyboard.
-
-### PropTypes
-
-| Name | Type | Required | Default | Description |
-| :---------------- | :---------------- | :------: | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [items](#items) | `Array` | yes | [] | List of items. |
-| itemHeight | `Number/Function` | | 28 | Item height in `px` (or a function that returns the height value for an item). `(item: any) => number` |
-| itemsHeight | `Number/Function` | | | Item list height (or a function that returns the height value for a list). It can be helpful when setting the list height dynamically. `(items: []) => number` |
-| renderItem | `Function` | | | Render function with an item received as an input and a React node returned. `(item: any, isItemActive: bool, itemIndex: number) => React.ReactNode` |
-| filterItem | `Function` | | | Filtering function that receives a specified string as a search/filter input and returns a function that receives an item as an input and outputs boolean `(filter: string) => (item: any) => boolean` |
-| filterable | `Boolean` | | true | Flag that enables a filter field. |
-| filterPlaceholder | `String` | | | Placeholder for a filter field. |
-| filter | `String` | | | Filter value (if external sorting is used). |
-| filterClassName | `String` | | | Class for filter input styles |
-| onChangeFilter | `Function` | | | Filter change handler (if external sorting is used). `(filter: string) => void` |
-| onFilterEnd | `Function` | | | Function invoked after internal filtering is completed. `({items}: {items: T[]}) => void` |
-| emptyPlaceholder | `String` | | | Placeholder for an empty list. |
-| sortable | `Boolean` | | | Flag that enables list sorting. |
-| sortHandleAlign | `left` `right` | | | Sorting indicator alignment (left or right). |
-| onSortEnd | `Function` | | | Sorting event handler. `({oldIndex: number, newIndex: number}) => void` |
-| virtualized | `Boolean` | | true | Flag that enables virtualization. If not active, all items are rendered at once. |
-| onItemClick | `Function` | | | Item click handler. `(item: any, index: number, fromKeyboard?: bool) => void` |
-| deactivateOnLeave | `Boolean` | | true | If the flag is set, an item's selection is deactivated once the cursor leaves the item or the list loses its focus. If not set, the last selected item will always be selected. |
-| activeItemIndex | `Number` | | | If a value is set, an item with this index is rendered as active ~~until the curse is lifted~~. |
-| selectedItemIndex | `Number` | | | If a value is set, an item with this index is rendered as selected (the background color is from `--g-color-base-selection`). |
-| itemClassName | `String` | | | Custom class name to be added to an item container |
-| itemsClassName | `String` | | | Custom class name to be added to an item list |
-
-### Virtualization
-
-To enable virtualization, make sure one of the following two conditions is met:
-
-1. The `--yc-list-height` variable value is set. In this case, the list height will be fixed and equal to the value specified in this variable.
-2. Set the `display: flex` style for the list parent container. In this case, the list will adapt to the container width.
-
-### Items
-
-An item can be a scalar or an arbitrary value (anyway, it must be `truly`).
-If the latter, be sure to specify filtering and rendering functions.
-The default render just passes an item as text.
-
-The special `item.disabled` field disables an item.
-
-Render and height customization provides plenty of room for experimenting.
-For example, the code below lets you emulate groups:
-
-```jsx harmony
- console.log(value)}
- renderItem={(item) => {
- if (item.group) {
- return (
-
-
{item.title}
-
- );
- }
- return (
-
-
{item.title}
-
- );
- }}
- itemHeight={(item) => (item.group ? 24 : 36)}
- filterItem={(filter) => (item) => item.title.includes(filter)}
-/>
-```
-
-### External management
-
-Sometimes you may want to manage the activity of items from the keyboard by maintaining the focus on an external item.
-The `onKeyDown` event forwarding to a list may help you here:
-
-```jsx harmony
- this.firstListRef.current.onKeyDown(...props)}
-/>
-
-```
-
-Likewise, you can forward `onFocus` and `onBlur` if you need to repeat the behavior when an active item is lost.
diff --git a/src/demo/StoryLayout/StoryLayout.scss b/src/demo/StoryLayout/StoryLayout.scss
new file mode 100644
index 0000000000..3904d117c7
--- /dev/null
+++ b/src/demo/StoryLayout/StoryLayout.scss
@@ -0,0 +1,5 @@
+.story-layout {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
diff --git a/src/demo/StoryLayout/StoryLayout.tsx b/src/demo/StoryLayout/StoryLayout.tsx
new file mode 100644
index 0000000000..6f35f98d4b
--- /dev/null
+++ b/src/demo/StoryLayout/StoryLayout.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {cn} from '../../components/utils/cn';
+
+import './StoryLayout.scss';
+
+export interface StoryLayoutProps extends React.PropsWithChildren {}
+
+const b = cn('story-layout');
+
+export function StoryLayout({children}: StoryLayoutProps) {
+ return (
+