@skbkontur/react-ui 5.1.3 → 5.1.5

package/cjs/components/Kebab/Kebab.md

@@ -1,8 +1,8 @@
 ### Базовый пример
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { Gapped, MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
@@ -22,10 +22,10 @@ let Card = ({ name, post }) => (
     </div>
 
     <Kebab size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -47,8 +47,8 @@ let Card = ({ name, post }) => (
 ### Размер
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { Gapped, MenuItem, Toast} from '@skbkontur/react-ui';
 
 let style = {
@@ -67,10 +67,10 @@ let Card = ({ title, size }) => (
     </div>
 
     <Kebab size={size}>
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -87,8 +87,8 @@ let Card = ({ title, size }) => (
 ### Кебаб-меню с выпадашкой слева
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
@@ -108,10 +108,10 @@ let Card = ({ title }) => (
     </div>
 
     <Kebab positions={['left middle']} size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -124,8 +124,8 @@ let Card = ({ title }) => (
 ### Кастомное действие при открытии
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
@@ -147,10 +147,10 @@ let Card = ({ title }) => (
       onOpen={() => Toast.push('Кебаб-меню открылось!')}
       size="large"
       >
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -164,12 +164,12 @@ let Card = ({ title }) => (
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
 
 <Kebab>
   <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
-  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
   <MenuItem>MenuItem3</MenuItem>
 </Kebab>;
 ```
@@ -178,12 +178,12 @@ import OkIcon from '@skbkontur/react-icons/Ok';
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
 
 <Kebab preventIconsOffset>
   <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
-  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
   <MenuItem>MenuItem3</MenuItem>
 </Kebab>
 ```
@@ -191,8 +191,8 @@ import OkIcon from '@skbkontur/react-icons/Ok';
 ### Отключенное кебаб-меню
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
@@ -211,10 +211,10 @@ let Card = ({ title }) => (
     </div>
 
     <Kebab disabled size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -227,8 +227,8 @@ let Card = ({ title }) => (
 ### Отключенная анимация
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
@@ -247,10 +247,10 @@ let Card = ({ title }) => (
     </div>
 
     <Kebab disableAnimations size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+      <MenuItem icon={<ToolPencilLineIcon16Regular />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+      <MenuItem icon={<TrashCanIcon16Regular />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -263,8 +263,8 @@ let Card = ({ title }) => (
 ### Высота
 
 ```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
+import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
+import { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';
 import { MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {

package/cjs/components/Kebab/__docs__/Kebab.mdx

@@ -1,14 +1,16 @@
 import * as KebabStories from './Kebab.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={KebabStories} />
 
-# Kebab
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/kebab-menu/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A2540)
+<Header
+  component="Kebab"
+  guides="https://guides.kontur.ru/components/actions/kebab-menu/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A2540"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/Link/__docs__/Link.mdx

@@ -1,14 +1,16 @@
 import * as LinkStories from './Link.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={LinkStories} />
 
-# Link
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/hyperlink/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?type=design&node-id=953%3A23703&mode=design&t=os7wLLJCaKzU1UFM-1)
+<Header
+  component="Link"
+  guides="https://guides.kontur.ru/components/actions/hyperlink/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?type=design&node-id=953%3A23703&mode=design&t=os7wLLJCaKzU1UFM-1"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/Loader/__docs__/Loader.mdx

@@ -1,12 +1,12 @@
 import * as LoaderStories from './Loader.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={LoaderStories} />
 
-# Loader
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/progress-indicators/spinner/)
+<Header component="Loader" guides="https://guides.kontur.ru/components/progress-indicators/spinner/" />
 
 <Description />
 
@@ -16,10 +16,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MaskedInput/__docs__/MaskedInput.mdx

@@ -1,14 +1,16 @@
 import * as MaskedInputStories from './MaskedInput.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MaskedInputStories} />
 
-# MaskedInput
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/input/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602)
+<Header
+  component="MaskedInput"
+  guides="https://guides.kontur.ru/components/input-fields/input/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MenuFooter/__docs__/MenuFooter.mdx

@@ -1,10 +1,12 @@
 import * as MenuFooterStories from './MenuFooter.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MenuFooterStories} />
 
-# MenuFooter
+<Header component="MenuFooter" />
 
 <Description />
 
@@ -14,10 +16,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MenuHeader/__docs__/MenuHeader.mdx

@@ -1,10 +1,12 @@
 import * as MenuHeaderStories from './MenuHeader.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MenuHeaderStories} />
 
-# MenuHeader
+<Header component="MenuHeader" />
 
 <Description />
 
@@ -14,10 +16,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MenuItem/MenuItem.md

@@ -65,23 +65,23 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-import DeviceSmartphoneIcon from '@skbkontur/react-icons/DeviceSmartphone';
-import OkIcon from '@skbkontur/react-icons/Ok';
-import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
+import { TechPhoneSmartIcon16Regular } from '@skbkontur/icons/icons/TechPhoneSmartIcon/TechPhoneSmartIcon16Regular';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+import { HandThumbDownIcon16Regular } from '@skbkontur/icons/icons/HandThumbDownIcon/HandThumbDownIcon16Regular';
 
 
 <DropdownMenu
   caption={<Button use="primary">Открыть меню с иконками</Button>}
   >
-  <MenuItem icon={<OkIcon />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>Базовый элемент меню c иконкой</MenuItem>
   <MenuItem
     disabled
-    icon={<ThumbDownIcon />}
+    icon={<HandThumbDownIcon16Regular />}
     >
     Отключённый элемент меню с иконкой
   </MenuItem>
   <MenuItem
-    icon={<DeviceSmartphoneIcon />}
+    icon={<TechPhoneSmartIcon16Regular />}
     comment="А слева вы можете видеть икону 21-го века"
     >
      Элемент меню с описанием и иконкой

package/cjs/components/MenuItem/__docs__/MenuItem.mdx

@@ -1,10 +1,12 @@
 import * as MenuItemStories from './MenuItem.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MenuItemStories} />
 
-# MenuItem
+<Header component="MenuItem" />
 
 <Description />
 
@@ -14,10 +16,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MenuSeparator/__docs__/MenuSeparator.mdx

@@ -1,10 +1,12 @@
 import * as MenuSeparatorStories from './MenuSeparator.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MenuSeparatorStories} />
 
-# MenuSeparator
+<Header component="MenuSeparator" />
 
 <Description />
 
@@ -14,10 +16,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/MiniModal/__docs__/MiniModal.mdx

@@ -1,14 +1,16 @@
 import * as MiniModalStories from './MiniModal.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={MiniModalStories} />
 
-# MiniModal
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/modal/#Mini-modalka)
-
-[Компонент в Figma](https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=21689-33399&t=agVpD90pHKOeCgsR-4)
+<Header
+  component="MiniModal"
+  guides="https://guides.kontur.ru/components/popup-elements/modal/#Mini-modalka"
+  figma="https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=21689-33399&t=agVpD90pHKOeCgsR-4"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/Modal/__docs__/Modal.mdx

@@ -1,14 +1,16 @@
 import * as ModalStories from './Modal.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={ModalStories} />
 
-# Modal
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/modal/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A11142)
+<Header
+  component="Modal"
+  guides="https://guides.kontur.ru/components/popup-elements/modal/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A11142"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/Paging/__docs__/Paging.mdx

@@ -1,14 +1,16 @@
 import * as PagingStories from './Paging.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={PagingStories} />
 
-# Paging
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/navigation/paging/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18146)
+<Header
+  component="Paging"
+  guides="https://guides.kontur.ru/components/navigation/paging/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18146"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/PasswordInput/__docs__/PasswordInput.mdx

@@ -1,14 +1,16 @@
 import * as PasswordInputStories from './PasswordInput.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={PasswordInputStories} />
 
-# PasswordInput
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/password/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602)
+<Header
+  component="PasswordInput"
+  guides="https://guides.kontur.ru/components/input-fields/password/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования
 

package/cjs/components/Radio/__docs__/Radio.mdx

@@ -1,14 +1,16 @@
 import * as RadioStories from './Radio.docs.stories.tsx';
 import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
 import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
 
 <Meta of={RadioStories} />
 
-# Radio
-
-[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/selection-elements/radio/)
-
-[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A2669)
+<Header
+  component="Radio"
+  guides="https://guides.kontur.ru/components/selection-elements/radio/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A2669"
+/>
 
 <Description />
 
@@ -18,10 +20,7 @@ import { Meta } from '../../../.storybook/Meta';
 
 ## Пропы
 
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
+<PropsTable />
 
 ## Примеры использования