@daisforge/ui 1.14.1 → 1.16.0

package/mcp-data/component-index.json

@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-08-21T16:52:17.991Z",
-  "libVersion": "1.14.1",
+  "generatedAt": "2026-08-28T16:43:41.020Z",
+  "libVersion": "1.16.0",
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -570,12 +570,6 @@
               "required": false,
               "description": "Стили для метки (badge). Позволяет переопределить, например, text-transform"
             },
-            {
-              "name": "hrefProps",
-              "type": "{ onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined; onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined; } | undefined",
-              "required": false,
-              "description": "Дополнительные свойства для `href элемента`. Не будет работать, если не заполнено свойство `href`"
-            },
             {
               "name": "infoTooltipProps",
               "type": "Omit<TooltipProps, \"text\" | \"target\"> | undefined",
@@ -596,9 +590,9 @@
             },
             {
               "name": "subtitle",
-              "type": "string | undefined",
+              "type": "React.ReactNode",
               "required": false,
-              "description": "Подзаголовок. При нехватке места будет обрезаться троеточием (truncated text) с Tooltip при наведении на обрезанный текст"
+              "description": "Подзаголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\nна обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\nвремя загрузки) — он рендерится как есть, без тултипа."
             },
             {
               "name": "subtitleTooltipProps",
@@ -606,6 +600,12 @@
               "required": false,
               "description": "Пропсы для Tooltip подзаголовка"
             },
+            {
+              "name": "title",
+              "type": "React.ReactNode",
+              "required": false,
+              "description": "Заголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\nна обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\nвремя загрузки данных с бэкенда) — он рендерится как есть, без тултипа."
+            },
             {
               "name": "titleLinkProps",
               "type": "Omit<PropsType<{ view: { default: PolymorphicClassName; secondary: PolymorphicClassName; tertiary: PolymorphicClassName; paragraph: PolymorphicClassName; accent: PolymorphicClassName; positive: PolymorphicClassName; warning: PolymorphicClassName; negative: PolymorphicClassName; clear: PolymorphicClassName; }; disabled: { true: PolymorphicClassName; }; focused: { true: PolymorphicClassName; }; }> &…",
@@ -618,6 +618,13 @@
               "type": "Omit<TooltipProps, \"text\" | \"target\"> | undefined",
               "required": false,
               "description": "Пропсы для Tooltip заголовка"
+            },
+            {
+              "name": "hrefProps",
+              "type": "{ onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined; onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined; } | undefined",
+              "required": false,
+              "description": "",
+              "deprecated": true
             }
           ]
         },
@@ -779,8 +786,22 @@
         },
         {
           "name": "DotsIconButton",
-          "typeName": "IconButtonDotsProps",
+          "typeName": "AnalyticalWidgetIconButtonDotsProps",
           "props": [
+            {
+              "name": "absolute",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Позиционировать кнопку абсолютом в правом верхнем углу ближайшего\nrelative-контейнера. Для потребителей (напр. GridDND рабочих столов),\nу которых нет доступа к контенту виджета.",
+              "default": "false"
+            },
+            {
+              "name": "absoluteOffset",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Отступ (top/right) при `absolute`.",
+              "default": "12"
+            },
             {
               "name": "as",
               "type": "keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined",
@@ -798,7 +819,7 @@
               "type": "\"horizontal\" | \"vertical\" | undefined",
               "required": false,
               "description": "",
-              "default": "'horizontal'"
+              "default": "'vertical'"
             },
             {
               "name": "iconSize",
@@ -806,48 +827,6 @@
               "required": false,
               "description": ""
             },
-            {
-              "name": "additionalContent",
-              "type": "React.ReactNode",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "appearance",
-              "type": "\"default\" | \"outline\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "blur",
-              "type": "\"small\" | \"medium\" | \"large\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "contentLeft",
-              "type": "React.ReactNode",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "contentPlacing",
-              "type": "\"default\" | \"relaxed\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "contentRight",
-              "type": "React.ReactNode",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "focused",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": ""
-            },
             {
               "name": "isLoading",
               "type": "boolean | undefined",
@@ -861,58 +840,17 @@
               "description": ""
             },
             {
-              "name": "outlined",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "pin",
-              "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "shiftLeft",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "shiftRight",
-              "type": "boolean | undefined",
+              "name": "position",
+              "type": "any",
               "required": false,
               "description": ""
             },
             {
               "name": "size",
-              "type": "\"xs\" | \"s\" | \"xxs\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "square",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "stretch",
-              "type": "boolean | undefined",
+              "type": "\"xs\" | \"s\" | \"m\" | \"l\" | undefined",
               "required": false,
-              "description": ""
-            },
-            {
-              "name": "stretching",
-              "type": "\"auto\" | \"filled\" | \"fixed\" | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "text",
-              "type": "string | undefined",
-              "required": false,
-              "description": ""
+              "description": "",
+              "default": "'m'"
             },
             {
               "name": "type",
@@ -920,17 +858,12 @@
               "required": false,
               "description": ""
             },
-            {
-              "name": "value",
-              "type": "string | number | undefined",
-              "required": false,
-              "description": ""
-            },
             {
               "name": "view",
-              "type": "\"clear\" | \"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"black\" | \"white\" | undefined",
+              "type": "\"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"info\" | undefined",
               "required": false,
-              "description": ""
+              "description": "",
+              "default": "'secondary'"
             }
           ]
         },
@@ -979,25 +912,37 @@
       ],
       "scope": "internal",
       "docs": "# AnalyticalWidget\n\nАналитический виджет с адаптивным поведением и слотами для контента.\n\n## Ключевые особенности\n\n- Три размера (`L`, `M`, `S`) с разными параметрами высоты, ширины, border-radius и padding\n- Слоты: `headerSlot`, `topSlot`, `middleSlot` (только для `L`), `contentSlot`\n- `middleSlot` видим только при размере `L`\n- Прокрутка контентной области (`scrollable`)\n- Кастомизация через `classes`, `$css` и CSS-переменные\n\n## Compound-компоненты\n\n```ts\nAnalyticalWidget.Header = AnalyticalWidgetHeader;\nAnalyticalWidget.FilterIconButton = IconButtonFilter;\nAnalyticalWidget.DotsIconButton = IconButtonDots;\nAnalyticalWidget.Chips = AnalyticalWidgetChipsGroup;\n```\n\n- `AnalyticalWidget.Header` — шапка виджета с заголовком и слотами для действий\n- `AnalyticalWidget.FilterIconButton` — кнопка-иконка для фильтров (с поддержкой Dropdown). Поддерживает красный индикатор применения фильтров\n- `AnalyticalWidget.DotsIconButton` — кнопка-иконка для дополнительных действий (с поддержкой Dropdown)\n- `AnalyticalWidget.Chips` — чипы для отображения применённых фильтров\n\n## CSS-переменные\n\n- `--analytical-widget-bg` — фон всего виджета\n- `--analytical-widget-padding` — внутренние отступы контейнера\n- `--analytical-widget-br` — радиус скругления углов\n- `--analytical-widget-min-height` — минимальная высота контентной области\n\n## Особенности\n\n- Все параметры можно переопределить через CSS-переменные, нативные/кастомные классы компонента или проп `$css` для основного контейнера. Объект `analyticalWidgetClassNames` доступен для импорта\n- Кнопка троеточия вставляется через микрофронт другой командой — место под неё зарезервировано. В stories показан пример через `position: absolute`\n- Высота, ширина, border-radius, padding зависят от размера и имеют фиксированные значения\n\n<AnalyticalWidgetInfoAboutAdaptive />\n\nОписание типов и compound-пропсов — в разделе [API](/docs/композиции-analyticalwidget-api--docs).",
-      "apiDocs": "# AnalyticalWidget API\n\n## AnalyticalWidgetProps\n\n```typescript\ntype AnalyticalWidgetProps = {\n  /**\n   * Размер виджета\n   */\n  size: AnalyticalWidgetSize;\n  /**\n   * Добавление или удаление скролла у contentSlot\n   */\n  scrollable?: boolean;\n  /**\n   * ReactNode для шапки\n   */\n  headerSlot?: ReactNode;\n  /**\n   * ReactNode (в основном для фильтров)\n   */\n  topSlot?: ReactNode;\n  /**\n   * ReactNode (в основном для табов. Отображается только в режиме l)\n   */\n  middleSlot?: ReactNode;\n  /**\n   * ReactNode с контентом\n   */\n  contentSlot: ReactNode;\n  /**\n   * Кастомные классы для слотов и самого компонента\n   */\n  classes?: AnalyticalWidgetClasses;\n  /**\n   * Кастомные стили styled-components для основного контейнера виджета\n   */\n  $css?: string | CSSObject | FlattenSimpleInterpolation;\n};\n```\n\n## AnalyticalWidgetSize\n\n```typescript\ntype AnalyticalWidgetSize = 'l' | 'm' | 's';\n```\n\n## AnalyticalWidgetClasses\n\n```typescript\ntype AnalyticalWidgetClasses = {\n  /**\n   * Кастомный класс для root элемента\n   */\n  root?: string;\n  /**\n   * Кастомный класс для topSlot элемента\n   */\n  topSlot?: string;\n  /**\n   * Кастомный класс для middleSlot элемента\n   */\n  middleSlot?: string;\n  /**\n   * Кастомный класс для contentSlot элемента\n   */\n  contentSlot?: string;\n};\n```\n\n## Compound types\n\n### AnalyticalWidget.Header\n\n```typescript\ninterface AnalyticalWidgetHeaderProps {\n  /**\n   * Заголовок. При нехватке места будет обрезаться троеточием (truncated text) с Tooltip при наведении на обрезанный текст\n   */\n  title?: string;\n  /**\n   * Пропсы для Tooltip заголовка\n   */\n  titleTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * Метка справа от заголовка\n   */\n  badge?: string;\n  /**\n   * Стили для метки (badge). Позволяет переопределить, например, text-transform\n   */\n  badgeStyles?: CSSProperties;\n  /**\n   * Подзаголовок. При нехватке места будет обрезаться троеточием (truncated text) с Tooltip при наведении на обрезанный текст\n   */\n  subtitle?: string;\n  /**\n   * Пропсы для Tooltip подзаголовка\n   */\n  subtitleTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * Текст Tooltip при наведении на иконку i, справа от тега. Если не передать этот параметр, то иконка отображаться не будет\n   */\n  infoTooltipText?: string;\n  /**\n   * Пропсы для Tooltip иконки i, справа от тега.\n   */\n  infoTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * url для ссылки. Если не передать, то иконка со стрелкой отображаться не будет\n   */\n  href?: string;\n  /**\n   * Дополнительные свойства для `href элемента`. Не будет работать, если не заполнено свойство `href`\n   */\n  hrefProps?: {\n    onClick?: MouseEventHandler<HTMLAnchorElement>;\n    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement>;\n  };\n  /**\n   * Если необходимо title сделать ссылкой.\n   * Пропсы для компонента Link, который оборачивает заголовок.\n   * @default underline=\"none\"\n   */\n  titleLinkProps?: Omit<LinkCompProps, 'ref'>;\n  /**\n   * Слот для контента в правой части шапки\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Имя класса для шапки\n   */\n  className?: string;\n}\n```\n\n### AnalyticalWidget.Chips\n\n```typescript\ntype AnalyticalWidgetFixedChipProps = ChipCompProps & {\n  key?: string | number;\n};\n```\n\n### AnalyticalWidget.FilterIconButton\n\n```typescript\ntype IconButtonFilterProps = IconButtonProps & {\n  redSquare?: boolean;\n  dropdownProps?: ComponentProps<typeof Dropdown>;\n  iconSize?: ComponentProps<typeof Icon>['size'];\n};\n```\n\n### AnalyticalWidget.DotsIconButton\n\n```typescript\ntype IconButtonDotsProps = IconButtonProps & {\n  dropdownProps?: ComponentProps<typeof Dropdown>;\n  iconSize?: ComponentProps<typeof Icon>['size'];\n  iconOrientation?: 'horizontal' | 'vertical';\n};\n```",
+      "apiDocs": "# AnalyticalWidget API\n\n## AnalyticalWidgetProps\n\n```typescript\ntype AnalyticalWidgetProps = {\n  /**\n   * Размер виджета\n   */\n  size: AnalyticalWidgetSize;\n  /**\n   * Добавление или удаление скролла у contentSlot\n   */\n  scrollable?: boolean;\n  /**\n   * ReactNode для шапки\n   */\n  headerSlot?: ReactNode;\n  /**\n   * ReactNode (в основном для фильтров)\n   */\n  topSlot?: ReactNode;\n  /**\n   * ReactNode (в основном для табов. Отображается только в режиме l)\n   */\n  middleSlot?: ReactNode;\n  /**\n   * ReactNode с контентом\n   */\n  contentSlot: ReactNode;\n  /**\n   * Кастомные классы для слотов и самого компонента\n   */\n  classes?: AnalyticalWidgetClasses;\n  /**\n   * Кастомные стили styled-components для основного контейнера виджета\n   */\n  $css?: string | CSSObject | FlattenSimpleInterpolation;\n};\n```\n\n## AnalyticalWidgetSize\n\n```typescript\ntype AnalyticalWidgetSize = 'l' | 'm' | 's';\n```\n\n## AnalyticalWidgetClasses\n\n```typescript\ntype AnalyticalWidgetClasses = {\n  /**\n   * Кастомный класс для root элемента\n   */\n  root?: string;\n  /**\n   * Кастомный класс для topSlot элемента\n   */\n  topSlot?: string;\n  /**\n   * Кастомный класс для middleSlot элемента\n   */\n  middleSlot?: string;\n  /**\n   * Кастомный класс для contentSlot элемента\n   */\n  contentSlot?: string;\n};\n```\n\n## Compound types\n\n### AnalyticalWidget.Header\n\n```typescript\ninterface AnalyticalWidgetHeaderProps {\n  /**\n   * Заголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\n   * на обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\n   * время загрузки данных с бэкенда) — он рендерится как есть, без тултипа.\n   */\n  title?: ReactNode;\n  /**\n   * Пропсы для Tooltip заголовка\n   */\n  titleTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * Метка справа от заголовка\n   */\n  badge?: string;\n  /**\n   * Стили для метки (badge). Позволяет переопределить, например, text-transform\n   */\n  badgeStyles?: CSSProperties;\n  /**\n   * Подзаголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\n   * на обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\n   * время загрузки) — он рендерится как есть, без тултипа.\n   */\n  subtitle?: ReactNode;\n  /**\n   * Пропсы для Tooltip подзаголовка\n   */\n  subtitleTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * Текст Tooltip при наведении на иконку i, справа от тега. Если не передать этот параметр, то иконка отображаться не будет\n   */\n  infoTooltipText?: string;\n  /**\n   * Пропсы для Tooltip иконки i, справа от тега.\n   */\n  infoTooltipProps?: Omit<TooltipProps, 'text' | 'target'>;\n  /**\n   * @deprecated Стрелка больше не рисуется. Используйте `titleLinkProps`.\n   */\n  href?: string;\n  /**\n   * @deprecated Стрелка больше не рисуется. Используйте `titleLinkProps`.\n   */\n  hrefProps?: {\n    onClick?: MouseEventHandler<HTMLAnchorElement>;\n    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement>;\n  };\n  /**\n   * Если необходимо title сделать ссылкой.\n   * Пропсы для компонента Link, который оборачивает заголовок.\n   * @default underline=\"none\"\n   */\n  titleLinkProps?: Omit<LinkCompProps, 'ref'>;\n  /**\n   * Слот для контента в правой части шапки\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Имя класса для шапки\n   */\n  className?: string;\n}\n```\n\n### AnalyticalWidget.Chips\n\n```typescript\ntype AnalyticalWidgetFixedChipProps = ChipCompProps & {\n  key?: string | number;\n};\n```\n\n### AnalyticalWidget.FilterIconButton\n\n```typescript\ntype IconButtonFilterProps = IconButtonProps & {\n  redSquare?: boolean;\n  dropdownProps?: ComponentProps<typeof Dropdown>;\n  iconSize?: ComponentProps<typeof Icon>['size'];\n};\n```\n\n### AnalyticalWidget.DotsIconButton\n\n```typescript\ntype IconButtonDotsProps = IconButtonProps & {\n  dropdownProps?: ComponentProps<typeof Dropdown>;\n  iconSize?: ComponentProps<typeof Icon>['size'];\n  iconOrientation?: 'horizontal' | 'vertical';\n};\n```",
       "curatedStories": [
         {
           "exportName": "AnalyticalWidgetL",
           "displayName": "AnalyticalWidgetL",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n    const tabItems = Array(6).fill(0);\n    const [tabIndex, setTabIndex] = useState(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    return (\n      <GridContainerL>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"l\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget L\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={filterList\n                      .map((item) => {\n                        if ('groupLabel' in item) {\n                          return item.items.map((innerItem) => ({\n                            text: String(innerItem.label),\n                            view: 'default' as const,\n                            hasClear: false as const,\n                            onClick: innerItem.onClick,\n                          }));\n                        }\n                        return {\n                          text: String(item.label),\n                          view: 'default' as const,\n                          hasClear: false as const,\n                          onClick: item.onClick,\n                        };\n                      })\n                      .flat()}\n                  />\n                </Flow>\n              }\n              middleSlot={\n                <Tabs\n                  style={{\n                    width: '100%',\n                  }}\n                  view=\"divider\"\n                  orientation=\"horizontal\"\n                  size=\"xs\"\n                >\n                  {tabItems.map((_, i) => (\n                    <TabItem\n                      view=\"divider\"\n                      orientation=\"horizontal\"\n                      // eslint-disable-next-line react/no-array-index-key\n                      key={`item:${i}`}\n                      size=\"xs\"\n                      selected={i === tabIndex}\n                      tabIndex={0}\n                      onClick={() => setTabIndex(i)}\n                    >\n                      {i === 0\n                        ? 'Длинное наименование данных'\n                        : `Label${i + 1}`}\n                    </TabItem>\n                  ))}\n                </Tabs>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerL>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerL>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"l\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget L\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerL>\n    );\n  }"
         },
         {
           "exportName": "AnalyticalWidgetM",
           "displayName": "AnalyticalWidgetM",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    return (\n      <GridContainerM>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"m\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget M\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={filterList\n                      .map((item, index) => {\n                        if ('groupLabel' in item) {\n                          return item.items.map((innerItem, innerIdex) => ({\n                            text: String(innerItem.label),\n                            view: 'default' as const,\n                            hasClear: false as const,\n                            onClick: innerItem.onClick,\n                            key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n                          }));\n                        }\n                        return {\n                          text: String(item.label),\n                          view: 'default' as const,\n                          hasClear: false as const,\n                          onClick: item.onClick,\n                          key: `chip-key-${index}-${item.label}`,\n                        };\n                      })\n                      .flat()}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerM>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item, index) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem, innerIdex) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n            key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n          key: `chip-key-${index}-${item.label}`,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerM>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"m\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget M\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerM>\n    );\n  }"
         },
         {
           "exportName": "AnalyticalWidgetS",
           "displayName": "AnalyticalWidgetS",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    const isHaveChips = chipsList.length > 0;\n\n    return (\n      <GridContainerS>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"s\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Заголовок\"\n                  badge=\"TA\"\n                  subtitle=\"Подзаголовок здесь\"\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                isHaveChips && (\n                  <Flow orientation=\"vertical\" mainAxisGap={8}>\n                    <AnalyticalWidget.Chips\n                      opened={filterListOpened}\n                      isWrapped\n                      gap=\"wide\"\n                      isCommonChipStyles={false}\n                      chips={chipsList}\n                    />\n                  </Flow>\n                )\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerS>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerS>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"s\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Заголовок\"\n                  badge=\"TA\"\n                  subtitle=\"Подзаголовок здесь\"\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerS>\n    );\n  }"
+        },
+        {
+          "exportName": "AnalyticalWidgetCustomTopSlot",
+          "displayName": "Custom topSlot + rightSlot",
+          "type": "full-code",
+          "code": "() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const [period, setPeriod] = useState('month');\n\n    const { filterList } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const customChips = filterList.flatMap((item) =>\n      'groupLabel' in item\n        ? item.items.map((inner) => ({\n            label: String(inner.label),\n            onClick: inner.onClick,\n          }))\n        : [{ label: String(item.label), onClick: item.onClick }],\n    );\n    const hasChips = customChips.length > 0;\n    const lastRef = useRef(customChips);\n    if (hasChips) {\n      lastRef.current = customChips;\n    }\n    const renderedChips = hasChips ? customChips : lastRef.current;\n\n    return (\n      <div style={{ padding: 20, background: 'grey' }}>\n        <div style={{ position: 'relative', width: 600, height: 512 }}>\n          <AnalyticalWidget\n            size=\"l\"\n            headerSlot={\n              <AnalyticalWidget.Header\n                title=\"Custom topSlot\"\n                badge=\"TA\"\n                subtitle=\"Свои чипы + Select в rightSlot\"\n                infoTooltipText=\"Info\"\n                rightSlot={\n                  <Select\n                    size=\"xs\"\n                    value={period}\n                    onChange={(v) => setPeriod(v as string)}\n                    items={[\n                      { label: 'Месяц', value: 'month' },\n                      { label: 'Квартал', value: 'quarter' },\n                      { label: 'Год', value: 'year' },\n                    ]}\n                  />\n                }\n              />\n            }\n            topSlot={\n              <div className={analyticalWidgetClassNames.selfSpacedTopSlot}>\n                <Collapse isOpen={hasChips} unMountOnClose>\n                  <div\n                    style={{\n                      display: 'flex',\n                      flexWrap: 'wrap',\n                      gap: 4,\n                      paddingTop: 8,\n                    }}\n                  >\n                    {renderedChips.map((chip, index) => (\n                      <button\n                        type=\"button\"\n                        // eslint-disable-next-line react/no-array-index-key\n                        key={`${chip.label}-${index}`}\n                        onClick={chip.onClick}\n                        style={{\n                          padding: '2px 8px',\n                          borderRadius: 12,\n                          background: 'rgba(0, 0, 0, 0.06)',\n                          border: 'none',\n                          fontSize: 12,\n                          lineHeight: '16px',\n                          whiteSpace: 'nowrap',\n                          cursor: 'pointer',\n                        }}\n                      >\n                        {chip.label}\n                      </button>\n                    ))}\n                  </div>\n                </Collapse>\n              </div>\n            }\n            contentSlot={\n              <div style={{ minHeight: 'fit-content' }}>{longText()}</div>\n            }\n          />\n          <AnalyticalWidget.DotsIconButton\n            absolute\n            dropdownProps={{\n              items: generateButtonItems(\n                'dotsButton',\n                dotsButtonOptions,\n                filterList,\n              ),\n              onItemSelect(item) {\n                updateFilters({\n                  dotsButton:\n                    filters.dotsButton === item.value?.toString()\n                      ? ''\n                      : item.value?.toString() ?? '',\n                });\n              },\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
+        },
+        {
+          "exportName": "AnalyticalWidgetHeaderSkeleton",
+          "displayName": "Header: skeleton title/subtitle",
+          "type": "full-code",
+          "code": "() => {\n    const [loading, setLoading] = useState(true);\n\n    return (\n      <div style={{ padding: 20, background: 'grey' }}>\n        <div style={{ marginBottom: 12 }}>\n          <Button size=\"s\" onClick={() => setLoading((v) => !v)}>\n            {loading ? 'Загрузить данные' : 'Показать скелетон'}\n          </Button>\n        </div>\n        <div style={{ position: 'relative', width: 600, height: 512 }}>\n          <AnalyticalWidget\n            size=\"l\"\n            headerSlot={\n              <AnalyticalWidget.Header\n                title={\n                  loading ? (\n                    <LineSkeleton size=\"bodyM\" style={{ width: 180 }} />\n                  ) : (\n                    'Аналитический виджет'\n                  )\n                }\n                badge={loading ? undefined : 'TA'}\n                subtitle={\n                  loading ? (\n                    <LineSkeleton size=\"bodyXS\" style={{ width: 120 }} />\n                  ) : (\n                    'Данные за месяц'\n                  )\n                }\n                infoTooltipText=\"Info\"\n              />\n            }\n            contentSlot={\n              <div style={{ minHeight: 'fit-content' }}>{longText()}</div>\n            }\n          />\n        </div>\n      </div>\n    );\n  }"
         }
       ],
       "hasCuratedMeta": true,
@@ -1010,26 +955,25 @@
           "exportName": "AnalyticalWidgetL",
           "displayName": "AnalyticalWidgetL",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n    const tabItems = Array(6).fill(0);\n    const [tabIndex, setTabIndex] = useState(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    return (\n      <GridContainerL>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"l\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget L\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={filterList\n                      .map((item) => {\n                        if ('groupLabel' in item) {\n                          return item.items.map((innerItem) => ({\n                            text: String(innerItem.label),\n                            view: 'default' as const,\n                            hasClear: false as const,\n                            onClick: innerItem.onClick,\n                          }));\n                        }\n                        return {\n                          text: String(item.label),\n                          view: 'default' as const,\n                          hasClear: false as const,\n                          onClick: item.onClick,\n                        };\n                      })\n                      .flat()}\n                  />\n                </Flow>\n              }\n              middleSlot={\n                <Tabs\n                  style={{\n                    width: '100%',\n                  }}\n                  view=\"divider\"\n                  orientation=\"horizontal\"\n                  size=\"xs\"\n                >\n                  {tabItems.map((_, i) => (\n                    <TabItem\n                      view=\"divider\"\n                      orientation=\"horizontal\"\n                      // eslint-disable-next-line react/no-array-index-key\n                      key={`item:${i}`}\n                      size=\"xs\"\n                      selected={i === tabIndex}\n                      tabIndex={0}\n                      onClick={() => setTabIndex(i)}\n                    >\n                      {i === 0\n                        ? 'Длинное наименование данных'\n                        : `Label${i + 1}`}\n                    </TabItem>\n                  ))}\n                </Tabs>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerL>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerL>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"l\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget L\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerL>\n    );\n  }"
         },
         {
           "exportName": "AnalyticalWidgetM",
           "displayName": "AnalyticalWidgetM",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    return (\n      <GridContainerM>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"m\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget M\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={filterList\n                      .map((item, index) => {\n                        if ('groupLabel' in item) {\n                          return item.items.map((innerItem, innerIdex) => ({\n                            text: String(innerItem.label),\n                            view: 'default' as const,\n                            hasClear: false as const,\n                            onClick: innerItem.onClick,\n                            key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n                          }));\n                        }\n                        return {\n                          text: String(item.label),\n                          view: 'default' as const,\n                          hasClear: false as const,\n                          onClick: item.onClick,\n                          key: `chip-key-${index}-${item.label}`,\n                        };\n                      })\n                      .flat()}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerM>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const someItems = Array(3).fill(0);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item, index) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem, innerIdex) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n            key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n          key: `chip-key-${index}-${item.label}`,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerM>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"m\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Analytic widget M\"\n                  badge=\"TA\"\n                  subtitle=\"Monthly report\"\n                  rightSlot={\n                    <Flow\n                      alignment=\"center\"\n                      mainAxisGap=\"8px\"\n                      style={{\n                        flexWrap: 'nowrap',\n                      }}\n                    >\n                      <SegmentGroup hasBackground size=\"xs\">\n                        {someItems.map((_, i) => (\n                          <SegmentItem\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={`item:${i}`}\n                            value={`item_${i}`}\n                            label={`Label${i + 1}`}\n                            size=\"xs\"\n                            view=\"primary\"\n                          />\n                        ))}\n                      </SegmentGroup>\n                    </Flow>\n                  }\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerM>\n    );\n  }"
         },
         {
           "exportName": "AnalyticalWidgetS",
           "displayName": "AnalyticalWidgetS",
           "type": "full-code",
-          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  TabItem,\n  Tabs,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    const isHaveChips = chipsList.length > 0;\n\n    return (\n      <GridContainerS>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"s\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Заголовок\"\n                  badge=\"TA\"\n                  subtitle=\"Подзаголовок здесь\"\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                isHaveChips && (\n                  <Flow orientation=\"vertical\" mainAxisGap={8}>\n                    <AnalyticalWidget.Chips\n                      opened={filterListOpened}\n                      isWrapped\n                      gap=\"wide\"\n                      isCommonChipStyles={false}\n                      chips={chipsList}\n                    />\n                  </Flow>\n                )\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <div\n              style={{\n                position: 'absolute',\n                top: '16px',\n                right: '16px',\n              }}\n            >\n              <AnalyticalWidget.DotsIconButton\n                size=\"xs\"\n                iconSize=\"xs\"\n                dropdownProps={{\n                  items: generateButtonItems(\n                    'dotsButton',\n                    dotsButtonOptions,\n                    filterList,\n                  ),\n                  onItemSelect(item) {\n                    updateFilters({\n                      dotsButton:\n                        filters.dotsButton === item.value?.toString()\n                          ? ''\n                          : item.value?.toString() ?? '',\n                    });\n                  },\n                }}\n              />\n            </div>\n          </div>\n        </SegmentProvider>\n      </GridContainerS>\n    );\n  }"
+          "code": "import {\n  Box,\n  Combobox,\n  Flow,\n  SegmentGroup,\n  SegmentProvider,\n  TooltipList,\n  useFiltersList,\n  IconDone,\n  SegmentItem,\n  AnalyticalWidget,\n  textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n  searchedV: string;\n  blocks: string[];\n  tribes: string[];\n  allocation: string;\n  year: number | null;\n  filterButton: string;\n  dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n  searchedV: '',\n  blocks: [],\n  tribes: [],\n  allocation: '',\n  year: null,\n  filterButton: '',\n  dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n  searchedV: 'Поиск',\n  blocks: 'Блок',\n  tribes: 'Трайб',\n  allocation: 'Аллокация',\n  year: 'Год',\n  filterButton: 'Фильтры',\n  dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n  useMemo(\n    () =>\n      Array(num)\n        .fill(0)\n        .map((_, i) => ({\n          label: \\\n\n() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n\n    const { filterList, filterListOpened } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const chipsList = filterList\n      .map((item) => {\n        if ('groupLabel' in item) {\n          return item.items.map((innerItem) => ({\n            text: String(innerItem.label),\n            view: 'default' as const,\n            hasClear: false as const,\n            onClick: innerItem.onClick,\n          }));\n        }\n        return {\n          text: String(item.label),\n          view: 'default' as const,\n          hasClear: false as const,\n          onClick: item.onClick,\n        };\n      })\n      .flat();\n\n    return (\n      <GridContainerS>\n        <SegmentProvider defaultSelected={['item_0']}>\n          <div\n            style={{\n              position: 'relative',\n              width: 'min-content',\n            }}\n          >\n            <AnalyticalWidget\n              size=\"s\"\n              headerSlot={\n                <AnalyticalWidget.Header\n                  title=\"Заголовок\"\n                  badge=\"TA\"\n                  subtitle=\"Подзаголовок здесь\"\n                  infoTooltipText=\"Info\"\n                  href=\"/\"\n                />\n              }\n              topSlot={\n                <Flow orientation=\"vertical\" mainAxisGap={8}>\n                  <AnalyticalWidget.Chips\n                    opened={filterListOpened}\n                    isWrapped\n                    gap=\"wide\"\n                    isCommonChipStyles={false}\n                    chips={chipsList}\n                  />\n                </Flow>\n              }\n              contentSlot={\n                <div\n                  style={{\n                    minHeight: 'fit-content',\n                  }}\n                >\n                  {longText()}\n                </div>\n              }\n              classes={{\n                topSlot: 'myCustomClassForTopSlot',\n                middleSlot: 'myCustomClassForMiddleSlot',\n                contentSlot: 'myCustomClassForContentSlot',\n                root: 'myCustomClassForRoot',\n              }}\n            />\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: generateButtonItems(\n                  'dotsButton',\n                  dotsButtonOptions,\n                  filterList,\n                ),\n                onItemSelect(item) {\n                  updateFilters({\n                    dotsButton:\n                      filters.dotsButton === item.value?.toString()\n                        ? ''\n                        : item.value?.toString() ?? '',\n                  });\n                },\n              }}\n            />\n          </div>\n        </SegmentProvider>\n      </GridContainerS>\n    );\n  }"
         },
         {
-          "exportName": "Usage1",
-          "displayName": "Использование в WidgetS.tsx",
-          "type": "usage",
-          "code": "<AnalyticalWidget\n        $css={{\n          height: '100%',\n          maxWidth: 'unset !important',\n          width: '100% !important',\n        }}\n        size=\"s\"\n        headerSlot={\n          <AnalyticalWidget.Header\n            title={`Заголовок S${id\n              .toString()\n              .split('')\n              .reverse()\n              .slice(0, 2)\n              .join('')}`}\n            badge={`S${id.toString().split('').reverse().slice(0, 2).join('')}`}\n            subtitle=\"Подзаголовок\"\n            infoTooltipText=\"Info\"\n            href=\"/\"\n          />\n        }\n        topSlot={\n          chipsList.length > 0 && (\n            <Flow orientation=\"vertical\" mainAxisGap={8}>\n              <AnalyticalWidget.Chips\n                opened={filterListOpened}\n                isWrapped\n                gap=\"wide\"\n                isCommonChipStyles={false}\n                chips={chipsList}\n              />\n            </Flow>\n          )\n        }\n        contentSlot={\n          <div\n            style={{\n              height: 'fit-content',\n            }}\n          >\n            {longText()}\n          </div>\n        }\n        classes={{\n          topSlot: 'myCustomClassForTopSlot',\n          middleSlot: 'myCustomClassForMiddleSlot',\n          contentSlot: 'myCustomClassForContentSlot',\n          root: 'myCustomClassForRoot',\n        }}\n      />",
-          "sourceFile": "packages/storybook/src/stories/AnalyticalWidget/components/WidgetS.tsx"
+          "exportName": "AnalyticalWidgetCustomTopSlot",
+          "displayName": "Custom topSlot + rightSlot",
+          "type": "full-code",
+          "code": "() => {\n    const [filters, updateFilters] = useReducer(\n      filtersReducer,\n      DEFAULT_FILTERS,\n    );\n    const filtersBlocksOption = useFetch('blocks', 10);\n    const filtersTribesOption = useFetch('tribes', 15);\n    const filtersAllocationOption = useFetch('allocation', 10);\n    const [period, setPeriod] = useState('month');\n\n    const { filterList } = useFiltersList({\n      filters,\n      options: {\n        blocks: filtersBlocksOption,\n        tribes: filtersTribesOption,\n        allocation: filtersAllocationOption,\n        filterButton: filterButtonOptions,\n        dotsButton: dotsButtonOptions,\n      } as Record<keyof Filters, { label: string; value: string }[]>,\n      updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n      filtersInfo: {\n        searchedV: { label: 'Поиск', clearedValue: '' },\n        blocks: { label: 'Блок', clearedValue: [] },\n        tribes: { label: 'Трайб', clearedValue: [] },\n        allocation: { label: 'Аллокация', clearedValue: '' },\n        year: { label: 'Год', clearedValue: null },\n        filterButton: { label: 'Фильтр', clearedValue: '' },\n        dotsButton: { label: 'Меню', clearedValue: '' },\n      },\n    });\n\n    const customChips = filterList.flatMap((item) =>\n      'groupLabel' in item\n        ? item.items.map((inner) => ({\n            label: String(inner.label),\n            onClick: inner.onClick,\n          }))\n        : [{ label: String(item.label), onClick: item.onClick }],\n    );\n    const hasChips = customChips.length > 0;\n    const lastRef = useRef(customChips);\n    if (hasChips) {\n      lastRef.current = customChips;\n    }\n    const renderedChips = hasChips ? customChips : lastRef.current;\n\n    return (\n      <div style={{ padding: 20, background: 'grey' }}>\n        <div style={{ position: 'relative', width: 600, height: 512 }}>\n          <AnalyticalWidget\n            size=\"l\"\n            headerSlot={\n              <AnalyticalWidget.Header\n                title=\"Custom topSlot\"\n                badge=\"TA\"\n                subtitle=\"Свои чипы + Select в rightSlot\"\n                infoTooltipText=\"Info\"\n                rightSlot={\n                  <Select\n                    size=\"xs\"\n                    value={period}\n                    onChange={(v) => setPeriod(v as string)}\n                    items={[\n                      { label: 'Месяц', value: 'month' },\n                      { label: 'Квартал', value: 'quarter' },\n                      { label: 'Год', value: 'year' },\n                    ]}\n                  />\n                }\n              />\n            }\n            topSlot={\n              <div className={analyticalWidgetClassNames.selfSpacedTopSlot}>\n                <Collapse isOpen={hasChips} unMountOnClose>\n                  <div\n                    style={{\n                      display: 'flex',\n                      flexWrap: 'wrap',\n                      gap: 4,\n                      paddingTop: 8,\n                    }}\n                  >\n                    {renderedChips.map((chip, index) => (\n                      <button\n                        type=\"button\"\n                        // eslint-disable-next-line react/no-array-index-key\n                        key={`${chip.label}-${index}`}\n                        onClick={chip.onClick}\n                        style={{\n                          padding: '2px 8px',\n                          borderRadius: 12,\n                          background: 'rgba(0, 0, 0, 0.06)',\n                          border: 'none',\n                          fontSize: 12,\n                          lineHeight: '16px',\n                          whiteSpace: 'nowrap',\n                          cursor: 'pointer',\n                        }}\n                      >\n                        {chip.label}\n                      </button>\n                    ))}\n                  </div>\n                </Collapse>\n              </div>\n            }\n            contentSlot={\n              <div style={{ minHeight: 'fit-content' }}>{longText()}</div>\n            }\n          />\n          <AnalyticalWidget.DotsIconButton\n            absolute\n            dropdownProps={{\n              items: generateButtonItems(\n                'dotsButton',\n                dotsButtonOptions,\n                filterList,\n              ),\n              onItemSelect(item) {\n                updateFilters({\n                  dotsButton:\n                    filters.dotsButton === item.value?.toString()\n                      ? ''\n                      : item.value?.toString() ?? '',\n                });\n              },\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
         }
       ]
     },
@@ -5033,6 +4977,13 @@
       "importStatement": "import { Carousel } from '@daisforge/ui';",
       "minimalUsage": "<Carousel />",
       "examples": [
+        {
+          "exportName": "Usage",
+          "displayName": "Использование в Stories.stories.tsx",
+          "type": "usage",
+          "code": "<Carousel\n        index={carouselIndex}\n        onChangeIndex={setCarouselIndex}\n        scrollAlign=\"start\"\n        gap=\"16px\"\n        style={{ maxWidth: 360 }}\n      >\n        {CAROUSEL_PALETTE.map(([from, to], i) => {\n          const n = i + 1;\n          return (\n            <CarouselItem key={n}>\n              <Stories.Preview\n                title={`Превью ${n}`}\n                image={asset(String(n), from, to)}\n                viewed={viewed[i]}\n                slides={[\n                  { src: asset(`Слайд ${n}.1`, from, to) },\n                  { src: asset(`Слайд ${n}.2`, to, from) },\n                ]}\n              />\n            </CarouselItem>\n          );\n        })}\n      </Carousel>",
+          "sourceFile": "packages/storybook/src/stories/Stories/Stories.stories.tsx"
+        },
         {
           "exportName": "Vendor1",
           "displayName": "Примеры Примеры",
@@ -5087,7 +5038,15 @@
       "importPath": "@daisforge/ui",
       "importStatement": "import { CarouselItem } from '@daisforge/ui';",
       "minimalUsage": "<CarouselItem />",
-      "examples": []
+      "examples": [
+        {
+          "exportName": "Usage",
+          "displayName": "Использование в Stories.stories.tsx",
+          "type": "usage",
+          "code": "<CarouselItem key={n}>\n              <Stories.Preview\n                title={`Превью ${n}`}\n                image={asset(String(n), from, to)}\n                viewed={viewed[i]}\n                slides={[\n                  { src: asset(`Слайд ${n}.1`, from, to) },\n                  { src: asset(`Слайд ${n}.2`, to, from) },\n                ]}\n              />\n            </CarouselItem>",
+          "sourceFile": "packages/storybook/src/stories/Stories/Stories.stories.tsx"
+        }
+      ]
     },
     "CellTextbox": {
       "name": "CellTextbox",
@@ -5850,6 +5809,18 @@
           "type": "React.HTMLInputAutoCompleteAttribute | undefined",
           "required": false,
           "description": ""
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "type",
+          "type": "React.HTMLInputTypeAttribute | undefined",
+          "required": false,
+          "description": ""
         }
       ],
       "propsTypeName": "ComponentProps<typeof CodeField>",
@@ -13270,12 +13241,6 @@
               "type": "React.ReactNode",
               "required": false,
               "description": ""
-            },
-            {
-              "name": "actionsSlotStyle",
-              "type": "React.CSSProperties | undefined",
-              "required": false,
-              "description": ""
             }
           ]
         }
@@ -13296,13 +13261,13 @@
           "exportName": "DragDelay",
           "displayName": "Задержка активации D&D (dragActivationDelay)",
           "type": "full-code",
-          "code": "render() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items] = useState<GridDNDItems[]>([\n      { id: 'w1', type: 'm' },\n      { id: 'w2', type: 's' },\n      { id: 'w3', type: 's' },\n      { id: 'w4', type: 'm' },\n      { id: 'w5', type: 's' },\n    ]);\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper item={item}>\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, color: '#666', fontSize: 14 }}>\n          Зажмите карточку на 500мс для активации перетаскивания. Обводка\n          появится только у зажатой карточки.\n        </div>\n        <div style={{ width: 1200, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            isDraggable\n            dragActivationDelay={500}\n            compactType=\"horizontal\"\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onLayoutChange={(layout, _allAreas, meta) => {\n              console.debug('Layout changed:', layout, meta);\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
+          "code": "render() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items] = useState<GridDNDItems[]>([\n      { id: 'w1', type: 'm' },\n      { id: 'w2', type: 's' },\n      { id: 'w3', type: 's' },\n      { id: 'w4', type: 'm' },\n      { id: 'w5', type: 's' },\n    ]);\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect() {\n                  onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, color: '#666', fontSize: 14 }}>\n          Зажмите карточку на 500мс для активации перетаскивания. Обводка\n          появится только у зажатой карточки.\n        </div>\n        <div style={{ width: 1200, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            isDraggable\n            dragActivationDelay={500}\n            compactType=\"horizontal\"\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onLayoutChange={(layout, _allAreas, meta) => {\n              console.debug('Layout changed:', layout, meta);\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
         },
         {
           "exportName": "GridDNDClassic",
           "displayName": "GridDND Classic",
           "type": "full-code",
-          "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items, setItems] = useState<GridDNDItems[]>([]);\n    const [width, setWidth] = useState(1660);\n    const [drag, setDrag] = useState(true);\n    const [loading, setLoading] = useState(true);\n    const [smartCompact, setSmartCompact] = useState(true);\n    const [compactType, setCompactType] = useState<\n      'vertical' | 'horizontal' | null\n    >('horizontal');\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              size=\"xs\"\n              iconSize=\"xs\"\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect(m) {\n                  if (m.value?.toString().toLowerCase() === 'удалить')\n                    onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n          {item.type === 'l' && <WidgetL id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    const handleReorder = () => {\n      const currentOrder = gridRef.current?.api.getOrder() || [];\n      // Перевернуть порядок\n      gridRef.current?.api.setOrder([...currentOrder].reverse());\n    };\n\n    const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n      try {\n        console.log('💾 Saving items to server:', newItems);\n        await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n          method: 'PUT',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ items: newItems }),\n        });\n        console.log('✅ Items saved successfully');\n      } catch (error) {\n        console.error('❌ Failed to save items:', error);\n      }\n    }, []);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const debouncedSave = useCallback(\n      debounce((newItems: GridDNDItems[]) => {\n        saveItems(newItems);\n      }, 800),\n      [saveItems],\n    );\n\n    // Загрузка initial items с сервера\n    useEffect(() => {\n      const fetchInitialItems = async () => {\n        try {\n          const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n          const data = await response.json();\n          setItems(data.items);\n        } catch (error) {\n          console.error('Failed to fetch items:', error);\n        } finally {\n          setLoading(false);\n        }\n      };\n\n      fetchInitialItems();\n    }, []);\n\n    if (loading) {\n      return <div>Loading...</div>;\n    }\n\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            gap: 8,\n            alignItems: 'center',\n            marginBottom: 12,\n          }}\n        >\n          <span>Width: {width}px</span>\n          <input\n            type=\"range\"\n            min={600}\n            max={1890}\n            step={10}\n            value={width}\n            onChange={(e) => setWidth(+e.target.value)}\n          />\n          <Switch\n            onChange={(e) => setDrag(e.target.checked)}\n            label=\"Activate DND\"\n            checked={drag}\n          />\n          <Switch\n            onChange={(e) => setSmartCompact(e.target.checked)}\n            label=\"Activate Smart Compact\"\n            checked={smartCompact}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'vertical' : null)\n            }\n            label=\"Activate Compact Type Vertical\"\n            checked={compactType === 'vertical'}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'horizontal' : null)\n            }\n            label=\"Activate Compact Type Horizontal\"\n            checked={compactType === 'horizontal'}\n          />\n        </div>\n        <div\n          style={{\n            marginBottom: '30px',\n            display: 'flex',\n            gap: '8px',\n          }}\n        >\n          <Button\n            onClick={() => {\n              console.debug(gridRef.current?.api.getOrderDetailed());\n            }}\n          >\n            Get Order Detail\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug('Current layout:', gridRef.current?.api.getOrder())\n            }\n          >\n            Get Order\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'Current template area:',\n                gridRef.current?.api.getCurrentLayout(),\n              )\n            }\n          >\n            Get Current Layout\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'All template areas:',\n                gridRef.current?.api.getAllLayouts(),\n              )\n            }\n          >\n            Get All Layouts\n          </Button>\n          <Button\n            onClick={() => {\n              const id = prompt('Enter id');\n              const type = prompt('Enter type (s, m, l)');\n              if (\n                !id ||\n                !type ||\n                !gridRef.current ||\n                (type !== 's' && type !== 'm' && type !== 'l')\n              )\n                return;\n              gridRef.current?.api.addItem({\n                id,\n                type,\n              });\n            }}\n          >\n            + Add widget\n          </Button>\n          <Button onClick={() => handleReorder()}>Reorder</Button>\n        </div>\n\n        <div style={{ width, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            compactType=\"horizontal\"\n            smartCompact={smartCompact}\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onItemsChange={(items) =>\n              console.debug('📦 Template Items changed:', items)\n            }\n            onLayoutChange={(layout, allAreas, meta) => {\n              console.group('📐 Template Layout changed:');\n              console.debug('Layout:', layout);\n              console.debug('All areas:', allAreas);\n              console.debug('Meta:', meta);\n              if (meta.itemsOrderTyped) {\n                console.debug('🔄 Items order changed, saving...');\n                debouncedSave(meta.itemsOrderTyped);\n              }\n              console.groupEnd();\n            }}\n            onBreakpointChange={(breakpoint: string, layout: unknown) => {\n              console.group('📱 Template Breakpoint changed:');\n              console.debug('Breakpoint:', breakpoint);\n              console.debug('Layout:', layout);\n              console.groupEnd();\n            }}\n            isDraggable={drag}\n          />\n        </div>\n      </div>\n    );\n  }"
+          "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items, setItems] = useState<GridDNDItems[]>([]);\n    const [width, setWidth] = useState(1660);\n    const [drag, setDrag] = useState(true);\n    const [loading, setLoading] = useState(true);\n    const [smartCompact, setSmartCompact] = useState(true);\n    const [compactType, setCompactType] = useState<\n      'vertical' | 'horizontal' | null\n    >('horizontal');\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect(m) {\n                  if (m.value?.toString().toLowerCase() === 'удалить')\n                    onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n          {item.type === 'l' && <WidgetL id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    const handleReorder = () => {\n      const currentOrder = gridRef.current?.api.getOrder() || [];\n      // Перевернуть порядок\n      gridRef.current?.api.setOrder([...currentOrder].reverse());\n    };\n\n    const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n      try {\n        console.log('💾 Saving items to server:', newItems);\n        await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n          method: 'PUT',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ items: newItems }),\n        });\n        console.log('✅ Items saved successfully');\n      } catch (error) {\n        console.error('❌ Failed to save items:', error);\n      }\n    }, []);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const debouncedSave = useCallback(\n      debounce((newItems: GridDNDItems[]) => {\n        saveItems(newItems);\n      }, 800),\n      [saveItems],\n    );\n\n    // Загрузка initial items с сервера\n    useEffect(() => {\n      const fetchInitialItems = async () => {\n        try {\n          const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n          const data = await response.json();\n          setItems(data.items);\n        } catch (error) {\n          console.error('Failed to fetch items:', error);\n        } finally {\n          setLoading(false);\n        }\n      };\n\n      fetchInitialItems();\n    }, []);\n\n    if (loading) {\n      return <div>Loading...</div>;\n    }\n\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            gap: 8,\n            alignItems: 'center',\n            marginBottom: 12,\n          }}\n        >\n          <span>Width: {width}px</span>\n          <input\n            type=\"range\"\n            min={600}\n            max={1890}\n            step={10}\n            value={width}\n            onChange={(e) => setWidth(+e.target.value)}\n          />\n          <Switch\n            onChange={(e) => setDrag(e.target.checked)}\n            label=\"Activate DND\"\n            checked={drag}\n          />\n          <Switch\n            onChange={(e) => setSmartCompact(e.target.checked)}\n            label=\"Activate Smart Compact\"\n            checked={smartCompact}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'vertical' : null)\n            }\n            label=\"Activate Compact Type Vertical\"\n            checked={compactType === 'vertical'}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'horizontal' : null)\n            }\n            label=\"Activate Compact Type Horizontal\"\n            checked={compactType === 'horizontal'}\n          />\n        </div>\n        <div\n          style={{\n            marginBottom: '30px',\n            display: 'flex',\n            gap: '8px',\n          }}\n        >\n          <Button\n            onClick={() => {\n              console.debug(gridRef.current?.api.getOrderDetailed());\n            }}\n          >\n            Get Order Detail\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug('Current layout:', gridRef.current?.api.getOrder())\n            }\n          >\n            Get Order\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'Current template area:',\n                gridRef.current?.api.getCurrentLayout(),\n              )\n            }\n          >\n            Get Current Layout\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'All template areas:',\n                gridRef.current?.api.getAllLayouts(),\n              )\n            }\n          >\n            Get All Layouts\n          </Button>\n          <Button\n            onClick={() => {\n              const id = prompt('Enter id');\n              const type = prompt('Enter type (s, m, l)');\n              if (\n                !id ||\n                !type ||\n                !gridRef.current ||\n                (type !== 's' && type !== 'm' && type !== 'l')\n              )\n                return;\n              gridRef.current?.api.addItem({\n                id,\n                type,\n              });\n            }}\n          >\n            + Add widget\n          </Button>\n          <Button onClick={() => handleReorder()}>Reorder</Button>\n        </div>\n\n        <div style={{ width, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            compactType=\"horizontal\"\n            smartCompact={smartCompact}\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onItemsChange={(items) =>\n              console.debug('📦 Template Items changed:', items)\n            }\n            onLayoutChange={(layout, allAreas, meta) => {\n              console.group('📐 Template Layout changed:');\n              console.debug('Layout:', layout);\n              console.debug('All areas:', allAreas);\n              console.debug('Meta:', meta);\n              if (meta.itemsOrderTyped) {\n                console.debug('🔄 Items order changed, saving...');\n                debouncedSave(meta.itemsOrderTyped);\n              }\n              console.groupEnd();\n            }}\n            onBreakpointChange={(breakpoint: string, layout: unknown) => {\n              console.group('📱 Template Breakpoint changed:');\n              console.debug('Breakpoint:', breakpoint);\n              console.debug('Layout:', layout);\n              console.groupEnd();\n            }}\n            isDraggable={drag}\n          />\n        </div>\n      </div>\n    );\n  }"
         },
         {
           "exportName": "SelfResize",
@@ -13321,13 +13286,13 @@
           "exportName": "DragDelay",
           "displayName": "Задержка активации D&D (dragActivationDelay)",
           "type": "full-code",
-          "code": "render() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items] = useState<GridDNDItems[]>([\n      { id: 'w1', type: 'm' },\n      { id: 'w2', type: 's' },\n      { id: 'w3', type: 's' },\n      { id: 'w4', type: 'm' },\n      { id: 'w5', type: 's' },\n    ]);\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper item={item}>\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, color: '#666', fontSize: 14 }}>\n          Зажмите карточку на 500мс для активации перетаскивания. Обводка\n          появится только у зажатой карточки.\n        </div>\n        <div style={{ width: 1200, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            isDraggable\n            dragActivationDelay={500}\n            compactType=\"horizontal\"\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onLayoutChange={(layout, _allAreas, meta) => {\n              console.debug('Layout changed:', layout, meta);\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
+          "code": "render() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items] = useState<GridDNDItems[]>([\n      { id: 'w1', type: 'm' },\n      { id: 'w2', type: 's' },\n      { id: 'w3', type: 's' },\n      { id: 'w4', type: 'm' },\n      { id: 'w5', type: 's' },\n    ]);\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect() {\n                  onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, color: '#666', fontSize: 14 }}>\n          Зажмите карточку на 500мс для активации перетаскивания. Обводка\n          появится только у зажатой карточки.\n        </div>\n        <div style={{ width: 1200, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            isDraggable\n            dragActivationDelay={500}\n            compactType=\"horizontal\"\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onLayoutChange={(layout, _allAreas, meta) => {\n              console.debug('Layout changed:', layout, meta);\n            }}\n          />\n        </div>\n      </div>\n    );\n  }"
         },
         {
           "exportName": "GridDNDClassic",
           "displayName": "GridDND Classic",
           "type": "full-code",
-          "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items, setItems] = useState<GridDNDItems[]>([]);\n    const [width, setWidth] = useState(1660);\n    const [drag, setDrag] = useState(true);\n    const [loading, setLoading] = useState(true);\n    const [smartCompact, setSmartCompact] = useState(true);\n    const [compactType, setCompactType] = useState<\n      'vertical' | 'horizontal' | null\n    >('horizontal');\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              size=\"xs\"\n              iconSize=\"xs\"\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect(m) {\n                  if (m.value?.toString().toLowerCase() === 'удалить')\n                    onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n          {item.type === 'l' && <WidgetL id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    const handleReorder = () => {\n      const currentOrder = gridRef.current?.api.getOrder() || [];\n      // Перевернуть порядок\n      gridRef.current?.api.setOrder([...currentOrder].reverse());\n    };\n\n    const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n      try {\n        console.log('💾 Saving items to server:', newItems);\n        await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n          method: 'PUT',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ items: newItems }),\n        });\n        console.log('✅ Items saved successfully');\n      } catch (error) {\n        console.error('❌ Failed to save items:', error);\n      }\n    }, []);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const debouncedSave = useCallback(\n      debounce((newItems: GridDNDItems[]) => {\n        saveItems(newItems);\n      }, 800),\n      [saveItems],\n    );\n\n    // Загрузка initial items с сервера\n    useEffect(() => {\n      const fetchInitialItems = async () => {\n        try {\n          const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n          const data = await response.json();\n          setItems(data.items);\n        } catch (error) {\n          console.error('Failed to fetch items:', error);\n        } finally {\n          setLoading(false);\n        }\n      };\n\n      fetchInitialItems();\n    }, []);\n\n    if (loading) {\n      return <div>Loading...</div>;\n    }\n\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            gap: 8,\n            alignItems: 'center',\n            marginBottom: 12,\n          }}\n        >\n          <span>Width: {width}px</span>\n          <input\n            type=\"range\"\n            min={600}\n            max={1890}\n            step={10}\n            value={width}\n            onChange={(e) => setWidth(+e.target.value)}\n          />\n          <Switch\n            onChange={(e) => setDrag(e.target.checked)}\n            label=\"Activate DND\"\n            checked={drag}\n          />\n          <Switch\n            onChange={(e) => setSmartCompact(e.target.checked)}\n            label=\"Activate Smart Compact\"\n            checked={smartCompact}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'vertical' : null)\n            }\n            label=\"Activate Compact Type Vertical\"\n            checked={compactType === 'vertical'}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'horizontal' : null)\n            }\n            label=\"Activate Compact Type Horizontal\"\n            checked={compactType === 'horizontal'}\n          />\n        </div>\n        <div\n          style={{\n            marginBottom: '30px',\n            display: 'flex',\n            gap: '8px',\n          }}\n        >\n          <Button\n            onClick={() => {\n              console.debug(gridRef.current?.api.getOrderDetailed());\n            }}\n          >\n            Get Order Detail\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug('Current layout:', gridRef.current?.api.getOrder())\n            }\n          >\n            Get Order\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'Current template area:',\n                gridRef.current?.api.getCurrentLayout(),\n              )\n            }\n          >\n            Get Current Layout\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'All template areas:',\n                gridRef.current?.api.getAllLayouts(),\n              )\n            }\n          >\n            Get All Layouts\n          </Button>\n          <Button\n            onClick={() => {\n              const id = prompt('Enter id');\n              const type = prompt('Enter type (s, m, l)');\n              if (\n                !id ||\n                !type ||\n                !gridRef.current ||\n                (type !== 's' && type !== 'm' && type !== 'l')\n              )\n                return;\n              gridRef.current?.api.addItem({\n                id,\n                type,\n              });\n            }}\n          >\n            + Add widget\n          </Button>\n          <Button onClick={() => handleReorder()}>Reorder</Button>\n        </div>\n\n        <div style={{ width, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            compactType=\"horizontal\"\n            smartCompact={smartCompact}\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onItemsChange={(items) =>\n              console.debug('📦 Template Items changed:', items)\n            }\n            onLayoutChange={(layout, allAreas, meta) => {\n              console.group('📐 Template Layout changed:');\n              console.debug('Layout:', layout);\n              console.debug('All areas:', allAreas);\n              console.debug('Meta:', meta);\n              if (meta.itemsOrderTyped) {\n                console.debug('🔄 Items order changed, saving...');\n                debouncedSave(meta.itemsOrderTyped);\n              }\n              console.groupEnd();\n            }}\n            onBreakpointChange={(breakpoint: string, layout: unknown) => {\n              console.group('📱 Template Breakpoint changed:');\n              console.debug('Breakpoint:', breakpoint);\n              console.debug('Layout:', layout);\n              console.groupEnd();\n            }}\n            isDraggable={drag}\n          />\n        </div>\n      </div>\n    );\n  }"
+          "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n    const gridRef = useRef<GridDNDRef>(null);\n    const [items, setItems] = useState<GridDNDItems[]>([]);\n    const [width, setWidth] = useState(1660);\n    const [drag, setDrag] = useState(true);\n    const [loading, setLoading] = useState(true);\n    const [smartCompact, setSmartCompact] = useState(true);\n    const [compactType, setCompactType] = useState<\n      'vertical' | 'horizontal' | null\n    >('horizontal');\n\n    const renderItem = useCallback(\n      (item: GridDNDItemConfig, onRemove: () => void) => (\n        <GridDND.ItemWrapper\n          item={item}\n          actionsSlot={\n            <AnalyticalWidget.DotsIconButton\n              absolute\n              dropdownProps={{\n                items: [{ label: 'Удалить', value: 'Удалить' }],\n                onItemSelect(m) {\n                  if (m.value?.toString().toLowerCase() === 'удалить')\n                    onRemove();\n                },\n              }}\n            />\n          }\n        >\n          {item.type === 's' && <WidgetS id={item.id} onRemove={onRemove} />}\n          {item.type === 'm' && <WidgetM id={item.id} onRemove={onRemove} />}\n          {item.type === 'l' && <WidgetL id={item.id} onRemove={onRemove} />}\n        </GridDND.ItemWrapper>\n      ),\n      [],\n    );\n\n    const handleReorder = () => {\n      const currentOrder = gridRef.current?.api.getOrder() || [];\n      // Перевернуть порядок\n      gridRef.current?.api.setOrder([...currentOrder].reverse());\n    };\n\n    const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n      try {\n        console.log('💾 Saving items to server:', newItems);\n        await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n          method: 'PUT',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ items: newItems }),\n        });\n        console.log('✅ Items saved successfully');\n      } catch (error) {\n        console.error('❌ Failed to save items:', error);\n      }\n    }, []);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const debouncedSave = useCallback(\n      debounce((newItems: GridDNDItems[]) => {\n        saveItems(newItems);\n      }, 800),\n      [saveItems],\n    );\n\n    // Загрузка initial items с сервера\n    useEffect(() => {\n      const fetchInitialItems = async () => {\n        try {\n          const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n          const data = await response.json();\n          setItems(data.items);\n        } catch (error) {\n          console.error('Failed to fetch items:', error);\n        } finally {\n          setLoading(false);\n        }\n      };\n\n      fetchInitialItems();\n    }, []);\n\n    if (loading) {\n      return <div>Loading...</div>;\n    }\n\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            gap: 8,\n            alignItems: 'center',\n            marginBottom: 12,\n          }}\n        >\n          <span>Width: {width}px</span>\n          <input\n            type=\"range\"\n            min={600}\n            max={1890}\n            step={10}\n            value={width}\n            onChange={(e) => setWidth(+e.target.value)}\n          />\n          <Switch\n            onChange={(e) => setDrag(e.target.checked)}\n            label=\"Activate DND\"\n            checked={drag}\n          />\n          <Switch\n            onChange={(e) => setSmartCompact(e.target.checked)}\n            label=\"Activate Smart Compact\"\n            checked={smartCompact}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'vertical' : null)\n            }\n            label=\"Activate Compact Type Vertical\"\n            checked={compactType === 'vertical'}\n          />\n          <Switch\n            onChange={(e) =>\n              setCompactType(e.target.checked ? 'horizontal' : null)\n            }\n            label=\"Activate Compact Type Horizontal\"\n            checked={compactType === 'horizontal'}\n          />\n        </div>\n        <div\n          style={{\n            marginBottom: '30px',\n            display: 'flex',\n            gap: '8px',\n          }}\n        >\n          <Button\n            onClick={() => {\n              console.debug(gridRef.current?.api.getOrderDetailed());\n            }}\n          >\n            Get Order Detail\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug('Current layout:', gridRef.current?.api.getOrder())\n            }\n          >\n            Get Order\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'Current template area:',\n                gridRef.current?.api.getCurrentLayout(),\n              )\n            }\n          >\n            Get Current Layout\n          </Button>\n          <Button\n            onClick={() =>\n              console.debug(\n                'All template areas:',\n                gridRef.current?.api.getAllLayouts(),\n              )\n            }\n          >\n            Get All Layouts\n          </Button>\n          <Button\n            onClick={() => {\n              const id = prompt('Enter id');\n              const type = prompt('Enter type (s, m, l)');\n              if (\n                !id ||\n                !type ||\n                !gridRef.current ||\n                (type !== 's' && type !== 'm' && type !== 'l')\n              )\n                return;\n              gridRef.current?.api.addItem({\n                id,\n                type,\n              });\n            }}\n          >\n            + Add widget\n          </Button>\n          <Button onClick={() => handleReorder()}>Reorder</Button>\n        </div>\n\n        <div style={{ width, background: 'lightGray' }}>\n          <GridDND\n            ref={gridRef}\n            items={items}\n            compactType=\"horizontal\"\n            smartCompact={smartCompact}\n            // eslint-disable-next-line react/no-children-prop\n            children={renderItem}\n            onItemsChange={(items) =>\n              console.debug('📦 Template Items changed:', items)\n            }\n            onLayoutChange={(layout, allAreas, meta) => {\n              console.group('📐 Template Layout changed:');\n              console.debug('Layout:', layout);\n              console.debug('All areas:', allAreas);\n              console.debug('Meta:', meta);\n              if (meta.itemsOrderTyped) {\n                console.debug('🔄 Items order changed, saving...');\n                debouncedSave(meta.itemsOrderTyped);\n              }\n              console.groupEnd();\n            }}\n            onBreakpointChange={(breakpoint: string, layout: unknown) => {\n              console.group('📱 Template Breakpoint changed:');\n              console.debug('Breakpoint:', breakpoint);\n              console.debug('Layout:', layout);\n              console.groupEnd();\n            }}\n            isDraggable={drag}\n          />\n        </div>\n      </div>\n    );\n  }"
         },
         {
           "exportName": "SelfResize",
@@ -20123,20 +20088,68 @@
       "description": "Числовое поле со стрелками инкремента/декремента и ограничением min/max",
       "props": [
         {
-          "name": "autoComplete",
-          "type": "React.HTMLInputAutoCompleteAttribute | undefined",
+          "name": "allowLeadingZeros",
+          "type": "boolean | undefined",
           "required": false,
           "description": ""
         },
         {
-          "name": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "name": "allowNegative",
+          "type": "boolean | undefined",
           "required": false,
           "description": ""
         },
         {
-          "name": "type",
-          "type": "React.HTMLInputTypeAttribute | undefined",
+          "name": "decimalScale",
+          "type": "number | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "decimalSeparator",
+          "type": "string | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "fixedDecimalScale",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "isAllowed",
+          "type": "((values: NumberFormatValues) => boolean) | ((values: NumberFormatValues) => boolean) | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "thousandSeparator",
+          "type": "string | boolean | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "thousandsGroupStyle",
+          "type": "\"none\" | \"thousand\" | \"lakh\" | \"wan\" | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "autoComplete",
+          "type": "React.HTMLInputAutoCompleteAttribute | undefined",
+          "required": false,
+          "description": ""
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
           "required": false,
           "description": ""
         }
@@ -21234,7 +21247,7 @@
         },
         {
           "name": "as",
-          "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"button\" | \"image\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blo…",
+          "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…",
           "required": false,
           "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)"
         },
@@ -21542,7 +21555,7 @@
         },
         {
           "name": "as",
-          "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"button\" | \"image\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blo…",
+          "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…",
           "required": false,
           "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)"
         },
@@ -22103,7 +22116,7 @@
             },
             {
               "name": "as",
-              "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"button\" | \"image\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blo…",
+              "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…",
               "required": false,
               "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)"
             },
@@ -22373,7 +22386,7 @@
             },
             {
               "name": "as",
-              "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"button\" | \"image\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blo…",
+              "type": "((string | React.ComponentType<any>) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…",
               "required": false,
               "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)"
             },
@@ -26859,7 +26872,14 @@
       "minimalUsage": "<LineSkeleton />",
       "examples": [
         {
-          "exportName": "Usage",
+          "exportName": "Usage1",
+          "displayName": "Использование в AnalyticalWidget.stories.tsx",
+          "type": "usage",
+          "code": "<LineSkeleton size=\"bodyM\" style={{ width: 180 }} />",
+          "sourceFile": "packages/storybook/src/stories/AnalyticalWidget/AnalyticalWidget.stories.tsx"
+        },
+        {
+          "exportName": "Usage2",
           "displayName": "Использование в TableCanvasContextMenu.stories.tsx",
           "type": "usage",
           "code": "<LineSkeleton size=\"bodyS\" />",
@@ -28045,19 +28065,19 @@
           "exportName": "Circle",
           "displayName": "Круглые триггеры",
           "type": "full-code",
-          "code": "import { Button, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'CircleStoriesExample',\n)}"
+          "code": "import { Button, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'CircleStoriesExample',\n)}"
         },
         {
           "exportName": "Rect",
           "displayName": "Прямоугольные триггеры",
           "type": "full-code",
-          "code": "import { Button, Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'RectStoriesExample',\n)}"
+          "code": "import { Button, Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'RectStoriesExample',\n)}"
         },
         {
           "exportName": "Loading",
           "displayName": "Спиннер загрузки (эмуляция)",
           "type": "full-code",
-          "code": "import { Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'LoadingStoriesExample',\n)}"
+          "code": "import { Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'LoadingStoriesExample',\n)}"
         },
         {
           "exportName": "ErrorState",
@@ -28075,25 +28095,31 @@
           "exportName": "ImperativeControl",
           "displayName": "Внешнее управление через ref",
           "type": "full-code",
-          "code": "import { Button, Stories, StoriesRef } from '@daisforge/ui';\nimport { useRef, useState } from 'react';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'ImperativeControlExample',\n)}"
+          "code": "import { Button, Stories, StoriesRef } from '@daisforge/ui';\nimport { useRef, useState } from 'react';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'ImperativeControlExample',\n)}"
         },
         {
           "exportName": "InsideModal",
           "displayName": "Триггеры внутри ModalDF",
           "type": "full-code",
-          "code": "import { Button, ModalDF, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'InsideModalExample',\n)}"
+          "code": "import { Button, ModalDF, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'InsideModalExample',\n)}"
         },
         {
           "exportName": "HiddenArrows",
           "displayName": "Стрелки скрыты (arrows=",
           "type": "full-code",
-          "code": "import { Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'HiddenArrowsExample',\n)}"
+          "code": "import { Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'HiddenArrowsExample',\n)}"
         },
         {
           "exportName": "Titles",
           "displayName": "Подписи: 2 строки, ellipsis, выравнивание",
           "type": "full-code",
-          "code": "import { Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'TitlesExample',\n)}"
+          "code": "import { Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'TitlesExample',\n)}"
+        },
+        {
+          "exportName": "CarouselWrapped",
+          "displayName": "Превью внутри Carousel (вложенность)",
+          "type": "full-code",
+          "code": "import { Carousel, CarouselItem, Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'CarouselWrappedExample',\n)}"
         }
       ],
       "hasCuratedMeta": true,
@@ -28109,19 +28135,19 @@
           "exportName": "Circle",
           "displayName": "Круглые триггеры",
           "type": "full-code",
-          "code": "import { Button, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'CircleStoriesExample',\n)}"
+          "code": "import { Button, Stories } from '@daisforge/ui';\nimport { useState } from 'react';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'CircleStoriesExample',\n)}"
         },
         {
           "exportName": "Rect",
           "displayName": "Прямоугольные триггеры",
           "type": "full-code",
-          "code": "import { Button, Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'RectStoriesExample',\n)}"
+          "code": "import { Button, Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'RectStoriesExample',\n)}"
         },
         {
           "exportName": "Loading",
           "displayName": "Спиннер загрузки (эмуляция)",
           "type": "full-code",
-          "code": "import { Stories } from '@daisforge/ui';\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'LoadingStoriesExample',\n)}"
+          "code": "import { Stories } from '@daisforge/ui';\n\n${viewedSource}\n\n${getFuncAsString(\n  'packages/storybook/src/stories/Stories/Stories.stories.tsx',\n  'LoadingStoriesExample',\n)}"
         },
         {
           "exportName": "ErrorState",
@@ -35536,10 +35562,10 @@
         },
         {
           "exportName": "Usage2",
-          "displayName": "Использование в AnalyticalWidget.stories.tsx",
+          "displayName": "Использование в Layout.stories.tsx",
           "type": "usage",
-          "code": "<Tabs\n                  style={{\n                    width: '100%',\n                  }}\n                  view=\"divider\"\n                  orientation=\"horizontal\"\n                  size=\"xs\"\n                >\n                  {tabItems.map((_, i) => (\n                    <TabItem\n                      view=\"divider\"\n                      orientation=\"horizontal\"\n                      // eslint-disable-next-line react/no-array-index-key\n                      key={`item:${i}`}\n                      size=\"xs\"\n                      selected={i === tabIndex}\n                      tabIndex={0}\n                      onClick={() => setTabIndex(i)}\n                    >\n                      {i === 0\n                        ? 'Длинное наименование данных'\n                        : `Label${i + 1}`}\n                    </TabItem>\n                  ))}\n                </Tabs>",
-          "sourceFile": "packages/storybook/src/stories/AnalyticalWidget/AnalyticalWidget.stories.tsx"
+          "code": "<Tabs view=\"filled\" stretch size=\"xs\">\n        {items.map((_, i) => (\n          <TabItem\n            view=\"secondary\"\n            size=\"xs\"\n            selected={i === index}\n            tabIndex={0}\n            contentLeft={<IconClock size=\"xs\" color=\"inherit\" />}\n            onClick={() => setIndex(i)}\n          >\n            {`Label${i + 1}`}\n          </TabItem>\n        ))}\n      </Tabs>",
+          "sourceFile": "packages/storybook/src/stories/Layout/Layout.stories.tsx"
         },
         {
           "exportName": "Vendor1",
@@ -45896,6 +45922,12 @@
           "required": false,
           "description": ""
         },
+        {
+          "name": "inputWrapperRef",
+          "type": "React.Ref<HTMLDivElement> | undefined",
+          "required": false,
+          "description": ""
+        },
         {
           "name": "invalidFormatMessage",
           "type": "string | undefined",
@@ -53187,11 +53219,11 @@
       "legacy": false,
       "summary": "*tableConfig.rowsGrouping + columnConfig.rowsGrouping**",
       "docs": "# RowsGrouping (TableCanvas)\n\n**tableConfig.rowsGrouping + columnConfig.rowsGrouping**\n\nГруппировка строк таблицы по значениям колонок с поддержкой вложенных группировок.\n\n## Ключевые особенности\n\n- Управляемое состояние группировки через `groupByState`\n- Кнопка с выпадающим списком для выбора группировок в controlBlock\n- Кастомный рендер сгруппированных строк через `renderGroupCell`\n- Кастомные элементы в выпадающем списке через `groupButton.defaultCustomItems`\n- Возможность замены данных группированных строк через `groupRowReplaceTo`\n\n## Особенности\n\n- `rowKeyGetter` должен возвращать уникальный идентификатор строки\n- `groupedColumnProps` позволяет настроить колонку с группировкой (ширину, рендер и т.д.)\n- В `columnConfig.rowsGrouping` можно указать `groupByColumn: false` для исключения колонки из группировки\n- `columnGroupLabel` переопределяет лейбл в выпадающем списке (default: `columnConfig.key`)\n\n> Подробнее о типах — [RowsGrouping API](?path=/docs/локальные-компоненты-tablecanvas-rowsgrouping-api--docs)",
-      "apiDocs": "# RowsGrouping API\n\n## RowsGrouping\n\n```typescript\ntype RowsGrouping<\n  RowType extends ObjectForExtending,\n  SummaryRowType = unknown,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  /**\n   * массив группированных колонок и его setter\n   */\n  groupByState: [string[], React.Dispatch<React.SetStateAction<string[]>>];\n  /**\n   * Функция определения уникального id строки\n   */\n  rowKeyGetter: (row: RowType) => string | number;\n  /**\n   * Показывать ли кнопку «Группировать» в controlBlock.\n   * При `false` кнопка скрыта и не участвует в компрессии,\n   * но группировка строк продолжает работать от внешнего `groupByState`.\n   * @default true\n   */\n  showInControl?: boolean;\n  /**\n   * @default 'Группировка'\n   */\n  groupedColumnProps?: Partial<Pick<ColumnConfig, 'name' | 'width'>> & {\n    renderCell?: (\n      props: CellInfoGlideInstance<RowType, SummaryRowType> & {\n        parentGroupKey: string | undefined;\n        groupByArr: string[];\n      },\n    ) => CanvasContent;\n    rowsGrouping?: Pick<\n      ColumnRowsGrouping<RowType, ColumnConfig>,\n      'renderGroupCell'\n    >;\n  };\n  expandAllBtn?: {\n    /**\n     * Функция для расчета состояния открытости всех раскрываемых строк. Функция должна быть чистой.\n     * @returns boolean\n     */\n    expandedAll: (p: {\n      /**\n       * allRowsIds - уникальные идентификаторы всех строк (группировок и обычных)\n       */\n      allRowsIds: Set<string | number> | null;\n      /**\n       * shownRows - представленные прямо сейчас строки (группировки и обычные). Или видимые строки - видимые не во viewport-е, а которые должны быть показаны из-за раскрытий)\n       */\n      shownRows: readonly RowType[];\n      expandedRowsIds: Set<string | number>;\n    }) => boolean;\n  };\n  /**\n   * `groupButton` - свойство для кастомизации кнопки с выпадающим списком\n   */\n  groupButton?: {\n    getGroupedCount?: (props: {\n      /**\n       * высчитанное автоматически количество активных группировок.\n       */\n      currCount: number;\n      /**\n       * активные группировки.\n       */\n      groupedCols: string[];\n      columns: {\n        /**\n         * `visible` - видимые в выпадающем списке колонки-группировки.\n         */\n        visible: string[];\n        /**\n         * `hidden` - невидимые  или не участвующие в группировке колонки\n         *\n         * (columnConfig.rowsGrouping=undefined ||\n         *  columnConfig.rowsGrouping.groupByColumn=false).\n         */\n        hidden: string[];\n      };\n    }) => number;\n    /**\n     * `defaultCustomItems` - свойство для добавления ключей группировки, которых нет в таблице.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    defaultCustomItems?: DropdownItemOption[];\n    /**\n     * `onItemSelect` - свойство для полного контроля над изменением группировки при выборе опций.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    onItemSelect?: (props: {\n      item: DropdownItemOption;\n      setGroupedCols: React.Dispatch<React.SetStateAction<string[]>>;\n      columns: {\n        visible: string[];\n        hidden: string[];\n      };\n    }) => void;\n  };\n  /**\n   * `groupRowReplaceTo` - свойство для изменения данных сгруппированных строк. Может понадобиться в редких случаях.\n   *\n   * @param groupRow данные сгруппированной строки\n   * @returns измененная группировка или строка без группировки — строка, которые заменит groupRow\n   */\n  groupRowReplaceTo?: (\n    groupRow: GroupRow<RowType>,\n  ) => GroupRow<RowType> | RowType;\n  /**\n   * Метки для автоматизированного тестирования и аналитики\n   * Добавляет data-атрибуты и CSS-классы к элементам controlBlock\n   */\n  domMetadata?: DomMetadata;\n};\n\nexport type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;\n\nexport type ColumnRowsGrouping<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance,\n> = {\n  /**\n   * @default true - при наличии ColumnConfig.rowsGrouping\n   */\n  groupByColumn?: boolean;\n  /**\n   * @default ColumnConfig.key\n   */\n  columnGroupLabel?: string;\n  renderGroupCell?: (\n    props: RenderGroupCellProps<RowType, ColumnConfig>,\n  ) => CanvasContent;\n};\n```",
+      "apiDocs": "# RowsGrouping API\n\n## RowsGrouping\n\n```typescript\ntype RowsGrouping<\n  RowType extends ObjectForExtending,\n  SummaryRowType = unknown,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  /**\n   * массив группированных колонок и его setter\n   */\n  groupByState: [string[], React.Dispatch<React.SetStateAction<string[]>>];\n  /**\n   * Функция определения уникального id строки\n   */\n  rowKeyGetter: (row: RowType) => string | number;\n  /**\n   * Показывать ли кнопку «Группировать» в controlBlock.\n   * При `false` кнопка скрыта и не участвует в компрессии,\n   * но группировка строк продолжает работать от внешнего `groupByState`.\n   * @default true\n   */\n  showInControl?: boolean;\n  /**\n   * @default 'Группировка'\n   */\n  groupedColumnProps?: Partial<Pick<ColumnConfig, 'name' | 'width'>> & {\n    renderCell?: (\n      props: CellInfoGlideInstance<RowType, SummaryRowType> & {\n        parentGroupKey: string | undefined;\n        groupByArr: string[];\n      },\n    ) => CanvasContent;\n    rowsGrouping?: Pick<\n      ColumnRowsGrouping<RowType, ColumnConfig>,\n      'renderGroupCell'\n    >;\n  };\n  expandAllBtn?: {\n    /**\n     * Функция для расчета состояния открытости всех раскрываемых строк. Функция должна быть чистой.\n     * @returns boolean\n     */\n    expandedAll: (p: {\n      /**\n       * allRowsIds - уникальные идентификаторы всех строк (группировок и обычных)\n       */\n      allRowsIds: Set<string | number> | null;\n      /**\n       * shownRows - представленные прямо сейчас строки (группировки и обычные). Или видимые строки - видимые не во viewport-е, а которые должны быть показаны из-за раскрытий)\n       */\n      shownRows: readonly RowType[];\n      expandedRowsIds: Set<string | number>;\n    }) => boolean;\n  };\n  /**\n   * `groupButton` - свойство для кастомизации кнопки с выпадающим списком\n   */\n  groupButton?: {\n    getGroupedCount?: (props: {\n      /**\n       * высчитанное автоматически количество активных группировок.\n       */\n      currCount: number;\n      /**\n       * активные группировки.\n       */\n      groupedCols: string[];\n      columns: {\n        /**\n         * `visible` - видимые в выпадающем списке колонки-группировки.\n         */\n        visible: string[];\n        /**\n         * `hidden` - невидимые  или не участвующие в группировке колонки\n         *\n         * (columnConfig.rowsGrouping=undefined ||\n         *  columnConfig.rowsGrouping.groupByColumn=false).\n         */\n        hidden: string[];\n      };\n    }) => number;\n    /**\n     * `defaultCustomItems` - свойство для добавления ключей группировки, которых нет в таблице.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    defaultCustomItems?: DropdownItemOption[];\n    /**\n     * `onItemSelect` - свойство для полного контроля над изменением группировки при выборе опций.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    onItemSelect?: (props: {\n      item: DropdownItemOption;\n      setGroupedCols: React.Dispatch<React.SetStateAction<string[]>>;\n      columns: {\n        visible: string[];\n        hidden: string[];\n      };\n    }) => void;\n  };\n  /**\n   * `groupRowReplaceTo` - свойство для изменения данных сгруппированных строк. Может понадобиться в редких случаях.\n   *\n   * @param groupRow данные сгруппированной строки\n   * @returns измененная группировка или строка без группировки — строка, которые заменит groupRow\n   */\n  groupRowReplaceTo?: (\n    groupRow: GroupRow<RowType>,\n  ) => GroupRow<RowType> | RowType;\n  /**\n   * Метки для автоматизированного тестирования и аналитики\n   * Добавляет data-атрибуты и CSS-классы к элементам controlBlock\n   */\n  domMetadata?: DomMetadata;\n};\n\nexport type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  theme?: Theme;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;\n\nexport type ColumnRowsGrouping<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance,\n> = {\n  /**\n   * @default true - при наличии ColumnConfig.rowsGrouping\n   */\n  groupByColumn?: boolean;\n  /**\n   * @default ColumnConfig.key\n   */\n  columnGroupLabel?: string;\n  renderGroupCell?: (\n    props: RenderGroupCellProps<RowType, ColumnConfig>,\n  ) => CanvasContent;\n};\n```",
       "api": [
         {
           "typeName": "RowsGrouping",
-          "source": "type RowsGrouping<\n  RowType extends ObjectForExtending,\n  SummaryRowType = unknown,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  /**\n   * массив группированных колонок и его setter\n   */\n  groupByState: [string[], React.Dispatch<React.SetStateAction<string[]>>];\n  /**\n   * Функция определения уникального id строки\n   */\n  rowKeyGetter: (row: RowType) => string | number;\n  /**\n   * Показывать ли кнопку «Группировать» в controlBlock.\n   * При `false` кнопка скрыта и не участвует в компрессии,\n   * но группировка строк продолжает работать от внешнего `groupByState`.\n   * @default true\n   */\n  showInControl?: boolean;\n  /**\n   * @default 'Группировка'\n   */\n  groupedColumnProps?: Partial<Pick<ColumnConfig, 'name' | 'width'>> & {\n    renderCell?: (\n      props: CellInfoGlideInstance<RowType, SummaryRowType> & {\n        parentGroupKey: string | undefined;\n        groupByArr: string[];\n      },\n    ) => CanvasContent;\n    rowsGrouping?: Pick<\n      ColumnRowsGrouping<RowType, ColumnConfig>,\n      'renderGroupCell'\n    >;\n  };\n  expandAllBtn?: {\n    /**\n     * Функция для расчета состояния открытости всех раскрываемых строк. Функция должна быть чистой.\n     * @returns boolean\n     */\n    expandedAll: (p: {\n      /**\n       * allRowsIds - уникальные идентификаторы всех строк (группировок и обычных)\n       */\n      allRowsIds: Set<string | number> | null;\n      /**\n       * shownRows - представленные прямо сейчас строки (группировки и обычные). Или видимые строки - видимые не во viewport-е, а которые должны быть показаны из-за раскрытий)\n       */\n      shownRows: readonly RowType[];\n      expandedRowsIds: Set<string | number>;\n    }) => boolean;\n  };\n  /**\n   * `groupButton` - свойство для кастомизации кнопки с выпадающим списком\n   */\n  groupButton?: {\n    getGroupedCount?: (props: {\n      /**\n       * высчитанное автоматически количество активных группировок.\n       */\n      currCount: number;\n      /**\n       * активные группировки.\n       */\n      groupedCols: string[];\n      columns: {\n        /**\n         * `visible` - видимые в выпадающем списке колонки-группировки.\n         */\n        visible: string[];\n        /**\n         * `hidden` - невидимые  или не участвующие в группировке колонки\n         *\n         * (columnConfig.rowsGrouping=undefined ||\n         *  columnConfig.rowsGrouping.groupByColumn=false).\n         */\n        hidden: string[];\n      };\n    }) => number;\n    /**\n     * `defaultCustomItems` - свойство для добавления ключей группировки, которых нет в таблице.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    defaultCustomItems?: DropdownItemOption[];\n    /**\n     * `onItemSelect` - свойство для полного контроля над изменением группировки при выборе опций.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    onItemSelect?: (props: {\n      item: DropdownItemOption;\n      setGroupedCols: React.Dispatch<React.SetStateAction<string[]>>;\n      columns: {\n        visible: string[];\n        hidden: string[];\n      };\n    }) => void;\n  };\n  /**\n   * `groupRowReplaceTo` - свойство для изменения данных сгруппированных строк. Может понадобиться в редких случаях.\n   *\n   * @param groupRow данные сгруппированной строки\n   * @returns измененная группировка или строка без группировки — строка, которые заменит groupRow\n   */\n  groupRowReplaceTo?: (\n    groupRow: GroupRow<RowType>,\n  ) => GroupRow<RowType> | RowType;\n  /**\n   * Метки для автоматизированного тестирования и аналитики\n   * Добавляет data-атрибуты и CSS-классы к элементам controlBlock\n   */\n  domMetadata?: DomMetadata;\n};\n\nexport type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;\n\nexport type ColumnRowsGrouping<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance,\n> = {\n  /**\n   * @default true - при наличии ColumnConfig.rowsGrouping\n   */\n  groupByColumn?: boolean;\n  /**\n   * @default ColumnConfig.key\n   */\n  columnGroupLabel?: string;\n  renderGroupCell?: (\n    props: RenderGroupCellProps<RowType, ColumnConfig>,\n  ) => CanvasContent;\n};"
+          "source": "type RowsGrouping<\n  RowType extends ObjectForExtending,\n  SummaryRowType = unknown,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  /**\n   * массив группированных колонок и его setter\n   */\n  groupByState: [string[], React.Dispatch<React.SetStateAction<string[]>>];\n  /**\n   * Функция определения уникального id строки\n   */\n  rowKeyGetter: (row: RowType) => string | number;\n  /**\n   * Показывать ли кнопку «Группировать» в controlBlock.\n   * При `false` кнопка скрыта и не участвует в компрессии,\n   * но группировка строк продолжает работать от внешнего `groupByState`.\n   * @default true\n   */\n  showInControl?: boolean;\n  /**\n   * @default 'Группировка'\n   */\n  groupedColumnProps?: Partial<Pick<ColumnConfig, 'name' | 'width'>> & {\n    renderCell?: (\n      props: CellInfoGlideInstance<RowType, SummaryRowType> & {\n        parentGroupKey: string | undefined;\n        groupByArr: string[];\n      },\n    ) => CanvasContent;\n    rowsGrouping?: Pick<\n      ColumnRowsGrouping<RowType, ColumnConfig>,\n      'renderGroupCell'\n    >;\n  };\n  expandAllBtn?: {\n    /**\n     * Функция для расчета состояния открытости всех раскрываемых строк. Функция должна быть чистой.\n     * @returns boolean\n     */\n    expandedAll: (p: {\n      /**\n       * allRowsIds - уникальные идентификаторы всех строк (группировок и обычных)\n       */\n      allRowsIds: Set<string | number> | null;\n      /**\n       * shownRows - представленные прямо сейчас строки (группировки и обычные). Или видимые строки - видимые не во viewport-е, а которые должны быть показаны из-за раскрытий)\n       */\n      shownRows: readonly RowType[];\n      expandedRowsIds: Set<string | number>;\n    }) => boolean;\n  };\n  /**\n   * `groupButton` - свойство для кастомизации кнопки с выпадающим списком\n   */\n  groupButton?: {\n    getGroupedCount?: (props: {\n      /**\n       * высчитанное автоматически количество активных группировок.\n       */\n      currCount: number;\n      /**\n       * активные группировки.\n       */\n      groupedCols: string[];\n      columns: {\n        /**\n         * `visible` - видимые в выпадающем списке колонки-группировки.\n         */\n        visible: string[];\n        /**\n         * `hidden` - невидимые  или не участвующие в группировке колонки\n         *\n         * (columnConfig.rowsGrouping=undefined ||\n         *  columnConfig.rowsGrouping.groupByColumn=false).\n         */\n        hidden: string[];\n      };\n    }) => number;\n    /**\n     * `defaultCustomItems` - свойство для добавления ключей группировки, которых нет в таблице.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    defaultCustomItems?: DropdownItemOption[];\n    /**\n     * `onItemSelect` - свойство для полного контроля над изменением группировки при выборе опций.\n     *\n     * `DropdownItemOption.value` - необходимо заполнять ключом, который существует в данных.\n     */\n    onItemSelect?: (props: {\n      item: DropdownItemOption;\n      setGroupedCols: React.Dispatch<React.SetStateAction<string[]>>;\n      columns: {\n        visible: string[];\n        hidden: string[];\n      };\n    }) => void;\n  };\n  /**\n   * `groupRowReplaceTo` - свойство для изменения данных сгруппированных строк. Может понадобиться в редких случаях.\n   *\n   * @param groupRow данные сгруппированной строки\n   * @returns измененная группировка или строка без группировки — строка, которые заменит groupRow\n   */\n  groupRowReplaceTo?: (\n    groupRow: GroupRow<RowType>,\n  ) => GroupRow<RowType> | RowType;\n  /**\n   * Метки для автоматизированного тестирования и аналитики\n   * Добавляет data-атрибуты и CSS-классы к элементам controlBlock\n   */\n  domMetadata?: DomMetadata;\n};\n\nexport type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  theme?: Theme;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;\n\nexport type ColumnRowsGrouping<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance,\n> = {\n  /**\n   * @default true - при наличии ColumnConfig.rowsGrouping\n   */\n  groupByColumn?: boolean;\n  /**\n   * @default ColumnConfig.key\n   */\n  columnGroupLabel?: string;\n  renderGroupCell?: (\n    props: RenderGroupCellProps<RowType, ColumnConfig>,\n  ) => CanvasContent;\n};"
         }
       ],
       "stories": [
@@ -56599,7 +56631,7 @@
     },
     "TableCanvas.RenderGroupCellProps": {
       "name": "RenderGroupCellProps",
-      "definition": "export type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;",
+      "definition": "export type RenderGroupCellProps<\n  RowType extends ObjectForExtending,\n  ColumnConfig extends LocalColumnInstance = LocalColumnInstance,\n> = {\n  column: ColumnConfig;\n  tabIndex: number;\n  theme?: Theme;\n  // TODO isExpanded: boolean;\n  // TODO toggleGroup: () => void;\n} & GroupRow<RowType>;",
       "internal": true,
       "importNotice": "Тип \"RenderGroupCellProps\" не экспортируется из публичной точки входа — импортировать его нельзя. Определение приведено для понимания структуры: опишите нужную форму по месту либо возьмите её из типа, который экспортирован.",
       "sourceFile": "packages/ui-kit/src/components/TableCanvas/feature-rows-grouping/types.ts"