@sberbusiness/triplex-next-mcp-server 1.41.0-beta → 1.43.0-beta

package/bundle/components/UnorderedList.md

@@ -0,0 +1,254 @@
+---
+component: UnorderedList
+category: UnorderedList
+related: [UnorderedListExtended, OrderedList, Text]
+tokens: []
+stories: stories/UnorderedList/UnorderedList.stories.tsx
+version: "1.0"
+---
+
+# UnorderedList
+
+## Назначение
+
+Маркированный список с data-driven API: содержимое описывается массивом `items`, а не JSX-разметкой.
+Компонент разворачивает каждый элемент массива в `UnorderedListExtended.Item` с обязательным
+маркером-обёрткой перед содержимым.
+
+Используй когда: список строится из данных (map по массиву), а каждому элементу достаточно текста,
+свойств типографики `Text` и опционального маркера.
+
+Не используй когда:
+- Элементы списка — сложная композиция из нескольких блоков или интерактивных элементов, которую
+  удобнее собирать JSX-ом. Для этого есть `UnorderedListExtended` с составным API
+  (`UnorderedListExtended.Item`, `UnorderedListExtended.Item.Marker`).
+- Нужен нумерованный список — используй `OrderedList`.
+- Нужен список записей с действиями, выделением, сортировкой — это `List` и его семейство,
+  а не типографический маркированный список.
+
+---
+
+## Варианты и props
+
+### Обязательные props
+
+Обязательных props нет: `<UnorderedList />` без `items` отрендерит пустой `<ul>`.
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `items` | `IUnorderedListItemProps[]` | — | Конфигурация элементов списка. Содержимое элемента задаётся его `children`. |
+
+`IUnorderedListProps` расширяет `Omit<IUnorderedListExtendedProps, "children">`, то есть принимает
+все стандартные атрибуты `<ul>` (`className`, `style`, `aria-*`, обработчики событий) и **не**
+принимает `children` — это часть data-driven контракта.
+
+### Элемент списка (`IUnorderedListItemProps`)
+
+Наследует свойства элемента расширенного списка (`Partial<Omit<TTextProps<"li">, "tag">>`), то есть
+всю типографику `Text` (`size`, `type`, `weight`, `line`, `underline`, `strikethrough`) и стандартные
+атрибуты `<li>`, плюс:
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `marker` | `React.ReactNode` | маркер-точка | Кастомный маркер элемента. |
+
+Особенности, которые не видны из типов:
+
+- **Размер текста элемента** по умолчанию — `ETextSize.B3` (дефолт задаёт `UnorderedListExtended.Item`).
+- **React-ключ** элемента вычисляется как `key ?? id ?? index`. Явный `key` в объекте элемента
+  вырезается из props и не попадает в DOM, а `id` — попадает (это обычный HTML-атрибут).
+- **`DataAttributes`** подмешаны в `IUnorderedListItemProps` намеренно: элементы задаются объектами
+  в массиве, а не JSX-атрибутами, поэтому без этого типа `data-*` на элементе не прошли бы проверку типов.
+- **`ref` элемента** можно передать прямо в объекте элемента — `UnorderedListItem` объявлен через
+  `forwardRef`, а React вырезает `ref` из spread-props. Поведение поддерживаемое и покрыто тестом
+  (`__tests__/UnorderedList.test.tsx` → «forwards ref passed inside an item object to the li element»).
+
+---
+
+## Дизайн-токены
+
+Собственных CSS-переменных у компонента нет: разметку и стили даёт `UnorderedListExtended`
+(`styles/UnorderedListExtended*.module.less` — только layout: `display`, `gap`, отступы, размер точки).
+Цвет текста и маркера приходит из типографики `Text` через prop `type`: маркер по умолчанию залит
+`currentcolor`, поэтому меняется вместе с цветом текста элемента.
+
+Обёртка маркера тянется на высоту строки элемента (`min-height: 1lh` с фолбэком `20px` для браузеров
+без единицы `lh`), поэтому маркер центрируется по первой строке при любом `size`. Высота — минимум,
+а не фиксированное значение: маркер выше строки (например, иконка 20px при `B4`) не обрезается.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** на `UnorderedList` — не убирать. Ref указывает на корневой `<ul>`
+  (тот же элемент, что получает `className`, `...rest` и `data-tx`).
+- **`items` — единственный собственный prop.** `children` исключён типом (`Omit<..., "children">`):
+  переход на data-driven API был breaking change в 1.43.0, возврат `children` ломает контракт.
+- **Маркер-обёртка рендерится всегда**, даже если `marker` не передан: дефолтную точку рисует сам
+  `UnorderedListExtended.Item.Marker` при `children === undefined`. Условный рендер обёртки уберёт
+  маркер у всех элементов без `marker`.
+- **Порядок в элементе**: маркер, затем содержимое. Изменение порядка — наблюдаемое изменение DOM.
+- **Вертикальное выравнивание маркера** задаётся высотой обёртки, а не фиксированными вертикальными
+  отступами точки: отступы под конкретную строку (`20px` для `B2`/`B3`) снова сместят маркер на `B1` и `B4`.
+- **Порядок вычисления ключа** `key ?? id ?? index` — менять только осознанно: смена ключей
+  перемонтирует элементы у потребителей.
+- **`UnorderedListItem` не экспортируется** из barrel `src/components/UnorderedList/index.ts` —
+  это внутренняя деталь. Публичны только `UnorderedList`, `IUnorderedListProps`
+  и `IUnorderedListItemProps`; их имена — часть публичного API.
+- **`displayName`**: `"UnorderedList"` и `"UnorderedListItem"` — не менять.
+
+---
+
+## Accessibility
+
+- Семантика штатная: корневой элемент — `<ul>` (`role="list"`), элементы — `<li>` (`role="listitem"`).
+  Дополнительных ARIA-атрибутов компонент не выставляет.
+- Маркер лежит в обычном `<span>` и **не** скрыт от скринридеров. Текстовый маркер (например, `"1."`)
+  будет озвучен; если маркер декоративный (иконка), скрывай его сам — передавай в `marker` узел
+  с `aria-hidden="true"`.
+- Компонент не интерактивный: фокус-менеджмента и клавиатурных обработчиков нет.
+- Язык не хардкодится: весь текст приходит от потребителя через `children` элементов.
+
+---
+
+## Связанные компоненты
+
+- `UnorderedListExtended` — тот же маркированный список, но с составным JSX-API
+  (`UnorderedListExtended.Item`, `UnorderedListExtended.Item.Marker`). `UnorderedList` — тонкая
+  data-driven обёртка над ним, и `IUnorderedListProps` наследует его props. Типичная точка выбора:
+  данные → `UnorderedList`, произвольная композиция → `UnorderedListExtended`.
+- `Text` — типографика элемента списка. `UnorderedListExtended.Item` рендерится как `Text` с `tag="li"`,
+  поэтому props элемента (`size`, `type`, `weight`, `line`) — это props `Text`.
+- `UnorderedListItem` (`src/components/UnorderedList/UnorderedListItem.tsx`) — внутренний элемент списка
+  без отдельного AI.md: `forwardRef`-обёртка, которая добавляет маркер перед содержимым и пробрасывает
+  остальные props в `UnorderedListExtended.Item`. Наружу не экспортируется.
+- `OrderedList` — нумерованный список для той же задачи, когда важен порядок пунктов.
+
+---
+
+## Stories
+
+Основные истории: `stories/UnorderedList/UnorderedList.stories.tsx`
+Файлы примеров: `stories/UnorderedList/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `items` плюс размер, тип и кастомный маркер для всех элементов |
+| `Default` | `Default.tsx` | Минимальный список с маркерами по умолчанию |
+| `CustomMarkerText` | `CustomMarkerText.tsx` | Кастомные маркеры-иконки и разные типы текста элементов |
+| `Sizes` | `Sizes.tsx` | Размеры текста элементов `ETextSize.B1`–`B4` |
+| `VisualTests` | `VisualTests.tsx` | Скриншот-покрытие: маркеры по умолчанию, иконки, текстовые маркеры, перенос длинного текста, типы, толщина и интерлиньяж, список из одного элемента |
+
+`Default`, `CustomMarkerText` и `Sizes` исключены из скриншот-тестов (`testRunner: { skip: true }`) —
+они рендерят то же самое, что одноимённые истории `UnorderedListExtended` (baseline совпадали
+побайтово). Собственное визуальное покрытие компонента даёт `VisualTests`; выравнивание маркера
+по размерам типографики покрыто скриншотом `UnorderedListExtended` → `Sizes`, там же живут
+и стили маркера.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-08-20 | Исправлено вертикальное центрирование маркера: обёртка маркера тянется на высоту строки текста (`min-height: 1lh`) вместо вертикальных отступов точки под строку `20px`. На `B1` маркер смещался на 2px вверх, на `B4` — на 2px вниз. Правка в `UnorderedListExtended`, затрагивает оба компонента. |
+| 2026-08-20 | Тесты маркера переведены со structural-проверок по LESS-классам `UnorderedListExtended` на проверку структуры DOM; добавлен тест на `ref`, переданный внутри объекта элемента. |
+| 2026-08-20 | Создан документ. AI-рефакторинг: уточнены JSDoc компонента, элемента и props (`items`, `marker`); расширены unit-тесты (пустой список, маркер по умолчанию, типографика элемента, вычисление React-ключа) и добавлен файл тестов `UnorderedListItem`; stories переведены на modern pattern — добавлены `Playground`, `Sizes`, `VisualTests`. Публичный API не менялся. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/UnorderedList/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedList } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <UnorderedList
+        items={[{ children: "List item text" }, { children: "List item text" }, { children: "List item text" }]}
+    />
+);
+```
+
+### CustomMarkerText
+
+`stories/UnorderedList/examples/CustomMarkerText.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedList, EFontType } from "@sberbusiness/triplex-next";
+import { CheckboxtickStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+
+export const CustomMarkerText = () => (
+    <div style={{ maxWidth: 200 }}>
+        <UnorderedList
+            items={[
+                {
+                    type: EFontType.PRIMARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />,
+                    children: "Анализ рисков по 115-ФЗ",
+                },
+                {
+                    type: EFontType.PRIMARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />,
+                    children: "Рекомендации с учётом отрасли",
+                },
+                {
+                    type: EFontType.PRIMARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />,
+                    children: "Проверка данных ФНС и других госисточников",
+                },
+                {
+                    type: EFontType.PRIMARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />,
+                    children: "Оценка финансовой устойчивости компании",
+                },
+                {
+                    type: EFontType.TERTIARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={5} />,
+                    children: "Личный менеджер",
+                },
+                {
+                    type: EFontType.TERTIARY,
+                    marker: <CheckboxtickStrokeSrvIcon20 paletteIndex={5} />,
+                    children: "Помощь при запросах и отказах от банка по операциям",
+                },
+            ]}
+        />
+    </div>
+);
+```
+
+### Sizes
+
+`stories/UnorderedList/examples/Sizes.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedList, ETextSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(ETextSize);
+
+export const Sizes = () => (
+    <div style={{ maxWidth: "300px", display: "flex", flexDirection: "column", gap: "24px" }}>
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size}</div>
+                <UnorderedList
+                    items={[
+                        { size, children: "List item text" },
+                        { size, children: "List item text" },
+                    ]}
+                />
+            </div>
+        ))}
+    </div>
+);
+```
+

package/bundle/components/UnorderedListExtended.md

@@ -0,0 +1,255 @@
+---
+component: UnorderedListExtended
+category: UnorderedListExtended
+related: [UnorderedList, OrderedList, Text]
+tokens: []
+stories: stories/UnorderedListExtended/UnorderedListExtended.stories.tsx
+version: "1.0"
+---
+
+# UnorderedListExtended
+
+## Назначение
+
+Маркированный список с составным JSX-API: элементы собираются вручную через `UnorderedListExtended.Item`,
+маркер добавляется явно первым потомком элемента — `UnorderedListExtended.Item.Marker`.
+
+Используй когда: элемент списка — композиция из нескольких узлов (ссылка, бейдж, вложенный блок),
+маркеры разнородны внутри одного списка, или часть элементов должна остаться без маркера.
+
+Не используй когда:
+- Список строится из данных и каждому элементу достаточно текста и одного маркера — это `UnorderedList`
+  с массивом `items`, он сам разворачивает элементы и сам добавляет обёртку маркера.
+- Нужен нумерованный список — используй `OrderedList`.
+- Нужен список записей с действиями, выделением, сортировкой — это `List` и его семейство,
+  а не типографический маркированный список.
+
+---
+
+## Варианты и props
+
+### Обязательные props
+
+Обязательных props нет ни у одной части составного API.
+
+### Собственные props
+
+Собственных props нет ни у списка, ни у элемента, ни у обёртки маркера — все три интерфейса
+пустые и наследуют чужие:
+
+| Компонент | Интерфейс | Что принимает |
+|---|---|---|
+| `UnorderedListExtended` | `IUnorderedListExtendedProps` | Стандартные атрибуты `<ul>` |
+| `UnorderedListExtended.Item` | `IUnorderedListExtendedItemProps` | Типографику `Text` без `tag` плюс стандартные атрибуты `<li>` |
+| `UnorderedListExtended.Item.Marker` | `IUnorderedListExtendedItemMarkerProps` | Стандартные атрибуты `<span>` |
+
+Особенности, которые не видны из типов:
+
+- **Размер текста элемента** по умолчанию — `ETextSize.B3`; это единственный дефолт во всём компоненте.
+- **Маркер опционален.** Элемент без `UnorderedListExtended.Item.Marker` рендерится вообще без обёртки
+  маркера — текст начинается от левого края. Это ключевое отличие от `UnorderedList`, где обёртка
+  добавляется всегда.
+- **Маркер-точка рисуется только при `children === undefined`.** `<Marker />` даёт точку,
+  а `<Marker>{null}</Marker>` или `<Marker>{false}</Marker>` — пустую обёртку. Проверка строгая
+  (`children === undefined`), поэтому условный маркер вида `{cond && <Icon />}` внутри `Marker`
+  при `cond === false` не откатится на точку.
+- **`tag` элемента исключён типом** (`Omit<TTextProps<"li">, "tag">`): элемент всегда `<li>`.
+
+---
+
+## Дизайн-токены
+
+Собственных CSS-переменных нет. Цвет текста и маркера приходит из типографики `Text` через prop `type`
+элемента: точка залита `currentcolor`, поэтому меняется вместе с цветом текста.
+
+Стили — только layout: у списка сброс `margin`/`padding`/`list-style`, у элемента `display: flex`
+с `align-items: flex-start` и `gap: 4px` (плюс `margin-top: 8px` между соседями), у обёртки маркера
+центрирование содержимого.
+
+Обёртка маркера тянется на высоту строки элемента (`min-height: 1lh` с фолбэком `20px` для браузеров
+без единицы `lh`), поэтому маркер центрируется по первой строке при любом `size`. Высота — минимум,
+а не фиксированное значение: маркер выше строки (иконка 20px при `B4`) не обрезается.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** на всех трёх компонентах — не убирать. Ref указывает на корневой элемент
+  (`<ul>`, `<li>`, `<span>` соответственно) — тот же, что получает `className`, `...rest` и `data-tx`.
+- **Составной API через `Object.assign`**: `UnorderedListExtended.Item` и `UnorderedListExtended.Item.Marker` —
+  публичные точки входа. Разбиение на отдельные именованные экспорты сломает контракт потребителей.
+- **Маркер-обёртка не добавляется автоматически.** Список не оборачивает и не инспектирует своих детей;
+  добавление неявного маркера сломает элементы, задуманные без него.
+- **Строгая проверка `children === undefined`** в маркере — не заменять на проверку на falsy:
+  `<Marker>{null}</Marker>` обязан давать пустую обёртку, а не точку.
+- **Вертикальное выравнивание маркера** задаётся высотой обёртки, а не фиксированными вертикальными
+  отступами точки: отступы под конкретную строку (`20px` для `B2`/`B3`) сместят маркер на `B1` и `B4`.
+- **`displayName`**: `"UnorderedListExtended"`, `"UnorderedListExtendedItem"`,
+  `"UnorderedListExtendedItemMarker"` — не менять.
+- **Barrel `index.ts`** экспортирует типы и `UnorderedListExtended`; субкомпоненты наружу отдельно
+  не экспортируются — только через статические свойства.
+
+---
+
+## Accessibility
+
+- Семантика штатная: корневой элемент — `<ul>` (`role="list"`), элементы — `<li>` (`role="listitem"`).
+  Дополнительных ARIA-атрибутов компонент не выставляет.
+- Маркер лежит в обычном `<span>` и **не** скрыт от скринридеров. Текстовый маркер (например, `"1."`)
+  будет озвучен; для декоративного маркера-иконки передавай `aria-hidden="true"` — либо на сам
+  `UnorderedListExtended.Item.Marker`, либо на вложенную иконку.
+- Компонент не интерактивный: фокус-менеджмента и клавиатурных обработчиков нет.
+- Язык не хардкодится: весь текст приходит от потребителя.
+
+---
+
+## Связанные компоненты
+
+- `UnorderedList` — тот же маркированный список с data-driven API (`items`). Реализован как тонкая
+  обёртка над `UnorderedListExtended`: разворачивает каждый элемент массива в `Item` и всегда добавляет
+  `Item.Marker`. Типичная точка выбора: данные → `UnorderedList`, произвольная композиция →
+  `UnorderedListExtended`. Правки в разметке и стилях здесь видны и в `UnorderedList`.
+- `Text` — типографика элемента. `UnorderedListExtended.Item` рендерится как `Text` с `tag="li"`,
+  поэтому props элемента (`size`, `type`, `weight`, `line`) — это props `Text`.
+- `OrderedList` — нумерованный список для той же задачи, когда важен порядок пунктов.
+
+---
+
+## Stories
+
+Основные истории: `stories/UnorderedListExtended/UnorderedListExtended.stories.tsx`
+Файлы примеров: `stories/UnorderedListExtended/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Default` | `Default.tsx` | Минимальный список с маркерами по умолчанию |
+| `CustomMarkerText` | `CustomMarkerText.tsx` | Кастомные маркеры-иконки и разные типы текста элементов |
+| `Sizes` | `Sizes.tsx` | Размеры текста элементов `ETextSize.B1`–`B4` |
+| `VisualTests` | `VisualTests.tsx` | Скриншот-покрытие: маркеры по умолчанию, элементы без маркера, иконки, текстовые маркеры, перенос длинного текста, типы, толщина и интерлиньяж, смешанные маркеры в одном списке |
+
+Story `Playground` намеренно нет: собственных props у компонента нет, Controls нечем заполнить —
+`docs/ai/stories-guide.md` → «Когда не создавать Playground». По той же причине из docs page убраны
+блоки `Props`/`ArgTypes`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-08-20 | Создан документ. AI-рефакторинг: уточнены JSDoc компонентов и интерфейсов; добавлены unit-тесты на субкомпоненты `Item` и `Item.Marker`; stories переведены на modern pattern — добавлены `Sizes` и `VisualTests`. Исправлено вертикальное центрирование маркера: обёртка тянется на высоту строки текста вместо вертикальных отступов точки. Публичный API не менялся. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/UnorderedListExtended/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedListExtended } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <UnorderedListExtended>
+        <UnorderedListExtended.Item>
+            <UnorderedListExtended.Item.Marker />
+            List item text
+        </UnorderedListExtended.Item>
+        <UnorderedListExtended.Item>
+            <UnorderedListExtended.Item.Marker />
+            List item text
+        </UnorderedListExtended.Item>
+        <UnorderedListExtended.Item>
+            <UnorderedListExtended.Item.Marker />
+            List item text
+        </UnorderedListExtended.Item>
+    </UnorderedListExtended>
+);
+```
+
+### CustomMarkerText
+
+`stories/UnorderedListExtended/examples/CustomMarkerText.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedListExtended, EFontType } from "@sberbusiness/triplex-next";
+import { CheckboxtickStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+
+export const CustomMarkerText = () => (
+    <div style={{ maxWidth: 200 }}>
+        <UnorderedListExtended>
+            <UnorderedListExtended.Item type={EFontType.PRIMARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />
+                </UnorderedListExtended.Item.Marker>
+                Анализ рисков по 115-ФЗ
+            </UnorderedListExtended.Item>
+            <UnorderedListExtended.Item type={EFontType.PRIMARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />
+                </UnorderedListExtended.Item.Marker>
+                Рекомендации с учётом отрасли
+            </UnorderedListExtended.Item>
+            <UnorderedListExtended.Item type={EFontType.PRIMARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />
+                </UnorderedListExtended.Item.Marker>
+                Проверка данных ФНС и других госисточников
+            </UnorderedListExtended.Item>
+            <UnorderedListExtended.Item type={EFontType.PRIMARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={0} />
+                </UnorderedListExtended.Item.Marker>
+                Оценка финансовой устойчивости компании
+            </UnorderedListExtended.Item>
+            <UnorderedListExtended.Item type={EFontType.TERTIARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={5} />
+                </UnorderedListExtended.Item.Marker>
+                Личный менеджер
+            </UnorderedListExtended.Item>
+            <UnorderedListExtended.Item type={EFontType.TERTIARY}>
+                <UnorderedListExtended.Item.Marker>
+                    <CheckboxtickStrokeSrvIcon20 paletteIndex={5} />
+                </UnorderedListExtended.Item.Marker>
+                Помощь при запросах и отказах от банка по операциям
+            </UnorderedListExtended.Item>
+        </UnorderedListExtended>
+    </div>
+);
+```
+
+### Sizes
+
+`stories/UnorderedListExtended/examples/Sizes.tsx`
+
+```tsx
+import React from "react";
+import { UnorderedListExtended, ETextSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(ETextSize);
+
+export const Sizes = () => (
+    <div style={{ maxWidth: "300px", display: "flex", flexDirection: "column", gap: "24px" }}>
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size}</div>
+                <UnorderedListExtended>
+                    <UnorderedListExtended.Item size={size}>
+                        <UnorderedListExtended.Item.Marker />
+                        List item text
+                    </UnorderedListExtended.Item>
+                    <UnorderedListExtended.Item size={size}>
+                        <UnorderedListExtended.Item.Marker />
+                        List item text
+                    </UnorderedListExtended.Item>
+                </UnorderedListExtended>
+            </div>
+        ))}
+    </div>
+);
+```
+