@sberbusiness/triplex-next-mcp-server 0.24.0-beta2 → 0.36.0-beta0

package/bundle/components/ButtonIcon.md

@@ -1,8 +1,6 @@
 ---
 component: ButtonIcon
 category: Buttons
-figma-node: ""
-figma-file: ""
 related: [Button]
 tokens:
   - --triplex-next-Button-Icon_Shadow_Focus
@@ -17,19 +15,7 @@ version: "1.0"
 Кнопка только с иконкой без текстового контента. Используется как компактный trigger для локальных действий (например, открыть меню, удалить, закрыть).
 
 Используй когда: действие можно однозначно распознать по иконке и есть корректный `aria-label`.
-Не используй когда: нужен текстовый CTA или несколько визуальных тем с размерами как у `Button` - используй `Button`.
-
----
-
-## Файловая структура
-
-```text
-src/components/Button/
-├── ButtonIcon.tsx                     # Компонент (forwardRef, native button)
-├── enums.ts                           # EButtonIconShape (SQUIRCLE / CIRCLE)
-└── styles/
-    └── ButtonIcon.module.less         # Геометрия, focus-visible, базовые состояния
-```
+Не используй когда: нужен текстовый CTA или несколько визуальных тем с размерами как у `Button` — используй `Button`.
 
 ---
 
@@ -51,29 +37,8 @@ src/components/Button/
 ### Ограничения использования
 
 - Размер `ButtonIcon` задаётся размером переданной иконки; у компонента нет собственного prop `size`.
-- Корневой DOM-элемент всегда `button`, `type` по умолчанию принудительно установлен в `button`.
-
----
-
-## Ключевые особенности реализации
-
-### Маппинг формы через enum
-
-- `shape` маппится в CSS-класс через `Record<EButtonIconShape, string>`.
-- При расширении `EButtonIconShape` нужно добавить класс в маппинг и в `ButtonIcon.module.less`.
-
-### Визуальные состояния
-
-- `active` и `disabled` добавляются как глобальные CSS-классы (`active`, `disabled`) для совместимости с иконками.
-- Дополнительно всегда добавляется класс `hoverable`.
-
----
-
-## Accessibility
-
-- Компонент рендерит нативный `<button>`, поэтому базовая keyboard-навигация доступна из коробки.
-- Компонент **не хардкодит** `aria-label` (библиотека мультиязычная). Для иконки без текста потребитель обязан передать `aria-label` через `...rest`.
-- Фокусное состояние реализовано через `:focus-visible` и токен `--triplex-next-Button-Icon_Shadow_Focus`.
+- Корневой DOM-элемент всегда `<button>`, `type` по умолчанию принудительно установлен в `button`.
+- При расширении `EButtonIconShape` необходимо добавить класс в маппинг `Record<EButtonIconShape, string>` и в `ButtonIcon.module.less`.
 
 ---
 
@@ -94,16 +59,24 @@ src/components/Button/
 
 ---
 
+## Accessibility
+
+- Компонент рендерит нативный `<button>`, поэтому базовая keyboard-навигация доступна из коробки.
+- Компонент **не хардкодит** `aria-label` (библиотека мультиязычная). Для иконки без текста потребитель **обязан** передать `aria-label` через `...rest`.
+- Фокусное состояние реализовано через `:focus-visible` и токен `--triplex-next-Button-Icon_Shadow_Focus`.
+
+---
+
 ## Связанные компоненты
 
-- `Button` (`src/components/Button/Button.tsx`) - текстовая/универсальная кнопка, используемая вместо `ButtonIcon` когда нужен label.
-- `ButtonDropdown` (`src/components/Button/ButtonDropdown.tsx`) - использует иконочный паттерн для dots-варианта trigger.
+- `Button` (`src/components/Button/Button.tsx`) — текстовая/универсальная кнопка, используемая вместо `ButtonIcon` когда нужен label.
+- `ButtonDropdown` (`src/components/Button/ButtonDropdown.tsx`) — использует иконочный паттерн для dots-варианта trigger.
 
 ---
 
 ## Stories
 
-`stories/Buttons/ButtonIcon.stories.tsx`
+Основные истории: `stories/Buttons/ButtonIcon.stories.tsx`
 Файлы примеров: `stories/Buttons/examples/ButtonIcon/`
 
 | Story | Example file | Что демонстрирует |
@@ -111,7 +84,7 @@ src/components/Button/
 | `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `shape`, `active`, `disabled` |
 | `Default` | `DefaultExample.tsx` | Базовый сценарий использования |
 | `Sizes` | `SizesExample.tsx` | Разные размеры через размер иконки (16/20/24/32) |
-| `Disabled` | `DisabledExample.tsx` | Неактивное состояние |
+| `States` | `StatesExample.tsx` | Состояния `active` и `disabled` |
 
 ---
 
@@ -120,6 +93,8 @@ src/components/Button/
 | Дата | Изменение |
 |---|---|
 | 2026-04-15 | Создан документ AI-ready для `ButtonIcon`. |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убрана секция «Файловая структура», содержимое «Ключевых особенностей реализации» перенесено в `Ограничения использования`, добавлена колонка `Example file`. |
+| 2026-07-08 | Актуализирована таблица Stories: story `Disabled` заменена на `States` (`StatesExample.tsx`). |
 
 ---
 
@@ -173,19 +148,31 @@ export const SizesExample = () => (
 );
 ```
 
-### Disabled
+### States
 
-`stories/Buttons/examples/ButtonIcon/DisabledExample.tsx`
+`stories/Buttons/examples/ButtonIcon/StatesExample.tsx`
 
 ```tsx
 import React from "react";
 import { DefaulticonStrokePrdIcon32 } from "@sberbusiness/icons-next";
 import { ButtonIcon, EButtonIconShape } from "@sberbusiness/triplex-next";
 
-export const DisabledExample = () => (
-    <ButtonIcon shape={EButtonIconShape.SQUIRCLE} disabled>
-        <DefaulticonStrokePrdIcon32 paletteIndex={5} />
-    </ButtonIcon>
+export const StatesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "start", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>Active</div>
+            <ButtonIcon shape={EButtonIconShape.SQUIRCLE} active>
+                <DefaulticonStrokePrdIcon32 paletteIndex={5} />
+            </ButtonIcon>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "start", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>Disabled</div>
+            <ButtonIcon shape={EButtonIconShape.SQUIRCLE} disabled>
+                <DefaulticonStrokePrdIcon32 paletteIndex={5} />
+            </ButtonIcon>
+        </div>
+    </div>
 );
 ```
 

package/bundle/components/Checkbox.md

@@ -1,8 +1,6 @@
 ---
 component: Checkbox
 category: Inputs
-figma-node: ""
-figma-file: ""
 related: [CheckboxXGroup, CheckboxYGroup, CheckboxTree, CheckboxTreeExtended]
 tokens:
   - --triplex-next-Checkbox-Background_Default
@@ -26,7 +24,8 @@ version: "1.0"
 # Checkbox
 
 ## Назначение
-Нативный чекбокс в обертке `<label>`, который поддерживает визуальные состояния (default/checked/disabled/focus) и режим частичного выбора через `bulk`.
+
+Нативный чекбокс в обёртке `<label>`, который поддерживает визуальные состояния (default / checked / disabled / focus) и режим частичного выбора через `bulk`.
 
 Используй когда: нужен чекбокс с текстовой подписью (`children`) и стандартным поведением `<input type="checkbox">`.
 Не используй когда: нужен сложный многошаговый выбор или компонент с нестандартной семантикой (тогда лучше другой control).
@@ -34,95 +33,95 @@ version: "1.0"
 ---
 
 ## Варианты и props
+
+### Обязательные props
+
+Обязательных custom-props нет.
+
 ### Опциональные props
+
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
 | `checked` | `boolean` | — | Состояние чекбокса (controlled). Передаётся через стандартные props `<input>`. |
 | `defaultChecked` | `boolean` | — | Состояние чекбокса (uncontrolled). Передаётся через стандартные props `<input>`. |
 | `disabled` | `boolean` | `false` | Блокирует взаимодействие и меняет визуальное состояние. |
-| `bulk` | `boolean` | `false` | Влияет на отображаемую иконку (используется bulk-иконка), при этом видимость checkmark всё равно определяется состоянием `checked`. |
+| `bulk` | `boolean` | `false` | Влияет на отображаемую иконку (используется bulk-иконка). Видимость checkmark всё равно определяется состоянием `checked`. |
 | `size` | `EComponentSize` | `EComponentSize.MD` | Размер: `SM` / `MD` / `LG`. |
 | `children` | `React.ReactNode` | — | Контент лейбла рядом с чекбоксом. Если `children` нет — класс `.nonempty` не применяется. |
 | `labelAttributes` | `React.LabelHTMLAttributes<HTMLLabelElement>` | — | Дополнительные HTML-атрибуты для корневого `<label>` (например, `className`, `onFocus`). |
-| `...inputAttributes` | `Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">` | — | Все стандартные атрибуты `<input type="checkbox">` (включая `name`, `onChange`, `aria-label` и т.д.). |
+| `...inputAttributes` | `Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" \| "size">` | — | Все стандартные атрибуты `<input type="checkbox">` (включая `name`, `onChange`, `aria-label` и т.д.). |
 
----
-
-## Ключевые особенности реализации
-### Ref forwarding
-`ref` прокидывается на внутренний `<input type="checkbox">`.
-
-### Иконка
-- `bulk=false` — отрисовывается обычная checkmark-иконка.
-- `bulk=true` — отрисовывается bulk-иконка.
+### Ограничения использования
 
-### Структура DOM
-Компонент рендерит:
-1. корневой `<label>`
-2. `<input type="checkbox">`
-3. декоративные `<span>`/`svg` для отрисовки фона и галочки
+- DOM-структура фиксирована: корневой `<label>` → `<input type="checkbox">` → декоративные `<span>` / `<svg>` для отрисовки фона и галочки.
+- `ref` прокидывается на внутренний `<input type="checkbox">`.
 
 ---
 
-## Accessibility
-Компонент использует нативный `<input type="checkbox">`, поэтому поддерживает стандартную клавиатурную навигацию (Tab + Space) и семантику формы.
+## Дизайн-токены
 
-Библиотека мультиязычная: текст `aria-label`/`title` не захардкожен в компоненте. При необходимости потребитель передаёт `aria-*` через `...inputAttributes`.
+```
+--triplex-next-Checkbox-Background_Default
+--triplex-next-Checkbox-BorderColor_Default
+--triplex-next-Checkbox-Checkmark_Fill_Default
+--triplex-next-Checkbox-Background_Hover
+--triplex-next-Checkbox-BorderColor_Hover
+--triplex-next-Checkbox-Background_Checked_Default
+--triplex-next-Checkbox-BorderColor_Checked_Default
+--triplex-next-Checkbox-Background_Disabled
+--triplex-next-Checkbox-BorderColor_Disabled
+--triplex-next-Checkbox-Background_Checked_Disabled
+--triplex-next-Checkbox-BorderColor_Checked_Disabled
+--triplex-next-Checkbox-Checkmark_Fill_Disabled
+--triplex-next-Checkbox-BorderColor_Focus
+--triplex-next-Checkbox-Background_Checked_Hover
+```
 
 ---
 
 ## Инварианты
+
 - `forwardRef` на компоненте обязателен и должен указывать на `<input>`.
 - Корневой DOM-элемент компонента — `<label>`, внутри которого находится `<input>`.
 - `className` и `size` — публичные части внешнего контрактного API: не менять семантику без согласования.
 
 ---
 
-## Дизайн-токены
-Компонент использует CSS-переменные:
-`--triplex-next-Checkbox-Background_Default`,
-`--triplex-next-Checkbox-BorderColor_Default`,
-`--triplex-next-Checkbox-Checkmark_Fill_Default`,
-`--triplex-next-Checkbox-Background_Hover`,
-`--triplex-next-Checkbox-BorderColor_Hover`,
-`--triplex-next-Checkbox-Background_Checked_Default`,
-`--triplex-next-Checkbox-BorderColor_Checked_Default`,
-`--triplex-next-Checkbox-Background_Disabled`,
-`--triplex-next-Checkbox-BorderColor_Disabled`,
-`--triplex-next-Checkbox-Background_Checked_Disabled`,
-`--triplex-next-Checkbox-BorderColor_Checked_Disabled`,
-`--triplex-next-Checkbox-Checkmark_Fill_Disabled`,
-`--triplex-next-Checkbox-BorderColor_Focus`,
-`--triplex-next-Checkbox-Background_Checked_Hover`.
+## Accessibility
+
+- Компонент использует нативный `<input type="checkbox">`, поэтому поддерживает стандартную клавиатурную навигацию (Tab + Space) и семантику формы.
+- Библиотека мультиязычная: текст `aria-label` / `title` не захардкожен в компоненте. При необходимости потребитель передаёт `aria-*` через `...inputAttributes`.
 
 ---
 
 ## Связанные компоненты
+
 - `CheckboxXGroup` — группировка чекбоксов по оси X.
 - `CheckboxYGroup` — группировка чекбоксов по оси Y.
-- `CheckboxTree` — декларативное дерево чекбоксов (обертка над `CheckboxTreeExtended`), поддерживает bulk-логику и распространение состояния checked по родителям/детям.
-- `CheckboxTreeExtended` — расширенное дерево чекбоксов на базе `CollapsableTree` с Node/Checkbox подкомпонентами (использует нативный `Checkbox` внутри для каждого узла).
+- `CheckboxTree` — декларативное дерево чекбоксов (обёртка над `CheckboxTreeExtended`), поддерживает bulk-логику и распространение состояния checked по родителям/детям.
+- `CheckboxTreeExtended` — расширенное дерево чекбоксов на базе `CollapsibleTreeExtended` с `Node` / `Checkbox` подкомпонентами (использует нативный `Checkbox` внутри для каждого узла).
 
 ---
 
 ## Stories
-`stories/Checkbox/Checkbox.stories.tsx`
+
+Основные истории: `stories/Checkbox/Checkbox.stories.tsx`
 Файлы примеров: `stories/Checkbox/examples/`
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
 | `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль основных props |
 | `Default` | `DefaultExample.tsx` | Минимальное использование |
-| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG |
-| `XGroup` | `XGroupExample.tsx` | Группа по оси X |
-| `YGroup` | `YGroupExample.tsx` | Группа по оси Y |
+| `Sizes` | `SizesExample.tsx` | Размеры `SM` / `MD` / `LG` |
 
 ---
 
 ## История изменений
+
 | Дата | Изменение |
 |---|---|
 | 2026-04-16 | Приведение `Checkbox` к AI-ready: соблюдены правила `docs/ai/codestyle.md`, добавлена AI-документация и unit-тест на передачу `className` корневому `label`. |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убрана секция «Ключевые особенности реализации» (содержимое перенесено в `Ограничения использования`), переставлены секции (Accessibility после Инвариантов), добавлена колонка `Example file`. |
 
 ---
 
@@ -158,81 +157,3 @@ export const SizesExample = () => (
 );
 ```
 
-### XGroup
-
-`stories/Checkbox/examples/XGroupExample.tsx`
-
-```tsx
-import React from "react";
-import { Checkbox, CheckboxXGroup, EComponentSize, Gap } from "@sberbusiness/triplex-next";
-
-export const XGroupExample = () => (
-    <>
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.SM}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={20}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.LG}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-    </>
-);
-```
-
-### YGroup
-
-`stories/Checkbox/examples/YGroupExample.tsx`
-
-```tsx
-import React from "react";
-import { Checkbox, CheckboxYGroup, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
-
-export const YGroupExample = () => (
-    <Row>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.SM}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.LG}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-    </Row>
-);
-```
-

package/bundle/components/CheckboxXGroup.md

@@ -1,109 +1,172 @@
 ---
 component: CheckboxXGroup
 category: Inputs
-figma-node: ""
-figma-file: ""
 related: [Checkbox]
 tokens: []
-stories: stories/Checkbox/Checkbox.stories.tsx
+stories: stories/CheckboxXGroup/CheckboxXGroup.stories.tsx
 version: "1.0"
 ---
 
 # CheckboxXGroup
 
 ## Назначение
-Компонент-группа для компоновки чекбоксов с направлением по оси `X`.
-Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их в строку с переносами.
+
+Компонент-группа для компоновки чекбоксов с направлением по оси `X`. Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их в строку с переносами.
+
+Используй когда: несколько связанных чекбоксов нужно разместить в строку.
+Не используй когда: чекбоксы должны идти вертикально — используй `CheckboxYGroup`.
 
 ---
 
 ## Варианты и props
+
+### Обязательные props
+
+Обязательных custom-props нет.
+
 ### Опциональные props
+
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
 | `indent` | `TIndentSize` | `12` | Отступы/зазоры между чекбоксами в группе. Возможные значения: `12, 16, 20, 24, 28, 32`. |
 | `children` | `React.ReactNode` | — | Внутри обычно рендерятся `Checkbox`. |
 | `...divAttributes` | `React.HTMLAttributes<HTMLDivElement>` | — | Все стандартные HTML-атрибуты для корневого элемента. |
 
----
+### Ограничения использования
 
-## Ключевые особенности реализации
-- Корневой элемент: `<div role="group">`.
-- Разметка: `inline-flex` и `flex-flow: row wrap`.
-- `indent` управляет применением LESS-класса `indent-{n}` и задает отрицательные/положительные маргины для выравнивания сетки.
+- Корневой элемент — `<div role="group">`, разметка построена на `inline-flex` и `flex-flow: row wrap`.
+- `indent` управляет применением LESS-класса `indent-{n}` и задаёт отрицательные/положительные маргины для выравнивания сетки.
 
 ---
 
-## Accessibility
-- `role="group"` описывает группу взаимосвязанных контролов.
-- Семантика чекбоксов остается нативной на уровне `Checkbox` внутри группы.
+## Дизайн-токены
+
+Компонент не использует собственных CSS-переменных. Все визуальные стили наследуются от `Checkbox`.
 
 ---
 
 ## Инварианты
+
 - `forwardRef` обязателен и должен указывать на корневой `<div>`.
 - Корневой DOM-элемент компонента — `<div>`, роль зафиксирована как `role="group"`.
 
 ---
 
+## Accessibility
+
+- `role="group"` описывает группу взаимосвязанных контролов.
+- Семантика чекбоксов остаётся нативной на уровне `Checkbox` внутри группы.
+
+---
+
 ## Связанные компоненты
+
 - `Checkbox` — базовый чекбокс, обычно используется внутри `CheckboxXGroup`.
+- `CheckboxYGroup` — аналогичная группа, но с направлением по оси `Y`.
 
 ---
 
 ## Stories
-`stories/Checkbox/Checkbox.stories.tsx`
-Файлы примеров: `stories/Checkbox/examples/`
+
+Основные истории: `stories/CheckboxXGroup/CheckboxXGroup.stories.tsx`
+Файлы примеров: `stories/CheckboxXGroup/examples/`
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `XGroup` | `XGroupExample.tsx` | Группа по оси X |
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `indent` |
+| `Default` | `DefaultExample.tsx` | Группа по оси X |
+| `CheckboxSizes` | `SizesExample.tsx` | Группа чекбоксов разных размеров |
+| `Indents` | `IndentsExample.tsx` | Различные значения отступа |
 
 ---
 
 ## История изменений
+
 | Дата | Изменение |
 |---|---|
 | 2026-04-16 | Приведение `CheckboxXGroup` к AI-ready: добавлен `forwardRef`, типизирован `children`, созданы AI-документ и инварианты. |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убрана секция «Ключевые особенности реализации» (содержимое перенесено в `Ограничения использования`), переставлены секции, добавлена колонка `Example file` и пустой раздел `Дизайн-токены`. |
 
 ---
 
 ## Примеры использования
 
-### XGroup
+### Default
+
+`stories/CheckboxXGroup/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <CheckboxXGroup>
+        {[1, 2, 3].map((value) => (
+            <Checkbox key={value} name="checkbox-x-group" value={value}>
+                Checkbox text
+            </Checkbox>
+        ))}
+    </CheckboxXGroup>
+);
+```
+
+### CheckboxSizes
+
+`stories/CheckboxXGroup/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const sizes = [
+    { label: "SM", size: EComponentSize.SM },
+    { label: "MD", size: EComponentSize.MD },
+    { label: "LG", size: EComponentSize.LG },
+] as const;
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {sizes.map(({ label, size }) => (
+            <div key={label}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{label}</div>
+                <CheckboxXGroup>
+                    {[1, 2, 3].map((value) => (
+                        <Checkbox key={value} name={`checkbox-x-group-${label}`} value={value} size={size}>
+                            Checkbox text
+                        </Checkbox>
+                    ))}
+                </CheckboxXGroup>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Indents
 
-`stories/Checkbox/examples/XGroupExample.tsx`
+`stories/CheckboxXGroup/examples/IndentsExample.tsx`
 
 ```tsx
 import React from "react";
-import { Checkbox, CheckboxXGroup, EComponentSize, Gap } from "@sberbusiness/triplex-next";
-
-export const XGroupExample = () => (
-    <>
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.SM}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={20}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.LG}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-    </>
+import { Checkbox, CheckboxXGroup } from "@sberbusiness/triplex-next";
+
+const indents = [12, 16, 20, 24, 28, 32] as const;
+
+export const IndentsExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {indents.map((indent) => (
+            <div key={indent}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{indent}px</div>
+                <CheckboxXGroup indent={indent}>
+                    {[1, 2, 3, 4].map((value) => (
+                        <Checkbox key={value} name={`checkbox-x-group-${indent}`} value={value}>
+                            Checkbox text
+                        </Checkbox>
+                    ))}
+                </CheckboxXGroup>
+            </div>
+        ))}
+    </div>
 );
 ```