@sberbusiness/triplex-next-mcp-server 0.24.0-beta1 → 0.24.0-beta2

package/bundle/components/ButtonDropdown.md

@@ -157,3 +157,303 @@ src/components/Button/
 | Дата | Изменение |
 |---|---|
 | 2026-04-15 | Создан документ AI-ready для `ButtonDropdown`. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Buttons/examples/ButtonDropdown/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { ButtonDropdown, EButtonTheme, EComponentSize, IButtonDropdownOption } from "@sberbusiness/triplex-next";
+
+const OPTIONS: IButtonDropdownOption[] = [
+    { id: "opt-1", label: "Действие 1", onSelect: () => undefined },
+    { id: "opt-2", label: "Действие 2", onSelect: () => undefined },
+    { id: "opt-3", label: "Действие 3", onSelect: () => undefined },
+];
+
+export const DefaultExample = () => (
+    <div style={{ width: 280 }}>
+        <ButtonDropdown theme={EButtonTheme.GENERAL} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+    </div>
+);
+```
+
+### Sizes
+
+`stories/Buttons/examples/ButtonDropdown/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    ButtonDropdown,
+    EButtonDotsTheme,
+    EButtonTheme,
+    EComponentSize,
+    IButtonDropdownOption,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS: IButtonDropdownOption[] = [
+    { id: "opt-1", label: "Действие 1", onSelect: () => undefined },
+    { id: "opt-2", label: "Действие 2", onSelect: () => undefined },
+    { id: "opt-3", label: "Действие 3", onSelect: () => undefined },
+];
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <ButtonDropdown size={EComponentSize.SM} theme={EButtonTheme.GENERAL} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.SM} theme={EButtonTheme.SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.SM} theme={EButtonTheme.SECONDARY_LIGHT} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.SM} theme={EButtonTheme.DANGER} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.SM} theme={EButtonDotsTheme.DOTS_SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown
+                    size={EComponentSize.SM}
+                    theme={EButtonDotsTheme.DOTS_SECONDARY_LIGHT}
+                    options={OPTIONS}
+                >
+                    Button text
+                </ButtonDropdown>
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <ButtonDropdown size={EComponentSize.MD} theme={EButtonTheme.GENERAL} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.MD} theme={EButtonTheme.SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.MD} theme={EButtonTheme.SECONDARY_LIGHT} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.MD} theme={EButtonTheme.DANGER} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.MD} theme={EButtonDotsTheme.DOTS_SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown
+                    size={EComponentSize.MD}
+                    theme={EButtonDotsTheme.DOTS_SECONDARY_LIGHT}
+                    options={OPTIONS}
+                >
+                    Button text
+                </ButtonDropdown>
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <ButtonDropdown size={EComponentSize.LG} theme={EButtonTheme.GENERAL} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.LG} theme={EButtonTheme.SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.LG} theme={EButtonTheme.SECONDARY_LIGHT} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.LG} theme={EButtonTheme.DANGER} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown size={EComponentSize.LG} theme={EButtonDotsTheme.DOTS_SECONDARY} options={OPTIONS}>
+                    Button text
+                </ButtonDropdown>
+                <ButtonDropdown
+                    size={EComponentSize.LG}
+                    theme={EButtonDotsTheme.DOTS_SECONDARY_LIGHT}
+                    options={OPTIONS}
+                >
+                    Button text
+                </ButtonDropdown>
+            </div>
+        </div>
+    </div>
+);
+```
+
+### Themes
+
+`stories/Buttons/examples/ButtonDropdown/ThemesExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    ButtonDropdown,
+    EButtonDotsTheme,
+    EButtonTheme,
+    EComponentSize,
+    IButtonDropdownOption,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS: IButtonDropdownOption[] = [
+    { id: "opt-1", label: "Действие 1", onSelect: () => undefined },
+    { id: "opt-2", label: "Действие 2", onSelect: () => undefined },
+    { id: "opt-3", label: "Действие 3", onSelect: () => undefined },
+];
+
+export const ThemesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+            <ButtonDropdown theme={EButtonTheme.GENERAL} size={EComponentSize.MD} options={OPTIONS}>
+                General
+            </ButtonDropdown>
+            <ButtonDropdown theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} options={OPTIONS}>
+                Secondary
+            </ButtonDropdown>
+            <ButtonDropdown theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD} options={OPTIONS}>
+                Secondary Light
+            </ButtonDropdown>
+            <ButtonDropdown theme={EButtonTheme.DANGER} size={EComponentSize.MD} options={OPTIONS}>
+                Danger
+            </ButtonDropdown>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>DOTS_SECONDARY</div>
+            <ButtonDropdown theme={EButtonDotsTheme.DOTS_SECONDARY} size={EComponentSize.MD} options={OPTIONS}>
+                Dots Secondary
+            </ButtonDropdown>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>DOTS_SECONDARY_LIGHT</div>
+            <ButtonDropdown theme={EButtonDotsTheme.DOTS_SECONDARY_LIGHT} size={EComponentSize.MD} options={OPTIONS}>
+                Dots Secondary Light
+            </ButtonDropdown>
+        </div>
+    </div>
+);
+```
+
+### BlockMode
+
+`stories/Buttons/examples/ButtonDropdown/BlockModeExample.tsx`
+
+```tsx
+import React from "react";
+import { ButtonDropdown, EButtonTheme, EComponentSize, Gap, IButtonDropdownOption } from "@sberbusiness/triplex-next";
+
+const OPTIONS: IButtonDropdownOption[] = [
+    { id: "opt-1", label: "Действие 1", onSelect: () => undefined },
+    { id: "opt-2", label: "Действие 2", onSelect: () => undefined },
+    { id: "opt-3", label: "Действие 3", onSelect: () => undefined },
+];
+
+export const BlockModeExample = () => (
+    <div style={{ maxWidth: 280 }}>
+        <ButtonDropdown block theme={EButtonTheme.GENERAL} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <Gap size={16} />
+        <ButtonDropdown block theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <Gap size={16} />
+        <ButtonDropdown block theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <Gap size={16} />
+        <ButtonDropdown block theme={EButtonTheme.DANGER} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+    </div>
+);
+```
+
+### Disabled
+
+`stories/Buttons/examples/ButtonDropdown/DisabledExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    ButtonDropdown,
+    EButtonDotsTheme,
+    EButtonTheme,
+    EComponentSize,
+    IButtonDropdownOption,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS: IButtonDropdownOption[] = [
+    { id: "opt-1", label: "Действие 1", onSelect: () => undefined },
+    { id: "opt-2", label: "Действие 2", onSelect: () => undefined },
+    { id: "opt-3", label: "Действие 3", onSelect: () => undefined },
+];
+
+export const DisabledExample = () => (
+    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+        <ButtonDropdown disabled theme={EButtonTheme.GENERAL} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <ButtonDropdown disabled theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <ButtonDropdown disabled theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <ButtonDropdown disabled theme={EButtonTheme.DANGER} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <ButtonDropdown disabled theme={EButtonDotsTheme.DOTS_SECONDARY} size={EComponentSize.MD} options={OPTIONS}>
+            Button text
+        </ButtonDropdown>
+        <ButtonDropdown
+            disabled
+            theme={EButtonDotsTheme.DOTS_SECONDARY_LIGHT}
+            size={EComponentSize.MD}
+            options={OPTIONS}
+        >
+            Button text
+        </ButtonDropdown>
+    </div>
+);
+```
+
+### WithSelectedOption
+
+`stories/Buttons/examples/ButtonDropdown/WithSelectedOptionExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import { ButtonDropdown, EButtonTheme, EComponentSize, IButtonDropdownOption } from "@sberbusiness/triplex-next";
+
+const createOptions = (onItemSelect?: (id: string) => void): IButtonDropdownOption[] => [
+    { id: "opt-1", label: "Действие 1", onSelect: () => onItemSelect?.("opt-1") },
+    { id: "opt-2", label: "Действие 2", onSelect: () => onItemSelect?.("opt-2") },
+    { id: "opt-3", label: "Действие 3", onSelect: () => onItemSelect?.("opt-3") },
+];
+
+export const WithSelectedOptionExample = () => {
+    const [selectedId, setSelectedId] = useState<string | undefined>("opt-2");
+    const options = useMemo(() => createOptions(setSelectedId), []);
+    const selected = options.find((o) => o.id === selectedId);
+
+    return (
+        <div style={{ maxWidth: 280 }}>
+            <ButtonDropdown theme={EButtonTheme.GENERAL} size={EComponentSize.MD} options={options} selected={selected}>
+                Button text
+            </ButtonDropdown>
+        </div>
+    );
+};
+```
+

package/bundle/components/ButtonIcon.md

@@ -120,3 +120,72 @@ src/components/Button/
 | Дата | Изменение |
 |---|---|
 | 2026-04-15 | Создан документ AI-ready для `ButtonIcon`. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Buttons/examples/ButtonIcon/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon32 } from "@sberbusiness/icons-next";
+import { ButtonIcon, EButtonIconShape } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <ButtonIcon shape={EButtonIconShape.SQUIRCLE}>
+        <DefaulticonStrokePrdIcon32 paletteIndex={5} />
+    </ButtonIcon>
+);
+```
+
+### Sizes
+
+`stories/Buttons/examples/ButtonIcon/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    DefaulticonStrokePrdIcon16,
+    DefaulticonStrokePrdIcon20,
+    DefaulticonStrokePrdIcon24,
+    DefaulticonStrokePrdIcon32,
+} from "@sberbusiness/icons-next";
+import { ButtonIcon, EButtonIconShape } from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <ButtonIcon shape={EButtonIconShape.SQUIRCLE}>
+            <DefaulticonStrokePrdIcon16 paletteIndex={5} />
+        </ButtonIcon>
+        <ButtonIcon shape={EButtonIconShape.SQUIRCLE}>
+            <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+        </ButtonIcon>
+        <ButtonIcon shape={EButtonIconShape.SQUIRCLE}>
+            <DefaulticonStrokePrdIcon24 paletteIndex={5} />
+        </ButtonIcon>
+        <ButtonIcon shape={EButtonIconShape.SQUIRCLE}>
+            <DefaulticonStrokePrdIcon32 paletteIndex={5} />
+        </ButtonIcon>
+    </div>
+);
+```
+
+### Disabled
+
+`stories/Buttons/examples/ButtonIcon/DisabledExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon32 } from "@sberbusiness/icons-next";
+import { ButtonIcon, EButtonIconShape } from "@sberbusiness/triplex-next";
+
+export const DisabledExample = () => (
+    <ButtonIcon shape={EButtonIconShape.SQUIRCLE} disabled>
+        <DefaulticonStrokePrdIcon32 paletteIndex={5} />
+    </ButtonIcon>
+);
+```
+

package/bundle/components/Calendar.md

@@ -443,3 +443,61 @@ weekday на английском.
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Calendar/examples/DefaultExample.tsx`
+
+```tsx
+import moment from "moment";
+import React, { useState } from "react";
+import { Calendar } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => {
+    const [pickedDate, setPickedDate] = useState(moment());
+
+    return <Calendar pickedDate={pickedDate} onDateChange={setPickedDate} />;
+};
+```
+
+### PickTypes
+
+`stories/Calendar/examples/PickTypesExample.tsx`
+
+```tsx
+import moment from "moment";
+import React, { useState } from "react";
+import { Calendar, ECalendarPickType } from "@sberbusiness/triplex-next";
+
+export const PickTypesExample = () => {
+    const initialDate = moment("2024-01-15");
+    const [pickedDateDatePick, setPickedDateDatePick] = useState(initialDate);
+    const [pickedDateMonthYearPick, setPickedDateMonthYearPick] = useState(initialDate);
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>DATEPICK</div>
+                <Calendar
+                    pickType={ECalendarPickType.datePick}
+                    pickedDate={pickedDateDatePick}
+                    onDateChange={setPickedDateDatePick}
+                />
+            </div>
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MONTHYEARPICK</div>
+                <Calendar
+                    pickType={ECalendarPickType.monthYearPick}
+                    pickedDate={pickedDateMonthYearPick}
+                    onDateChange={setPickedDateMonthYearPick}
+                />
+            </div>
+        </div>
+    );
+};
+```
+

package/bundle/components/Checkbox.md

@@ -124,3 +124,115 @@ version: "1.0"
 |---|---|
 | 2026-04-16 | Приведение `Checkbox` к AI-ready: соблюдены правила `docs/ai/codestyle.md`, добавлена AI-документация и unit-тест на передачу `className` корневому `label`. |
 
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Checkbox/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => <Checkbox>Checkbox label</Checkbox>;
+```
+
+### Sizes
+
+`stories/Checkbox/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, EComponentSize, Gap } from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <>
+        <Checkbox size={EComponentSize.SM}>SM</Checkbox>
+        <Gap size={16} />
+        <Checkbox size={EComponentSize.MD}>MD</Checkbox>
+        <Gap size={16} />
+        <Checkbox size={EComponentSize.LG}>LG</Checkbox>
+    </>
+);
+```
+
+### XGroup
+
+`stories/Checkbox/examples/XGroupExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup, EComponentSize, Gap } from "@sberbusiness/triplex-next";
+
+export const XGroupExample = () => (
+    <>
+        <CheckboxXGroup indent={16}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.SM}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+        <Gap size={16} />
+        <CheckboxXGroup indent={16}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+        <Gap size={16} />
+        <CheckboxXGroup indent={20}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.LG}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+    </>
+);
+```
+
+### YGroup
+
+`stories/Checkbox/examples/YGroupExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxYGroup, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
+
+export const YGroupExample = () => (
+    <Row>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.SM}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.LG}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+    </Row>
+);
+```
+

package/bundle/components/CheckboxTree.md

@@ -278,3 +278,64 @@ onChange/bulk/checked. **Не упрощать** — CheckboxTreeExtended пол
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/CheckboxTree/examples/DefaultExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { CheckboxTree, ICheckboxTreeCheckboxData } from "@sberbusiness/triplex-next";
+
+const SAMPLE: ICheckboxTreeCheckboxData[] = [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+export const DefaultExample = () => {
+    const [checkboxes, setCheckboxes] = useState<ICheckboxTreeCheckboxData[]>(SAMPLE);
+    return <CheckboxTree checkboxes={checkboxes} onChange={setCheckboxes} />;
+};
+```
+
+### Sizes
+
+`stories/CheckboxTree/examples/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { CheckboxTree, Col, EComponentSize, ICheckboxTreeCheckboxData, Row } from "@sberbusiness/triplex-next";
+
+const createData = (): ICheckboxTreeCheckboxData[] => [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+export const SizesExample = () => {
+    const [sm, setSm] = useState<ICheckboxTreeCheckboxData[]>(createData());
+    const [md, setMd] = useState<ICheckboxTreeCheckboxData[]>(createData());
+    const [lg, setLg] = useState<ICheckboxTreeCheckboxData[]>(createData());
+
+    return (
+        <Row>
+            <Col size={4}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+                <CheckboxTree checkboxes={sm} onChange={setSm} size={EComponentSize.SM} />
+            </Col>
+            <Col size={4}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+                <CheckboxTree checkboxes={md} onChange={setMd} />
+            </Col>
+            <Col size={4}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+                <CheckboxTree checkboxes={lg} onChange={setLg} size={EComponentSize.LG} />
+            </Col>
+        </Row>
+    );
+};
+```
+