@sberbusiness/triplex-next-mcp-server 0.36.0-beta0 → 1.40.0-beta

package/bundle/components/LightBox.md

@@ -1,13 +1,12 @@
 ---
 component: LightBox
-category: Overlays
-figma-node: ""
-figma-file: ""
-related: [ModalWindow, Overlay, TopOverlay, Portal, MobileView, FocusTrap]
+category: LightBox
+related: [Page, TopOverlay, Portal, FocusTrapExtended, LoaderScreen, Button, ModalWindow]
 tokens:
-  - --lightBox-screen-left
-  - --lightBox-screen-width
-  - --lightBox-screen-top
+  - --triplex-next-LightBox-Backdrop_Background
+  - --triplex-next-LightBox-Content_Background
+  - --triplex-next-LightBox-SideOverlay_Background
+  - --triplex-next-scroll-width
 stories: stories/LightBox/LightBox.stories.tsx
 version: "1.0"
 ---
@@ -16,307 +15,2327 @@ version: "1.0"
 
 ## Назначение
 
-Полноэкранный модальный контейнер (лайтбокс) — занимает всю область окна
-с backdrop'ом и focus-trap'ом. Composite: Header-controls + Content +
-левая/правая sidebar-панели + выезжающий справа SideOverlay + TopOverlay.
-Рассчитан на "иммерсивные" сценарии (просмотр документа, мастер настройки,
-workflow-редактор).
+Полноэкранный диалог поверх страницы для отображения крупного контента: просмотр документа,
+пошаговый сценарий, галерея. Рендерится через портал в отдельную DOM-ноду, блокирует скролл
+страницы, держит фокус внутри (focus trap). Составной компонент: контентная область
+(`LightBox.Content`), кнопки управления (`LightBox.Controls` — закрыть/назад/вперёд),
+боковые панели-сайдбары (`LightBox.LeftSidebar` / `LightBox.RightSidebar`), выезжающая справа
+панель (`LightBox.SideOverlay`) и верхняя панель (`LightBox.TopOverlay`).
 
-Используй когда: нужен полноэкранный режим с собственным scroll-container'ом,
-focus management и возможностью иметь вложенные overlay'и (sidebar,
-top-bar, боковая панель). Для стандартного диалога — `ModalWindow`.
+Используй когда: контенту нужен весь экран и собственный сценарий навигации (листание,
+вложенные панели).
+Не используй когда: достаточно компактного диалога с кнопками действий — возьми `ModalWindow`;
+нужна нотификация — возьми соответствующий компонент уведомлений.
 
----
-
-## Файловая структура
-
-```text
-src/components/LightBox/
-├── LightBox.tsx                      # Основной компонент + Object.assign
-├── LightBoxContent.tsx               # Скроллируемый контент, paddingTop = высота controls
-├── enums.ts                          # ELightBoxSize (SM/MD/LG/XL)
-├── index.ts                          # Barrel (+ re-export SideOverlay, enums)
-├── LightBoxControls/
-│   ├── LightBoxControls.tsx          # Container с data-lightbox-component="controls"
-│   ├── LightBoxClose.tsx
-│   ├── LightBoxNext.tsx
-│   └── LightBoxPrev.tsx
-├── LightBoxSidebars/
-│   ├── LightBoxLeftSidebar.tsx       # forwardRef, ResizeObserver, show/hide по minVisibleWidth
-│   └── LightBoxRightSidebar.tsx
-├── LightBoxSideOverlay/
-│   ├── LightBoxSideOverlay.tsx       # Выезжающая справа панель (Overlay direction=RIGHT)
-│   ├── LightBoxSideOverlayCloseDesktop.tsx
-│   ├── LightBoxSideOverlayCloseMobile.tsx
-│   ├── LightBoxSideOverlayLoader.tsx
-│   └── index.ts                      # Re-export SideOverlay
-├── LightBoxViewManager/
-│   ├── LightBoxViewManager.tsx       # Вычисляет CSS-переменные --lightBox-screen-*
-│   └── LightBoxViewManagerConsts.ts
-└── styles/
-    ├── LightBox.module.less
-    ├── LightBoxControls.module.less
-    └── LightBoxScroll.module.less
-```
+Внутрь `LightBox.Content` кладётся `Page` (Header/Body/Footer). Если контента мало —
+`Page.Body` типа `FIRST`; если много — тип `SECOND` с несколькими `Island` внутри.
 
 ---
 
-## Compound-структура
+## Варианты и props
 
-```tsx
-<LightBox size={ELightBoxSize.LG} isLoading={loading}>
-    <LightBox.Controls>
-        <LightBox.Controls.Prev onClick={...} />
-        <LightBox.Controls.Next onClick={...} />
-        <LightBox.Controls.Close onClick={onClose} />
-    </LightBox.Controls>
+### Размеры (`ELightBoxSize`)
 
-    <LightBox.LeftSidebar fixed onShow={...}>
-        {/* Левая панель — список разделов */}
-    </LightBox.LeftSidebar>
+Ограничивают максимальную ширину контентной области:
 
-    <LightBox.Content isLoading={contentLoading} loadingTitle="Загрузка…">
-        {/* Основной контент */}
-    </LightBox.Content>
+| Значение | Max-width контента |
+|---|---|
+| `SM` | 664px |
+| `MD` (по умолчанию) | 864px |
+| `LG` | 1064px |
+| `XL` | 1264px |
 
-    <LightBox.RightSidebar>{/* Правая панель */}</LightBox.RightSidebar>
+### Обязательные props (`LightBox`)
 
-    <LightBox.SideOverlay opened={sideOpen} onClose={...}>
-        {/* Выезжает справа */}
-    </LightBox.SideOverlay>
+| Prop | Тип | Описание |
+|---|---|---|
+| `children` | `React.ReactElement[]` | Массив элементов: `LightBox.Content` и опционально `LightBox.Controls`, сайдбары, оверлеи |
 
-    <LightBox.TopOverlay>{/* TopOverlay из components/TopOverlay */}</LightBox.TopOverlay>
-</LightBox>
-```
+### Опциональные props (`LightBox`)
 
-`LightBox.TopOverlay` — **реэкспорт внешнего** компонента `TopOverlay`,
-а не локальный. Это нужно учитывать при типизации.
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `size` | `ELightBoxSize` | `MD` | Максимальная ширина контента |
+| `isLoading` | `boolean` | — | Состояние загрузки: деактивирует focus trap; `LightBox.Content` показывает `LoaderScreen` |
+| `isSideOverlayOpened` | `boolean` | — | Флаг открытой боковой панели — добавляет модификатор на корневой элемент (блокирует скролл контента) |
+| `isTopOverlayOpened` | `boolean` | — | Флаг открытой верхней панели — аналогичный модификатор |
+| `focusTrapProps` | `IFocusTrapExtendedProps` | — | Переопределение настроек `FocusTrapExtended` |
+| `forwardRef` | `React.MutableRefObject<HTMLElement \| null>` | — | Ref на корневой контейнер (исторически — prop, а не `React.forwardRef`) |
+| `mountNode` | `HTMLDivElement` | нода `#LightBox-next-mount-node` (создаётся автоматически) | DOM-нода для портала |
+| `lightBoxViewManagerNodeId` | `string` | `LightBox-next-view-manager-node` | Id DOM-элемента, задающего левую/правую визуальные границы лайтбокса (split-mode). Известная особенность: если элемента с кастомным id нет в DOM, fallback-нода создаётся с дефолтным id |
+
+Открытие/закрытие управляется снаружи условным рендером: `{isOpen && <LightBox>...</LightBox>}` —
+собственного prop `opened` нет.
+
+### Ключевые props субкомпонентов
+
+- `LightBox.Content`: `isLoading`, `loaderScreenProps`; автоматически добавляет `padding-top`
+  на высоту `LightBox.Controls`.
+- `LightBox.Controls.Close`: `onClick` (обязателен), `title` (по умолчанию «Закрыть»);
+  срабатывает по Esc.
+- `LightBox.Controls.Prev` / `Next`: `onClick` (обязателен), `clickByArrowLeft` /
+  `clickByArrowRight` — клик по стрелкам клавиатуры, `dataTutorialId`.
+- `LightBox.LeftSidebar` / `RightSidebar`: `fixed` (фиксация панели), `minVisibleWidth`
+  (порог ширины в px, ниже которого содержимое скрывается; по умолчанию 100), `onShow`/`onHide`.
+  Отслеживают собственную ширину через `ResizeObserver`.
+- `LightBox.SideOverlay`: `opened` (управляется снаружи), `onOpen`/`onClose` (вызываются по
+  окончании CSS-анимации), `isLoading`, `isTopLevelSideOverlayOpened` (открыт другой SideOverlay
+  поверх), `isTopOverlayOpened`, `size` (`EComponentSize` SM/MD/LG),
+  субкомпоненты `SideOverlay.CloseDesktop` / `SideOverlay.CloseMobile`.
+- `LightBox.TopOverlay` — реэкспорт компонента `TopOverlay`.
 
 ---
 
-## Варианты и props
-
-### LightBox — `ILightBoxProps extends HTMLAttributes<HTMLDivElement>`
+## Дизайн-токены
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `children` | `ReactElement[]` | — | Обязателен как массив (не `ReactNode`). Компонент рендерит всех без перебора — дети статичные слоты. |
-| `size` | `ELightBoxSize` | `MD` | `SM`/`MD`/`LG`/`XL` — влияет на ширину контентной зоны. |
-| `focusTrapProps` | `FocusTrapProps` | — | Переопределение параметров `focus-trap-react`. |
-| `forwardRef` | `MutableRefObject<HTMLElement \| null>` | — | **Не `ref`**, а отдельный prop. Корневой компонент — не `forwardRef`. |
-| `mountNode` | `HTMLDivElement` | auto | Куда рендерить через Portal. По умолчанию — DOM-элемент `#LightBox-next-mount-node` (создаётся при первом монтировании). |
-| `lightBoxViewManagerNodeId` | `string` | `"LightBox-next-view-manager-node"` | DOM-элемент, по границам которого позиционируется LightBox (для кейса "LightBox не на весь экран"). |
-| `isLoading` | `boolean` | — | Показывает loader, блокирует FocusTrap. |
-| `isSideOverlayOpened` | `boolean` | — | Родитель контролирует — включает классы `.lightBoxSideOverlayActive` на корне. |
-| `isTopOverlayOpened` | `boolean` | — | Аналогично для TopOverlay. |
-
-### ELightBoxSize
-
-```ts
-enum ELightBoxSize { SM = "sm", MD = "md", LG = "lg", XL = "xl" }
+```css
+--triplex-next-LightBox-Backdrop_Background
+--triplex-next-LightBox-Content_Background
+--triplex-next-LightBox-SideOverlay_Background
+--triplex-next-scroll-width
 ```
 
-**Не `EComponentSize`** — собственный enum с дополнительным `XL`.
+`--triplex-next-scroll-width` — глобальная переменная ширины скроллбара, проставляется утилитой
+`addClassNameWithScrollbarWidth` при открытии лайтбокса. Ширины размеров (`664/864/1064/1264`)
+заданы LESS-константами `@lightBox-content-max-width-*`.
 
-### LightBox.Content — `ILightBoxContentProps`
-
-| Prop | Тип | Описание |
-|---|---|---|
-| `isLoading` | `boolean` | Накладывает `LoaderScreen` поверх контента. |
-| `loadingTitle` | `ReactNode` | Подпись под спиннером. |
+---
 
-- Внутри — свой scroll-контейнер. `paddingTop` **вычисляется рантайм** по высоте `data-lightbox-component="controls"` (querySelector — **не по ref**).
-- Слушает resize через `react-resize-detector` (debounce 100ms) и `WindowResizeListener`.
+## Инварианты
 
-### LightBox.LeftSidebar / RightSidebar — `forwardRef<HTMLDivElement>`
+- **Публичный API**: имена props `ILightBoxProps`, значения `ELightBoxSize`, компаундные ключи
+  `LightBox.Content` / `SideOverlay` / `TopOverlay` / `Controls` / `LeftSidebar` / `RightSidebar`
+  и `Controls.Close` / `Prev` / `Next` — не переименовывать.
+- **`forwardRef`-паттерн**: `LightBox` принимает ref через prop `forwardRef`
+  (`MutableRefObject`) — не менять на `React.forwardRef` (breaking change);
+  `LightBoxSideOverlay`, `LightBoxLeftSidebar`, `LightBoxRightSidebar` обёрнуты в
+  `React.forwardRef` — не убирать.
+- **Экспортируемые константы** `lightBoxMountNodeIdDefault` (`LightBox-next-mount-node`) и
+  `lightBoxViewManagerNodeIdDefault` (`LightBox-next-view-manager-node`) — часть публичного API.
+- **`data-lightbox-component="controls"`** на контейнере `LightBox.Controls` — по нему
+  `LightBox.Content` вычисляет `padding-top`. Не удалять.
+- **`data-test-id`** `lightBox-prev` / `lightBox-next` на кнопках стрелок — используются
+  автотестами потребителей.
+- **Глобальные классы** `global-LB-less-or-equal-media-point-0` / `global-LB-more-media-point-0`
+  (`LightBoxViewManagerConsts`) заменяют media query по ширине контейнера; связаны со стилями в
+  `src/styles/components/lightbox.less`.
+- Константы `LightBoxViewManagerConsts` (ширина стрелки 64, отступы 16/16, breakpoint 1024 +
+  ширина скроллбара) синхронизированы с LESS — менять только парой.
+- Пока смонтирован хотя бы один лайтбокс, на `document.documentElement` висит класс блокировки
+  скролла; ведётся счётчик смонтированных лайтбоксов — класс снимается при размонтировании
+  последнего (при переключении роутов второй лайтбокс может смонтироваться раньше, чем
+  размонтируется первый). Аналогичный счётчик в `LightBoxViewManager` управляет классами
+  mount-ноды (`LightBoxMountNodeViewManager`, `LB-*`).
+- Баррел `index.ts` реэкспортирует `LightBox`, `enums`, `LightBoxSideOverlay` — сохранять.
+- React 17 совместимость (синхронизация в release-0): React 18-only API не использовать.
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `fixed` | `boolean` | — | Закрепляет панель (не скроллится вместе с контентом). |
-| `minVisibleWidth` | `number` | `100` | Ширина (px), ниже которой контент панели скрывается классом `.hidden`. |
-| `onShow` / `onHide` | `() => void` | — | Callback'и при пересечении порога ширины. Хранятся в ref — замыкание на актуальное значение. |
+---
 
-Использует `ResizeObserver` на outer-элементе.
+## Accessibility
 
-### LightBox.SideOverlay — `ILightBoxSideOverlayProps`
+- Корневой элемент и `SideOverlay` — `role="dialog"` + `aria-modal="true"`.
+- **Focus trap** (`FocusTrapExtended`): активен, пока `isLoading` не установлен; у `SideOverlay` —
+  пока панель открыта и не анимируется. Начальный фокус — элемент с data-атрибутом
+  `FocusTrapUtils.firstInteractionElementDataAttr` (потребитель помечает его сам, например
+  заголовок с `tabIndex={-1}`).
+- **Клавиатура**: Esc — клик по `Controls.Close`; ArrowLeft / ArrowRight — клик по
+  `Controls.Prev` / `Controls.Next` при включённых `clickByArrowLeft` / `clickByArrowRight`.
+  При открытом `SideOverlay` клавиатурные триггеры контролов лайтбокса не активны
+  (рендерится вариант кнопок без триггера).
+- Кнопки `Controls.Close` имеют `data-exclude-modal-focus` — исключаются из начального фокуса
+  (у `Prev`/`Next` атрибута нет).
+- `title` у `Controls.Close` по умолчанию «Закрыть» — для других языков потребитель передаёт
+  свой `title`.
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `opened` | `boolean` | — | Управляемое состояние. |
-| `onClose` / `onOpen` | `() => void` | — | Срабатывают после завершения `transitionend` (не сразу при смене `opened`). |
-| `focusTrapProps` | `FocusTrapProps` | — | Собственный FocusTrap внутри LightBox'овского (вложенные trap'ы). |
-| `isLoading` | `boolean` | — | Показывает внутренний loader. |
-| `isTopLevelSideOverlayOpened` | `boolean` | — | Если сверху открыт ещё один overlay — отключить scroll в текущем. |
-| `isTopOverlayOpened` | `boolean` | — | Аналогично. |
-| `size` | `EComponentSize` | `MD` | Ширина панели. |
+---
 
-- Имеет подкомпоненты `.CloseDesktop` и `.CloseMobile` (две разных кнопки закрытия по вьюпорту).
-- Внутри — `OverlayBase direction={RIGHT}` + `OverlayMask` + `FocusTrap`.
-- Отслеживает `opening`/`closing` state'ы по `prevOpened` (useRef) — для анимированных переходов.
+## Связанные компоненты
 
-### LightBox.Controls — `ILightBoxControlsFC` (Object.assign)
+- `LightBoxContent` (`LightBoxContent.tsx`) — контентная область; следит за высотой контролов и шириной окна
+- `LightBoxControls` + `LightBoxClose` / `LightBoxPrev` / `LightBoxNext` (`LightBoxControls/`) — кнопки управления; стрелки построены на общем внутреннем `LightBoxArrow` (не экспортируется)
+- `LightBoxLeftSidebar` / `LightBoxRightSidebar` (`LightBoxSidebars/`) — сайдбары с автоскрытием содержимого по ширине (общий хук `useLightBoxSidebarVisibility`)
+- `LightBoxSideOverlay` (`LightBoxSideOverlay/`) — выезжающая справа панель с собственным focus trap, лоадером и кнопками закрытия CloseDesktop/CloseMobile
+- `LightBoxViewManager` (`LightBoxViewManager/`) — внутренний менеджер позиционирования: следит за границами view-manager-ноды, проставляет breakpoint-классы и CSS-переменные
+- `TopOverlay` (`src/components/TopOverlay`) — верхняя панель, реэкспортируется как `LightBox.TopOverlay`
+- `Page` (`src/components/Page`) — рекомендуемая структура содержимого `LightBox.Content`
+- `ModalWindow` — альтернатива для компактных диалогов
 
-Container с `data-lightbox-component="controls"` — **используется для вычисления paddingTop контента** (querySelector в LightBoxContent). Не менять атрибут.
+---
 
-Подкомпоненты: `.Close`, `.Next`, `.Prev`.
+## Stories
 
-### LightBox.TopOverlay
+Основные истории: `stories/LightBox/LightBox.stories.tsx`
+Файлы примеров: `stories/LightBox/examples/`
+Визуальная регрессия: `stories/LightBox/LightBoxInitialOpened.stories.tsx` (лайтбокс, открытый
+сразу при рендере — для скриншот-тестов; baseline в `__screenshots__/`).
 
-Реэкспорт `TopOverlay` из `../TopOverlay/TopOverlay`. Используй как `<LightBox.TopOverlay>` или `<TopOverlay>` — идентично.
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | — | Интерактивный контроль size / isLoading / контролы / sticky header и footer |
+| `Default` | `DefaultExample.tsx` | Базовая конфигурация с контролами и sticky-шапкой/футером |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG / XL |
+| `SmallContent` | `SmallContentExample.tsx` | Малый контент с `Page.Body` типа FIRST |
+| `SplitMode` | `SplitModeExample.tsx` | Позиционирование по границам кастомной view-manager-ноды |
+| `WithSidebars` | `WithSidebarsExample.tsx` | Левый и правый сайдбары |
+| `WithFixedSidebars` | `WithFixedSidebarsExample.tsx` | Фиксированные сайдбары (`fixed`) |
+| `WithOneSidebar` | `WithOneSidebarExample.tsx` | Только один сайдбар |
+| `WithSideOverlay` | `WithSideOverlayExample.tsx` | Боковая выезжающая панель |
+| `WithSideOverlayLoading` | `WithSideOverlayLoadingExample.tsx` | SideOverlay в состоянии загрузки |
+| `WithTopOverlay` | `WithTopOverlayExample.tsx` | Верхняя панель |
+| `WithTopOverlayInSideOverlay` | `WithTopOverlayInSideOverlayExample.tsx` | TopOverlay внутри SideOverlay |
+| `LightBoxInitialOpened/Default` | — | Visual regression: лайтбокс, открытый сразу при рендере (`LightBoxInitialOpened.stories.tsx`, baseline в `__screenshots__/`) |
 
 ---
 
-## Ключевые особенности реализации
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-07-22 | Создан документ (Phase 1 AI-Ready). В том же изменении — AI-рефакторинг: JSDoc на props, общий `LightBoxArrow` для Prev/Next, хук `useLightBoxSidebarVisibility` для сайдбаров, устранение eslint-подавлений; публичный API не менялся |
+| 2026-07-22 | Добавлен `export` к props-интерфейсам `ILightBoxControlsProps`, `ILightBoxCloseProps`, `ILightBoxPrevProps`, `ILightBoxNextProps`, `ILightBoxSideOverlayLoaderProps` (аддитивно, для консистентности с остальными интерфейсами компонента) |
+| 2026-07-22 | Багфиксы по ревью PR #474: клавиатурные триггеры контролов целятся в видимую кнопку (стрелки не работали на desktop, Esc — на mobile); таймер-хак блокировки скролла заменён счётчиком смонтированных лайтбоксов; `LightBoxViewManager` снимает классы mount-ноды при размонтировании последнего менеджера |
 
-### Два portal'а + ViewManager
+---
 
-```tsx
-<>
-    <Portal container={lightBoxMountNode.current}>{renderLightBox()}</Portal>
-    <LightBoxViewManager lightBoxViewManagerNode={...} lightBoxMountNode={...} />
-</>
-```
+## Примеры использования
 
-- **LightBox** рендерится в `#LightBox-next-mount-node` (обычно в body).
-- **ViewManager** рендерится в `#LightBox-next-view-manager-node` (по умолчанию в body, но потребитель может создать его в нужном контейнере) и **вычисляет CSS-переменные** `--lightBox-screen-left/width/top` через `<style>`-тег на mountNode.
-- Это позволяет LightBox'у "уменьшаться" до размеров конкретной области (например, если есть глобальный sidebar — LightBox не должен его перекрывать).
+### Default
 
-### `FocusTrap` + `MobileView` fallback
+`stories/LightBox/examples/DefaultExample.tsx`
 
 ```tsx
-<MobileView fallback={<FocusTrap ...>{renderLightBox()}</FocusTrap>}>
-    {renderLightBox()}
-</MobileView>
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+const DefaultExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Евгений Онегин
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+                        <LightBox.Controls.Prev
+                            title="Назад"
+                            clickByArrowLeft
+                            onClick={() => console.log("Prev clicked")}
+                        />
+                        <LightBox.Controls.Next
+                            title="Вперёд"
+                            clickByArrowRight
+                            onClick={() => console.log("Next clicked")}
+                        />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+export default DefaultExample;
 ```
 
-- На mobile (определяется `MobileView`) — **без focus trap'а** (нативный scroll/focus лучше работает без trap'а на мобильных).
-- На desktop — `FocusTrap` с `initialFocus = getFirstInteractionElementByDataAttr` из `FocusTrapUtils`.
-- `active={!isLoading}` — trap неактивен во время загрузки.
+### Sizes
 
-### Safari z-index hack
+`stories/LightBox/examples/SizesExample.tsx`
 
 ```tsx
-<span ref={tempButtonRef} className={styles.tempElSafariBug} />
-
-useEffect(() => {
-    if (!isSideOverlayOpened && tempButtonRef.current) {
-        const nextZIndex = Math.round(Math.random() * 100);
-        tempButtonRef.current.style.zIndex = nextZIndex.toString();
-    }
-}, [isSideOverlayOpened]);
+import React, { useState } from "react";
+import {
+    LightBox,
+    ELightBoxSize,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+const SIZES = Object.values(ELightBoxSize);
+
+export const SizesExample = () => {
+    const [openedSize, setOpenedSize] = useState<ELightBoxSize | null>(null);
+
+    const handleClose = () => setOpenedSize(null);
+
+    return (
+        <div>
+            <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+                {SIZES.map((size) => (
+                    <Button
+                        key={size}
+                        theme={EButtonTheme.SECONDARY}
+                        size={EComponentSize.MD}
+                        onClick={() => setOpenedSize(size)}
+                    >
+                        {size.toUpperCase()}
+                    </Button>
+                ))}
+            </div>
+
+            {openedSize !== null ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={false} size={openedSize}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            LightBox {openedSize.toUpperCase()}
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Размер контента: {openedSize.toUpperCase()}
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                <PoemBlock />
+                                <Gap size={16} />
+                                <PoemBlock />
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Controls>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.MD}
+                                            onClick={handleClose}
+                                        >
+                                            Закрыть
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
 ```
 
-- Невидимый `<span>`, у которого меняется `z-index` при закрытии SideOverlay — **принудительно вызывает repaint** в Safari. Баг-тикет `DCBSWT-2866`. Не трогать.
+### SmallContent
 
-### Scrollbar-width и body lock
+`stories/LightBox/examples/SmallContentExample.tsx`
 
-```ts
-useEffect(() => {
-    addClassNameWithScrollbarWidth(scrollStyles); // вычисляет ширину скроллбара, прописывает в CSS
-    addClassNamesToDocumentElement();             // .bodyOverflowHidden → documentElement
-    setTimeout(addClassNamesToDocumentElement, 100); // fix: при переключении двух LightBox
-    return () => bodyClassNamesIsLightBoxOpen.forEach(c => document.documentElement.classList.remove(c));
-}, []);
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    FocusTrapUtils,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+export const SmallContentExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST}>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Евгений Онегин
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.FIRST}>
+                                Если контента мало, рекомендуется использовать Page.Body типа FIRST, чтобы не было
+                                пустого пространства.
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST}>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+                        <LightBox.Controls.Prev
+                            title="Назад"
+                            clickByArrowLeft
+                            onClick={() => console.log("Prev clicked")}
+                        />
+                        <LightBox.Controls.Next
+                            title="Вперёд"
+                            clickByArrowRight
+                            onClick={() => console.log("Next clicked")}
+                        />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
 ```
 
-- Блокировка скролла — на `documentElement`, не `body`.
-- `setTimeout(100)` — фикс роутерного бага: новый LightBox монтируется **до** размонтирования старого, классы удаляются старым — повторно добавляем через 100ms.
+### SplitMode
 
-### `LightBoxContent.paddingTop` — вычисление по querySelector
+`stories/LightBox/examples/SplitModeExample.tsx`
 
-```ts
-const controlsNode = document.querySelector(`[data-lightbox-component="controls"]`);
-if (controlsNode) nextPaddingTop += controlsNode.offsetHeight;
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import "../styles.less";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const SplitModeExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            <div id="LightBox-next-view-manager-node-example" />
+
+            {isOpen ? (
+                <LightBox
+                    isLoading={false}
+                    isSideOverlayOpened={false}
+                    isTopOverlayOpened={false}
+                    lightBoxViewManagerNodeId="LightBox-next-view-manager-node-example"
+                >
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Евгений Онегин
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+                        <LightBox.Controls.Prev
+                            title="Назад"
+                            clickByArrowLeft
+                            onClick={() => console.log("Prev clicked")}
+                        />
+                        <LightBox.Controls.Next
+                            title="Вперёд"
+                            clickByArrowRight
+                            onClick={() => console.log("Next clicked")}
+                        />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
 ```
 
-- Контент добавляет сверху padding равный высоте Controls-бара, чтобы они не перекрывали начало контента.
-- Debounce 100ms, изменение применяется при `deltaTop > 1` — антидрожание.
+### WithSidebars
 
-### `LightBoxSideOverlay` — разделение `opening`/`closing`/`opened`
+`stories/LightBox/examples/WithSidebarsExample.tsx`
 
-```ts
-useEffect(() => {
-    if (prevOpened.current && !opened) { setOpening(false); setClosing(true); }
-    else if (!prevOpened.current && opened) { setClosing(false); setOpening(true); }
-    prevOpened.current = opened;
-}, [opened]);
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    MobileView,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithSidebarsExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isLeftSidebarVisible, setIsLeftSidebarVisible] = useState(true);
+    const [isRightSidebarVisible, setIsRightSidebarVisible] = useState(true);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={() => setIsOpen(false)} />
+            <LightBox.Controls.Prev title="Назад" clickByArrowLeft onClick={() => console.log("Prev clicked")} />
+            <LightBox.Controls.Next title="Вперёд" clickByArrowRight onClick={() => console.log("Next clicked")} />
+        </LightBox.Controls>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setIsOpen(true)}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <MobileView
+                                            fallback={
+                                                <Title
+                                                    tag="h1"
+                                                    size={ETitleSize.H1}
+                                                    tabIndex={-1}
+                                                    // Устанавливает фокус на первый элемент при открытии LightBox.
+                                                    {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                                >
+                                                    Евгений Онегин
+                                                </Title>
+                                            }
+                                        >
+                                            <Title tag="h2" size={ETitleSize.H2}>
+                                                Евгений Онегин
+                                            </Title>
+                                        </MobileView>
+
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                                    <IslandBody>
+                                        Left sidebar: {isLeftSidebarVisible ? "visible" : "hidden"}
+                                        <br />
+                                        Right sidebar: {isRightSidebarVisible ? "visible" : "hidden"}
+                                    </IslandBody>
+                                </Island>
+                                <Gap size={16} />
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.LeftSidebar
+                        key="left-sidebar"
+                        minVisibleWidth={140}
+                        onShow={() => setIsLeftSidebarVisible(true)}
+                        onHide={() => setIsLeftSidebarVisible(false)}
+                    >
+                        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                            <IslandBody>Left Sidebar</IslandBody>
+                        </Island>
+                    </LightBox.LeftSidebar>
+
+                    <LightBox.RightSidebar
+                        key="right-sidebar"
+                        onShow={() => setIsRightSidebarVisible(true)}
+                        onHide={() => setIsRightSidebarVisible(false)}
+                    >
+                        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                            <IslandBody>Right Sidebar</IslandBody>
+                        </Island>
+                    </LightBox.RightSidebar>
+
+                    {renderLightBoxControls()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
 ```
 
-- Tri-state: `opened` + `opening` (анимация раскрытия) + `closing` (анимация закрытия). `onOpen`/`onClose` срабатывают **после `transitionEnd`**, не сразу.
-- FocusTrap активен только когда `opened && !opening && !closing`.
-
-### `LeftSidebar.onShow/onHide` через ref
-
-Чтобы `ResizeObserver`-коллбэк не пересоздавался при смене обработчиков, они пишутся в `onShowRef`/`onHideRef` через `useEffect`. Паттерн "stable callback".
-
----
-
-## Инварианты
+### WithFixedSidebars
 
-- **`children: ReactElement[]`** — типом заявлен массив. Потребители фактически пишут слоты подряд — TypeScript нестрого проверяет. Не менять без переосмысления.
-- **`data-lightbox-component="controls"`** атрибут на Controls-контейнере — **необходим** для работы `LightBoxContent` (querySelector). При замене на ref нужно править `LightBoxContent.tsx`.
-- **IDs `LightBox-next-mount-node` и `LightBox-next-view-manager-node`** — константы в модуле, переименование — breaking.
-- **`forwardRef` prop (а не `ref`)** — публичный API. LightBoxBase — не `forwardRef`; `Object.assign` поверх. Не переименовывать в `ref`.
-- **`ELightBoxSize`** — собственный enum, не `EComponentSize`; есть значение `XL`.
-- **Safari span `tempElSafariBug`** — не удалять без регрессии (см. DCBSWT-2866).
-- **`setTimeout(100)` на body-lock** — костыль против роутерных гонок, не убирать.
-- **`LightBox.SideOverlay.CloseDesktop`/`.CloseMobile`** — две отдельные кнопки, не одна. Mobile/desktop визуально разные.
-- **`Portal` + `lightBoxMountNode`** — LightBox никогда не рендерится inline. При SSR потребителю нужен ClientOnly-wrapper.
-- **`MobileView` fallback wraps FocusTrap, children — нет**: на mobile focus trap не активен.
-- **`onOpen`/`onClose` SideOverlay** вызываются по `transitionend`, не по смене `opened`. Важно для консьюмеров, ждущих завершения анимации.
+`stories/LightBox/examples/WithFixedSidebarsExample.tsx`
 
----
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    MobileView,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithFixedSidebarsExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={() => setIsOpen(false)} />
+            <LightBox.Controls.Prev title="Назад" clickByArrowLeft onClick={() => console.log("Prev clicked")} />
+            <LightBox.Controls.Next title="Вперёд" clickByArrowRight onClick={() => console.log("Next clicked")} />
+        </LightBox.Controls>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setIsOpen(true)}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <MobileView
+                                            fallback={
+                                                <Title
+                                                    tag="h1"
+                                                    size={ETitleSize.H1}
+                                                    tabIndex={-1}
+                                                    // Устанавливает фокус на первый элемент при открытии LightBox.
+                                                    {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                                >
+                                                    Евгений Онегин
+                                                </Title>
+                                            }
+                                        >
+                                            <Title tag="h2" size={ETitleSize.H2}>
+                                                Евгений Онегин
+                                            </Title>
+                                        </MobileView>
+
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.LeftSidebar fixed key="left-sidebar">
+                        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                            <IslandBody>Left Sidebar</IslandBody>
+                        </Island>
+                    </LightBox.LeftSidebar>
+
+                    <LightBox.RightSidebar fixed key="right-sidebar">
+                        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                            <IslandBody>Right Sidebar</IslandBody>
+                        </Island>
+                    </LightBox.RightSidebar>
+
+                    {renderLightBoxControls()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-## Accessibility
+### WithOneSidebar
 
-- `role="dialog"` + `aria-modal="true"` — на корне LightBox и на SideOverlay.
-- FocusTrap удерживает фокус внутри (desktop). Потребитель должен проставить tabbable-элементы и осмысленные labels.
-- Initial focus — первый элемент с `data-focus-initial` (см. `FocusTrapUtils.getFirstInteractionElementByDataAttr`) или первый tabbable.
-- `allowOutsideClick: true` — клик вне модалки не ломает trap (но и не закрывает — консьюмер сам вешает onClose).
-- **Mobile — без focus trap'а**. Семантика диалога остаётся через `role="dialog"`, но скринридеры могут не удерживать фокус — закладывайте это для мобильных UX-тестов.
-- Контент не анонсируется при открытии (нет `aria-labelledby`/`aria-describedby` по умолчанию) — потребитель должен добавить через `...rest`.
+`stories/LightBox/examples/WithOneSidebarExample.tsx`
 
----
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    MobileView,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithOneSidebarExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={() => setIsOpen(false)} />
+            <LightBox.Controls.Prev title="Назад" clickByArrowLeft onClick={() => console.log("Prev clicked")} />
+            <LightBox.Controls.Next title="Вперёд" clickByArrowRight onClick={() => console.log("Next clicked")} />
+        </LightBox.Controls>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setIsOpen(true)}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <MobileView
+                                            fallback={
+                                                <Title
+                                                    tag="h1"
+                                                    size={ETitleSize.H1}
+                                                    tabIndex={-1}
+                                                    // Устанавливает фокус на первый элемент при открытии LightBox.
+                                                    {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                                >
+                                                    Евгений Онегин
+                                                </Title>
+                                            }
+                                        >
+                                            <Title tag="h2" size={ETitleSize.H2}>
+                                                Евгений Онегин
+                                            </Title>
+                                        </MobileView>
+
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                        <Button
+                                            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                        />
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    <LightBox.RightSidebar key="right-sidebar">
+                        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+                            <IslandBody>Right Sidebar</IslandBody>
+                        </Island>
+                    </LightBox.RightSidebar>
+
+                    {renderLightBoxControls()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-## Дизайн-токены
+### WithSideOverlay
 
-LightBoxViewManager прописывает **runtime CSS-переменные**:
+`stories/LightBox/examples/WithSideOverlayExample.tsx`
 
-```
---lightBox-screen-left
---lightBox-screen-width
---lightBox-screen-top
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    MobileView,
+} from "@sberbusiness/triplex-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithSideOverlayExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [openedSideOverlayLG, setOpenedSideOverlayLG] = useState(false);
+    const [openedSideOverlayMD, setOpenedSideOverlayMD] = useState(false);
+    const [openedSideOverlaySM, setOpenedSideOverlaySM] = useState(false);
+
+    const handleOpenSideOverlayLG = () => setOpenedSideOverlayLG(true);
+    const handleCloseSideOverlayLG = () => setOpenedSideOverlayLG(false);
+    const handleOpenSideOverlayMD = () => setOpenedSideOverlayMD(true);
+    const handleCloseSideOverlayMD = () => setOpenedSideOverlayMD(false);
+    const handleOpenSideOverlaySM = () => setOpenedSideOverlaySM(true);
+    const handleCloseSideOverlaySM = () => setOpenedSideOverlaySM(false);
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+        </LightBox.Controls>
+    );
+
+    const renderLightBoxSideOverlayLG = () => (
+        <LightBox.SideOverlay
+            key="sideOverlayLG"
+            opened={openedSideOverlayLG}
+            size={EComponentSize.LG}
+            isTopLevelSideOverlayOpened={openedSideOverlayMD || openedSideOverlaySM}
+        >
+            <Page>
+                <Page.Header type={EHeaderPageType.FIRST} sticky>
+                    <Page.Header.Title>
+                        <Page.Header.Title.Content>
+                            <MobileView
+                                fallback={
+                                    <Title
+                                        tag="h1"
+                                        size={ETitleSize.H1}
+                                        tabIndex={-1}
+                                        // Устанавливает фокус на первый элемент при открытии LightBox.
+                                        {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                    >
+                                        Евгений Онегин
+                                    </Title>
+                                }
+                            >
+                                <Title tag="h2" size={ETitleSize.H2}>
+                                    Евгений Онегин
+                                </Title>
+                            </MobileView>
+                        </Page.Header.Title.Content>
+                        <Page.Header.Title.Controls>
+                            {/* Кнопка закрытия SideOverlay для мобильного устройства. Отображается только на мобильном устройстве, внутри заголовка SideOverlay. */}
+                            <LightBox.SideOverlay.CloseMobile
+                                data-test-id="lightbox-side-overlay-close"
+                                onClick={handleCloseSideOverlayLG}
+                            />
+                        </Page.Header.Title.Controls>
+                    </Page.Header.Title>
+                </Page.Header>
+
+                <Page.Body type={EBodyPageType.SECOND}>
+                    {[0, 1, 2].map((index) => (
+                        <React.Fragment key={index}>
+                            <PoemBlock />
+                            {index < 2 && <Gap size={16} />}
+                        </React.Fragment>
+                    ))}
+                </Page.Body>
+
+                <Page.Footer type={EFooterPageType.FIRST} sticky>
+                    <Page.Footer.Description>
+                        <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                        <Page.Footer.Description.Controls>
+                            <Button
+                                theme={EButtonTheme.GENERAL}
+                                size={EComponentSize.MD}
+                                onClick={handleOpenSideOverlayMD}
+                            >
+                                Открыть SideOverlay MD
+                            </Button>
+                        </Page.Footer.Description.Controls>
+                    </Page.Footer.Description>
+                </Page.Footer>
+            </Page>
+
+            {/* Кнопка закрытия SideOverlay для десктопа. Отображается только на десктопе, справа от заголовка SideOverlay. */}
+            <LightBox.SideOverlay.CloseDesktop
+                data-test-id="lightbox-side-overlay-close"
+                clickByEsc={!openedSideOverlayMD && !openedSideOverlaySM}
+                onClick={handleCloseSideOverlayLG}
+            />
+        </LightBox.SideOverlay>
+    );
+
+    const renderLightBoxSideOverlayMD = () => (
+        <LightBox.SideOverlay
+            key="sideOverlayMD"
+            opened={openedSideOverlayMD}
+            size={EComponentSize.MD}
+            isTopLevelSideOverlayOpened={openedSideOverlaySM}
+        >
+            <Page>
+                <Page.Header type={EHeaderPageType.FIRST} sticky>
+                    <Page.Header.Title>
+                        <Page.Header.Title.Content>
+                            <MobileView
+                                fallback={
+                                    <Title
+                                        tag="h1"
+                                        size={ETitleSize.H1}
+                                        tabIndex={-1}
+                                        // Устанавливает фокус на первый элемент при открытии LightBox.
+                                        {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                    >
+                                        Евгений Онегин
+                                    </Title>
+                                }
+                            >
+                                <Title tag="h2" size={ETitleSize.H2}>
+                                    Евгений Онегин
+                                </Title>
+                            </MobileView>
+                        </Page.Header.Title.Content>
+                        <Page.Header.Title.Controls>
+                            <LightBox.SideOverlay.CloseMobile
+                                data-test-id="lightbox-side-overlay-close"
+                                onClick={handleCloseSideOverlayMD}
+                            />
+                        </Page.Header.Title.Controls>
+                    </Page.Header.Title>
+                </Page.Header>
+
+                <Page.Body type={EBodyPageType.SECOND}>
+                    {[0, 1, 2].map((index) => (
+                        <React.Fragment key={index}>
+                            <PoemBlock />
+                            {index < 2 && <Gap size={16} />}
+                        </React.Fragment>
+                    ))}
+                </Page.Body>
+
+                <Page.Footer type={EFooterPageType.FIRST} sticky>
+                    <Page.Footer.Description>
+                        <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                        <Page.Footer.Description.Controls>
+                            <Button
+                                theme={EButtonTheme.GENERAL}
+                                size={EComponentSize.MD}
+                                onClick={handleOpenSideOverlaySM}
+                            >
+                                Открыть SideOverlay SM
+                            </Button>
+                        </Page.Footer.Description.Controls>
+                    </Page.Footer.Description>
+                </Page.Footer>
+            </Page>
+
+            <LightBox.SideOverlay.CloseDesktop
+                data-test-id="lightbox-side-overlay-close"
+                clickByEsc={!openedSideOverlaySM}
+                onClick={handleCloseSideOverlayMD}
+            />
+        </LightBox.SideOverlay>
+    );
+
+    const renderLightBoxSideOverlaySM = () => (
+        <LightBox.SideOverlay key="sideOverlaySM" opened={openedSideOverlaySM} size={EComponentSize.SM}>
+            <Page>
+                <Page.Header type={EHeaderPageType.FIRST} sticky>
+                    <Page.Header.Title>
+                        <Page.Header.Title.Content>
+                            <MobileView
+                                fallback={
+                                    <Title
+                                        tag="h1"
+                                        size={ETitleSize.H1}
+                                        tabIndex={-1}
+                                        // Устанавливает фокус на первый элемент при открытии LightBox.
+                                        {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                    >
+                                        Евгений Онегин
+                                    </Title>
+                                }
+                            >
+                                <Title tag="h2" size={ETitleSize.H2}>
+                                    Евгений Онегин
+                                </Title>
+                            </MobileView>
+                        </Page.Header.Title.Content>
+                        <Page.Header.Title.Controls>
+                            <LightBox.SideOverlay.CloseMobile
+                                data-test-id="lightbox-side-overlay-close"
+                                onClick={handleCloseSideOverlaySM}
+                            />
+                        </Page.Header.Title.Controls>
+                    </Page.Header.Title>
+                </Page.Header>
+
+                <Page.Body type={EBodyPageType.FIRST}>
+                    Если контента мало, рекомендуется использовать Page.Body типа FIRST, чтобы не было пустого
+                    пространства.
+                </Page.Body>
+
+                <Page.Footer type={EFooterPageType.FIRST} sticky={openedSideOverlaySM}>
+                    <Page.Footer.Description>
+                        <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                        <Page.Footer.Description.Controls>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                Button text
+                            </Button>
+                        </Page.Footer.Description.Controls>
+                    </Page.Footer.Description>
+                </Page.Footer>
+            </Page>
+
+            <LightBox.SideOverlay.CloseDesktop
+                data-test-id="lightbox-side-overlay-close"
+                clickByEsc
+                onClick={handleCloseSideOverlaySM}
+            />
+        </LightBox.SideOverlay>
+    );
+
+    const renderLightBoxSideOverlays = () => (
+        <>
+            {renderLightBoxSideOverlayLG()}
+            {renderLightBoxSideOverlayMD()}
+            {renderLightBoxSideOverlaySM()}
+        </>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={openedSideOverlayLG} isTopOverlayOpened={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <MobileView
+                                            fallback={
+                                                <Title
+                                                    tag="h1"
+                                                    size={ETitleSize.H1}
+                                                    tabIndex={-1}
+                                                    // Устанавливает фокус на первый элемент при открытии LightBox.
+                                                    {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                                >
+                                                    Евгений Онегин
+                                                </Title>
+                                            }
+                                        >
+                                            <Title tag="h2" size={ETitleSize.H2}>
+                                                Евгений Онегин
+                                            </Title>
+                                        </MobileView>
+
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.MD}
+                                            onClick={handleOpenSideOverlayLG}
+                                        >
+                                            SideOverlay LG
+                                        </Button>
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    {renderLightBoxControls()}
+
+                    {renderLightBoxSideOverlays()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
 ```
 
-Их значения вычисляются по `getBoundingClientRect` у `lightBoxViewManagerNode`. Эти переменные используются LESS-стилями LightBox для позиционирования.
+### WithSideOverlayLoading
 
-Прочие визуальные токены — от ThemeProvider (`scopeClassName` подставляется на корень).
+`stories/LightBox/examples/WithSideOverlayLoadingExample.tsx`
 
----
-
-## Связанные компоненты
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithSideOverlayLoadingExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [openedSideOverlayLG, setOpenedSideOverlayLG] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleOpenSideOverlayLG = () => setOpenedSideOverlayLG(true);
+    const handleCloseSideOverlayLG = () => {
+        setIsLoading(false);
+        setOpenedSideOverlayLG(false);
+    };
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+        </LightBox.Controls>
+    );
+
+    const renderLightBoxSideOverlayLG = () => (
+        <LightBox.SideOverlay
+            key="sideOverlayLG"
+            opened={openedSideOverlayLG}
+            size={EComponentSize.LG}
+            isTopLevelSideOverlayOpened={false}
+            isLoading={isLoading}
+        >
+            <Page>
+                <Page.Header type={EHeaderPageType.FIRST} sticky={openedSideOverlayLG}>
+                    <Page.Header.Title>
+                        <Page.Header.Title.Content>
+                            <Title
+                                tag="h1"
+                                size={ETitleSize.H1}
+                                tabIndex={-1}
+                                // Устанавливает фокус на первый элемент при открытии LightBox.
+                                {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                            >
+                                Евгений Онегин
+                            </Title>
+                        </Page.Header.Title.Content>
+                        <Page.Header.Title.Controls>
+                            {/* Кнопка закрытия SideOverlay для мобильного устройства. Отображается только на мобильном устройстве, внутри заголовка SideOverlay. */}
+                            <LightBox.SideOverlay.CloseMobile
+                                data-test-id="lightbox-side-overlay-close"
+                                onClick={handleCloseSideOverlayLG}
+                            />
+                        </Page.Header.Title.Controls>
+                    </Page.Header.Title>
+                </Page.Header>
+
+                <Page.Body type={EBodyPageType.SECOND}>
+                    {[0, 1, 2].map((index) => (
+                        <React.Fragment key={index}>
+                            <PoemBlock />
+                            {index < 2 && <Gap size={16} />}
+                        </React.Fragment>
+                    ))}
+                </Page.Body>
+
+                <Page.Footer type={EFooterPageType.FIRST} sticky={openedSideOverlayLG}>
+                    <Page.Footer.Description>
+                        <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                        <Page.Footer.Description.Controls>
+                            <Button
+                                theme={EButtonTheme.GENERAL}
+                                size={EComponentSize.MD}
+                                onClick={() => setIsLoading(true)}
+                            >
+                                Loading on
+                            </Button>
+                        </Page.Footer.Description.Controls>
+                    </Page.Footer.Description>
+                </Page.Footer>
+            </Page>
+
+            {/* Кнопка закрытия SideOverlay для десктопа. Отображается только на десктопе, справа от заголовка SideOverlay. */}
+            <LightBox.SideOverlay.CloseDesktop
+                data-test-id="lightbox-side-overlay-close"
+                clickByEsc
+                onClick={handleCloseSideOverlayLG}
+            />
+        </LightBox.SideOverlay>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={openedSideOverlayLG} isTopOverlayOpened={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Евгений Онегин
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.MD}
+                                            onClick={handleOpenSideOverlayLG}
+                                        >
+                                            SideOverlay LG
+                                        </Button>
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    {renderLightBoxControls()}
+
+                    {renderLightBoxSideOverlayLG()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-- `ModalWindow` — простой диалог, не полноэкранный.
-- `Overlay` / `OverlayBase` / `OverlayMask` — основа для SideOverlay.
-- `TopOverlay` — верхняя выезжающая панель (реэкспортируется как `LightBox.TopOverlay`).
-- `Portal` — используется для render'а.
-- `MobileView` — разграничение desktop/mobile.
-- `LoaderScreen` — loader внутри Content.
-- `focus-trap-react` — FocusTrap.
-- `react-resize-detector` — resize-listener в Content и ViewManager.
+### WithTopOverlay
 
----
+`stories/LightBox/examples/WithTopOverlayExample.tsx`
 
-## Stories
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    Confirm,
+} from "@sberbusiness/triplex-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithTopOverlayExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [openedTopOverlay, setOpenedTopOverlay] = useState(false);
+    const [closeConfirmed, setCloseConfirmed] = useState(false);
+
+    const handleOpenTopOverlay = () => setOpenedTopOverlay(true);
+    const handleCloseTopOverlay = () => {
+        if (closeConfirmed) {
+            setIsOpen(false);
+            setCloseConfirmed(false);
+        } else {
+            setOpenedTopOverlay(false);
+        }
+    };
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setOpenedTopOverlay(true);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+            <LightBox.Controls.Prev title="Назад" clickByArrowLeft onClick={() => console.log("Prev clicked")} />
+            <LightBox.Controls.Next title="Вперёд" clickByArrowRight onClick={() => console.log("Next clicked")} />
+        </LightBox.Controls>
+    );
+
+    const renderTopOverlay = () => (
+        <LightBox.TopOverlay opened={openedTopOverlay} onClose={handleCloseTopOverlay} onOpen={handleOpenTopOverlay}>
+            <Confirm>
+                <Confirm.Content>
+                    <Confirm.Content.Title>Внимание</Confirm.Content.Title>
+                    <Confirm.Content.SubTitle>
+                        Несохранённые данные будут утеряны. Вы уверены, что хотите покинуть форму редактирования?
+                    </Confirm.Content.SubTitle>
+                </Confirm.Content>
+                <Confirm.Controls>
+                    <Button
+                        theme={EButtonTheme.SECONDARY}
+                        size={EComponentSize.MD}
+                        onClick={() => setOpenedTopOverlay(false)}
+                    >
+                        Отмена
+                    </Button>
+                    <Button
+                        theme={EButtonTheme.DANGER}
+                        size={EComponentSize.MD}
+                        onClick={() => {
+                            handleCloseTopOverlay();
+                            setCloseConfirmed(true);
+                        }}
+                    >
+                        Покинуть форму
+                    </Button>
+                </Confirm.Controls>
+                <Confirm.Close
+                    title="Закрыть"
+                    // Закрыть по Esc, если TopOverlay открыт.
+                    clickByEsc={openedTopOverlay}
+                    onClick={() => setOpenedTopOverlay(false)}
+                />
+            </Confirm>
+        </LightBox.TopOverlay>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={openedTopOverlay}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Евгений Онегин
+                                        </Title>
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+
+                        {renderTopOverlay()}
+                    </LightBox.Content>
+
+                    {renderLightBoxControls()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-`stories/LightBox/LightBox.stories.tsx`
-`stories/LightBox/LightBoxInitialOpened.stories.tsx`
-Примеры: `stories/LightBox/examples/`
+### WithTopOverlayInSideOverlay
 
----
+`stories/LightBox/examples/WithTopOverlayInSideOverlayExample.tsx`
 
-## История изменений
+```tsx
+import React, { useState } from "react";
+import {
+    LightBox,
+    Page,
+    Button,
+    EButtonTheme,
+    Gap,
+    Title,
+    Text,
+    EFontType,
+    ETextSize,
+    ETitleSize,
+    EHeaderPageType,
+    EFooterPageType,
+    EBodyPageType,
+    Island,
+    IslandBody,
+    EIslandType,
+    FocusTrapUtils,
+    EComponentSize,
+    MobileView,
+    Confirm,
+    EConfirmParentComponent,
+} from "@sberbusiness/triplex-next";
+
+const POEM_LINES: string[] = [
+    "Мой дядя самых честных правил,",
+    "Когда не в шутку занемог,",
+    "Он уважать себя заставил",
+    "И лучше выдумать не мог.",
+    "Его пример другим наука;",
+    "Но, боже мой, какая скука",
+    "С больным сидеть и день и ночь,",
+    "Не отходя ни шагу прочь!",
+    "Какое низкое коварство",
+    "Полуживого забавлять,",
+    "Ему подушки поправлять,",
+    "Печально подносить лекарство,",
+    "Вздыхать и думать про себя:",
+    "Когда же черт возьмёт тебя…",
+];
+
+const PoemBlock: React.FC = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+        <IslandBody>
+            {POEM_LINES.map((line) => (
+                <React.Fragment key={line}>
+                    {line}
+                    <br />
+                </React.Fragment>
+            ))}
+        </IslandBody>
+    </Island>
+);
+
+export const WithTopOverlayInSideOverlayExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [openedSideOverlayMD, setOpenedSideOverlayMD] = useState(false);
+
+    const [openedTopOverlay, setOpenedTopOverlay] = useState(false);
+    const [closeConfirmed, setCloseConfirmed] = useState(false);
+
+    const handleOpenTopOverlay = () => setOpenedTopOverlay(true);
+    const handleCloseTopOverlay = () => {
+        if (closeConfirmed) {
+            setOpenedSideOverlayMD(false);
+            setCloseConfirmed(false);
+        } else {
+            setOpenedTopOverlay(false);
+        }
+    };
+
+    const handleOpenSideOverlayMD = () => setOpenedSideOverlayMD(true);
+    const handleCloseSideOverlayMD = () => setOpenedTopOverlay(true);
+
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+
+    const renderLightBoxControls = () => (
+        <LightBox.Controls key="controls">
+            <LightBox.Controls.Close title="Закрыть" data-test-id="lightbox-close" onClick={handleClose} />
+            <LightBox.Controls.Prev title="Назад" clickByArrowLeft onClick={() => console.log("Prev clicked")} />
+            <LightBox.Controls.Next title="Вперёд" clickByArrowRight onClick={() => console.log("Next clicked")} />
+        </LightBox.Controls>
+    );
+
+    const renderTopOverlay = () => (
+        <LightBox.TopOverlay opened={openedTopOverlay} onClose={handleCloseTopOverlay} onOpen={handleOpenTopOverlay}>
+            <Confirm parentComponent={EConfirmParentComponent.SIDE_OVERLAY_MD}>
+                <Confirm.Content>
+                    <Confirm.Content.Title>Внимание</Confirm.Content.Title>
+                    <Confirm.Content.SubTitle>
+                        Несохранённые данные будут утеряны. Вы уверены, что хотите покинуть форму редактирования?
+                    </Confirm.Content.SubTitle>
+                </Confirm.Content>
+                <Confirm.Controls>
+                    <Button
+                        theme={EButtonTheme.SECONDARY}
+                        size={EComponentSize.MD}
+                        onClick={() => setOpenedTopOverlay(false)}
+                    >
+                        Отмена
+                    </Button>
+                    <Button
+                        theme={EButtonTheme.DANGER}
+                        size={EComponentSize.MD}
+                        onClick={() => {
+                            handleCloseTopOverlay();
+                            setCloseConfirmed(true);
+                        }}
+                    >
+                        Покинуть форму
+                    </Button>
+                </Confirm.Controls>
+                <Confirm.Close
+                    title="Закрыть"
+                    // Закрыть по Esc, если TopOverlay открыт.
+                    clickByEsc={openedTopOverlay}
+                    onClick={() => setOpenedTopOverlay(false)}
+                />
+            </Confirm>
+        </LightBox.TopOverlay>
+    );
+
+    const renderLightBoxSideOverlayMD = () => (
+        <LightBox.SideOverlay
+            key="sideOverlayMD"
+            opened={openedSideOverlayMD}
+            size={EComponentSize.MD}
+            isTopLevelSideOverlayOpened={false}
+            isTopOverlayOpened={openedTopOverlay}
+        >
+            <Page>
+                <Page.Header type={EHeaderPageType.FIRST} sticky>
+                    <Page.Header.Title>
+                        <Page.Header.Title.Content>
+                            <MobileView
+                                fallback={
+                                    <Title
+                                        tag="h1"
+                                        size={ETitleSize.H1}
+                                        tabIndex={-1}
+                                        // Устанавливает фокус на первый элемент при открытии LightBox.
+                                        {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                    >
+                                        Евгений Онегин
+                                    </Title>
+                                }
+                            >
+                                <Title tag="h2" size={ETitleSize.H2}>
+                                    Евгений Онегин
+                                </Title>
+                            </MobileView>
+                        </Page.Header.Title.Content>
+                        <Page.Header.Title.Controls>
+                            <LightBox.SideOverlay.CloseMobile
+                                data-test-id="lightbox-side-overlay-close"
+                                onClick={handleCloseSideOverlayMD}
+                            />
+                        </Page.Header.Title.Controls>
+                    </Page.Header.Title>
+                </Page.Header>
+
+                <Page.Body type={EBodyPageType.SECOND}>
+                    {[0, 1, 2].map((index) => (
+                        <React.Fragment key={index}>
+                            <PoemBlock />
+                            {index < 2 && <Gap size={16} />}
+                        </React.Fragment>
+                    ))}
+                </Page.Body>
+
+                <Page.Footer type={EFooterPageType.FIRST} sticky>
+                    <Page.Footer.Description>
+                        <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                        <Page.Footer.Description.Controls>
+                            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                Button text
+                            </Button>
+                        </Page.Footer.Description.Controls>
+                    </Page.Footer.Description>
+                </Page.Footer>
+            </Page>
+
+            <LightBox.SideOverlay.CloseDesktop
+                data-test-id="lightbox-side-overlay-close"
+                clickByEsc={!openedTopOverlay}
+                onClick={handleCloseSideOverlayMD}
+            />
+
+            {renderTopOverlay()}
+        </LightBox.SideOverlay>
+    );
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleOpen}>
+                Открыть LightBox
+            </Button>
+
+            {isOpen ? (
+                <LightBox isLoading={false} isSideOverlayOpened={openedSideOverlayMD} isTopOverlayOpened={false}>
+                    <LightBox.Content key="content" isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <MobileView
+                                            fallback={
+                                                <Title
+                                                    tag="h1"
+                                                    size={ETitleSize.H1}
+                                                    tabIndex={-1}
+                                                    // Устанавливает фокус на первый элемент при открытии LightBox.
+                                                    {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                                >
+                                                    Евгений Онегин
+                                                </Title>
+                                            }
+                                        >
+                                            <Title tag="h2" size={ETitleSize.H2}>
+                                                Евгений Онегин
+                                            </Title>
+                                        </MobileView>
+
+                                        <Gap size={8} />
+                                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                            Русский поэт, драматург и прозаик, заложивший основы русского
+                                            реалистического направления.
+                                        </Text>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.MD}
+                                            onClick={handleOpenSideOverlayMD}
+                                        >
+                                            SideOverlay MD
+                                        </Button>
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.SECOND}>
+                                {[0, 1, 2].map((index) => (
+                                    <React.Fragment key={index}>
+                                        <PoemBlock />
+                                        {index < 2 && <Gap size={16} />}
+                                    </React.Fragment>
+                                ))}
+                            </Page.Body>
+
+                            <Page.Footer type={EFooterPageType.FIRST} sticky>
+                                <Page.Footer.Description>
+                                    <Page.Footer.Description.Content>А. С. Пушкин</Page.Footer.Description.Content>
+                                    <Page.Footer.Description.Controls>
+                                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                                            Button text
+                                        </Button>
+                                    </Page.Footer.Description.Controls>
+                                </Page.Footer.Description>
+                            </Page.Footer>
+                        </Page>
+                    </LightBox.Content>
+
+                    {renderLightBoxControls()}
+
+                    {renderLightBoxSideOverlayMD()}
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |