@daisforge/ui 1.14.1 → 1.15.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-24T15:14:49.679Z",
+  "libVersion": "1.15.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",
@@ -618,6 +612,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 +780,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 +813,7 @@
               "type": "\"horizontal\" | \"vertical\" | undefined",
               "required": false,
               "description": "",
-              "default": "'horizontal'"
+              "default": "'vertical'"
             },
             {
               "name": "iconSize",
@@ -806,48 +821,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 +834,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",
+              "type": "\"xs\" | \"s\" | \"m\" | \"l\" | undefined",
               "required": false,
-              "description": ""
-            },
-            {
-              "name": "square",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": ""
-            },
-            {
-              "name": "stretch",
-              "type": "boolean | 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 +852,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 +906,31 @@
       ],
       "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   */\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   * @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  }"
         }
       ],
       "hasCuratedMeta": true,
@@ -1010,26 +943,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  }"
         }
       ]
     },
@@ -13270,12 +13202,6 @@
               "type": "React.ReactNode",
               "required": false,
               "description": ""
-            },
-            {
-              "name": "actionsSlotStyle",
-              "type": "React.CSSProperties | undefined",
-              "required": false,
-              "description": ""
             }
           ]
         }
@@ -13296,13 +13222,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 +13247,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",
@@ -35536,10 +35462,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",